.main-palette{max-width:800px;margin:0 auto}.upload-section{margin-bottom:var(--spacing-xl)}.drop-zone{border:3px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xxl);text-align:center;cursor:pointer;transition:all .3s;background:var(--bg-card)}.drop-zone.dragover,.drop-zone:hover{border-color:var(--color-primary);background:var(--color-primary-muted)}.drop-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.drop-text{font-size:1.2rem;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-xs)}.drop-subtext{color:var(--color-text-muted);font-size:.9rem}.preview-section{margin-bottom:var(--spacing-xl)}.preview-container{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg);display:flex;justify-content:center;margin-bottom:var(--spacing-lg);border:1px solid var(--color-border)}.preview-container img{max-width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-sm)}.extract-options{display:flex;gap:var(--spacing-md);align-items:flex-end;justify-content:center;flex-wrap:wrap}.palette-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:1px solid var(--color-border)}.palette-section h2{text-align:center;margin-bottom:var(--spacing-lg);color:var(--color-text)}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.color-card{aspect-ratio:1;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;cursor:pointer;transition:transform .2s;position:relative}.color-card:hover{transform:scale(1.05)}.color-info{background:rgba(0,0,0,.7);padding:var(--spacing-xs) var(--spacing-sm);text-align:center}.color-hex{font-family:monospace;font-size:.8rem;color:#fff;font-weight:600}.color-copied{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;opacity:0;transition:opacity .2s}.color-card.copied .color-copied{opacity:1}.export-section{background:var(--bg-body);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.export-section h3{margin-bottom:var(--spacing-md);color:var(--color-text)}.export-options{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.export-options button{font-size:.85rem}#export-output{width:100%;min-height:100px;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:monospace;font-size:.85rem;background:var(--bg-card);color:var(--color-text);resize:vertical}.actions{display:flex;justify-content:center}.history-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--color-border)}.history-section h3{margin-bottom:var(--spacing-md);color:var(--color-text)}.history-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.history-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-body);border-radius:var(--radius-md)}.history-colors{display:flex;gap:2px}.history-color{width:24px;height:24px;border-radius:var(--radius-xs)}.history-actions{margin-left:auto;display:flex;gap:var(--spacing-xs)}.history-actions button{padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem}@media (max-width:500px){.palette-grid{grid-template-columns:repeat(3,1fr)}.export-options{flex-direction:column}}