.sunscreen-skin-type-selector{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.sunscreen-skin-type-option{flex:1 1 calc(33.333% - 10px);min-width:100px;padding:12px 8px;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .3s ease;text-align:center;background:rgba(255,255,255,.8)}.sunscreen-skin-type-option:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.sunscreen-skin-type-option.active{border-color:#667eea;background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));box-shadow:0 4px 12px rgba(102,126,234,.3)}.sunscreen-skin-color-block{width:50px;height:50px;border-radius:50%;margin:0 auto 8px;border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.15)}.sunscreen-skin-type-label{display:block;font-size:.85rem;font-weight:600;color:#374151;margin-bottom:2px}.sunscreen-skin-type-desc{display:block;font-size:.75rem;color:#6b7280}.sunscreen-result-card{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,250,252,.9));border-radius:16px;padding:20px;margin-bottom:15px;border:1px solid rgba(102,126,234,.1)}.sunscreen-result-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.05)}.sunscreen-result-item:last-child{border-bottom:none}.sunscreen-result-label{font-size:.95rem;color:#374151;font-weight:500}.sunscreen-result-value{font-size:1.5rem;font-weight:700;color:#667eea;font-family:'Roboto Mono',monospace}.sunscreen-result-highlight{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:20px;text-align:center;color:#fff;margin-bottom:15px}.sunscreen-result-highlight .sunscreen-result-label{color:rgba(255,255,255,.9);font-size:1rem;margin-bottom:5px}.sunscreen-result-highlight .sunscreen-result-value{color:#fff;font-size:2.5rem}.sunscreen-result-desc{font-size:.8rem;color:#6b7280;margin-top:4px}.sunscreen-result-highlight .sunscreen-result-desc{color:rgba(255,255,255,.8)}.sunscreen-uvi-indicator{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;margin-top:10px}.sunscreen-uvi-indicator.uvi-low{background:linear-gradient(135deg,rgba(72,187,120,.15),rgba(72,187,120,.05));border:1px solid rgba(72,187,120,.3)}.sunscreen-uvi-indicator.uvi-moderate{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3)}.sunscreen-uvi-indicator.uvi-high{background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(249,115,22,.05));border:1px solid rgba(249,115,22,.3)}.sunscreen-uvi-indicator.uvi-very-high{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.05));border:1px solid rgba(239,68,68,.3)}.sunscreen-uvi-indicator.uvi-extreme{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(139,92,246,.05));border:1px solid rgba(139,92,246,.3)}.sunscreen-uvi-icon{font-size:1.5rem}.sunscreen-uvi-text{flex:1}.sunscreen-uvi-level{font-weight:600;font-size:1rem;display:block}.sunscreen-uvi-desc{font-size:.85rem;color:#6b7280}.sunscreen-uvi-indicator.uvi-low .sunscreen-uvi-level{color:#059669}.sunscreen-uvi-indicator.uvi-moderate .sunscreen-uvi-level{color:#d97706}.sunscreen-uvi-indicator.uvi-high .sunscreen-uvi-level{color:#ea580c}.sunscreen-uvi-indicator.uvi-very-high .sunscreen-uvi-level{color:#dc2626}.sunscreen-uvi-indicator.uvi-extreme .sunscreen-uvi-level{color:#7c3aed}.sunscreen-warning-box{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:15px}.sunscreen-warning-list{list-style:none;padding:0;margin:0}.sunscreen-warning-list li{padding:8px 0;padding-left:25px;position:relative;font-size:.9rem;color:#92400e;border-bottom:1px solid rgba(245,158,11,.15)}.sunscreen-warning-list li:last-child{border-bottom:none}.sunscreen-warning-list li::before{content:"⚠️";position:absolute;left:0;top:8px}.sunscreen-chart-container{position:relative;height:250px;margin-top:15px}.sunscreen-input-group{margin-bottom:20px}.sunscreen-input-label{display:block;font-weight:600;color:#374151;margin-bottom:8px;font-size:.95rem}.sunscreen-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#667eea;color:#fff;border-radius:50%;font-size:.7rem;cursor:help;margin-left:6px;position:relative}.sunscreen-tooltip-icon:hover::after{content:attr(data-tooltip);position:absolute;bottom:125%;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:8px 12px;border-radius:8px;font-size:.8rem;white-space:nowrap;max-width:250px;white-space:normal;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.2)}.sunscreen-skin-reference{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.sunscreen-skin-ref-item{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,255,255,.7);border-radius:10px;border:1px solid rgba(0,0,0,.05)}.sunscreen-skin-ref-color{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.1);flex-shrink:0}.sunscreen-skin-ref-text{font-size:.8rem;color:#374151}@media(max-width:767px){.sunscreen-skin-type-option{flex:1 1 calc(50% - 10px)}.sunscreen-result-highlight .sunscreen-result-value{font-size:2rem}.sunscreen-skin-reference{grid-template-columns:1fr}.sunscreen-chart-container{height:200px}}@media(max-width:480px){.sunscreen-skin-type-option{flex:1 1 100%}}