.app-container{min-height:calc(100vh - 200px);padding:2rem 0}.app-header .app-icon{font-size:4rem;display:block;margin-bottom:1rem}.control-group{display:flex;flex-direction:column}.control-group label{font-weight:500;margin-bottom:.5rem;color:var(--text-primary)}.color-input,input[type=color]{width:100%;height:3rem}.color-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.5rem;margin-bottom:1rem}.color-swatch{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;position:relative;transition:transform var(--transition-fast);border:2px solid transparent}.color-swatch:hover{transform:scale(1.05);border-color:var(--text-primary)}.color-swatch .color-code{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.8);color:#fff;padding:.25rem;font-size:.75rem;border-radius:0 0 var(--radius-md) var(--radius-md);text-align:center}.saved-palettes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.saved-palette{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem;transition:all var(--transition-fast)}.saved-palette:hover{box-shadow:var(--shadow-medium)}.saved-palette-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;margin-bottom:.5rem}.saved-palette-color{aspect-ratio:1;border-radius:.25rem}@media (max-width:768px){.grid-2{grid-template-columns:1fr}.color-palette{grid-template-columns:repeat(3,1fr)}}