.color-selectors{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-bottom:32px}.color-card{background:white;border-radius:20px;padding:20px;border:1px solid var(--gray-200);transition:all 0.3s}.color-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}.color-preview{width:100%;height:120px;border-radius:16px;margin-bottom:16px;border:2px solid white;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.color-controls label{font-weight:600;margin-bottom:12px;display:block;color:var(--gray-700)}.color-input-group{display:flex;gap:12px;margin-bottom:12px}.color-picker{width:50px;height:40px;border:1px solid var(--gray-300);border-radius:8px;cursor:pointer}.color-hex{flex:1;padding:0 12px;border:1px solid var(--gray-300);border-radius:8px;font-family:monospace;font-size:14px}.color-values{display:flex;flex-direction:column;gap:6px;font-size:0.75rem;color:var(--gray-500)}.mix-icon{width:50px;height:50px;background:linear-gradient(135deg, #e0e7ff, #f0f4ff);border-radius:25px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--primary-color)}.mix-ratio{background:var(--gray-50);border-radius:20px;padding:20px;margin-bottom:32px}.ratio-label{display:flex;justify-content:space-between;margin-bottom:12px;font-size:0.85rem;color:var(--gray-600)}.ratio-value{font-weight:700;color:var(--primary-color);font-size:1rem}.ratio-slider{margin-bottom:16px}.ratio-slider input{width:100%;height:4px;-webkit-appearance:none;background:linear-gradient(to right, #3b82f6, #ef4444);border-radius:2px;outline:none}.ratio-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:white;border:2px solid var(--primary-color);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.2)}.ratio-buttons{display:flex;gap:12px;justify-content:center}.ratio-btn{background:white;border:1px solid var(--gray-300);padding:6px 16px;border-radius:30px;font-size:0.8rem;cursor:pointer;transition:all 0.2s}.ratio-btn:hover{background:var(--primary-color);color:white;border-color:var(--primary-color)}.result-section{background:white;border-radius:20px;border:1px solid var(--gray-200);overflow:hidden;margin-bottom:32px}.result-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}.result-header h3{font-size:1rem;display:flex;align-items:center;gap:8px}.result-display{display:flex;padding:20px;gap:24px;flex-wrap:wrap}.result-color{width:150px;height:150px;border-radius:20px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.result-info{flex:1;display:flex;flex-direction:column;gap:12px}.result-hex-group,.result-rgb-group,.result-hsl-group{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--gray-50);border-radius:12px}.result-hex-group label,.result-rgb-group label,.result-hsl-group label{font-weight:600;width:45px;color:var(--gray-600)}.result-code{font-family:'Fira Code',monospace;font-size:0.9rem;color:var(--primary-color)}.gradient-section{background:var(--gray-50);border-radius:20px;padding:20px;margin-bottom:32px}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600}.gradient-bar{width:100%;height:40px;border-radius:12px;margin-bottom:12px}.gradient-stops{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--gray-500)}.color-schemes{background:var(--gray-50);border-radius:20px;padding:20px;margin-bottom:32px}.schemes-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600}.schemes-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}.scheme-card{background:white;border-radius:16px;padding:12px;text-align:center;cursor:pointer;transition:all 0.2s}.scheme-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.scheme-colors{display:flex;gap:4px;margin-bottom:8px}.scheme-color{width:40px;height:40px;border-radius:8px}.scheme-name{font-size:0.7rem;color:var(--gray-600)}.color-theory{background:linear-gradient(135deg, #667eea 0, #764ba2 100%);border-radius:20px;padding:20px;color:white}.theory-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600}.theory-content{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}.theory-item{background:rgba(255,255,255,0.15);border-radius:12px;padding:12px;backdrop-filter:blur(10px)}.theory-title{font-weight:600;display:block;margin-bottom:6px;font-size:0.85rem}.theory-item p{font-size:0.7rem;opacity:0.9}@media (max-width:900px){.color-selectors{grid-template-columns:1fr}.mix-icon{display:none}.schemes-grid{grid-template-columns:repeat(2, 1fr)}.theory-content{grid-template-columns:repeat(2, 1fr)}.result-display{flex-direction:column;align-items:center}.result-info{width:100%}}