.calculator-container{background:#f8f9fa;border-radius:24px;padding:50px;max-width:680px;width:100%;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.15);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.calculator-container *{margin:0;padding:0;box-sizing:border-box}
.calculator-container .progress-bar-container{display:flex;justify-content:center;margin-bottom:40px;gap:8px}
.calculator-container .progress-dot{width:64px;height:6px;background:#d1d5db;border-radius:3px;transition:background .3s ease}
.calculator-container .progress-dot.active{background:#0086F1}
.calculator-container h1{color:#1e293b;font-size:32px;font-weight:700;margin-bottom:40px;text-align:center}
.calculator-container .form-step{display:none}
.calculator-container .form-step.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.calculator-container .form-group{margin-bottom:30px}
.calculator-container label{display:block;color:#1e293b;font-size:18px;font-weight:600;margin-bottom:12px}
.calculator-container input[type=number],.calculator-container input[type=text],.calculator-container select{width:100%;padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;color:#1e293b;background:#fff;transition:all .3s ease}
.calculator-container input[type=number]:focus,.calculator-container input[type=text]:focus,.calculator-container select:focus{outline:0;border-color:#0086F1;box-shadow:0 0 0 3px rgba(0,134,241,.1)}
.calculator-container input.error,.calculator-container select.error{border-color:#ef4444}
.calculator-container input.error:focus,.calculator-container select.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.calculator-container .error-message{color:#ef4444;font-size:14px;margin-top:8px;display:none}
.calculator-container .error-message.show{display:block}
.calculator-container .button-group.error .option-button{border-color:#ef4444}
.calculator-container .button-group{display:flex;gap:12px;margin-bottom:8px}
.calculator-container .option-button{flex:1;padding:16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;color:#64748b;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}
.calculator-container .option-button:hover{border-color:#0086F1;color:#0086F1;background:#E5F5FF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,134,241,.15)}
.calculator-container .option-button.selected{border-color:#0086F1;background:#0086F1;color:#fff}
.calculator-container .checkbox-group{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;margin-bottom:12px;user-select:none}
.calculator-container .checkbox-group:hover{border-color:#0086F1;background:#E5F5FF;box-shadow:0 2px 8px rgba(0,134,241,.1)}
.calculator-container .checkbox-group:active{transform:scale(.98)}
.calculator-container .checkbox-group input[type=checkbox]{width:24px;height:24px;cursor:pointer}
.calculator-container .checkbox-group label{margin:0;cursor:pointer;flex:1;font-size:16px}
.calculator-container .button-row{display:flex;gap:12px;margin-top:20px;align-items:center}
.calculator-container .continue-button{flex:1;padding:18px;background:#0086F1;color:#fff;border:none;border-radius:50px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}
.calculator-container .continue-button:hover{background:#0070D1;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,134,241,.4)}
.calculator-container .continue-button:disabled{background:#cbd5e1;cursor:not-allowed;transform:none}
.calculator-container .back-button{padding:18px;width:56px;height:56px;background:0 0;color:#64748b;border:2px solid #e2e8f0;border-radius:50%;font-size:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}
.calculator-container .back-button:hover{border-color:#0086F1;color:#0086F1;background:#E5F5FF}
.calculator-container .time-estimate{text-align:center;color:#64748b;font-size:14px;margin-top:20px}
.calculator-container .results-container{text-align:left}
.calculator-container .risk-card{border-radius:24px;padding:40px;margin-bottom:30px;position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 40px rgba(0,0,0,.15)}
.calculator-container .risk-card::before{content:'♥';position:absolute;top:-20px;right:-20px;font-size:220px;opacity:.08;color:#fff;pointer-events:none;transform:rotate(15deg)}
.calculator-container .risk-card.low{background:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%)}
.calculator-container .risk-card.borderline{background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%)}
.calculator-container .risk-card.intermediate{background:linear-gradient(135deg,#f97316 0%,#ea580c 50%,#c2410c 100%)}
.calculator-container .risk-card.high{background:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%)}
.calculator-container .risk-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}
.calculator-container .risk-category-badge{background:rgba(255,255,255,.25);backdrop-filter:blur(10px);padding:8px 20px;border-radius:20px;font-size:14px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;gap:6px}
.calculator-container .risk-category-badge::before{content:'♥';font-size:16px;opacity:.9}
.calculator-container .risk-score-main{margin:40px 0}
.calculator-container .risk-score{font-size:96px;font-weight:800;color:#fff;margin:0;line-height:1;display:flex;align-items:flex-start;gap:15px}
.calculator-container .risk-trend-arrow{font-size:48px;opacity:.9;margin-top:10px}
.calculator-container .risk-label{font-size:20px;font-weight:600;color:rgba(255,255,255,.95);margin-top:15px;text-transform:uppercase;letter-spacing:1px}
.calculator-container .risk-description-card{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border-radius:16px;padding:20px;margin-top:20px;border:1px solid rgba(255,255,255,.2)}
.calculator-container .risk-description-card p{color:#fff;font-size:15px;line-height:1.6;margin:0;font-weight:500}
.calculator-container .risk-level{display:none}
.calculator-container .risk-comparison{background:#fff;border-radius:16px;padding:24px;margin:30px 0;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.calculator-container .risk-comparison-title{font-size:14px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.calculator-container .risk-comparison-values{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}
.calculator-container .risk-value-item{flex:1;text-align:center}
.calculator-container .risk-value-label{font-size:13px;color:#64748b;margin-bottom:5px}
.calculator-container .risk-value-number{font-size:28px;font-weight:700;color:#1e293b}
.calculator-container .risk-value-number.optimal{color:#059669}
.calculator-container .risk-comparison-arrow{font-size:24px;color:#0086F1}
.calculator-container .risk-comparison-message{font-size:14px;color:#475569;line-height:1.5;padding-top:15px;border-top:1px solid #99D6FF}
.calculator-container .risk-comparison-message strong{color:#0086F1}
.calculator-container .optimal-factors-list{margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f0}
.calculator-container .optimal-factors-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:15px}
.calculator-container .factor-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;margin-bottom:8px;background:#f8fafc;border-radius:8px;border-left:3px solid #0086F1}
.calculator-container .factor-name{font-size:14px;color:#475569;font-weight:500}
.calculator-container .factor-impact{font-size:14px;font-weight:700;color:#059669;display:flex;align-items:center;gap:5px}
.calculator-container .factor-impact-arrow{font-size:12px}
.calculator-container .factor-note{color:#0086F1;font-size:14px;font-weight:700;margin-left:4px}
.calculator-container .factor-explanation{margin-top:16px;padding:12px 16px;background:#E5F5FF;border-radius:8px;font-size:13px;color:#0070D1;line-height:1.5;border-left:3px solid #0086F1}
.calculator-container .risk-description{display:none}
.calculator-container .disclaimer{font-size:13px;color:#94a3b8;line-height:1.5;margin-top:30px;padding-top:20px;border-top:1px solid #e2e8f0}
.calculator-container .share-section{margin-top:20px;padding:0;background:0 0;display:flex;align-items:center;justify-content:center;gap:16px}
.calculator-container .share-title{font-size:12px;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin:0}
.calculator-container .share-buttons{display:flex;gap:8px;flex-wrap:wrap}
.calculator-container .share-button{padding:8px 14px;border:1px solid #e2e8f0;border-radius:8px;background:rgba(255,255,255,.5);color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(10px)}
.calculator-container .share-button:hover{background:#fff;border-color:#cbd5e1;color:#475569;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.calculator-container .share-button.facebook:hover{border-color:#1877F2;color:#1877F2}
.calculator-container .share-button.twitter:hover{border-color:#000;color:#000}
.calculator-container .share-button.reddit:hover{border-color:#FF4500;color:#FF4500}
.calculator-container .share-icon{font-size:14px}
.calculator-container .share-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.calculator-container .share-button.loading{position:relative;color:transparent}
.calculator-container .share-button.loading::after{content:'⏳';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;color:#64748b}
.calculator-container .input-unit{display:flex;align-items:center;gap:12px}
.calculator-container .input-unit input{flex:1}
.calculator-container .unit-label{color:#64748b;font-size:14px;font-weight:500;white-space:nowrap}
@media (max-width:768px){
.calculator-container{padding:30px 20px}
.calculator-container h1{font-size:24px}
.calculator-container .button-row{gap:10px}
.calculator-container .continue-button{font-size:16px;padding:16px}
.calculator-container .back-button{width:50px;height:50px;padding:14px;font-size:18px}
.calculator-container .risk-card{padding:30px 20px;min-height:250px}
.calculator-container .risk-score{font-size:72px}
.calculator-container .risk-trend-arrow{font-size:36px}
.calculator-container .risk-label{font-size:16px}
.calculator-container .risk-category-badge{font-size:12px;padding:6px 16px}
.calculator-container .risk-comparison-values{flex-direction:column;gap:20px}
.calculator-container .risk-comparison-arrow{transform:rotate(90deg)}
.calculator-container .share-section{flex-direction:column;align-items:flex-start;gap:12px}
.calculator-container .share-buttons{width:100%}
.calculator-container .share-button{flex:1;min-width:100px}
}