:root{
  --bg:#040233;
  --panel:#030327;
  --muted:#9aa4af;
  --text:#e7ecf2;
  --acccent:#421bcc;
  --success:#f43b77;
  --stroke:rgba(255,255,255,.08);
  --radius:18px;
  --ring:rgba(58,123,255,.35);
}

*{box-sizing:border-box}
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color: var(--text);
  background:
    radial-gradient(62% 62% at 72% 28%, rgba(107,195,255,.26) 0%, rgba(107,195,255,0) 62%),
    radial-gradient(52% 52% at 22% 72%, rgba(66,27,204,.34) 0%, rgba(66,27,204,0) 60%),
    var(--bg);
}

.wrap{max-width:1200px;margin:48px auto;padding:0 20px}
.hero{margin-bottom:26px}
.title{font-size:clamp(20px,3vw,34px);font-weight:800}
.subtitle{max-width:860px;font-size:15px;color:#c9d2db}

.grid{display:grid;grid-template-columns:1fr 1.1fr;gap:22px}
@media (max-width:920px){.grid{grid-template-columns:1fr}}

.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:18px
}
.panel h3{font-size:14px;text-transform:uppercase;color:#c4cdd7;margin:6px 0 14px}

.field{display:grid;gap:8px;margin-bottom:14px}
.field label{font-size:13px;color:#cbd4de}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.muted{color:var(--muted);font-size:12px}

input[type="number"]{
  width:100%;
  background:#010116;
  border:1px solid var(--stroke);
  color:var(--text);
  padding:12px;
  border-radius:12px;
  outline:none;
  transition:border-color .15s,box-shadow .15s,transform .04s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
input[type="number"]:hover{border-color:#1d2b46}
input[type="number"]:focus{border-color:#2e5fe3;box-shadow:0 0 0 6px var(--ring),inset 0 1px 0 rgba(255,255,255,.05)}
input[type="number"]:active{transform:translateY(1px)}

.btn{
  background:#421BCC;
  border:none;color:#fff;font-weight:700;
  padding:12px 16px;border-radius:12px;cursor:pointer;
  transition:filter .15s,transform .04s,box-shadow .15s;
  box-shadow:0 8px 18px rgba(19, 3, 240, 0.25)
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:0;box-shadow:0 0 0 6px var(--ring),0 8px 18px rgba(58,123,255,.25)}

.results{display:grid;gap:34px}

.gauge{
  position:relative;
  background:#010116;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:60px;
  overflow:hidden
}

.gauge-arc{
  position:relative;
  width:100%;
  --p:0;
  background:#0e1420;

}

.gauge-arc::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#4436ff 0%,#6a4dff 18%,#9b3bff 35%,#ff3cac 58%,#ff8a3d 78%,#ffd86b 100%);
  transform-origin:left center;
  transform:scaleX(calc(var(--p)/100));
  -webkit-mask:url("m5-logo.png") center/contain no-repeat;
  mask:url("m5-logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(255,138,61,.35)) drop-shadow(0 0 30px rgba(255,216,107,.18))
}

.gauge-center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.gauge-value{font-size:34px;font-weight:800;letter-spacing:.02em}
.gauge-caption{margin-top:6px;color:#cbd4de;font-size:13px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){.cards{grid-template-columns:1fr}}

.card{
  background:#010116;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:16px
}
.card .label{font-size:12px;color:#9fb1c7;text-transform:uppercase;letter-spacing:.06em}
.card .val{font-size:22px;font-weight:800}
.positive{color:var(--success)}

.acid{
  background:rgba(255,107,107,.08);
  border:1px solid rgba(255,107,107,.25);
  border-radius:14px;
  padding:14px;
  font-size:13px;
  color:#ffdfe0
}
.acid b{color:#ff9a9a}
.tiny{font-size:12px;color:#9aa7b5}
.mono{font-variant-numeric:tabular-nums}
.footer{font-size:12px;color:#9aa7b5}

.hero-header {
  display: flex;
  align-items: center;
  gap: 12px; 
}

.hero-logo {
  display: block;
  height: 30px;
  margin-bottom: 10px;
  width: auto;
  filter: brightness(0) invert(1); 

}