.palette-name { font-size: 1.3em; font-weight: 600; color: #f0f6fc; margin-bottom: 4px; }
.palette-description { color: #88aacc; font-size: 0.9em; margin-bottom: 12px; line-height: 1.4; }
.palette-strip { display: flex; border-radius: 10px; overflow: hidden; height: 48px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.palette-strip-swatch { flex: 1; transition: flex 0.2s ease; cursor: pointer; }
.palette-strip-swatch:hover { flex: 1.5; }
.palette-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.palette-color-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.palette-color-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.palette-color-swatch { height: 60px; width: 100%; }
.palette-color-info { padding: 8px 10px; }
.palette-color-name { display: block; font-size: 0.85em; color: #a8c4d8; margin-bottom: 4px; font-weight: 500; }
.palette-hex-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.palette-hex { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85em; color: #f0f6fc; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; }
.palette-copy-btn { font-size: 0.7em; padding: 2px 8px; background: rgba(106,252,255,0.1); color: #6afcff; border: 1px solid rgba(106,252,255,0.2); border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.palette-copy-btn:hover { background: rgba(106,252,255,0.2); }
.palette-rgb { font-size: 0.75em; color: #6b7280; display: block; }
@media (max-width: 768px) { .palette-colors { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .palette-strip { height: 36px; } .palette-color-swatch { height: 50px; } }