/* Color Scheme Generator styles */
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.color-input-group { display: flex; gap: 8px; }
.color-input-group input[type="color"] { width: 50px; height: 42px; border: none; border-radius: 8px; cursor: pointer; padding: 2px; }
.color-input-group input[type="text"] { flex: 1; }
.palette-panel { background: var(--bg-secondary, #141414); border-radius: 12px; padding: 24px; margin: 24px 0; }
.palette-panel h3 { margin-bottom: 16px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.palette-color { height: 150px; border-radius: 12px; display: flex; align-items: flex-end; cursor: pointer; transition: transform 0.15s; }
.palette-color:hover { transform: scale(1.02); }
.color-info { width: 100%; padding: 12px; background: rgba(0,0,0,0.6); border-radius: 0 0 12px 12px; backdrop-filter: blur(4px); }
.color-hex { display: block; font-family: 'SF Mono', Monaco, monospace; font-size: 14px; font-weight: 600; color: #fff; }
.color-rgb { display: block; font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 60px; }
.export-panel { display: flex; gap: 8px; }
@media (max-width: 600px) { .input-row { grid-template-columns: 1fr; } .palette-color { height: 120px; } }