.color-wheel-picker{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}.color-wheel-ring{width:220px;height:220px;box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent), 0 12px 32px #0000002e;cursor:crosshair;touch-action:none;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;position:relative}.color-wheel-ring-inner{background:var(--bg-primary);box-shadow:inset 0 0 0 1px var(--border);pointer-events:none;border-radius:50%;position:absolute;inset:28px}.color-wheel-center{pointer-events:none;border:3px solid #ffffffd9;border-radius:50%;position:absolute;inset:52px;box-shadow:0 4px 16px #0003,inset 0 0 0 1px #00000014}.color-wheel-hue-thumb{transform-origin:50%;pointer-events:none;border:3px solid #fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #00000059}.color-wheel-sv{cursor:crosshair;touch-action:none;width:min(100%,280px);height:160px;box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent), 0 8px 20px #0000001f;border-radius:14px;position:relative;overflow:hidden}.color-wheel-sv-white{pointer-events:none;background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.color-wheel-sv-black{pointer-events:none;background:linear-gradient(#0000,#000);position:absolute;inset:0}.color-wheel-sv-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;position:absolute;box-shadow:0 0 0 1px #0006}.color-tool{flex-direction:column;gap:16px;display:flex}.color-tabs{flex-wrap:wrap;gap:6px;display:flex}.color-tabs button{border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-size:.82rem;font-weight:500;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.color-tabs button.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);font-weight:600}.color-hero-swatch{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;align-items:center;gap:16px;padding:16px 18px;display:flex}.color-hero-swatch-circle{border:3px solid #ffffffe6;border-radius:50%;flex-shrink:0;width:72px;height:72px;box-shadow:0 8px 24px #0000002e,inset 0 0 0 1px #0000000f}.color-hero-swatch-circle--lg{width:120px;height:120px;margin:0 auto 16px}.color-hero-swatch-info{flex:1;min-width:0}.color-hero-sub{color:var(--text-muted);margin:4px 0 0;font-family:ui-monospace,monospace;font-size:.82rem}.color-native-picker{color:var(--text-muted);cursor:pointer;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;font-weight:600;display:flex}.color-native-picker input[type=color]{cursor:pointer;border:none;border-radius:50%;width:48px;height:48px;padding:0;overflow:hidden}.color-hex-input{border:1px solid var(--border);background:var(--bg-primary);width:100%;max-width:160px;color:var(--text-primary);border-radius:10px;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:600}.color-workspace{grid-template-columns:minmax(280px,360px) 1fr;align-items:start;gap:16px;display:grid}.color-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:18px}.color-panel h3{margin:0 0 8px;font-size:.95rem;font-weight:700}.color-panel--picker{text-align:center;flex-direction:column;align-items:center;display:flex}.color-panel--centered{justify-content:center;display:flex}.color-eyedropper-card{text-align:center;max-width:400px;padding:24px}.color-hint{color:var(--text-muted);margin:0 0 12px;font-size:.88rem;line-height:1.5}.color-formats{background:var(--bg-primary);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;overflow:hidden}.color-formats--compact{margin-top:14px}.color-format-row{border-bottom:1px solid var(--border);grid-template-columns:64px 1fr auto;align-items:center;gap:10px;padding:9px 12px;display:grid}.color-format-row:last-child{border-bottom:none}.color-format-label{text-transform:uppercase;letter-spacing:.04em;color:var(--accent);font-size:.68rem;font-weight:700}.color-format-row code{word-break:break-all;color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}.color-code-section{margin-top:4px}.color-code-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.color-code-head h3{align-items:center;gap:8px;margin:0;font-size:.9rem;display:flex}.color-code-head select{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);border-radius:8px;min-width:160px;padding:8px 12px;font-size:.82rem}.color-code-block{background:var(--bg-primary);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;padding:14px;display:flex}.color-code-block pre{white-space:pre-wrap;word-break:break-word;color:var(--text-primary);max-height:220px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.55;overflow:auto}.color-eyedropper-btn{padding:12px 20px;font-size:1rem}.color-error{color:var(--error);margin-top:10px;font-size:.85rem}.color-image-workspace{grid-template-columns:1fr minmax(240px,300px);align-items:start;gap:16px;display:grid}.color-dropzone{border:2px dashed color-mix(in srgb, var(--accent) 35%, var(--border));background:color-mix(in srgb, var(--accent) 4%, var(--bg-primary));min-height:320px;color:var(--text-secondary);cursor:pointer;text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:32px 24px;transition:border-color .15s,background .15s;display:flex}.color-dropzone:hover,.color-dropzone.is-dragover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--bg-primary))}.color-dropzone-title{color:var(--text-primary);margin:0;font-size:1.05rem;font-weight:700}.color-image-toolbar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;display:flex}.color-image-name{min-width:0;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.82rem;font-weight:600;overflow:hidden}.color-image-toolbar-actions{align-items:center;gap:6px;display:flex}.color-icon-btn{border:1px solid var(--border);background:var(--bg-primary);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.color-icon-btn:hover{border-color:var(--accent);color:var(--accent)}.color-zoom-label{color:var(--text-muted);text-align:center;min-width:42px;font-size:.75rem;font-weight:600}.color-hidden-img{display:none}.color-canvas-wrap{border:1px solid var(--border);background:repeating-conic-gradient(#80808020 0% 25%,#0000 0% 50%) 50%/16px 16px;border-radius:12px;max-height:min(62vh,520px);overflow:auto}.color-canvas{width:calc(100% * var(--color-img-zoom,1));cursor:crosshair;max-width:none;display:block}.color-picked-preview{align-items:center;gap:14px;margin-bottom:8px;display:flex}.color-picked-hex{font-family:ui-monospace,monospace;font-size:1rem;font-weight:700;display:block}.color-pixel-meta{color:var(--text-muted);margin:4px 0 0;font-size:.75rem}.color-palette-title{margin:18px 0 10px;font-size:.85rem;font-weight:700}.color-palette{flex-wrap:wrap;gap:10px;display:flex}.color-palette--round .color-palette-swatch{border-radius:50%;width:44px;height:44px}.color-palette-swatch{cursor:pointer;border:3px solid #ffffffd9;border-radius:50%;width:36px;height:36px;transition:transform .12s;box-shadow:0 2px 8px #00000026}.color-palette-swatch:hover{transform:scale(1.08)}.color-palette-swatch.active{box-shadow:0 0 0 2px var(--accent), 0 4px 12px #0003}.color-gradient-lab h3{margin:0 0 6px;font-size:1rem}.color-gradient-preview{border:1px solid var(--border);border-radius:14px;height:140px;margin:12px 0;box-shadow:inset 0 0 0 1px #ffffff0f}.color-gradient-controls{flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:12px;display:flex}.color-gradient-controls label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:.8rem;display:flex}.color-angle-label{flex:1;min-width:180px}.color-angle-label input[type=range]{width:100%;accent-color:var(--accent)}.color-gradient-code{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;display:flex}.color-gradient-code code{word-break:break-all;flex:1;font-family:ui-monospace,monospace;font-size:.82rem}.file-input-hidden{clip:rect(0, 0, 0, 0)!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}@media (max-width:900px){.color-workspace,.color-image-workspace{grid-template-columns:1fr}.color-hero-swatch{flex-wrap:wrap}}@media (max-width:520px){.color-code-head{flex-direction:column;align-items:stretch}.color-code-head select{width:100%}}