.color-preview{width:100%;height:150px;border-radius:var(--border-radius-lg);margin-bottom:24px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.preview-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent, rgba(0,0,0,0.7));padding:20px;text-align:center}.preview-overlay span{color:white;font-size:1.2rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,0.3);background:rgba(0,0,0,0.5);padding:4px 12px;border-radius:20px}.color-picker-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.color-picker-row label{font-weight:500;color:var(--gray-700)}#colorPicker{width:60px;height:40px;border:1px solid var(--gray-300);border-radius:var(--border-radius-sm);cursor:pointer}.format-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.format-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.format-row label{width:60px;font-weight:600;color:var(--gray-700);font-family:monospace}.format-row .input-field{flex:1;min-width:200px}.copy-format{background:transparent;border:none;color:var(--gray-500);cursor:pointer;padding:8px;border-radius:var(--border-radius-sm);transition:var(--transition)}.copy-format:hover{background:var(--gray-100);color:var(--primary-color)}.color-schemes{margin-top:24px}.scheme-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.scheme-btn{background:var(--gray-100);border:1px solid var(--gray-300);padding:8px 20px;border-radius:40px;cursor:pointer;transition:var(--transition);font-size:0.85rem}.scheme-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:white}.scheme-colors{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding:16px;background:var(--gray-50);border-radius:var(--border-radius-md);min-height:100px}.scheme-color-item{width:80px;text-align:center;cursor:pointer;transition:transform 0.2s}.scheme-color-item:hover{transform:scale(1.05)}.scheme-color-box{width:60px;height:60px;border-radius:var(--border-radius-md);margin:0 auto 8px;border:2px solid white;box-shadow:var(--shadow-sm)}.scheme-color-value{font-size:0.7rem;font-family:monospace;color:var(--gray-600)}.color-history{margin-top:32px}.history-colors{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;min-height:60px}.history-color-item{width:50px;height:50px;border-radius:var(--border-radius-md);cursor:pointer;transition:transform 0.2s;border:2px solid white;box-shadow:var(--shadow-sm)}.history-color-item:hover{transform:scale(1.1)}@media (max-width:768px){.format-row{flex-direction:column;align-items:flex-start}.format-row label{width:auto}.format-row .input-field{width:100%}.scheme-color-item{width:60px}.scheme-color-box{width:45px;height:45px}}