/* Page background like your screenshot */
.sdp-page-bg{background:#eef3f8;padding:28px 0}
.sdp-wrap{max-width:1150px;margin:0 auto;padding:0 16px}

/* Main card */
.sdp-card{
  background:#ffffff;
  border-radius:22px;
  padding:28px;
  box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.sdp-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#0f172a}
.sdp-sub{margin:8px 0 0;font-size:16px;line-height:1.55;color:#475569}

/* Form row */
.sdp-form{margin-top:22px;display:grid;grid-template-columns:1fr 260px 200px;gap:14px}
.sdp-input,.sdp-select{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  font-size:16px;
  outline:none;
  background:#fff;
}
.sdp-input:focus,.sdp-select:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px rgba(148,163,184,.20)}
.sdp-btn{
  width:100%;
  border:0;
  border-radius:14px;
  background:#0f172a;
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}
.sdp-btn:disabled{opacity:.65;cursor:not-allowed}

/* Error */
.sdp-err{margin-top:12px;display:none;color:#b91c1c;font-weight:700}

/* Results */
.sdp-result{margin-top:18px;display:none}
.sdp-result.sdp-show{display:grid;grid-template-columns:380px 1fr;gap:18px}

/* Left meter card */
.sdp-meter{
  border-radius:18px;
  padding:22px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.sdp-meter-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sdp-place{font-weight:800;color:#0f172a}

/* Badge colors */
.sdp-badge{
  font-size:13px;
  font-weight:900;
  padding:8px 14px;
  border-radius:999px;
  letter-spacing:.6px;
}
.sdp-badge.low{background:#e0f2fe;color:#0369a1}
.sdp-badge.medium{background:#ffedd5;color:#9a3412}
.sdp-badge.high{background:#dcfce7;color:#166534}

.sdp-pct{font-size:72px;font-weight:900;line-height:1;margin:16px 0 8px;color:#0f172a}
.sdp-label{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:16px}

.sdp-bar{height:12px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.sdp-bar > div{height:100%;width:0%;border-radius:999px}
.sdp-bar.low > div{background:#0284c7}
.sdp-bar.medium > div{background:#f59e0b}
.sdp-bar.high > div{background:#22c55e}

.sdp-tip{margin-top:14px;color:#475569;font-size:14px}

/* Right details card */
.sdp-details{
  border-radius:18px;
  padding:22px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.sdp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid #f1f5f9}
.sdp-row:last-child{border-bottom:0}
.sdp-k{font-size:18px;font-weight:800;color:#0f172a}
.sdp-v{font-size:20px;font-weight:900;color:#0f172a}

/* Responsive */
@media (max-width: 920px){
  .sdp-form{grid-template-columns:1fr;gap:12px}
  .sdp-result.sdp-show{grid-template-columns:1fr}
}