.image-canvas-wrapper{flex-direction:column;align-items:center;gap:0;width:100%;display:flex}.image-canvas{border:2px solid var(--border-color);background:var(--bg-secondary);touch-action:none;max-width:100%;height:auto;box-shadow:var(--tools-shadow-md);border-radius:8px;transition:box-shadow .3s;display:block}.image-canvas:hover{box-shadow:var(--tools-shadow-lg)}.image-canvas:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.canvas-info{background:var(--bg-secondary);color:var(--text-secondary);border-radius:8px;justify-content:center;align-items:center;gap:12px;padding:6px 12px;font-size:.75rem;display:flex}.canvas-info-item{align-items:center;gap:4px;display:flex}.canvas-info-label{font-weight:600}.canvas-info-value{color:var(--accent-primary);font-family:Monaco,Courier New,monospace}@media (max-width:768px){.image-canvas-wrapper{width:100%}.image-canvas{border-width:1px}.canvas-help-text{padding:6px 10px;font-size:.75rem}.canvas-info{gap:12px;padding:6px 12px;font-size:.75rem}}@media (max-width:480px){.canvas-help-text{word-break:break-word}.canvas-info{flex-direction:column;gap:6px}}@media (hover:none) and (pointer:coarse){.image-canvas{cursor:pointer}.canvas-help-text{display:none}}
.color-display{width:100%}.color-formats-grid{flex-direction:column;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;display:flex}.color-format-item{background:var(--bg-secondary);transition:var(--tools-transition);padding:4px}.color-format-item:hover{border-color:var(--accent-primary);background:var(--card-bg);transform:translateY(-2px)}.format-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:4px;font-size:.65rem;font-weight:700}.format-value-wrapper{align-items:center;gap:4px;display:flex;position:relative}.format-value{color:var(--text-primary);word-break:break-all;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;flex:1;padding:4px 6px;font-family:Monaco,Courier New,monospace;font-size:.7rem}.copy-button{cursor:pointer;color:var(--text-tertiary);transition:var(--tools-transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;display:flex}.copy-button:hover{color:var(--accent-primary);transform:scale(1.15)}@media (max-width:640px){.color-formats-grid{grid-template-columns:1fr}.format-value{font-size:.7rem}}
.color-swatch-container{flex-direction:column;align-items:center;gap:8px;display:flex}.color-swatch{aspect-ratio:4/3;border:2px solid var(--border-color);width:100%;max-height:120px;box-shadow:var(--tools-shadow-lg);transition:var(--tools-transition);cursor:pointer;border-radius:12px}.color-swatch:hover{box-shadow:var(--tools-shadow-xl);transform:scale(1.02)}.swatch-info{text-align:center;flex-direction:column;gap:2px;width:100%;display:flex}.swatch-label{color:var(--text-primary);font-size:.75rem;font-weight:600}.swatch-hex{color:var(--accent-primary);font-family:Monaco,Courier New,monospace;font-size:.9rem;font-weight:700}.swatch-coords{color:var(--text-tertiary);font-family:Monaco,Courier New,monospace;font-size:.75rem}@media (max-width:640px){.color-swatch{max-height:100px}.swatch-hex{font-size:.8rem}}
.palette-swatches-container{width:100%}.palette-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;display:flex}.palette-title{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.palette-download-btn{cursor:pointer;color:var(--text-secondary);transition:var(--tools-transition);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;display:flex}.palette-download-btn:hover{color:var(--accent-primary);background:var(--bg-secondary);transform:scale(1.1)}.palette-loading{color:var(--text-secondary);justify-content:center;align-items:center;padding:20px 10px;font-size:.85rem;display:flex}.palette-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;display:grid}.palette-swatch{background:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;transition:var(--tools-transition);border-radius:8px;flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex}.palette-swatch:hover{border-color:var(--accent-primary);background:var(--card-bg);box-shadow:var(--tools-shadow-md);transform:translateY(-4px)}.palette-swatch:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.palette-color{border:1px solid var(--border-color);width:100%;height:45px;box-shadow:var(--tools-shadow-sm);transition:var(--tools-transition);border-radius:6px}.palette-swatch:hover .palette-color{transform:scale(1.05)}.palette-info{text-align:center;width:100%}.palette-hex{color:var(--text-primary);word-break:break-all;font-family:Monaco,Courier New,monospace;font-size:.75rem;font-weight:600}.palette-percentage{color:var(--text-tertiary);margin-top:2px;font-size:.7rem}.palette-copy-btn{cursor:pointer;color:var(--text-tertiary);transition:var(--tools-transition);opacity:0;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.palette-swatch:hover .palette-copy-btn{opacity:1;color:var(--accent-primary)}.palette-copy-btn:hover{transform:scale(1.2)}@media (max-width:768px){.palette-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.palette-color{height:50px}}@media (max-width:480px){.palette-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}.palette-swatch{padding:8px}.palette-color{height:40px}}
.recent-colors-container{width:100%}.recent-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;display:flex}.recent-title{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.recent-clear-btn{cursor:pointer;color:var(--text-secondary);transition:var(--tools-transition);background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:.85rem;font-weight:600}.recent-clear-btn:hover{color:var(--error-primary,#dc2626);background:#dc26261a}.recent-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;display:grid}.recent-color{aspect-ratio:1;border:2px solid var(--border-color);cursor:pointer;width:100%;transition:var(--tools-transition);border-radius:8px;justify-content:center;align-items:center;padding:0;font-size:0;display:flex}.recent-color:hover{border-color:var(--accent-primary);box-shadow:var(--tools-shadow-md);transform:scale(1.1)rotate(5deg)}.recent-color:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}@media (max-width:640px){.recent-grid{grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:6px}}
.image-color-picker-shell{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start;gap:14px;display:grid}.image-color-picker-stage-panel,.image-color-picker-controls{border:1px solid var(--border-color);background:var(--bg-primary);border-radius:12px;padding:12px}.image-color-picker-stage-panel{flex-direction:column;justify-content:center;display:flex}.image-color-picker-stage-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100%;display:flex}.image-color-picker-stage{border:1px solid var(--border-color);background:var(--bg-secondary);touch-action:pan-x pan-y;border-radius:10px;max-height:calc(100vh - 250px);position:relative;overflow:auto}.image-color-picker-controls{flex-direction:column;gap:14px;display:flex}.color-picker-control-group{background:var(--card-bg);border-radius:10px;flex-direction:column;padding:16px;display:flex;box-shadow:0 2px 8px #0003}@media (max-width:900px){.image-color-picker-shell{grid-template-columns:1fr}}.canvas-controls-toolbar{background:var(--card-bg);border:1px solid var(--border-color);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:8px 12px;display:flex}.toolbar-group{align-items:center;gap:6px;display:flex}.toolbar-icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.toolbar-icon-btn:hover:not(:disabled){background:var(--bg-secondary);color:var(--text-primary)}.toolbar-icon-btn.danger-hover:hover{color:#ef4444;background:#ef44441a}.toolbar-icon-btn:disabled{opacity:.5;cursor:not-allowed}.toolbar-text-value{color:var(--text-primary);text-align:center;min-width:44px;font-size:.8rem;font-weight:600}.toolbar-divider{background-color:var(--border-color);width:1px;height:20px;margin:0 4px}.canvas-instruction-badge{color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:8px;padding:4px 12px;font-size:.75rem;font-weight:500;display:flex}.pulsing-dot{background-color:var(--accent-primary);border-radius:50%;width:6px;height:6px;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.spinning{animation:1s linear infinite spin}.secondary-button{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:var(--tools-transition);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;display:flex}.secondary-button:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px)}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.color-info-card{position:relative}.color-info-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;display:flex}.color-info-title{color:var(--text-primary);margin:0;font-size:1.1rem;font-weight:700}.favorite-button{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.favorite-button:hover{color:var(--accent-primary);transform:scale(1.2)}.color-content{flex-direction:column;align-items:stretch;gap:16px;display:flex}.color-actions,.action-buttons-group{flex-direction:column;gap:8px;display:flex}@media (max-width:768px){.canvas-controls{flex-direction:column;align-items:stretch}.zoom-controls{justify-content:space-around}}.favorites-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.favorites-title{color:var(--text-primary);align-items:center;gap:6px;margin:0;font-size:.95rem;font-weight:700;display:flex}.toggle-button{color:var(--text-secondary);cursor:pointer;width:24px;height:24px;transition:var(--tools-transition);background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:1.2rem;display:flex}.toggle-button:hover{color:var(--text-primary)}.favorites-grid{grid-template-columns:1fr;gap:8px;display:grid}.favorite-item{background:var(--bg-secondary);border:1px solid var(--border-color);transition:var(--tools-transition);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;display:flex}.favorite-item:hover{border-color:var(--accent-primary);background:var(--card-bg);transform:translate(4px)}.favorite-color{border:2px solid var(--border-color);cursor:pointer;width:35px;height:35px;transition:var(--tools-transition);border-radius:6px;flex-shrink:0}.favorite-color:hover{border-color:var(--accent-primary);transform:scale(1.1)}.favorite-info{flex:1;min-width:0}.favorite-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;overflow:hidden}.favorite-hex{color:var(--text-tertiary);font-family:Monaco,Courier New,monospace;font-size:.7rem}.remove-favorite-btn{cursor:pointer;color:var(--text-tertiary);transition:var(--tools-transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:flex}.remove-favorite-btn:hover{color:var(--error-primary,#dc2626);transform:scale(1.15)}@media (max-width:640px){.favorite-item{flex-direction:column;align-items:flex-start}.favorite-color{width:50px;height:50px}}