.color-palette-wrapper{display:flex;flex-direction:column;gap:32px}.input-section{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}.base-color-group{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}.color-input-controls{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}.color-input-controls label{font-weight:600;font-size:.875rem;color:var(--text-secondary)}.color-input-controls input[type=color]{width:100%;height:50px;border:none;border-radius:var(--radius-md);cursor:pointer}.hex-input-group{display:flex;gap:8px;position:relative}.hex-input-group input{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:JetBrains Mono,monospace;font-size:.875rem;background:var(--bg-primary);color:var(--text-primary)}.hex-label{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--text-muted);font-weight:600}.base-color-preview{display:flex;gap:12px;align-items:center}.color-swatch.large{width:100px;height:100px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:2px solid var(--border-color)}.harmony-selector{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}.harmony-selector label{display:block;font-weight:600;margin-bottom:12px;color:var(--text-secondary);font-size:.875rem}.harmony-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.harmony-btn{padding:10px 16px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.harmony-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.harmony-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.wheel-container{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px}#color-wheel{border-radius:50%;border:2px solid var(--border-color);max-width:100%;height:auto}.wheel-legend{display:flex;gap:24px;font-size:.875rem}.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;border:2px solid #fff}.legend-dot.base{background:var(--accent-primary)}.legend-dot.harmony{background:var(--accent-secondary)}.palette-display{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}.palette-display h3,.tints-shades-container h3,.export-section h3,.contrast-checker-container h3{font-size:1.125rem;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.palette-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.palette-swatch{width:100%;height:80px;border-bottom:1px solid var(--border-color)}.palette-info{padding:12px;display:flex;flex-direction:column;gap:6px}.palette-label{font-weight:600;font-size:.875rem;color:var(--text-primary);margin:0}.palette-hex{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--accent-primary);margin:0;font-weight:500}.palette-hsl{font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--text-muted);margin:0}.copy-btn{align-self:flex-start;padding:4px 8px;font-size:.75rem;background:var(--accent-primary-light);border:none;color:var(--accent-primary);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;font-weight:500}.copy-btn:hover{background:var(--accent-primary);color:#fff}.tints-shades-container{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}#tints-shades-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.tints-shades-section h4{font-size:.95rem;font-weight:600;margin-bottom:12px;color:var(--text-primary)}.tint-shade-row{display:flex;gap:8px;overflow-x:auto}.tint-shade-item{display:flex;flex-direction:column;gap:4px;align-items:center;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-sm);padding:4px;transition:all .2s ease;flex-shrink:0}.tint-shade-item:hover{border-color:var(--accent-primary)}.tint-shade-swatch{width:50px;height:50px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.tint-shade-label{font-size:.7rem;font-weight:600;color:var(--text-secondary)}.tint-shade-item small{font-size:.65rem;color:var(--text-muted);font-family:JetBrains Mono,monospace;max-width:60px;text-align:center;word-break:break-all}.export-section{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}.export-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.export-btn{padding:12px 16px;background:var(--accent-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.875rem;transition:all .2s ease}.export-btn:hover{background:var(--accent-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.contrast-checker-container{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px}.contrast-checker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px}.contrast-select-group{display:flex;flex-direction:column;gap:6px}.contrast-select-group label{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.contrast-select-group select{padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.85rem;cursor:pointer}.contrast-result{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;transition:all .3s ease}.contrast-result.hidden{display:none}.contrast-info{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contrast-preview{position:relative}.contrast-preview-bg{height:120px;border-radius:var(--radius-sm);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center}.contrast-preview-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.25rem}.contrast-details{display:flex;flex-direction:column;justify-content:center;gap:12px}.contrast-ratio,.contrast-wcag{font-size:.95rem;font-weight:600;margin:0;color:var(--text-primary)}.contrast-wcag{padding:8px 12px;background:var(--accent-primary-light);border-radius:var(--radius-sm);color:var(--accent-primary)}@media(max-width:768px){.base-color-group{flex-direction:column;align-items:stretch}.base-color-preview{justify-content:center}.palette-grid,#tints-shades-grid,.contrast-info,.harmony-buttons{grid-template-columns:1fr}}