:root{--color-primary: #5582FC;--color-primary-hover: #4468DC}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.password-gate{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f5}.password-gate__form{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;min-width:280px}.password-gate__title{margin:0;font-size:1.25rem;font-weight:600;color:#333}.password-gate__hint{margin:0;font-size:.875rem;color:#666}.password-gate__input{width:100%;padding:.5rem .75rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.password-gate__input:focus{outline:none;border-color:#5582fc}.password-gate__error{margin:0;font-size:.875rem;color:#dc2626}.password-gate__button{padding:.5rem 1.5rem;font-size:1rem;font-weight:500;color:#fff;background:#5582fc;border:none;border-radius:4px;cursor:pointer}.password-gate__button:hover{background:#4571e8}.pattern-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#f5f5f5}.top-bar{position:fixed;top:0;left:0;right:0;height:40px;background:#fff;box-shadow:0 2px 10px #0000001a;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1100;box-sizing:border-box}.top-bar-left{display:flex;align-items:center;gap:16px}.top-bar-wordmark{font-size:13px;font-weight:600;color:#333;letter-spacing:-.02em;white-space:nowrap;font-family:system-ui,-apple-system,sans-serif}.top-bar-logo{height:24px;width:72px;display:block;flex-shrink:0}.top-bar-menu-wrap{position:relative}.top-bar-menu-btn{display:flex;align-items:center;gap:6px;background:transparent;border:none;padding:4px 8px;cursor:pointer;border-radius:4px;transition:all .15s ease}.top-bar-menu-btn:hover{background:#f0f0f0}.top-bar-menu-btn.active{background:#e3f2fd}.top-bar-menu-arrow{transition:transform .2s ease;color:#888}.top-bar-menu-btn.active .top-bar-menu-arrow{transform:rotate(180deg);color:#333}.top-bar-menu-dropdown{position:absolute;top:100%;left:0;margin-top:4px;min-width:200px;background:#fff;border-radius:6px;box-shadow:0 4px 12px #00000026;border:1px solid #e0e0e0;padding:4px 0;z-index:1200}.top-bar-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;background:transparent;color:#333;font-size:13px;text-align:left;cursor:pointer;transition:background .15s ease}.top-bar-menu-item:hover{background:#f0f0f0}.top-bar-menu-item svg{flex-shrink:0;color:#555}.top-bar-filename{font-size:12px;font-weight:500;color:#888;display:flex;align-items:center;gap:5px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}.top-bar-unsaved-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59e0b;flex-shrink:0}.top-bar-history-buttons{display:flex;align-items:center;gap:4px}.top-bar-align-sep{width:1px;height:24px;background:#e2e8f0;margin:0 4px}.top-bar-align-group{display:flex;align-items:center;gap:2px}.top-bar-align-btn,.top-bar-align-ref-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:transparent;color:#555;cursor:pointer;transition:all .15s ease}.top-bar-align-btn:hover,.top-bar-align-ref-btn:hover{background:#f0f0f0;color:#333}.top-bar-align-btn svg,.top-bar-align-ref-btn svg{width:14px;height:14px}.top-bar-align-ref-btn.active{background:#e3f2fd;color:var(--color-primary-hover)}.top-bar-align-btn.disabled,.top-bar-align-ref-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.top-bar-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:transparent;color:#555;cursor:pointer;transition:all .15s ease}.top-bar-icon-btn:hover:not(.disabled){background:#f0f0f0;color:#333}.top-bar-icon-btn.disabled{color:#ccc;cursor:not-allowed}.top-bar-btn.active{background:#e3f2fd;color:var(--color-primary-hover)}.top-bar-icon-btn svg{width:18px;height:18px}.top-bar-right{display:flex;align-items:center;gap:8px}.top-bar-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:4px;background:#f0f0f0;color:#555;font-size:12px;cursor:pointer;transition:all .15s ease}.top-bar-btn:hover{background:#e0e0e0;color:#333}.top-bar-btn.primary{background:var(--color-primary);color:#fff}.top-bar-btn.primary:hover{background:var(--color-primary-hover)}.top-bar-btn.disabled{background:#f0f0f0;color:#aaa;cursor:not-allowed}.top-bar-btn.disabled:hover{background:#f0f0f0;color:#aaa}.top-bar-btn svg{width:16px;height:16px}.top-bar-view-btn svg{width:16px;height:16px}.top-bar-visibility-wrap,.top-bar-snap-wrap{position:relative}.top-bar-snap-dropdown{min-width:140px}.top-bar-visibility-dropdown{position:absolute;top:100%;right:0;margin-top:4px;min-width:180px;background:#fff;border-radius:6px;box-shadow:0 4px 12px #00000026;border:1px solid #e0e0e0;padding:4px 0;z-index:1200}.top-bar-visibility-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;border:none;background:transparent;color:#333;font-size:12px;text-align:left;cursor:pointer;transition:background .15s ease}.top-bar-visibility-item:hover{background:#f0f0f0}.top-bar-visibility-switch{flex-shrink:0;width:32px;height:18px;border-radius:9px;background:#e0e0e0;position:relative;transition:background .2s ease}.top-bar-visibility-switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .2s ease}.top-bar-visibility-switch.on{background:var(--color-primary)}.top-bar-visibility-switch.on:after{transform:translate(14px)}.toolbar{position:fixed;left:0;top:40px;height:calc(100vh - 40px);width:56px;background:#fff;box-shadow:2px 0 10px #0000001a;padding:12px 8px;display:flex;flex-direction:column;gap:4px;z-index:1000;box-sizing:border-box}.toolbar-group{display:flex;flex-direction:column;gap:4px}.toolbar-group-divider{width:100%;height:1px;margin:12px 0;background:#e0e0e0;flex-shrink:0}.toolbar-btn{width:40px;height:40px;border:none;border-radius:6px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;color:#555;transition:all .15s ease}.toolbar-btn:hover{background:#f0f0f0;color:#333}.toolbar-btn.active{background:var(--color-primary);color:#fff}.toolbar-btn.active:hover{background:var(--color-primary-hover);color:#fff}.toolbar-btn svg{width:100%;height:100%}.toolbar-divider{height:1px;background:#e0e0e0;margin:4px 0}.ruler-corner{position:fixed;top:40px;left:56px;width:24px;height:24px;background:#fff;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;z-index:100}.ruler-horizontal{position:fixed;top:40px;left:80px;height:24px;z-index:99}.ruler-vertical{position:fixed;top:64px;left:56px;width:24px;z-index:99}.grid-settings-panel-wrapper .grid-settings-panel{position:relative;bottom:auto}.grid-settings-panel{position:fixed;bottom:56px;width:220px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1200;overflow:hidden}.grid-settings-panel.single{width:200px}.grid-settings-header{padding:10px 12px;font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #e0e0e0}.grid-slot-content{padding:10px 12px}.grid-setting-row{margin-bottom:10px}.grid-setting-row:last-child{margin-bottom:0}.grid-setting-label{display:block;font-size:10px;color:#666;margin-bottom:4px}.grid-spacing-controls{display:flex;align-items:center;gap:4px}.grid-spacing-input{width:55px;padding:4px 6px;border:1px solid #e0e0e0;border-radius:4px;font-size:11px;outline:none}.grid-spacing-input:focus{border-color:var(--color-primary)}.grid-spacing-unit{font-size:10px;color:#888}.grid-spacing-presets{display:flex;gap:3px;margin-bottom:10px}.preset-btn{flex:1;padding:4px 0;border:1px solid #e0e0e0;border-radius:3px;background:#fff;font-size:9px;color:#666;cursor:pointer;transition:all .15s ease}.preset-btn:hover{background:#f5f5f5;border-color:#d0d0d0}.preset-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.grid-color-swatches{display:flex;gap:4px}.color-swatch{width:24px;height:24px;border:2px solid transparent;border-radius:4px;cursor:pointer;transition:all .15s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#333}.grid-opacity-control{display:flex;align-items:center;gap:8px}.opacity-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#e0e0e0;border-radius:2px;cursor:pointer}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--color-primary);border-radius:50%;cursor:pointer}.opacity-slider::-moz-range-thumb{width:12px;height:12px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none}.opacity-value{font-size:10px;color:#666;min-width:32px;text-align:right}.snapping-row{padding-top:6px;border-top:1px solid #f0f0f0;margin-top:4px}.grid-settings-toggle-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 0;border:none;background:transparent;color:#444;font-size:10px;text-align:left;cursor:pointer;transition:background .15s ease;border-radius:4px}.grid-settings-toggle-item:hover{background:#f0f0f0}.grid-settings-toggle{flex-shrink:0;width:32px;height:18px;border-radius:9px;background:#e0e0e0;position:relative;transition:background .2s ease}.grid-settings-toggle:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .2s ease}.grid-settings-toggle.on{background:var(--color-primary)}.grid-settings-toggle.on:after{transform:translate(14px)}.info-panel{position:fixed;bottom:0;left:56px;right:0;height:48px;background:#fff;box-shadow:0 -2px 10px #0000001a;padding:0 16px;display:flex;align-items:center;justify-content:space-between;z-index:1000;font-size:13px;box-sizing:border-box}.info-panel-left{display:flex;gap:20px;align-items:center}.info-panel-center{display:flex;gap:12px;align-items:center}.info-panel-right{display:flex;gap:8px;align-items:center}.info-item{display:flex;gap:6px;align-items:center}.info-label{color:#888}.info-value{color:#333;font-weight:500}.zoom-controls{display:flex;align-items:center;gap:2px;background:#f0f0f0;border-radius:4px;padding:2px}.info-panel-view-buttons{display:flex;align-items:center;gap:8px}.zoom-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:3px;background:transparent;color:#555;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.zoom-btn:hover{background:#e0e0e0;color:#333}.zoom-btn.zoom-reset{width:auto;padding:0 8px;font-size:11px;margin-left:4px}.zoom-display{min-width:50px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:3px;background:#fff;color:#333;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease}.zoom-display:hover{background:#e8e8e8}.zoom-input{width:50px;height:28px;border:1px solid var(--color-primary);border-radius:3px;background:#fff;color:#333;font-size:12px;font-weight:500;text-align:center;outline:none}.zoom-input::-webkit-inner-spin-button,.zoom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.info-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:4px;background:#f0f0f0;color:#555;font-size:12px;cursor:pointer;transition:all .15s ease}.info-btn:hover{background:#e0e0e0;color:#333}.info-btn.active{background:var(--color-primary);color:#fff}.info-btn.active:hover{background:var(--color-primary-hover)}.info-btn svg{width:16px;height:16px}.info-btn.small{padding:6px}.info-btn.small span{display:none}.grid-buttons-group{display:flex;gap:4px;margin-right:4px}.grid-button-wrapper{display:flex;align-items:center;gap:0;border-radius:6px;overflow:hidden;background:#f0f0f0}.grid-button-wrapper.on{background:#e3f2fd}.grid-divider{width:1px;height:16px;background:#e0e0e0;flex-shrink:0;align-self:center}.grid-main{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:12px;color:#333;min-width:0}.grid-color-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.15)}.grid-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-visibility-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#f0f0f0;color:#888;cursor:pointer;padding:0;transition:all .15s ease}.grid-visibility-btn:hover{background:#e8e8e8;color:#333}.grid-visibility-btn.on{background:transparent;color:var(--color-primary-hover)}.grid-button-wrapper.on .grid-visibility-btn:hover{background:#bbdefb}.grid-visibility-btn svg{width:18px;height:18px}.grid-settings-trigger{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#f0f0f0;color:#888;cursor:pointer;padding:0;transition:all .15s ease}.grid-button-wrapper.on .grid-divider{background:#bbdefb}.grid-button-wrapper.on .grid-settings-trigger{background:transparent}.grid-settings-trigger:hover{background:#e0e0e0;color:#333}.grid-button-wrapper.on .grid-settings-trigger:hover{background:#bbdefb}.grid-settings-trigger svg{width:18px;height:18px}.piece-stats-panel{position:fixed;z-index:50;pointer-events:none;padding:10px 14px;min-width:140px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:8px;opacity:0;transform:translateY(8px);transition:opacity .18s ease-out,transform .18s ease-out}.piece-stats-panel.visible{opacity:1;transform:translateY(0)}.piece-stats-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.piece-stats-label{font-size:11px;color:#00000080}.piece-stats-value{font-size:12px;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,monospace;color:#000000e6}.piece-stats-divider{height:1px;background:#00000014;margin:6px 0}.seam-allowance-panel{position:fixed;background:#fff;border-radius:8px;box-shadow:0 2px 12px #0003;padding:12px;z-index:1001;min-width:180px}.seam-allowance-panel.disabled{opacity:.8}.seam-allowance-header{font-size:12px;font-weight:600;color:#555;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.seam-allowance-type-row{display:flex;gap:6px;margin-bottom:8px}.seam-allowance-type-btn{flex:1;padding:6px 10px;border:1px solid #e0e0e0;border-radius:4px;font-size:12px;background:#fafafa;color:#555;cursor:pointer;transition:background .15s ease,border-color .15s ease}.seam-allowance-type-btn:hover{background:#f0f0f0;border-color:#ccc}.seam-allowance-type-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.seam-allowance-input-row{display:flex;align-items:center;gap:6px}.seam-allowance-input{width:60px;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;text-align:right}.seam-allowance-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #2196f333}.seam-allowance-unit{color:#888;font-size:13px}.seam-allowance-apply{padding:6px 12px;background:var(--color-primary);color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease}.seam-allowance-apply:hover{background:var(--color-primary-hover)}.seam-allowance-message{font-size:12px;color:#888;font-style:italic;max-width:160px;line-height:1.4}.seam-allowance-warning{font-size:11px;color:#b45309;margin-top:8px;line-height:1.3;max-width:200px}.help-panel-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.help-panel{background:#fff;border-radius:8px;max-width:640px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.help-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}.help-panel-title{margin:0;font-size:1.25rem;font-weight:600;color:#1e293b}.help-panel-close{width:32px;height:32px;padding:0;border:none;background:transparent;font-size:1.5rem;line-height:1;color:#64748b;cursor:pointer;border-radius:4px}.help-panel-close:hover{background:#f1f5f9;color:#1e293b}.help-panel-body{padding:20px;overflow-y:auto}.help-section{margin-bottom:24px}.help-section:last-child{margin-bottom:0}.help-section-title{margin:0 0 12px;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.05em}.help-table{width:100%;border-collapse:collapse;font-size:.875rem}.help-table th,.help-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #e2e8f0}.help-table th{font-weight:600;color:#475569;background:#f8fafc}.help-table td{color:#334155}.help-table tbody tr.help-row-highlight{background:#eff6ff}.help-table kbd{display:inline-block;padding:2px 6px;font-family:ui-monospace,monospace;font-size:.8125rem;background:#f1f5f9;border-radius:4px;border:1px solid #e2e8f0}.help-list{margin:0;padding-left:20px;font-size:.875rem;color:#334155;line-height:1.6}.help-list li{margin-bottom:6px}.help-list li:last-child{margin-bottom:0}.export-panel-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:2000}.export-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.export-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb}.export-panel-title{margin:0;font-size:16px;font-weight:600;color:#111827}.export-panel-close{border:none;background:transparent;font-size:22px;color:#6b7280;cursor:pointer;padding:0 4px;line-height:1}.export-panel-close:hover{color:#111827}.export-panel-body{padding:20px;overflow-y:auto;flex:1}.export-section{margin-bottom:20px}.export-section:last-child{margin-bottom:0}.export-section-title{margin:0 0 10px;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.export-format-grid{display:flex;gap:8px}.export-format-card{flex:1;padding:12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;transition:all .15s ease;position:relative}.export-format-card:hover{border-color:#d1d5db;background:#f9fafb}.export-format-card.active{border-color:var(--color-primary, #5582FC);background:#f0f5ff}.export-format-card.coming-soon{opacity:.6}.export-format-label{font-size:14px;font-weight:600;color:#111827}.export-format-desc{font-size:11px;color:#6b7280;line-height:1.3}.export-format-badge{position:absolute;top:6px;right:6px;font-size:9px;font-weight:600;color:#9ca3af;background:#f3f4f6;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}.export-checkbox-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:#374151;cursor:pointer}.export-checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary, #5582FC);cursor:pointer}.export-panel-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e5e7eb}.export-cancel-btn{padding:8px 16px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;font-size:13px;cursor:pointer;transition:all .15s ease}.export-cancel-btn:hover{background:#f9fafb}.export-confirm-btn{padding:8px 20px;border:none;border-radius:6px;background:var(--color-primary, #5582FC);color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.export-confirm-btn:hover:not(:disabled){background:var(--color-primary-hover, #4470e0)}.export-confirm-btn:disabled{opacity:.5;cursor:not-allowed}.app{width:100vw;height:100vh;overflow:hidden;position:relative}