.color-preview-container{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.color-preview-box{width:200px;height:200px;border-radius:12px;border:3px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .3s ease}.color-preview-box:hover{transform:scale(1.05)}.color-preview-info{flex:1}.color-preview-label{font-size:.9rem;color:#a0aec0;margin-bottom:.5rem}.color-preview-value{font-size:2rem;font-weight:700;color:#fff;font-family:Courier New,monospace}.color-input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.color-input-group{display:flex;flex-direction:column;gap:.5rem}.color-input-group label{font-size:.9rem;color:#cbd5e0;font-weight:500}.rgb-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.rgb-inputs input{text-align:center}.color-picker{width:100%;height:60px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background:transparent;cursor:pointer;transition:all .3s ease}.color-picker:hover{border-color:#667eea;transform:scale(1.02)}.output-grid{display:grid;gap:1.5rem}.output-item{display:flex;flex-direction:column;gap:.5rem}.output-item label{font-size:.9rem;color:#cbd5e0;font-weight:500}.output-value{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;background:rgba(0,0,0,.3);border-radius:8px;border:1px solid rgba(255,255,255,.1);flex-wrap:wrap}.output-value code{font-family:Courier New,monospace;font-size:1rem;color:#10b981;flex:1}.color-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.color-history-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:rgba(255,255,255,.05);border-radius:8px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .3s ease}.color-history-item:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.color-history-preview{width:80px;height:80px;border-radius:8px;border:2px solid rgba(255,255,255,.2)}.color-history-label{font-size:.85rem;font-family:Courier New,monospace;color:#cbd5e0;text-align:center}@media (max-width:768px){.color-preview-container{flex-direction:column;align-items:flex-start}.color-preview-box{width:100%;max-width:200px}.color-input-grid{grid-template-columns:1fr}.output-value{flex-direction:column;align-items:flex-start}.color-history-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}