:root{--bg:#f3f5f8;--surface:#fff;--surface-2:#f8f9fb;--line:#e2e6ec;--line-strong:#c9d0da;--ink:#1d2433;--ink-2:#4a5568;--muted:#7a8494;--accent:#2563eb;--accent-ink:#fff;--accent-soft:#e8efff;--danger:#c2410c;--danger-soft:#fff1ea;--warn:#b45309;--radius:10px;--shadow-sheet:0 1px 2px #1018280f, 0 12px 32px #1018281a;--topbar-h:64px;--sidebar-w:272px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,sans-serif;font-size:14px}button,select,input{font:inherit;color:inherit}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon{flex:none;width:18px;height:18px;display:inline-flex}.icon svg,.brand-mark svg,.dropzone-icon svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.muted{color:var(--muted)}.small{font-size:12px}#app{grid-template-rows:var(--topbar-h) 1fr;height:100vh;display:grid}.workspace{grid-template-columns:var(--sidebar-w) 1fr;min-height:0;display:grid}.topbar{background:var(--surface);border-bottom:1px solid var(--line);align-items:center;gap:24px;padding:0 20px;display:flex}.brand{white-space:nowrap;align-items:center;gap:10px;font-size:16px;font-weight:650;display:flex}.brand-mark{background:var(--accent);width:32px;height:32px;color:var(--accent-ink);border-radius:9px;padding:6px;display:inline-flex}.topbar-controls{flex:1;align-items:center;gap:16px;min-width:0;display:flex}.topbar-actions,.field{align-items:center;gap:8px;display:flex}.field-label{color:var(--ink-2);font-size:13px}.select{border:1px solid var(--line-strong);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;appearance:none;cursor:pointer;border-radius:8px;height:36px;padding:0 32px 0 12px}.select:hover{border-color:var(--muted)}.toggle{color:var(--ink-2);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.toggle input{width:16px;height:16px;accent-color:var(--accent)}.btn{cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;height:36px;padding:0 14px;font-weight:550;transition:background .15s,border-color .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){background:#1d4fd8}.btn-ghost{color:var(--ink-2);border-color:var(--line-strong);background:var(--surface)}.btn-ghost:hover:not(:disabled){background:var(--surface-2)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{height:30px;padding:0 10px}.confirm{background:var(--danger-soft);height:36px;color:var(--danger);border-radius:8px;align-items:center;gap:8px;padding:0 4px 0 12px;font-weight:550;display:inline-flex}.icon-btn{cursor:pointer;color:inherit;background:0 0;border:none;border-radius:6px;padding:4px;display:inline-flex}.icon-btn:hover{background:#0000000f}.sidebar{background:var(--surface);border-right:1px solid var(--line);flex-direction:column;gap:12px;padding:20px 16px;display:flex;overflow-y:auto}.panel-title{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:650}.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-2);cursor:pointer;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;transition:border-color .15s,background .15s;display:flex}.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}.dropzone-icon{width:28px;height:28px;color:var(--accent);margin-bottom:4px;display:inline-flex}.dropzone-title{font-weight:600}.dropzone-hint{color:var(--muted);font-size:12px}.sidebar .muted.small{margin:0}.thumbs{grid-template-columns:1fr 1fr;gap:10px;display:grid}.thumb{aspect-ratio:1;border:1px solid var(--line);background:var(--surface-2);cursor:grab;border-radius:8px;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.thumb:hover{border-color:var(--accent);box-shadow:0 2px 8px #2563eb26}.thumb:active{cursor:grabbing}.thumb img{object-fit:contain;pointer-events:none;width:100%;height:100%;padding:6px}.thumb-remove{color:#fff;cursor:pointer;background:#1d2433bf;border:none;border-radius:6px;padding:3px;display:none;position:absolute;top:4px;right:4px}.thumb-remove .icon{width:14px;height:14px}.thumb:hover .thumb-remove,.thumb-remove:focus-visible{display:inline-flex}.storage-note{border-top:1px solid var(--line);color:var(--muted);gap:8px;margin:auto 0 0;padding-top:12px;font-size:12px;line-height:1.45;display:flex}.storage-note .icon{width:16px;height:16px;margin-top:1px}.stage{background-image:radial-gradient(var(--line) 1px, transparent 1px);background-size:20px 20px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:0;min-height:0;padding:28px;display:flex;position:relative;overflow:auto}.sheet-host{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.sheet{box-shadow:var(--shadow-sheet);background:#fff;border:1px solid #1d2433;flex:none;position:relative}.stage-hint{color:var(--muted);text-align:center;margin:0;font-size:13px}.stage-hint b{color:var(--ink-2);font-weight:600}.cell{touch-action:none;background-color:#fff;background-repeat:no-repeat;border:1px solid #1d2433;position:absolute;overflow:hidden}.cell.filled{cursor:grab}.cell.filled.panning{cursor:grabbing}.cell.empty{color:var(--muted);text-align:center;background-image:repeating-linear-gradient(45deg,#fafbfc 0 6px,#f2f4f7 6px 12px);justify-content:center;align-items:center;padding:6px;font-size:12px;display:flex}.cell.drop-target{outline:3px solid var(--accent);outline-offset:-3px}.cell .safe{pointer-events:none;border:1px dashed #dc262699;position:absolute}.cell-tools{color:#fff;z-index:2;white-space:nowrap;background:#1d2433d1;border-radius:999px;align-items:center;gap:2px;padding:3px;display:none;position:absolute;bottom:6px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0003}.cell.filled:hover .cell-tools,.cell-tools:focus-within{display:inline-flex}.cell-tools button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:999px;align-items:center;height:24px;padding:0 8px;font-size:12px;display:inline-flex}.cell-tools button:hover{background:#ffffff2e}.cell-tools .icon{width:14px;height:14px}.cell-tools .pct{text-align:center;font-variant-numeric:tabular-nums;opacity:.85;min-width:40px;font-size:11px}.cell-clear{color:#fff;cursor:pointer;z-index:2;background:#1d2433bf;border:none;border-radius:6px;padding:3px;display:none;position:absolute;top:5px;right:5px}.cell-clear .icon{width:14px;height:14px}.cell.filled:hover .cell-clear,.cell-clear:focus-visible{display:inline-flex}.low-dpi{color:var(--warn);z-index:2;background:#fff7e6;border-radius:6px;padding:3px;display:inline-flex;position:absolute;top:5px;left:5px;box-shadow:0 1px 3px #00000026}.low-dpi .icon{width:14px;height:14px}.strip-label{letter-spacing:.04em;align-items:center;gap:4px;font-weight:700;display:flex;position:absolute;transform:translate(-100%,-50%)}.strip-circle{border:1px solid #1d2433;border-radius:50%;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;transform:translate(-50%,-50%)}.drop-overlay{z-index:50;border:3px dashed var(--accent);pointer-events:none;color:var(--accent);background:#2563eb14;justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex;position:fixed;inset:0}.toasts{z-index:60;flex-direction:column;gap:8px;max-width:420px;display:flex;position:fixed;bottom:20px;right:20px}.toast{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);align-items:flex-start;gap:10px;padding:12px 10px 12px 14px;line-height:1.45;animation:.18s ease-out toast-in;display:flex;box-shadow:0 8px 24px #10182824}.toast-error{border-left:4px solid var(--danger)}.toast-error>.icon{color:var(--danger)}.toast-info{border-left:4px solid var(--accent)}.toast-info>.icon{color:var(--accent)}.toast-text{flex:1}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}@media (width<=1100px){.brand-name{display:none}.topbar{gap:14px}}