.color-file-info{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--theme-alpha-04);border:1px solid var(--theme-alpha-15);border-radius:var(--radius-md);display:flex}.color-file-info__text{flex-direction:column;flex:1;gap:2px;display:flex;overflow:hidden}.color-file-info__name{color:var(--color-ink-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem;font-weight:500;overflow:hidden}.color-file-info__size{color:var(--color-ink-faint);font-size:.8125rem}.color-workspace{gap:var(--space-4);flex-direction:column;display:flex}.color-layout{gap:var(--space-5);grid-template-columns:1fr 340px;display:grid}@media (width<=800px){.color-layout{grid-template-columns:1fr}}.color-preview-area{flex-direction:column;flex:1;display:flex}.color-preview-card{gap:var(--space-2);padding:var(--space-4);border:1.5px solid var(--color-border-hairline);border-radius:var(--radius-lg);background:var(--color-canvas-soft);flex-direction:column;flex:1;display:flex}.color-preview-header{justify-content:space-between;align-items:center;display:flex}.color-preview-label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink-muted);font-size:.8125rem;font-weight:600}.color-preview-img-wrap{border:1px solid var(--color-border-hairline);border-radius:var(--radius-md);cursor:crosshair;background:repeating-conic-gradient(#e5e5e5 0% 25%,#fff 0% 50%) 0 0/12px 12px;flex:1;justify-content:center;align-items:center;min-height:400px;display:flex;position:relative;overflow:hidden}.color-preview-canvas{object-fit:contain;max-width:100%;max-height:100%}.color-magnifier{pointer-events:none;z-index:10;background:#fff;border:2px solid #fff;border-radius:50%;width:60px;height:60px;display:none;position:absolute;overflow:hidden;box-shadow:0 4px 12px #0000004d}.color-magnifier-crosshair{background:0 0;border:1px solid red;border-radius:50%;width:4px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-panel{gap:var(--space-4);flex-direction:column;display:flex}.color-overline{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ink-muted);margin:0;font-size:.8125rem;font-weight:600}.color-current{background:var(--color-canvas-soft);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.color-current-display{gap:var(--space-4);align-items:flex-start;display:flex}.color-swatch-large{border-radius:var(--radius-md);border:1.5px solid var(--color-border-hairline);background:#000;width:64px;height:64px;box-shadow:0 2px 8px #0000000d}.color-codes{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.color-code-row{align-items:center;gap:var(--space-2);background:var(--color-canvas-base);border:1.5px solid var(--color-border-hairline);border-radius:var(--radius-sm);padding:4px 8px;display:flex}.color-code-label{color:var(--color-ink-faint);width:28px;font-size:.6875rem;font-weight:700}.color-code-val{color:var(--color-ink-primary);user-select:all;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem}.copy-btn{color:var(--color-ink-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.copy-btn:hover{color:var(--color-ink-primary);background:#0000000d}.color-palette-section{background:var(--color-canvas-soft);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-4);flex-direction:column;flex:1;display:flex}.color-palette-header{justify-content:space-between;align-items:center;display:flex}.color-palette-grid{gap:var(--space-2);flex-wrap:wrap;display:flex}.palette-swatch-wrap{cursor:pointer;flex-direction:column;align-items:center;gap:4px;display:flex}.palette-swatch{border-radius:var(--radius-sm);border:1px solid var(--color-border-hairline);width:40px;height:40px;transition:transform var(--duration-fast)}.palette-swatch:hover{transform:scale(1.1);box-shadow:0 4px 12px #0000001a}.palette-label{color:var(--color-ink-muted);text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.625rem}