:root{
  --navy:#0B1F3A;
  --navy2:#12375f;
  --blue:#1967ff;
  --blue2:#4b82ff;
  --text:#182235;
  --muted:#6d7788;
  --border:#dfe6ef;
  --soft:#f4f7fb;
  --white:#fff;
  --green:#147443;
  --yellow:#9c6500;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#f7f9fc;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65
}
a{color:var(--blue)}
.wrap{width:min(1120px,calc(100% - 30px));margin:auto}
.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:54px 0 82px}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:900;color:#8cc1ff}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.06;margin:.35em 0 .25em;max-width:900px}
.hero p{margin:0;max-width:820px;color:#dce9f8;font-size:18px}
.calculator-shell{margin-top:-45px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 55px rgba(11,31,58,.12);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--border);background:#f8fafc}
.tab{
  flex:1;border:0;background:transparent;color:var(--muted);font-weight:850;font-size:16px;padding:17px;cursor:pointer;
  border-bottom:3px solid transparent
}
.tab.active{color:var(--blue);background:#fff;border-bottom-color:var(--blue)}
.panel{display:none;padding:26px}
.panel.active{display:block}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-card,.summary-card{border:1px solid var(--border);border-radius:15px;padding:24px;position:relative}
.form-card h2{margin:.1em 0 .1em;font-size:25px}
.step{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eaf2ff;color:var(--blue);font-weight:900}
.muted{color:var(--muted);margin-top:0}
label{display:block;font-weight:750;margin:17px 0 7px}
input,select{
  width:100%;height:49px;border:1px solid #cfd8e5;border-radius:10px;background:#fff;padding:0 12px;
  font:inherit;color:var(--text)
}
input:focus,select:focus{outline:3px solid rgba(25,103,255,.12);border-color:var(--blue)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.primary-btn{width:100%;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:850;font-size:16px;padding:13px 15px;margin-top:22px;cursor:pointer}
.primary-btn:hover{filter:brightness(.96)}
.summary-card{background:#fbfcff}
.summary-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}
.summary-value{
  margin-top:12px;background:linear-gradient(135deg,var(--blue),#5285ff);color:white;border-radius:12px;
  padding:19px;font-weight:900;font-size:clamp(24px,3vw,34px);line-height:1.1
}
.level-pill{display:inline-flex;margin-top:12px;padding:7px 10px;border-radius:999px;background:#edf3ff;color:var(--blue);font-weight:800;font-size:13px}
.result{margin-top:16px;border-top:1px solid var(--border);padding-top:15px}
.result.empty{color:var(--muted)}
.result-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #edf0f4}
.result-row span{color:var(--muted)}
.result-row strong{text-align:right}
.status-good{color:var(--green);font-weight:850}
.status-warn{color:var(--yellow);font-weight:850}
.experience-guide,.formula-table{margin-top:24px;border:1px solid var(--border);border-radius:14px;padding:20px}
.experience-guide h3,.formula-table h3{margin-top:0}
.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.level-grid>div{background:var(--soft);border-radius:10px;padding:13px}
.level-grid strong,.level-grid span,.level-grid small{display:block}
.level-grid span{color:var(--blue);font-weight:700}
.level-grid small{color:var(--muted);margin-top:3px}
.micro{font-size:12px;color:var(--muted);margin-bottom:0}
.formula-row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.content-section,.faq,.sources{background:#fff;margin-top:24px;border:1px solid var(--border);border-radius:15px;padding:28px}
.content-section h2,.faq h2,.sources h2{color:var(--navy);margin-top:1.3em}
.content-section h2:first-child,.faq h2:first-child,.sources h2:first-child{margin-top:0}
.notice{background:#eef6ff;border-left:4px solid var(--blue);border-radius:8px;padding:16px 18px;margin:22px 0}
.faq details{padding:14px 0;border-top:1px solid var(--border)}
.faq summary{font-weight:800;cursor:pointer}
.disclaimer{margin-top:24px;background:#fff8e7;border:1px solid #f0ddb1;border-radius:13px;padding:20px}
.sws-footer{margin-top:42px}
@media(max-width:900px){
  .panel-grid{grid-template-columns:1fr}
  .level-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .wrap{width:min(100% - 20px,1120px)}
  .panel{padding:16px}
  .form-card,.summary-card{padding:18px}
  .two-col{grid-template-columns:1fr}
  .level-grid{grid-template-columns:1fr}
  .formula-row{grid-template-columns:1fr;gap:2px}
  .hero{padding:44px 0 75px}
}