*{box-sizing:border-box}
:root{
  --bg:#060d11;
  --panel:#0b171d;
  --panel2:#0e1d24;
  --border:#18323b;
  --text:#e8f4f3;
  --muted:#91aaa9;
  --accent:#55d6be;
  --accent2:#35bfa8;
  --danger:#ff7777;
}
html{background:#060d11;color-scheme:dark}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 10%,rgba(85,214,190,.08),transparent 28%),
    radial-gradient(circle at 85% 90%,rgba(53,191,168,.06),transparent 30%),
    var(--bg);
}
.container{width:min(920px,94%);margin:40px auto}
header{text-align:center;margin-bottom:26px}
.badge{
  display:inline-block;padding:7px 12px;border:1px solid var(--border);
  border-radius:999px;color:var(--accent);font-size:12px;letter-spacing:1.2px;
  background:#09151a;
}
h1{font-size:clamp(26px,4vw,40px);margin:14px 0 8px}
header p{color:var(--muted);margin:0;line-height:1.6}
.calculator{
  background:linear-gradient(145deg,rgba(14,29,36,.98),rgba(8,18,23,.98));
  border:1px solid var(--border);border-radius:18px;padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
label{display:block;color:#cde3e0;font-weight:600;margin-bottom:9px}
select,input{
  width:100%;border:1px solid #21404a;background:#071217;color:var(--text);
  border-radius:10px;padding:13px 14px;outline:none;font-size:15px;
}
select:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(85,214,190,.1)}
.description{
  margin:17px 0;color:var(--muted);line-height:1.6;padding:13px 14px;
  border-left:3px solid var(--accent);background:#081419;border-radius:8px;
}
.inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.field small{display:block;color:#6f8988;margin-top:6px}
.actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
button{
  border:0;border-radius:10px;padding:12px 18px;background:var(--accent);
  color:#04100e;font-weight:800;cursor:pointer;font-size:14px;
}
button:hover{background:#73e2cf}
button.secondary{background:#12252c;color:#cfe4e1;border:1px solid #21404a}
.result{
  margin-top:20px;border:1px solid #21404a;border-radius:12px;padding:18px;
  background:#071318;min-height:88px;
}
.result-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:9px}
#resultValue{font-size:21px;font-weight:700;line-height:1.5;word-break:break-word}
.formula{margin-top:14px;color:#7f9998;font-size:13px;line-height:1.6}
footer{text-align:center;color:#5f7777;font-size:12px;padding:22px 0}
@media(max-width:680px){.inputs{grid-template-columns:1fr}.container{margin:24px auto}.calculator{padding:18px}h1{font-size:28px}}

.extra{margin-top:10px;color:#b9cfcd;font-size:15px;line-height:1.8;font-weight:500}