.inventory-backdrop[data-v-1c3aba2b]{position:fixed;z-index:60;inset:0;display:grid;padding:20px;place-items:center;background:#0f172a85}.inventory-dialog[data-v-1c3aba2b]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1120px,100%);max-height:calc(100vh - 40px);overflow:hidden;border:1px solid #dbe3ef;border-radius:16px;background:#fff;box-shadow:0 28px 80px #0f172a4d}.inventory-header[data-v-1c3aba2b],.inventory-actions[data-v-1c3aba2b],.photo-header[data-v-1c3aba2b],.manual-colors>header[data-v-1c3aba2b]{display:flex;align-items:center;justify-content:space-between;gap:14px}.inventory-header[data-v-1c3aba2b]{padding:18px 20px;border-bottom:1px solid #e5e7eb}.inventory-header h2[data-v-1c3aba2b],.inventory-header p[data-v-1c3aba2b],.manual-colors h3[data-v-1c3aba2b],.manual-colors p[data-v-1c3aba2b]{margin:0}.inventory-header h2[data-v-1c3aba2b]{color:#111827;font-size:1.15rem}.inventory-header p[data-v-1c3aba2b],.manual-colors p[data-v-1c3aba2b]{margin-top:4px;color:#64748b;font-size:.82rem}.inventory-close[data-v-1c3aba2b],.photo-header>button[data-v-1c3aba2b]{display:inline-grid;flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid #dbe3ef;border-radius:9px;place-items:center;color:#475569;background:#fff}.inventory-body[data-v-1c3aba2b]{min-height:0;overflow-y:auto;padding:16px 20px 22px}.inventory-file-input[data-v-1c3aba2b]{display:none}.inventory-drop-zone[data-v-1c3aba2b]{display:grid;width:100%;min-height:112px;padding:18px;border:1.5px dashed #93c5fd;border-radius:12px;place-items:center;color:#1d4ed8;background:#eff6ff}.inventory-drop-zone.dragging[data-v-1c3aba2b]{border-color:#2563eb;background:#dbeafe}.inventory-drop-zone[data-v-1c3aba2b]:disabled{cursor:wait;opacity:.75}.inventory-drop-zone strong[data-v-1c3aba2b]{margin-top:7px;font-size:.92rem}.inventory-drop-zone span[data-v-1c3aba2b]{margin-top:3px;color:#64748b;font-size:.78rem}.inventory-spinner[data-v-1c3aba2b]{animation:inventory-spin-1c3aba2b .8s linear infinite}@keyframes inventory-spin-1c3aba2b{to{transform:rotate(360deg)}}.inventory-error[data-v-1c3aba2b]{margin:10px 0 0;padding:9px 11px;border:1px solid #fecaca;border-radius:8px;color:#991b1b;background:#fef2f2;font-size:.8rem}.photo-list[data-v-1c3aba2b]{display:grid;gap:14px;margin-top:14px}.photo-card[data-v-1c3aba2b],.manual-colors[data-v-1c3aba2b]{padding:14px;border:1px solid #dbe3ef;border-radius:12px;background:#f8fafc}.photo-header>div[data-v-1c3aba2b]{display:grid;min-width:0}.photo-header strong[data-v-1c3aba2b]{overflow:hidden;color:#111827;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.photo-header span[data-v-1c3aba2b]{margin-top:3px;color:#64748b;font-size:.74rem}.grid-correction[data-v-1c3aba2b]{display:grid;grid-template-columns:82px 82px minmax(118px,auto) minmax(112px,auto);gap:8px;margin-top:12px;align-items:end}.grid-correction label[data-v-1c3aba2b]{display:grid;gap:4px;color:#64748b;font-size:.72rem;font-weight:700}.grid-correction input[data-v-1c3aba2b]{width:100%;height:34px;padding:0 8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.grid-correction button[data-v-1c3aba2b]{width:auto;min-height:34px;margin:0}.photo-preview[data-v-1c3aba2b]{position:relative;width:min(760px,100%);margin:12px auto 0;overflow:hidden;border:1px solid #cbd5e1;border-radius:10px;background:#0f172a}.photo-preview img[data-v-1c3aba2b]{display:block;width:100%;height:auto}.box-outline[data-v-1c3aba2b],.region-overlay[data-v-1c3aba2b]{position:absolute;box-sizing:border-box}.box-outline[data-v-1c3aba2b]{border:2px solid rgba(37,99,235,.9);pointer-events:none}.region-overlay[data-v-1c3aba2b]{display:grid;min-width:0;min-height:0;padding:1px;overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:2px;place-items:center;color:#fff;background:#2563eb29;text-shadow:0 1px 2px rgba(15,23,42,.9);font-size:clamp(.45rem,1.4vw,.72rem);font-weight:800}.region-overlay.medium[data-v-1c3aba2b]{border-color:#fbbf24}.region-overlay.low[data-v-1c3aba2b]{border-color:#fb7185}.region-overlay.excluded[data-v-1c3aba2b]{opacity:.35;background:#0f172a70}.preview-processing[data-v-1c3aba2b]{position:absolute;inset:0;display:grid;gap:7px;place-items:center;align-content:center;color:#fff;background:#0f172a9e;font-size:.82rem;font-weight:700}.cell-review[data-v-1c3aba2b]{margin-top:12px;border-top:1px solid #e2e8f0}.cell-review summary[data-v-1c3aba2b]{padding:10px 2px 6px;color:#334155;cursor:pointer;font-size:.8rem;font-weight:800}.cell-review-actions[data-v-1c3aba2b]{display:flex;gap:6px;justify-content:flex-end;margin-bottom:7px}.cell-review-actions button[data-v-1c3aba2b]{min-height:28px;padding:0 9px;border:1px solid #cbd5e1;border-radius:7px;color:#475569;background:#fff;font-size:.72rem}.cell-review-grid[data-v-1c3aba2b]{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:6px}.cell-review-item[data-v-1c3aba2b]{display:grid;grid-template-columns:auto 22px 34px minmax(0,1fr);gap:6px;align-items:center;min-width:0;padding:6px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4}.cell-review-item.medium[data-v-1c3aba2b]{border-color:#fde68a;background:#fffbeb}.cell-review-item.low[data-v-1c3aba2b]{border-color:#fecdd3;background:#fff1f2}.cell-review-item.excluded[data-v-1c3aba2b]{opacity:.52}.sample-swatch[data-v-1c3aba2b]{width:22px;height:22px;border:1px solid rgba(15,23,42,.18);border-radius:50%}.cell-position[data-v-1c3aba2b]{color:#64748b;font-size:.68rem;font-weight:700}.cell-review-item select[data-v-1c3aba2b]{width:100%;min-width:0;height:28px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;font-size:.72rem}.cell-review-item small[data-v-1c3aba2b]{grid-column:4;color:#64748b;font-size:.66rem}.manual-colors[data-v-1c3aba2b]{margin-top:14px;background:#fff}.manual-colors h3[data-v-1c3aba2b]{font-size:.92rem}.manual-header-actions[data-v-1c3aba2b]{display:flex;flex:0 0 auto;gap:8px;align-items:center}.manual-header-actions button[data-v-1c3aba2b]{min-height:28px;padding:0 9px;border:1px solid #cbd5e1;border-radius:7px;color:#475569;background:#fff;font-size:.72rem}.manual-header-actions strong[data-v-1c3aba2b]{white-space:nowrap}.manual-color-list[data-v-1c3aba2b],.inventory-summary[data-v-1c3aba2b]{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.manual-color-list button[data-v-1c3aba2b],.inventory-summary span[data-v-1c3aba2b]{display:inline-flex;gap:5px;align-items:center;min-height:28px;padding:0 8px;border:1px solid #dbe3ef;border-radius:999px;color:#334155;background:#fff;font-size:.72rem;font-weight:800}.manual-color-list button>span[data-v-1c3aba2b],.manual-search-results button>span[data-v-1c3aba2b]{width:15px;height:15px;border:1px solid rgba(15,23,42,.18);border-radius:50%}.manual-search[data-v-1c3aba2b]{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;height:36px;margin-top:10px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px}.manual-search input[data-v-1c3aba2b]{min-width:0;border:0;outline:0}.manual-search-results[data-v-1c3aba2b]{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px;margin-top:7px}.manual-search-results button[data-v-1c3aba2b]{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:6px;align-items:center;min-width:0;padding:6px 8px;border:1px solid #dbe3ef;border-radius:7px;text-align:left;background:#fff}.manual-search-results small[data-v-1c3aba2b]{overflow:hidden;color:#64748b;text-overflow:ellipsis;white-space:nowrap}.inventory-summary span[data-v-1c3aba2b]:before{width:14px;height:14px;border:1px solid rgba(15,23,42,.18);border-radius:50%;background:var(--inventory-color);content:""}.inventory-empty[data-v-1c3aba2b]{margin:10px 0 0;padding:12px;border:1px dashed #cbd5e1;border-radius:8px;text-align:center}.inventory-actions[data-v-1c3aba2b]{padding:13px 20px;border-top:1px solid #e5e7eb;background:#f8fafc}.inventory-actions>div[data-v-1c3aba2b]{display:grid;margin-right:auto}.inventory-actions>div span[data-v-1c3aba2b]{color:#64748b;font-size:.72rem}.inventory-actions button[data-v-1c3aba2b]{width:auto;min-width:112px;margin:0}@media(max-width:720px){.inventory-backdrop[data-v-1c3aba2b]{padding:8px;place-items:end center}.inventory-dialog[data-v-1c3aba2b]{width:100%;max-height:calc(100vh - 16px);border-radius:14px 14px 8px 8px}.inventory-header[data-v-1c3aba2b],.inventory-body[data-v-1c3aba2b],.inventory-actions[data-v-1c3aba2b]{padding-right:12px;padding-left:12px}.inventory-header p[data-v-1c3aba2b]{display:none}.grid-correction[data-v-1c3aba2b]{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-correction button[data-v-1c3aba2b]{min-width:0}.cell-review-grid[data-v-1c3aba2b]{grid-template-columns:1fr}.inventory-actions[data-v-1c3aba2b]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-actions>div[data-v-1c3aba2b]{grid-column:1 / -1}.inventory-actions button[data-v-1c3aba2b]{width:100%;min-width:0}}.palette-add-menu[data-v-6441e066]{position:relative;width:36px;height:36px}.palette-add-choice-menu[data-v-6441e066]{position:absolute;z-index:20;top:calc(100% + 7px);right:0;display:grid;gap:4px;width:min(252px,calc(100vw - 110px));padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;box-shadow:0 14px 32px #0f172a2e}.palette-add-choice-menu>button[data-v-6441e066]{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;width:100%;min-height:52px;padding:9px;border:0;border-radius:7px;color:#334155;background:transparent;text-align:left}.palette-add-choice-menu>button[data-v-6441e066]:hover,.palette-add-choice-menu>button[data-v-6441e066]:focus-visible{color:#1d4ed8;background:#eff6ff}.palette-add-choice-menu>button>svg[data-v-6441e066]{margin-top:2px}.palette-add-choice-menu span[data-v-6441e066]{display:grid;gap:3px;min-width:0}.palette-add-choice-menu strong[data-v-6441e066]{font-size:.8rem}.palette-add-choice-menu small[data-v-6441e066]{overflow:hidden;color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}:root{color:#1f2933;background:#f5f6f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;line-height:1.45;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{width:100%;height:100%}body{min-width:320px;margin:0;background:#f5f6f8}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}h1,h2,p{margin:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1500px;width:100%;margin:0 auto 12px}.brand{min-width:0}.brand h1{color:#111827;font-size:1.25rem;font-weight:760}.brand p,.topbar-meta{color:#6b7280;font-size:.86rem}.topbar-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.tool-rail,.board-panel,.control-panel{min-width:0;min-height:0;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.tool-button{position:relative;display:grid;place-items:center;gap:4px;width:56px;min-width:56px;min-height:52px;padding:5px 3px;border:0;border-radius:8px;color:#4b5563;background:transparent;font-size:.72rem;font-weight:700;line-height:1.1;white-space:nowrap}.tool-button:hover,.tool-button.active{color:#1d4ed8;background:#eff6ff}.tool-button.active:before{position:absolute;top:8px;bottom:8px;left:0;width:2px;border-radius:0 2px 2px 0;background:#2563eb;content:""}.tool-button:focus-visible,.tool-view-switch:focus-visible,.tool-rail-handle:focus-visible,.panel-handle:focus-visible,.control-tabs button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.tool-button .tool-icon-with-shortcut{position:relative;display:grid;width:24px;height:24px;place-items:center}.tool-shortcut-hint{position:absolute;right:-6px;bottom:-4px;padding:0;border:0;color:#94a3b8;background:transparent;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.62rem;font-weight:760;line-height:1;opacity:.78;pointer-events:none;white-space:nowrap}.tool-button:hover .tool-shortcut-hint,.tool-button.active .tool-shortcut-hint{color:#8ca3c2;opacity:.9}@media(hover:none)and (pointer:coarse)and (any-hover:none){.tool-shortcut-hint{display:none}}.tool-popover{display:grid;gap:6px;min-width:150px;padding:8px;border:1px solid #dbeafe;border-radius:8px;background:#fff;box-shadow:0 14px 30px #0f172a29}.shape-tool-menu{margin-bottom:2px}.floating-tool-menu{position:absolute;position-anchor:--shape-tool-trigger;z-index:8;top:anchor(center);left:calc(anchor(right) + 12px);width:max-content;max-width:min(240px,calc(100vw - 112px));transform:translateY(-50%)}.shape-tool-trigger{anchor-name:--shape-tool-trigger}.shape-tool-menu button{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;min-height:34px;padding:0 9px;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.78rem;font-weight:720;white-space:nowrap}.shape-tool-menu button:hover,.shape-tool-menu button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.shape-fill-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.shape-fill-mode button{justify-content:center}.board-panel{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid #e5e7eb}.board-toolbar span,.board-toolbar strong{display:block}.board-toolbar span{color:#6b7280;font-size:.8rem}.board-toolbar strong{color:#111827;font-size:1rem}.board-scroll{display:grid;min-height:0;overflow:auto;padding:16px;place-items:center}.bead-board{display:grid;grid-template-columns:repeat(var(--board-width),var(--cell-size));grid-auto-rows:var(--cell-size);gap:2px;width:max-content;padding:var(--board-padding, 12px);border:1px solid #e5e7eb;border-radius:8px;background:#fff;touch-action:none;-webkit-user-select:none;user-select:none}.bead-cell{position:relative;display:block;width:var(--cell-size);height:var(--cell-size);padding:0;border:0;border-radius:4px;background:#f8fafc}.bead-cell:before{position:absolute;inset:18%;border-radius:50%;background:#e5e7eb;content:""}.bead-cell.filled:before{background:var(--bead-color)}.bead-cell:hover:before,.bead-cell:focus-visible:before{outline:2px solid #2563eb;outline-offset:2px}.control-section{min-height:0;padding:12px;border-bottom:1px solid #e5e7eb}.control-section:last-child{border-bottom:0}.palette-section{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.section-heading h2{color:#111827;font-size:.95rem;font-weight:760}.section-heading span{min-width:0;overflow:hidden;color:#6b7280;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.search-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-height:36px;margin-bottom:10px;padding:0 10px;border:1px solid #e5e7eb;border-radius:7px;color:#6b7280;background:#fff}.search-box input{min-width:0;border:0;outline:0;color:#111827;background:transparent}.palette-groups{min-height:0;overflow-y:auto;padding-right:2px}.palette-group{padding-bottom:10px}.recent-colors{margin-bottom:10px}.recent-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(66px,1fr))}.palette-group-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:#374151}.palette-group-title strong{font-size:.82rem}.palette-group-title span{color:#9ca3af;font-size:.76rem}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}.swatch-button{display:grid;grid-template-columns:16px minmax(0,1fr);gap:5px;align-items:center;min-width:0;min-height:30px;padding:5px 6px;border:1px solid #e5e7eb;border-radius:7px;color:#374151;background:#fff;font-size:.74rem;font-weight:700}.swatch-button span:last-child{min-width:3ch;overflow:visible;text-overflow:clip;white-space:nowrap;font-variant-numeric:tabular-nums}.swatch-dot{width:16px;height:16px;border:1px solid #d1d5db;border-radius:50%;background:var(--swatch-color)}.swatch-button:hover,.swatch-button.active{border-color:#2563eb;background:#eff6ff}.size-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.size-presets button,.custom-size button,.primary-action,.secondary-action,.danger-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid #e5e7eb;border-radius:7px;background:#fff;color:#374151;font-weight:720}.size-presets button.active{border-color:#2563eb;color:#1d4ed8;background:#eff6ff}.custom-size{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:10px}.custom-size label{display:grid;gap:4px;color:#6b7280;font-size:.76rem;font-weight:700}.custom-size input{width:100%;min-height:36px;padding:0 8px;border:1px solid #e5e7eb;border-radius:7px;color:#111827;background:#fff}.file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.secondary-action,.primary-action,.danger-action{width:100%}.primary-action{border-color:#2563eb;color:#fff;background:#2563eb}.secondary-action:hover,.custom-size button:hover,.size-presets button:hover{border-color:#93c5fd;background:#eff6ff}.danger-action{color:#b91c1c;background:#fff}.danger-action:not(:disabled):hover{border-color:#fecaca;background:#fef2f2}.actions-section{display:grid;gap:8px}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stats-grid div{min-width:0;padding:8px;border:1px solid #e5e7eb;border-radius:7px;background:#f9fafb}.stats-grid span,.stats-grid strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats-grid span{color:#6b7280;font-size:.74rem}.stats-grid strong{color:#111827;font-size:.9rem}@media(max-width:720px){.topbar{display:grid;justify-items:start}.topbar-meta{justify-content:start}.board-panel{min-height:520px}.size-presets,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-size{grid-template-columns:1fr 1fr}.custom-size button{grid-column:1 / -1}}.board-panel{display:block;height:100%;min-height:0}.board-scroll{width:100%;height:100%;min-height:0;padding:16px}.control-tabs{display:grid;gap:0;padding:0 10px;border-bottom:1px solid #e5e7eb}.control-tabs button{min-width:0;min-height:44px;padding:2px 6px 0;border:0;border-bottom:2px solid transparent;border-radius:0;color:#4b5563;background:transparent;font-size:.78rem;font-weight:720}.control-tabs button:hover,.control-tabs button.active{border-bottom-color:#2563eb;color:#1d4ed8;background:transparent}.control-page{min-height:0;padding:12px;overflow-y:auto}.palette-page{display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.panel-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.panel-summary.single{grid-template-columns:1fr}.panel-summary div{min-width:0;padding:8px;border:1px solid #e5e7eb;border-radius:7px;background:#f9fafb}.panel-summary span,.panel-summary strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-summary span{color:#6b7280;font-size:.74rem}.panel-summary strong{color:#111827;font-size:.9rem}@media(max-width:720px){.panel-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}.app-shell{display:block!important;height:var(--app-viewport-height, 100vh)!important;min-height:0;padding:0!important;overflow:hidden;background:#f5f6f8}.editor-layout{position:relative;display:block;width:100%;height:100%;min-height:0;max-width:none;margin:0}.board-panel{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:0;background:#f5f6f8}.board-scroll{width:100%;height:100%;padding:24px;place-items:center}.tool-rail{position:absolute;z-index:5;top:16px;bottom:auto;left:16px;display:flex;flex-direction:column;gap:8px;width:72px;max-height:calc(var(--app-viewport-height, 100vh) - 32px);padding:7px;overflow:visible;border-color:#d1d5dbe6;border-radius:12px;background:#fffffff0;box-shadow:0 10px 24px #0f172a14}.tool-rail-content{display:grid;flex:0 1 auto;align-content:start;gap:6px;min-height:0;padding-right:1px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.tool-rail-content::-webkit-scrollbar{display:none}.tool-rail-footer{display:grid;flex:0 0 auto;padding-top:8px;border-top:1px solid #e5e7eb}.tool-view-switch{display:inline-flex;width:56px;min-width:0;min-height:44px;align-items:center;justify-content:center;gap:5px;padding:0 4px;border:0;border-radius:8px;color:#475569;background:transparent;font-size:.72rem;font-weight:750;line-height:1;white-space:nowrap}.tool-view-switch:hover{color:#1d4ed8;background:#eff6ff}.tool-rail.collapsed{width:0;padding:0;border:0;background:transparent;box-shadow:none}.tool-rail-handle{position:absolute;z-index:8;top:50%;right:-16px;display:grid;width:28px;height:44px;padding:0;place-items:center;transform:translateY(-50%);border:1px solid #e5e7eb;border-left:0;border-radius:0 8px 8px 0;color:#4b5563;background:#fffffff5;box-shadow:0 6px 16px #0f172a14}.tool-rail-handle:hover{color:#1d4ed8;background:#eff6ff}.tool-rail.collapsed .tool-rail-handle{top:0;right:auto;left:0;transform:none;border:1px solid #e5e7eb;border-radius:8px}.control-panel{position:absolute;z-index:5;top:16px;right:16px;bottom:16px;display:block;width:336px;height:auto;min-height:0;overflow:visible;border-color:#d1d5dbe6;border-radius:12px;background:#fffffff5;box-shadow:0 10px 24px #0f172a14}.control-panel.collapsed{display:block;width:0;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}.control-panel-body{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;overflow:hidden;border-radius:inherit;background:inherit}@media(max-width:720px){.board-scroll{padding:72px 10px 96px;place-items:center}.tool-rail{top:10px;bottom:auto;left:10px;width:56px;max-width:none;max-height:calc(var(--app-viewport-height, 100vh) - 20px);padding:5px}.tool-rail-content{gap:6px;padding-right:0;overflow-y:auto}.tool-rail.collapsed{right:auto;bottom:auto;width:0;height:0;padding:0}.tool-rail-handle,.tool-rail.collapsed .tool-rail-handle{inset:-14px auto auto 50%;width:32px;height:28px;transform:translate(-50%);border:1px solid #e5e7eb;border-radius:8px}.tool-rail.collapsed .tool-rail-handle{top:0;left:0;width:44px;height:44px;transform:none}.tool-button{width:44px;min-width:44px;min-height:48px;padding:4px 2px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:3px;font-size:.68rem;line-height:1}.tool-view-switch{width:44px}.tool-button span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}.floating-tool-menu{max-width:calc(100vw - 84px)}.control-panel{inset:auto 10px 10px 76px;width:auto;min-height:0;max-height:min(56vh,calc(var(--app-viewport-height, 100vh) - 92px))}.control-panel.collapsed{left:76px;width:auto;min-width:0;height:0}}html,body,#app{overflow:hidden}.board-scroll{position:relative;overflow:hidden!important;overscroll-behavior:none;cursor:crosshair}.board-scroll:active{cursor:crosshair}.bead-board{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center center;contain:layout paint style;will-change:transform}.zoom-popover{position:absolute;z-index:7;left:var(--zoom-panel-x, 88px);bottom:var(--zoom-panel-y, 18px);display:grid;grid-template-columns:32px minmax(62px,auto) 32px 32px;gap:6px;align-items:center;width:max-content;max-width:calc(100vw - 24px);padding:8px;border:1px solid rgba(209,213,219,.95);border-radius:8px;background:#fffffff5;box-shadow:0 14px 34px #0f172a24;cursor:grab;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.zoom-popover.dragging{cursor:grabbing}.zoom-popover-value{display:grid;min-width:62px;height:32px;padding:0 8px;place-items:center;overflow:hidden;border:1px solid #e5e7eb;border-radius:7px;color:#111827;background:#f8fafc;font-size:.82rem;font-weight:800;line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap}.zoom-step-button,.zoom-reset-button{display:grid;width:32px;height:32px;padding:0;place-items:center;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff}.zoom-step-button:not(:disabled):hover,.zoom-reset-button:not(:disabled):hover{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.zoom-step-button:disabled,.zoom-reset-button:disabled{cursor:not-allowed;opacity:.45}@media(max-width:720px){.zoom-popover{left:var(--zoom-panel-x, 76px);bottom:var(--zoom-panel-y, calc(10px + env(safe-area-inset-bottom, 0px)) );max-width:calc(100vw - 20px)}}.control-panel .control-page,.control-panel .palette-groups{min-height:0}.panel-handle{position:absolute;z-index:8;top:50%;left:-16px;display:grid;width:28px;height:44px;padding:0;place-items:center;transform:translateY(-50%);border:1px solid #e5e7eb;border-right:0;border-radius:8px 0 0 8px;color:#4b5563;background:#fffffff5;box-shadow:0 6px 16px #0f172a14}.panel-handle:hover{color:#1d4ed8;background:#eff6ff}.control-panel.collapsed .panel-handle{left:-30px;border-right:1px solid #e5e7eb;border-radius:8px}.bead-board{gap:0!important}.bead-cell:before{inset:10%!important}.mobile-handle-icon{display:none}@media(max-width:720px){.desktop-handle-icon{display:none}.mobile-handle-icon{display:block}.control-panel .panel-handle,.control-panel.collapsed .panel-handle{top:-14px;left:50%;width:44px;height:28px;transform:translate(-50%);border:1px solid #e5e7eb;border-radius:8px}}.canvas-page{display:grid;align-content:start;gap:12px}.canvas-stats{margin-bottom:0}.canvas-block{display:grid;gap:10px}.canvas-actions{gap:8px}.render-options{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}.render-options>span{color:#6b7280;font-size:.74rem;font-weight:760}.render-options select{min-width:0;height:36px;padding:0 32px 0 10px;border:1px solid #d1d5db;border-radius:7px;background:#fff;color:#111827;font:inherit}.render-options select:focus-visible{border-color:#2563eb;outline:2px solid #bfdbfe;outline-offset:1px}.grid-visibility-option{display:flex;align-items:center;gap:8px;min-height:34px;color:#374151;font-size:.82rem;font-weight:760}.grid-visibility-option input{width:16px;height:16px;accent-color:#2563eb}.quantize-status{display:grid;gap:2px;min-width:0;padding:8px;border:1px solid #e5e7eb;border-radius:7px;background:#f9fafb}.quantize-status span,.quantize-status strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quantize-status span{color:#6b7280;font-size:.74rem}.quantize-status strong{color:#111827;font-size:.88rem}.control-tabs.four-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.control-tabs.three-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-page,.canvas-page,.layers-page{display:grid;align-content:start;gap:10px}.layer-action-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.layer-action-row button{min-width:0;min-height:34px;padding:0 8px;font-size:.76rem}.layer-list{display:grid;gap:6px}.layer-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0;min-height:38px;padding:7px 8px;border:1px solid #e5e7eb;border-radius:7px;color:#374151;background:#fff;font-size:.8rem;font-weight:720}.layer-row:hover,.layer-row.active,.layer-row:focus-within{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.layer-select-button{display:grid;place-items:center;width:24px;height:24px;min-width:0;padding:0;border:0;border-radius:6px;color:inherit;background:transparent}.layer-select-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.layer-swatch{width:18px;height:18px;border:1px solid #cbd5e1;border-radius:5px;background:repeating-linear-gradient(45deg,#fff 0 4px,#e5e7eb 4px 8px)}.layer-name-input{min-width:0;width:100%;height:26px;padding:0 6px;border:1px solid transparent;border-radius:5px;color:inherit;background:transparent;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.layer-name-input:focus{border-color:#93c5fd;color:#111827;background:#fff;outline:none}.layer-row strong{color:#111827;font-size:.78rem}.usage-list{display:grid;gap:6px}.usage-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0;padding:7px 8px;border:1px solid #e5e7eb;border-radius:7px;background:#fff}.usage-dot{width:18px;height:18px;border:1px solid #d1d5db;border-radius:50%;background:var(--usage-color)}.usage-row strong,.usage-row span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usage-row strong{color:#111827;font-size:.82rem}.usage-row span{color:#6b7280;font-size:.72rem}.usage-row em{color:#111827;font-style:normal;font-weight:760}.usage-actions{grid-column:2 / 4;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.usage-actions button{min-width:0;min-height:28px;padding:0 8px;border:1px solid #dbe3ee;border-radius:6px;background:#fff;font-size:.72rem;font-weight:720}.usage-replace-action{overflow:hidden;color:#1d4ed8;text-overflow:ellipsis;white-space:nowrap}.usage-replace-action:not(:disabled):hover{border-color:#93c5fd;background:#eff6ff}.usage-delete-action{color:#b91c1c}.usage-delete-action:hover{border-color:#fecaca;background:#fef2f2}.usage-actions button:disabled{color:#9ca3af;background:#f3f4f6;cursor:not-allowed}.empty-state{padding:18px 10px;border:1px dashed #d1d5db;border-radius:8px;color:#6b7280;text-align:center;font-size:.86rem}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;padding:16px;place-items:center;background:#0f172a38}.new-board-dialog{display:grid;gap:12px;width:min(360px,100%);padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;box-shadow:0 18px 40px #0f172a29}.new-board-dialog h2,.new-board-dialog p{margin:0}.new-board-dialog h2{color:#111827;font-size:1rem}.new-board-dialog p{color:#6b7280;font-size:.82rem}.image-import-backdrop{z-index:30;background:#0f172a61}.image-import-dialog{display:grid;gap:14px;width:min(620px,100%);max-height:min(780px,calc(var(--app-viewport-height, 100vh) - 32px));padding:18px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 24px 64px #0f172a3d}.image-import-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.image-import-dialog-header>div{min-width:0}.image-import-dialog h2,.image-import-dialog p{margin:0}.image-import-dialog h2{color:#111827;font-size:1.08rem}.image-import-dialog-header p{margin-top:4px;overflow:hidden;color:#6b7280;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.image-import-close{display:inline-grid;flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid #e5e7eb;border-radius:8px;color:#4b5563;background:#fff;place-items:center}.image-import-close:hover{border-color:#93c5fd;color:#1d4ed8;background:#eff6ff}.image-import-preview-panel{display:grid;gap:10px;min-height:0;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc}.image-import-preview-frame{position:relative;display:grid;box-sizing:content-box;max-width:100%;margin:0 auto;overflow:hidden;border:1px solid #cbd5e1;border-radius:8px;background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;box-shadow:0 8px 24px #0f172a14;place-items:center}.image-import-preview-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;object-fit:contain}.image-import-preview-loading{position:absolute;inset:0;display:grid;color:#475569;background:#f8fafcd1;font-size:.8rem;font-weight:700;place-items:center}.image-import-size-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.image-import-size-summary>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.image-import-size-summary span{color:#64748b;font-size:.76rem}.image-import-size-summary strong{color:#0f172a;font-size:.8rem}.image-import-resolution-control{display:grid;gap:8px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.image-import-resolution-control label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#374151;font-size:.84rem;font-weight:720}.image-import-resolution-control strong{color:#1d4ed8}.image-import-resolution-control input{width:100%;accent-color:#2563eb}.image-import-resolution-control small{color:#64748b;font-size:.74rem;line-height:1.45}.image-import-ratio-note{padding:9px 10px;border:1px solid #fde68a;border-radius:8px;color:#92400e;background:#fffbeb;font-size:.78rem;line-height:1.45}.image-import-dialog-actions button{min-height:38px}.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dialog-actions .danger-action{margin-top:0}@media(max-width:720px){.image-import-backdrop{padding:10px;place-items:end center}.image-import-dialog{width:100%;max-height:calc(var(--app-viewport-height, 100vh) - 20px);padding:14px;border-radius:12px 12px 8px 8px}.image-import-size-summary{grid-template-columns:1fr}}.display-options{display:grid;gap:8px;padding:9px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.segmented-control button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:34px;padding:0 8px;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.78rem;font-weight:720}.segmented-control button:hover,.segmented-control button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.toggle-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-height:32px;color:#374151;font-size:.8rem;font-weight:720}.toggle-row input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.toggle-switch{position:relative;width:34px;height:20px;border:1px solid #d1d5db;border-radius:999px;background:#e5e7eb;transition:background .16s ease,border-color .16s ease}.toggle-switch:after{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0f172a29;content:"";transition:transform .16s ease}.toggle-row input:checked+.toggle-switch{border-color:#2563eb;background:#2563eb}.toggle-row input:checked+.toggle-switch:after{transform:translate(14px)}.toggle-row input:focus-visible+.toggle-switch{outline:2px solid #2563eb;outline-offset:2px}.toggle-label{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bead-board.display-round,.bead-board.display-square{gap:0!important}.bead-board.display-square .bead-cell,.bead-board.display-square .bead-cell:before{border-radius:0}.bead-board.display-square .bead-cell:before{inset:0!important;background:#e5e7eb}.bead-code{position:absolute;z-index:2;inset:0;display:grid;place-items:center;overflow:hidden;color:var(--bead-code-color, #111827);font-size:var(--bead-code-font-size, 7px);font-weight:800;letter-spacing:0;line-height:1;pointer-events:none;text-align:center}.bead-board.display-round .bead-code{inset:12%;border-radius:50%}.tool-separator{width:100%;height:1px;margin:2px 0;background:#e5e7eb}.tool-button:disabled,.tool-button:disabled:hover{border-color:transparent;color:#9ca3af;background:transparent}.tool-button:disabled .tool-shortcut-hint{color:#cbd5e1;opacity:.72}@media(max-width:720px){.tool-separator{display:none}}.bead-board.display-square .bead-cell.filled:before{background:var(--bead-color)}.bead-board.display-square .bead-cell:hover:before,.bead-board.display-square .bead-cell:focus-visible:before{outline:0;outline-offset:0;box-shadow:inset 0 0 0 2px #2563eb}.bead-board.display-square .bead-code{inset:1px;font-family:Arial,Microsoft YaHei,sans-serif;font-size:var(--bead-code-font-size, 11px);font-weight:800;line-height:.95;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.tool-size-options{display:grid;gap:8px;padding:9px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.range-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;color:#374151;font-size:.8rem;font-weight:720}.range-control span,.range-control strong{display:inline-flex;align-items:center;min-width:0}.range-control span{gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.range-control strong{color:#111827;font-size:.78rem}.range-control input{grid-column:1 / -1;width:100%;accent-color:#2563eb}.bead-board.preview-active .bead-cell:hover:before,.bead-board.preview-active .bead-cell:focus-visible:before{outline:0;outline-offset:0;box-shadow:none}.bead-cell.tool-preview:after{position:absolute;z-index:4;inset:-1px;border:0 solid #2563eb;pointer-events:none;content:""}.bead-cell.tool-preview.preview-top:after{border-top-width:2px}.bead-cell.tool-preview.preview-right:after{border-right-width:2px}.bead-cell.tool-preview.preview-bottom:after{border-bottom-width:2px}.bead-cell.tool-preview.preview-left:after{border-left-width:2px}.bead-cell.shape-preview:after{inset:2px;border-width:2px;border-color:#1d4ed8;border-radius:4px;background:#2563eb33}.bead-board.display-square .bead-cell.tool-preview:after{inset:0}.palette-page{grid-template-rows:auto auto auto minmax(0,1fr)}.palette-size-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}.palette-size-control button{min-width:0;min-height:32px;padding:0 6px;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.78rem;font-weight:720}.palette-size-control button:hover,.palette-size-control button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}@media(max-width:720px){.palette-size-control{grid-template-columns:repeat(2,minmax(0,1fr))}}html,body,#app,.app-shell,.editor-layout,.board-panel,.board-scroll{touch-action:none;overscroll-behavior:none}.palette-page{grid-template-rows:auto minmax(0,1fr)}.palette-filter-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px;align-items:center}.palette-filter-row .search-box{margin:0}.palette-size-select{display:block;min-width:0}.palette-size-select select{width:100%;height:36px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit;font-size:13px;padding:0 8px;outline:none}.palette-size-select select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px #2363eb1f}@media(max-width:720px){.palette-filter-row{grid-template-columns:minmax(0,1fr) 92px}}:root{--app-viewport-height: 100vh;--app-viewport-width: 100vw}@supports (height: 100dvh){:root{--app-viewport-height: 100dvh}}@media(max-width:720px){.board-scroll{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}.control-panel{bottom:calc(10px + env(safe-area-inset-bottom,0px));max-height:min(56vh,calc(var(--app-viewport-height) - 92px))}.control-panel.collapsed{pointer-events:none}.control-panel.collapsed .panel-handle{position:fixed;z-index:12;top:auto;right:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:50vw;transform:translate(-50%);pointer-events:auto}}.bead-board{grid-template-columns:var(--axis-size) repeat(var(--board-width),var(--cell-size)) var(--axis-size);grid-template-rows:var(--axis-size) repeat(var(--board-height),var(--cell-size)) var(--axis-size);grid-auto-rows:unset;align-items:stretch;justify-items:stretch}.board-axis{display:grid;min-width:0;min-height:0;place-items:center;color:#6b7280;font-size:clamp(7px,calc(var(--cell-size) * .34),11px);font-weight:760;line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none}.board-axis-column{padding-top:1px}.board-axis-row{font-size:clamp(7px,calc(var(--cell-size) * .32),10px)}.selection-popover{position:fixed;z-index:14;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;display:grid;gap:9px;width:min(320px,calc(100vw - 24px));padding:10px;transform:translate(-50%);border:1px solid rgba(209,213,219,.95);border-radius:8px;background:#fffffff5;box-shadow:0 14px 34px #0f172a29}.selection-popover-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.selection-popover-close{display:grid;width:30px;height:30px;padding:0;place-items:center;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff}.selection-popover-close:hover{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.selection-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-width:0;color:#6b7280;font-size:.78rem;font-weight:720}.selection-summary strong{min-width:0;overflow:hidden;color:#111827;text-align:right;text-overflow:ellipsis;white-space:nowrap}.selection-move-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.selection-move-controls button{display:grid;min-width:0;min-height:32px;padding:0 8px;place-items:center;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.76rem;font-weight:760}.selection-move-controls button:not(:disabled):hover{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.selection-rotate-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.selection-rotate-controls button{display:inline-flex;min-width:0;min-height:32px;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.76rem;font-weight:760}.selection-rotate-controls button:not(:disabled):hover{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.selection-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.selection-actions.confirming{grid-template-columns:42px repeat(2,minmax(0,1fr))}.selection-actions .secondary-action,.selection-actions .danger-action,.selection-actions .confirm-action{min-height:34px;font-size:.78rem}.selection-actions .confirm-action{display:grid;padding:0;place-items:center;border:1px solid #86efac;border-radius:7px;color:#166534;background:#dcfce7;font-size:1rem;font-weight:850}.selection-actions .confirm-action:hover{border-color:#22c55e;color:#14532d;background:#bbf7d0}@media(max-width:720px){.selection-popover{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}}.bead-cell.selection-cell{box-shadow:inset 0 0 0 1px #2563eb24}.bead-cell.selection-cell:after{position:absolute;z-index:5;inset:-1px;border:0 solid #2563eb;pointer-events:none;content:""}.bead-cell.selection-top:after{border-top-width:2px}.bead-cell.selection-right:after{border-right-width:2px}.bead-cell.selection-bottom:after{border-bottom-width:2px}.bead-cell.selection-left:after{border-left-width:2px}.bead-board.display-square .bead-cell.selection-cell:after{inset:0}.board-axis{position:relative;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation;transition:color .12s ease}.board-axis:hover{color:#1d4ed8}.board-axis:focus-visible{color:#1d4ed8;outline:1px solid rgba(37,99,235,.55);outline-offset:-3px}.guide-preview-line{position:absolute;z-index:7;pointer-events:none;border-radius:999px;background:#2563eb;box-shadow:0 0 0 1px #ffffffc7,0 0 7px #2563eb57}.guide-preview-row{left:calc(var(--board-padding) + var(--axis-size));top:calc(var(--board-padding) + var(--axis-size) + var(--guide-preview-offset));width:var(--guide-preview-length);height:2px;transform:translateY(-50%)}.guide-preview-column{top:calc(var(--board-padding) + var(--axis-size));left:calc(var(--board-padding) + var(--axis-size) + var(--guide-preview-offset));width:2px;height:var(--guide-preview-length);transform:translate(-50%)}.board-axis[aria-pressed=true]{color:#b45309;outline:0}.guide-line{position:absolute;z-index:6;display:none;pointer-events:none;background:#f59e0bf5}.bead-cell.guide-top .guide-line-top,.bead-cell.guide-bottom .guide-line-bottom{left:0;right:0;height:3px}.bead-cell.guide-top .guide-line-top{top:-1.5px;display:block}.bead-cell.guide-bottom .guide-line-bottom{bottom:-1.5px;display:block}.bead-cell.guide-left .guide-line-left,.bead-cell.guide-right .guide-line-right{top:0;bottom:0;width:3px}.bead-cell.guide-left .guide-line-left{left:-1.5px;display:block}.bead-cell.guide-right .guide-line-right{right:-1.5px;display:block}.board-scroll.panning-tool{cursor:grab}.board-scroll.panning-tool:active,.board-scroll.is-panning{cursor:grabbing}.app-topbar{align-items:center}.view-mode-toggle{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.view-mode-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:74px;min-height:34px;padding:0 10px;border:1px solid transparent;border-radius:6px;color:#4b5563;background:transparent;font-size:.84rem;font-weight:760}.view-mode-toggle button:hover,.view-mode-toggle button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.voxel-board-panel{grid-template-rows:auto minmax(0,1fr)}.voxel-canvas{position:relative;min-width:0;min-height:0;overflow:hidden;background:#f8fafc;touch-action:none}.voxel-canvas canvas{display:block;width:100%;height:100%;outline:none}.shape-size-popover{position:absolute;z-index:9;top:var(--shape-size-popover-y, 10px);left:var(--shape-size-popover-x, 10px);display:inline-flex;max-width:calc(100% - 20px);min-height:34px;align-items:center;gap:9px;padding:7px 10px;overflow:hidden;border:1px solid rgba(148,163,184,.34);border-radius:8px;color:#fff;background:#0f172ae6;box-shadow:0 12px 28px #0f172a33;font-size:.76rem;font-weight:760;line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.shape-size-popover span{min-width:0}.voxel-size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:720px){.app-topbar{align-items:stretch}.view-mode-toggle{width:100%}}.voxel-board-panel{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;min-height:0}.voxel-canvas{width:100%;height:100%;min-height:0}.voxel-selection-panel{display:grid;gap:8px;padding:8px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc}.voxel-selection-panel .selection-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.voxel-selection-panel .selection-actions button{min-width:0;min-height:34px;padding:0 6px;font-size:.76rem}.voxel-board-panel{display:grid!important;grid-template-rows:minmax(0,1fr)!important;min-height:0}.voxel-selection-popover{gap:10px}.voxel-selection-mode{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;color:#6b7280;font-size:.78rem;font-weight:720}.voxel-selection-mode>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.voxel-selection-mode button{min-width:0;min-height:30px;border:1px solid #e5e7eb;border-radius:7px;color:#4b5563;background:#fff;font-size:.76rem;font-weight:760}.voxel-selection-mode button:hover,.voxel-selection-mode button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.voxel-selection-move-controls{grid-template-columns:repeat(6,minmax(0,1fr))}.voxel-selection-move-controls button:nth-last-child(-n+2){font-size:.72rem}.voxel-selection-rotate-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.palette-filter-row{grid-template-columns:minmax(0,1fr) 104px 36px}.palette-add-button{display:inline-grid;place-items:center;width:36px;height:36px;min-width:0;padding:0;border:1px solid #dbe3ef;border-radius:8px;color:#1d4ed8;background:#fff}.palette-add-button:hover{border-color:#93c5fd;background:#eff6ff}.custom-palette-backdrop{align-items:stretch;padding:24px}.custom-palette-dialog{display:grid;grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto;gap:12px;width:min(920px,100%);max-height:min(860px,calc(100vh - 48px));margin:auto;padding:18px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;box-shadow:0 24px 70px #0f172a33}.custom-palette-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.custom-palette-dialog-header h2,.custom-palette-dialog-header p{margin:0}.custom-palette-dialog-header h2{color:#111827;font-size:1.08rem}.custom-palette-dialog-header p{margin-top:4px;color:#64748b;font-size:.84rem}.custom-palette-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}.custom-palette-name-row label,.custom-color-row input[type=text]{min-width:0}.custom-palette-name-row label{display:grid;gap:5px;color:#64748b;font-size:.76rem;font-weight:760}.custom-palette-name-row input,.custom-color-row input[type=text]{width:100%;height:36px;min-width:0;padding:0 10px;border:1px solid #dbe3ef;border-radius:8px;color:#111827;background:#fff}.custom-palette-name-row strong{color:#111827;font-size:.9rem;white-space:nowrap}.custom-palette-selected{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;min-height:42px;max-height:112px;overflow:auto;padding:8px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc}.custom-palette-selected .empty-state{grid-column:1 / -1;padding:5px 0}.custom-color-row{display:grid;grid-template-columns:42px minmax(0,1fr) 112px 92px;gap:8px;align-items:center}.custom-color-picker{width:42px;height:36px;padding:2px;border:1px solid #dbe3ef;border-radius:8px;background:#fff}.custom-color-row .secondary-action{width:auto;min-width:0;padding:0 12px}.custom-palette-search{margin:0}.custom-palette-source{min-height:0;overflow:auto;padding-right:2px}.custom-palette-actions{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:720px){.palette-filter-row{grid-template-columns:minmax(0,1fr) 92px 36px}.custom-palette-backdrop{padding:10px}.custom-palette-dialog{max-height:calc(100vh - 20px);padding:14px}.custom-color-row{grid-template-columns:42px minmax(0,1fr) 92px}.custom-color-name{grid-column:2 / 4;grid-row:1}.custom-color-hex{grid-column:1 / 3;grid-row:2}.custom-color-row .secondary-action{grid-column:3;grid-row:2}}