*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;padding:20px;line-height:1.6}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden}.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:30px;text-align:center}.header h1{font-size:28px;margin-bottom:10px}.header p{opacity:.9;font-size:16px}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:0}.controls-section{padding:40px;border-right:1px solid #e5e7eb}.preview-section{padding:40px;background:#fafafa}.control-group{margin-bottom:35px}.control-group label{display:block;font-weight:600;font-size:16px;margin-bottom:12px;color:#1f2937}.lrv-slider-container{position:relative;padding:20px 0}.lrv-slider{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#000,#fff);outline:none;-webkit-appearance:none}.lrv-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#667eea;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}.lrv-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#667eea;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}.lrv-value{display:inline-block;background:#667eea;color:#fff;padding:8px 16px;border-radius:6px;font-weight:600;font-size:18px;margin-top:10px}.lrv-context{margin-top:10px;padding:12px;background:#f3f4f6;border-radius:6px;font-size:14px;color:#4b5563}.undertone-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.undertone-option{padding:16px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all 0.2s;text-align:center}.undertone-option:hover{border-color:#667eea;background:#f9fafb}.undertone-option.selected{border-color:#667eea;background:#eef2ff;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.undertone-name{font-weight:600;margin-bottom:4px;color:#1f2937}.undertone-desc{font-size:12px;color:#6b7280}.color-preview{width:100%;height:250px;border-radius:12px;margin-bottom:25px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:all 0.3s ease}.lighting-toggle{display:flex;gap:10px;margin-bottom:25px;background:#fff;padding:8px;border-radius:8px;border:1px solid #e5e7eb}.lighting-btn{flex:1;padding:10px;border:none;background:#f3f4f6;color:#1f2937;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s}.lighting-btn:hover{background:#e5e7eb}.lighting-btn.active{background:#667eea;color:#fff}.verdict-card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;border-left:4px solid #667eea}.verdict-section{margin-bottom:20px}.verdict-section:last-child{margin-bottom:0}.verdict-title{font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;font-size:15px}.verdict-title.good{color:#059669}.verdict-title.risky{color:#d97706}.verdict-title.avoid{color:#dc2626}.verdict-list{list-style:none;padding-left:28px}.verdict-list li{margin-bottom:6px;font-size:14px;color:#4b5563}.pairing-section{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px}.pairing-title{font-weight:600;margin-bottom:15px;font-size:16px;color:#1f2937}.pairing-grid{display:grid;gap:10px}.pairing-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#f9fafb;border-radius:6px;font-size:14px;gap:12px}.pairing-item-name{flex:1;min-width:0}.pairing-status{font-weight:600;font-size:13px;white-space:nowrap;flex-shrink:0}.pairing-status.works{color:#059669}.pairing-status.testing{color:#d97706}.pairing-status.clash{color:#dc2626}.danger-alert{background:#fef2f2;border:2px solid #fecaca;border-radius:8px;padding:16px;margin-bottom:20px}.danger-alert-title{font-weight:700;color:#dc2626;margin-bottom:8px;font-size:15px}.danger-alert-content{color:#991b1b;font-size:14px;line-height:1.5}@media (max-width:768px){.main-content{grid-template-columns:1fr}.controls-section{border-right:none;border-bottom:1px solid #e5e7eb}.undertone-grid{grid-template-columns:1fr}}.rec-option{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#fff;border-radius:8px;border:2px solid #e5e7eb;transition:all 0.2s;gap:12px;margin-bottom:10px}.rec-option-info{flex:1;min-width:0}.rec-option.best{background:#ecfdf5;border-color:#059669;box-shadow:0 1px 3px rgba(5,150,105,.1)}.rec-option.good{background:#eff6ff;border-color:#3b82f6;box-shadow:0 1px 3px rgba(59,130,246,.1)}.rec-option.alternative{background:#fefce8;border-color:#eab308;box-shadow:0 1px 3px rgba(234,179,8,.1)}.rec-option-name{font-weight:600;font-size:14px;color:#1f2937;margin-bottom:2px}.rec-option-desc{font-size:13px;color:#6b7280;line-height:1.4}.rec-badge{font-size:10px;font-weight:700;padding:6px 10px;border-radius:5px;white-space:nowrap;flex-shrink:0;letter-spacing:.5px}.rec-badge.best{background:#059669;color:#fff}.rec-badge.good{background:#3b82f6;color:#fff}.rec-badge.alt{background:#eab308;color:#fff}.rec-why{font-size:13px;color:#374151;padding:14px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;margin-top:8px;line-height:1.6}.rec-why strong{color:#1f2937;font-weight:600}