: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}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;overflow:hidden;padding:14px;background:#f5f6f8}.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}.editor-layout{display:grid;grid-template-columns:72px minmax(0,1fr) 360px;gap:12px;min-height:0;max-width:1500px;width:100%;margin:0 auto}.tool-rail,.board-panel,.control-panel{min-width:0;min-height:0;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.tool-rail{display:grid;align-content:start;gap:8px;padding:8px}.tool-button{display:grid;place-items:center;gap:4px;min-height:58px;border:1px solid transparent;border-radius:7px;color:#4b5563;background:transparent;font-size:.76rem;font-weight:700}.tool-button:hover,.tool-button.active{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.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: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-panel{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;overflow:hidden}.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}.active-color{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:10px}.active-color.compact{width:min(180px,45%);margin-bottom:0}.active-color-chip{width:28px;height:28px;border:1px solid #d1d5db;border-radius:50%;background:var(--active-color)}.active-color strong,.active-color span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-color strong{color:#111827;font-size:.88rem}.active-color span{color:#6b7280;font-size:.76rem}.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}.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(58px,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:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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:1100px){.app-shell{height:auto;min-height:100vh;overflow:visible}.editor-layout{grid-template-columns:64px minmax(0,1fr)}.control-panel{grid-column:1 / -1;max-height:620px}}@media(max-width:720px){html,body,#app{height:auto}.app-shell{padding:10px}.topbar{display:grid;justify-items:start}.topbar-meta{justify-content:start}.editor-layout{grid-template-columns:1fr}.tool-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-button{min-height:44px;grid-template-columns:auto auto}.board-panel{min-height:520px}.control-panel{max-height:none}.active-color.compact{width:50%}.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}}.app-shell{display:block;height:100vh;overflow:hidden;padding:12px}.editor-layout{grid-template-columns:64px minmax(0,1fr) 360px;gap:12px;width:100%;height:100%;max-width:none;margin:0}.editor-layout.controls-collapsed{grid-template-columns:64px minmax(0,1fr) 48px}.board-panel{display:block;height:100%;min-height:0}.board-scroll{width:100%;height:100%;min-height:0;padding:16px}.control-panel{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.control-panel.collapsed{display:grid;place-items:start center;padding:8px 6px}.control-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:6px;padding:8px;border-bottom:1px solid #e5e7eb}.control-tabs button,.collapse-button{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}.control-tabs button:hover,.control-tabs button.active,.collapse-button:hover{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}.collapsed-toggle{writing-mode:vertical-rl;min-width:34px;min-height:72px}.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:1100px){.editor-layout,.editor-layout.controls-collapsed{grid-template-columns:64px minmax(0,1fr)}.control-panel,.control-panel.collapsed{grid-column:1 / -1;min-height:420px}.control-panel.collapsed{min-height:auto;place-items:center start}.collapsed-toggle{writing-mode:horizontal-tb;min-width:80px;min-height:34px}}@media(max-width:720px){.editor-layout,.editor-layout.controls-collapsed{grid-template-columns:1fr}.control-tabs,.panel-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}.app-shell{height:100vh;padding:0;overflow:hidden;background:#f5f6f8}.editor-layout,.editor-layout.controls-collapsed{position:relative;display:block;width:100%;height:100%;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;left:16px;width:56px;max-height:calc(100vh - 32px);overflow-y:auto;border-color:#d1d5dbe6;background:#fffffff0;box-shadow:0 10px 24px #0f172a14}.control-panel{position:absolute;z-index:5;top:16px;right:16px;bottom:16px;width:360px;height:auto;border-color:#d1d5dbe6;background:#fffffff5;box-shadow:0 10px 24px #0f172a14}.control-panel.collapsed{width:48px;min-height:0;padding:8px 6px}@media(max-width:720px){.board-scroll{padding:72px 10px 96px;place-items:center}.tool-rail{top:10px;left:10px;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.tool-button{min-width:64px}.control-panel{inset:auto 10px 10px;width:auto;max-height:58vh}.control-panel.collapsed{left:auto;width:auto;min-width:86px}.collapsed-toggle{writing-mode:horizontal-tb;min-width:72px;min-height:34px}}html,body,#app{overflow:hidden}.board-scroll{overflow:hidden!important;overscroll-behavior:none;cursor:crosshair}.board-scroll:active{cursor:crosshair}.bead-board{transform:translate(var(--board-pan-x),var(--board-pan-y)) scale(var(--board-scale));transform-origin:center center;will-change:transform}.control-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}.control-panel{overflow:visible!important}.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:-16px}@media(max-width:720px){.panel-handle{top:-16px;left:50%;width:44px;height:28px;transform:translate(-50%);border-right:1px solid #e5e7eb;border-bottom:0;border-radius:8px 8px 0 0}}.bead-board{gap:1px!important}.bead-cell:before{inset:10%!important}.control-panel.collapsed{width:0!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}.mobile-handle-icon{display:none}.control-panel.collapsed .panel-handle{left:-30px;border-right:1px solid #e5e7eb;border-radius:8px}@media(max-width:720px){.control-panel.collapsed{inset:auto 10px 10px!important;width:auto!important;min-width:0!important;min-height:0!important;height:0!important}.desktop-handle-icon{display:none}.mobile-handle-icon{display:block}.control-panel .panel-handle,.control-panel.collapsed .panel-handle{top:-30px;left:50%;width:44px;height:28px;transform:translate(-50%);border:1px solid #e5e7eb;border-radius:8px}}.control-tabs.two-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}.canvas-page{display:grid;align-content:start;gap:12px}.canvas-stats{margin-bottom:0}.canvas-block{display:grid;gap:10px;padding:10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.canvas-block h2{margin:0;color:#111827;font-size:.92rem;font-weight:760}.canvas-actions{gap:8px}.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.three-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}.stats-page,.canvas-page{display:grid;align-content:start;gap:10px}.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}.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}.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dialog-actions .danger-action{margin-top:0}.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{gap:1px!important}.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:clamp(5px,calc(var(--cell-size) * .24),9px);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}@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:clamp(7px,calc(var(--cell-size) * .4),12px);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-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}