.assessment-container{font-family:Arial,sans-serif;margin:0 auto;max-width:800px;padding:20px}.logo{color:#764ba2;font-size:24px;font-weight:700}.logo,h1{margin-bottom:10px;text-align:center}h1{color:#333}.subtitle{color:#666;font-size:16px;margin-bottom:30px;text-align:center}.container{background:#fff;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:30px}.assessment-form{transition:opacity .3s ease}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section{background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:30px;padding:25px}.section-title{color:#333;font-size:20px;margin-bottom:20px}.section-icon,.section-title{align-items:center;display:flex;font-weight:700}.section-icon{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;font-size:18px;height:40px;justify-content:center;margin-right:15px;width:40px}.question-group{margin-bottom:20px}.question{color:#333;font-size:16px;font-weight:600;margin-bottom:10px}select{background:#fff;border:2px solid #ddd;border-radius:6px;font-size:14px;padding:12px;transition:border-color .3s ease;width:100%}select:focus{border-color:#667eea;outline:none}.checkbox-group,.radio-group{display:grid;gap:10px;margin-top:10px}.checkbox-item,.radio-item{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;display:flex;padding:10px;transition:all .3s ease}.checkbox-item:hover,.radio-item:hover{background:#f8f9ff;border-color:#667eea}.checkbox-item input,.radio-item input{margin-right:10px;transform:scale(1.2)}.checkbox-item input:checked+span,.radio-item input:checked+span{color:#667eea;font-weight:600}.range-container{margin:20px 0;position:relative}input[type=range]{-webkit-appearance:none;background:#ddd;border-radius:4px;height:8px;outline:none;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:25px;width:25px}input[type=range]::-moz-range-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:25px;width:25px}.range-value{background:#333;border-radius:4px;color:#fff;font-size:14px;font-weight:700;padding:5px 10px;top:-35px}.range-value,.range-value:after{position:absolute;transform:translateX(-50%)}.range-value:after{border:5px solid transparent;border-top-color:#333;content:"";left:50%;top:100%}.range-labels{color:#666;display:flex;font-size:12px;justify-content:space-between;margin-top:10px}.progress-bar{background:#e0e0e0;border-radius:4px;height:8px;margin:30px 0 20px;overflow:hidden;width:100%}.progress-fill{border-radius:4px;height:100%;transition:width .3s ease}.progress-fill,.submit-btn{background:linear-gradient(135deg,#667eea,#764ba2)}.submit-btn{border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:15px;transition:transform .2s ease,box-shadow .2s ease;width:100%}.submit-btn:hover{box-shadow:0 4px 12px rgba(102,126,234,.4);transform:translateY(-2px)}.submit-btn:active{transform:translateY(0)}.results{padding:20px;text-align:center}.grade{margin-bottom:30px}.grade-letter{font-size:120px;font-weight:700;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.grade-A{color:#28a745}.grade-B{color:#17a2b8}.grade-C{color:#ffc107}.grade-D{color:#fd7e14}.grade-F{color:#dc3545}#gradeDescription{color:#333;font-size:24px;font-weight:700;margin-bottom:10px}#gradeDetail{color:#666;font-size:16px;line-height:1.6}.recommendations{margin:0 auto;max-width:600px;text-align:left}.recommendation-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);margin-bottom:15px;padding:20px}.recommendation-title{color:#333;font-size:18px;font-weight:700;margin-bottom:10px}.recommendation-item div:last-child{color:#666;line-height:1.6}@media (max-width:768px){.assessment-container{padding:10px}.container{padding:20px}.section{padding:15px}.section-title{font-size:18px}.grade-letter{font-size:80px}.checkbox-group,.radio-group{grid-template-columns:1fr}}#hs-form-gate,#results{display:none!important}