.color-picker-section{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding:1.5rem;background-color:#f9f9f9;border-radius:8px;flex-wrap:wrap}.color-picker-section label{margin-bottom:0;font-weight:500}#colorInput{width:60px;height:60px;border:2px solid var(--border-color);border-radius:4px;cursor:pointer}.color-preview{width:100px;height:60px;border-radius:4px;border:2px solid var(--border-color);box-shadow:var(--shadow);flex:1;min-width:100px}.color-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.format-group{display:flex;flex-direction:column;gap:0.5rem}.format-group label{font-weight:500;margin-bottom:0}.color-format-input{padding:0.75rem;border:1px solid var(--border-color);border-radius:4px;font-family:'Courier New',monospace;font-size:0.9rem}.format-group .btn{width:auto;padding:0.5rem 1rem}@media (max-width:768px){.color-picker-section{flex-direction:column;align-items:stretch}.color-picker-section label{width:100%}#colorInput{width:100%;height:80px}.color-preview{width:100%;min-width:auto}.color-formats{grid-template-columns:1fr}.format-group .btn{width:100%}}@media (max-width:480px){.color-picker-section{padding:1rem;gap:0.75rem}#colorInput{height:70px}.color-preview{height:70px}.format-group label{font-size:0.9rem}.color-format-input{font-size:0.85rem}}