.tool-page { padding-top: var(--space-6); padding-bottom: var(--space-12); }
#controls { margin-top: var(--space-6); }
.preview-wrapper {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-4) 0;
    min-height: 150px;
}
#previewImg {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: var(--radius);
}
#paletteDisplay {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
#paletteDisplay h4 {
    margin-bottom: var(--space-4);
    color: var(--color-text);
}
.palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 60px;
}
.palette-swatch {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
}
.palette-swatch:hover {
    transform: scale(1.1);
}
.palette-hex {
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
    transition: background 0.2s;
}
.palette-hex:hover {
    background: var(--color-primary-light);
}
.palette-item .copy-indicator {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}
.export-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.export-section h5 {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.export-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.export-output {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-2);
    position: relative;
}
.export-output pre {
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    color: var(--color-text);
}
.export-output .btn {
    margin-top: var(--space-2);
}
@media (max-width: 768px) {
    .palette-grid { justify-content: center; }
    .palette-item { min-width: 50px; }
    .palette-swatch { width: 50px; height: 50px; }
}