*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#333;touch-action:manipulation}.app{min-height:100vh;display:flex;flex-direction:column;background-color:#fff}.header{background:#f5f5f5;color:#333;padding:.5rem 1rem;box-shadow:0 2px 4px #0000001a;border-bottom:1px solid #e0e0e0}.header h1{font-size:1.2rem;margin:0;color:#333;font-weight:500}.header-title{display:flex;align-items:center;gap:.5rem}.header-slogan{font-size:.85rem;color:#666;margin:0;font-weight:400;margin-left:.5rem;padding-left:.5rem;border-left:2px solid #11aef7}.header-subtitle{font-size:.85rem;color:#666;margin:0 0 0 auto;font-weight:400;padding-right:1rem}.header-controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.size-control{display:flex;gap:.5rem}.size-control label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#333}.size-control input,.size-control select{width:60px;padding:.3rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.85rem;background-color:#fff;color:#333}.size-control select{width:100px;cursor:pointer}.btn{padding:.4rem .8rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;background-color:#f5f5f5;color:#333}.btn-clear{background-color:#c92a2a;border-color:#c92a2a;color:#fff}.btn-clear:hover{background-color:#a61e1e;border-color:#a61e1e}.btn-export{background-color:#2b8a3e;border-color:#2b8a3e;color:#fff}.btn-export:hover:not(:disabled){background-color:#1e7a34;border-color:#1e7a34}.btn-export:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed;opacity:.7}.main-content{display:flex;flex:1;overflow:hidden}.toolbar{width:40px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;padding:0;overflow:visible;display:flex;flex-direction:column;gap:0;height:fit-content;align-self:flex-start;box-shadow:0 4px 12px #00000026;cursor:move;-webkit-user-select:none;user-select:none}.toolbar.collapsed{width:40px;height:40px;max-height:40px;padding:0;overflow:hidden}.toolbar-toggle{position:absolute;right:0;top:0;width:40px;height:40px;border:none;background:transparent;color:#333;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.toolbar-toggle:hover{background:#e0e0e0}.toolbar.collapsed .toolbar-toggle{width:100%;right:0;left:0}.toolbar.collapsed .toolbar-toggle:hover{background:#e0e0e0}.tools-icons{display:flex;flex-direction:column;gap:0;padding-bottom:0;border-bottom:none;margin-bottom:0;margin-top:40px}.tool-icon{width:40px;height:40px;border:none;background:transparent;color:#666;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:1rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tool-icon:hover{background:transparent;color:#333}.tool-icon.active{background:transparent;color:#2b8a3e}.tool-panel{position:absolute;left:100%;top:0;width:220px;background:#fff;border:1px solid #e0e0e0;border-left:none;border-radius:0 8px 8px;padding:.8rem;box-shadow:2px 0 8px #00000026;z-index:1000;animation:fadeIn .2s ease;max-height:calc(100vh - 100px);overflow-y:auto;position:relative}.panel-close-btn{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;border:none;background:#f5f5f5;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#666;transition:all .2s;z-index:10}.panel-close-btn:hover{background:#e0e0e0;color:#333}.tool-panel h3{font-size:.9rem;margin-bottom:.6rem;color:#333;font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-top:1rem}.tool-panel h3:first-child{margin-top:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tools-section h3{font-size:.9rem;margin-bottom:.6rem;color:#333;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.tools-grid{display:grid;grid-template-columns:1fr;gap:.4rem}.tools-grid .checkbox-label{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f5f5f5;border-radius:4px;cursor:pointer;transition:background .2s;color:#333;font-size:.85rem}.tools-grid .checkbox-label svg{width:16px;height:16px;min-width:16px}.tools-grid .checkbox-label:hover{background:#e0e0e0}.tools-grid .checkbox-label input[type=checkbox]{cursor:pointer}.current-color h3{font-size:.9rem;margin-bottom:.6rem;color:#333;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.color-preview{display:flex;align-items:center;gap:1rem;padding:.8rem;background:#f5f5f5;border-radius:8px}.color-box{width:50px;height:50px;border-radius:50%;border:2px solid #d0d0d0;box-shadow:0 2px 4px #0000001a}.color-info{display:flex;flex-direction:column;gap:.3rem}.color-code{font-size:1rem;font-weight:700;color:#333;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px}.color-name{font-size:.85rem;color:#666;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.color-search input{width:100%;padding:.6rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.85rem;background-color:#fff;color:#333;transition:border-color .2s}.color-search input:focus{outline:none;border-color:#999}.search-results{margin-top:.5rem;max-height:300px;overflow-y:auto;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #0000001a}.search-result-item{display:flex;align-items:center;gap:.8rem;padding:.8rem;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .2s}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:#f5f5f5}.search-result-item.selected{background:#e8f5e9;border-left:3px solid #2b8a3e}.search-result-swatch{width:32px;height:32px;border-radius:50%;border:1px solid #d0d0d0;flex-shrink:0}.search-result-info{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0;overflow:hidden}.search-result-code{font-size:.85rem;font-weight:700;color:#333;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-name{font-size:.8rem;color:#666;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.search-results-empty{margin-top:.5rem;padding:1rem;text-align:center;color:#666;font-size:.9rem;background:#f5f5f5;border-radius:4px}.color-palette{flex:1;overflow-y:auto}.color-series{margin-bottom:1.5rem}.color-series h4{font-size:1rem;margin-bottom:.8rem;color:#333;padding-bottom:.5rem;border-bottom:2px solid #e0e0e0}.series-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .5rem;background:#f5f5f5;border-radius:4px;cursor:pointer;transition:all .2s;margin-bottom:.4rem;color:#333}.series-header:hover{background:#e0e0e0}.series-title{font-size:.85rem;font-weight:500;color:#333}.series-toggle{font-size:.8rem;color:#666;transition:transform .2s}.color-picker-section{margin-bottom:1rem}.color-picker-section h3{font-size:.9rem;margin-bottom:.6rem;color:#333;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.color-picker-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.8rem;background:#f5f5f5;border-radius:8px}.color-picker-preview{width:50px;height:50px;border:1px solid #d0d0d0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.color-picker-preview:hover{transform:scale(1.05);box-shadow:0 2px 8px #00000026}.custom-color-picker{width:100%;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;margin-top:.5rem}.color-preview-large{width:100%;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;border:1px solid #e0e0e0}.color-hex-value{font-size:1rem;font-weight:700;color:#333;text-shadow:0 0 2px rgba(255,255,255,.8)}.color-palette-container{margin-bottom:1rem}.color-palette{width:100%;height:120px;border-radius:8px;cursor:crosshair;position:relative;border:1px solid #e0e0e0}.color-palette-cursor{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #333333;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 2px #00000080}.color-picker-label{font-size:.75rem;color:#666;text-align:center}.matched-colors{margin-top:.8rem}.matched-colors h4{font-size:.85rem;margin-bottom:.6rem;color:#666}.matched-colors-grid{display:flex;flex-direction:column;gap:.4rem}.matched-color-item{display:flex;align-items:center;gap:.8rem;padding:.6rem;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;color:#333}.matched-color-item:hover{border-color:#d0d0d0;background:#e0e0e0;transform:translate(5px)}.matched-color-item.selected{border-color:#2b8a3e;background:#e8f5e9}.matched-color-swatch{width:40px;height:40px;border-radius:50%;border:1px solid #d0d0d0;flex-shrink:0}.matched-color-info{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0;overflow:hidden}.matched-color-code{font-size:.8rem;font-weight:700;color:#333;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matched-color-name{font-size:.75rem;color:#666;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.color-palette h3{font-size:.9rem;margin-bottom:.8rem;color:#333;padding-bottom:.5rem;border-bottom:1px solid #e0e0e0;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.series-nav{display:flex;gap:.4rem;margin-bottom:.8rem;flex-wrap:wrap}.series-nav-item{padding:.4rem .8rem;border:1px solid #e0e0e0;background:#fff;border-radius:4px;cursor:pointer;font-weight:500;font-size:.8rem;color:#666;transition:all .2s;min-width:40px}.series-nav-item:hover{border-color:#d0d0d0;background:#f5f5f5;color:#333}.series-nav-item.active{border-color:#2b8a3e;background:#2b8a3e;color:#fff}.color-series-content{margin-top:.5rem}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:.5rem}.color-item{display:flex;flex-direction:column;align-items:center;padding:.5rem;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s;width:100%;min-width:0}.color-item:hover{background:#f5f5f5;transform:scale(1.05)}.color-item.selected{border-color:#2b8a3e;background:#e8f5e9}.color-swatch{width:40px;height:40px;border-radius:50%;border:1px solid #d0d0d0;margin-bottom:.4rem}.color-item-code{font-size:.75rem;color:#333;font-weight:600;text-align:center;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:#333;cursor:pointer}.checkbox-label-header{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#333;cursor:pointer;padding:.5rem 1rem;background:#f8f9fa;border-radius:6px;border:1px solid #e0e0e0}.checkbox-label-header:hover{background:#e9ecef}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.board-container{flex:1;padding:2rem;overflow:auto;background:#f5f5f5;display:flex;flex-direction:column;align-items:center}.zoom-controls{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0000001a;margin-bottom:1rem;position:sticky;bottom:0;z-index:100;border:1px solid #e0e0e0}.zoom-controls-fixed{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:#fff;border-radius:50px;box-shadow:0 4px 12px #00000026;z-index:999;border:1px solid #e0e0e0}.zoom-label-fixed{font-weight:500;color:#333;font-size:.85rem;white-space:nowrap}.zoom-slider-fixed{width:200px;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e0e0e0;border-radius:4px;outline:none;cursor:pointer}.zoom-slider-fixed::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#2b8a3e;border-radius:50%;cursor:pointer;transition:all .2s}.zoom-slider-fixed::-webkit-slider-thumb:hover{background:#1e7a34;transform:scale(1.2)}.zoom-slider-fixed::-moz-range-thumb{width:16px;height:16px;background:#2b8a3e;border-radius:50%;cursor:pointer;border:none;transition:all .2s}.zoom-slider-fixed::-moz-range-thumb:hover{background:#1e7a34;transform:scale(1.2)}.zoom-btn-fixed{min-width:35px;height:35px;padding:0 .8rem;background:#2b8a3e;color:#fff;border:none;border-radius:25px;font-size:.85rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.zoom-btn-fixed:hover{background:#1e7a34;transform:scale(1.05)}.zoom-reset-fixed{background:#5a5a5a}.zoom-reset-fixed:hover{background:#6a6a6a}.zoom-level-fixed{min-width:50px;text-align:center;font-weight:500;color:#333;font-size:.9rem}.zoom-btn{min-width:35px;height:35px;padding:0 .8rem;background:#2b8a3e;color:#fff;border:none;border-radius:4px;font-size:1.2rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.zoom-btn:hover:not(:disabled){background:#1e7a34;transform:scale(1.05)}.zoom-btn:disabled{background:#d0d0d0;cursor:not-allowed;opacity:.6}.zoom-reset{font-size:.85rem;padding:0 .8rem;background:#999}.zoom-reset:hover{background:#666}.zoom-level{min-width:60px;text-align:center;font-weight:500;color:#333;font-size:.9rem}.board-wrapper{display:inline-block;background:#fff;padding:1rem;border-radius:4px;box-shadow:0 4px 12px #0000001a;-webkit-user-select:none;user-select:none;transition:transform .3s ease;border:1px solid #e0e0e0}.board-header{display:flex;margin-bottom:0}.corner-cell{width:30px;height:30px;flex-shrink:0}.column-number{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#666;font-weight:500;background:#f5f5f5;border:1px solid #e0e0e0}.board-body{display:flex;flex-direction:column}.board-row-wrapper{display:flex;align-items:center;margin-bottom:0}.row-number{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;color:#666;background:#f5f5f5;border:1px solid #e0e0e0;margin-right:0;flex-shrink:0}.board-row{display:flex}.board-cell{width:30px;height:30px;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .1s;position:relative}.board-cell:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 8px #00000026}.board-cell.start-point{border:3px solid #2b8a3e;box-shadow:0 0 10px #2b8a3e4d;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.board-cell.no-grid{border:none}.clipboard-controls{padding:.8rem;background:#f5f5f5;border-radius:4px}.clipboard-controls h3{font-size:.9rem;margin-bottom:.6rem;color:#333;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.clipboard-buttons{display:flex;flex-direction:column;gap:.4rem}.btn-clipboard{padding:.5rem .8rem;border:1px solid #2b8a3e;background:#fff;color:#333;border-radius:4px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem;justify-content:center}.btn-clipboard svg{width:16px;height:16px;min-width:16px}.btn-clipboard:hover{background:#2b8a3e;color:#fff}.btn-clipboard:disabled{opacity:.5;cursor:not-allowed}.btn-clipboard:disabled:hover{background:#fff;color:#333}.clipboard-info{margin-top:.8rem;padding:.6rem;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px;font-size:.85rem;color:#666;text-align:center}.cell-color-code{color:#333;font-weight:700;font-size:.85rem;pointer-events:none;line-height:1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1024px){.main-content{flex-direction:column}.toolbar{width:40px;height:fit-content;overflow:visible}.toolbar.collapsed{width:40px;height:40px;max-height:40px;padding:0;overflow:hidden}.toolbar-toggle{left:auto;right:0;top:0;transform:none;width:100%;height:40px;border-radius:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;background:transparent;color:#333}.toolbar-toggle:hover{background:#e0e0e0}.toolbar.collapsed .toolbar-toggle{background:transparent;color:#333}.toolbar.collapsed .toolbar-toggle:hover{background:#e0e0e0}.tools-icons{gap:0;margin-top:40px}.tool-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:320px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;box-shadow:0 4px 16px #0003;z-index:10000;animation:fadeIn .2s ease;max-height:80vh;overflow-y:auto}.panel-close-btn{top:.8rem;right:.8rem;width:32px;height:32px;font-size:1rem}.zoom-controls-fixed{bottom:80px;padding:.6rem 1rem;gap:.5rem;flex-wrap:wrap;justify-content:center}.zoom-label-fixed{font-size:.8rem}.zoom-slider-fixed{width:150px;height:6px}.zoom-slider-fixed::-webkit-slider-thumb{width:16px;height:16px}.zoom-slider-fixed::-moz-range-thumb{width:16px;height:16px}.zoom-btn-fixed{min-width:35px;height:35px;font-size:.8rem;padding:0 .8rem}.zoom-level-fixed{font-size:.9rem;min-width:45px}.tools-grid{grid-template-columns:repeat(2,1fr)}.zoom-controls{padding:.6rem 1rem;gap:.5rem;flex-wrap:wrap}.zoom-btn{min-width:35px;height:35px;font-size:1.2rem}.zoom-reset{font-size:.8rem;padding:0 .8rem}.zoom-level{font-size:.9rem;min-width:50px}.board-container{padding:1rem}.board-cell{width:30px;height:30px}.cell-color-code{font-size:.75rem;font-weight:700;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width: 768px){.header{padding:.8rem 1rem}.header h1{font-size:1.4rem}.header-subtitle{font-size:.95rem;display:none}.header-controls{flex-direction:column;align-items:stretch;gap:.5rem}.size-control{flex-direction:column;gap:.5rem}.size-control label{font-size:.85rem}.toolbar{width:40px;padding:0;height:fit-content;overflow:visible}.toolbar.collapsed{width:40px;height:40px;max-height:40px;padding:0;overflow:hidden}.tools-icons{gap:.4rem;margin-top:40px}.tool-icon{width:35px;height:35px;font-size:.9rem}.tools-grid{gap:.5rem}.tool-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:320px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;box-shadow:0 4px 16px #0003;z-index:10000;animation:fadeIn .2s ease;max-height:80vh;overflow-y:auto}.tools-grid .checkbox-label{padding:.5rem;font-size:.85rem}.zoom-controls{position:static;margin-bottom:.5rem}.color-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.color-item{width:100%;min-width:0}.color-swatch{width:40px;height:40px;border-radius:50%}.color-item-code{font-size:.75rem;color:#333;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.board-container{padding:.5rem;overflow-x:auto}.board{padding:.5rem}.board-wrapper{margin:0 auto}.board-cell{width:30px;height:30px}.cell-color-code{font-size:.75rem;font-weight:700;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{padding:.5rem 1rem;font-size:.85rem}.btn-clear,.btn-export{width:100%}}@media (max-width: 480px){.header{padding:.6rem .8rem}.header h1{font-size:1.2rem}.header-subtitle{font-size:.85rem;display:none}.header-title{margin-bottom:.5rem}.btn{padding:.4rem .8rem;font-size:.8rem}.btn-clear,.btn-export{width:100%}.toolbar{width:40px;height:fit-content;padding:0;overflow:visible}.toolbar.collapsed{height:40px;max-height:40px;padding:0}.toolbar-toggle{height:40px;font-size:1rem}.tools-icons{gap:.3rem;margin-top:40px}.tool-icon{width:32px;height:32px;font-size:.85rem}.tools-grid{grid-template-columns:repeat(2,1fr);gap:.4rem}.tool-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:320px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;box-shadow:0 4px 16px #0003;z-index:10000;animation:fadeIn .2s ease;max-height:80vh;overflow-y:auto}.tools-grid .checkbox-label{padding:.4rem;font-size:.8rem}.color-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.color-item{width:100%;min-width:0}.color-swatch{width:40px;height:40px;border-radius:50%}.color-item-code{font-size:.75rem;color:#333;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.board-container{padding:.3rem;overflow-x:auto}.board{padding:.3rem}.board-wrapper{margin:0 auto}.board-cell{width:30px;height:30px}.cell-color-code{font-size:.75rem;font-weight:700;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.zoom-controls-fixed{bottom:70px;padding:.5rem .8rem;gap:.4rem}.zoom-label-fixed{font-size:.75rem}.zoom-slider-fixed{width:120px;height:5px}.zoom-slider-fixed::-webkit-slider-thumb{width:14px;height:14px}.zoom-slider-fixed::-moz-range-thumb{width:14px;height:14px}.zoom-btn-fixed{min-width:30px;height:30px;font-size:.75rem;padding:0 .6rem}.zoom-level-fixed{font-size:.8rem;min-width:40px}.help-button{position:fixed;bottom:20px;right:20px;padding:.8rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #3b82f666;transition:all .3s;z-index:1000}.help-button:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 16px #3b82f680}.help-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.help-content{background:#fff;border-radius:12px;max-width:600px;max-height:80vh;width:90%;overflow:hidden;box-shadow:0 8px 32px #0003;animation:slideUp .3s}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.help-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #f0f0f0;background:#f8f9fa}.help-header h2{margin:0;font-size:1.5rem;color:#333}.help-close{background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:.5rem;line-height:1;transition:color .2s}.help-close:hover{color:#333}.help-body{padding:1.5rem;overflow-y:auto;max-height:calc(80vh - 80px)}.help-section{margin-bottom:1.5rem}.help-section:last-child{margin-bottom:0}.help-section h3{font-size:1.1rem;color:#3b82f6;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:2px solid #e8ecff}.help-section ul{margin:0;padding-left:1.5rem;list-style-type:disc}.help-section li{margin-bottom:.5rem;line-height:1.6;color:#555}.help-section li strong{color:#333}.help-footer{margin-top:2rem;padding-top:1.5rem;border-top:2px solid #e0e0e0;text-align:center}.help-copyright{margin:0;font-size:.9rem;color:#666;line-height:1.6;font-weight:500}.help-link{color:#3b82f6;text-decoration:none;transition:all .2s}.help-link:hover{color:#2563eb;text-decoration:underline}@media (max-width: 768px){.help-button{bottom:10px;right:10px;padding:.6rem 1.2rem;font-size:.9rem}.help-content{width:95%;max-height:85vh}.help-header{padding:1rem}.help-header h2{font-size:1.2rem}.help-body{padding:1rem}.help-section h3{font-size:1rem}.help-section li{font-size:.9rem}.help-footer{margin-top:1.5rem;padding-top:1rem}.help-copyright{font-size:.8rem}}@supports (-webkit-touch-callout: none){.color-picker-input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:50%}}@supports (-webkit-backdrop-filter: blur(1px)){.color-picker-input{-webkit-appearance:none}.color-picker-input::-webkit-color-swatch{border-radius:50%}}.board-info-content{display:flex;flex-direction:column;gap:1rem}.info-section{background:#f9f9f9;padding:1rem;border-radius:8px;border:1px solid #e0e0e0}.info-section h4{font-size:.9rem;color:#666;margin-bottom:.6rem;font-weight:600}.info-section p{font-size:.85rem;color:#333;margin:.3rem 0;line-height:1.6}.color-stats-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto}.color-stat-item{display:flex;align-items:center;gap:.8rem;padding:.5rem;background:#fff;border:1px solid #e0e0e0;border-radius:6px;transition:all .2s}.color-stat-item:hover{border-color:#2b8a3e;transform:translate(3px)}.color-stat-swatch{width:30px;height:30px;border-radius:50%;border:1px solid #d0d0d0;flex-shrink:0}.color-stat-code{font-weight:600;color:#333;font-size:.85rem;min-width:50px}.color-stat-count{color:#666;font-size:.85rem;margin-left:auto}@media (hover: none) and (pointer: coarse){.color-picker-input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:50%}}