:root{
  --bg-1:#0b0f14;
  --bg-2:#0f1720;
  --card:#0f1724;
  --muted:#9aa6b2;
  --accent:#6ee7b7;
  --danger:#ff7a7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef3; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.wrap{width:100%;max-width:760px}
.header{margin-bottom:18px; text-align:center}
.header h1{margin:0;font-size:1.5rem}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:0.95rem}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.03); padding:18px; border-radius:12px; box-shadow:0 8px 30px rgba(2,6,23,0.6);
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.field{display:flex;flex-direction:column}
.label-text{font-size:0.9rem;color:var(--muted);margin-bottom:6px}
input[type=number]{appearance:none; -moz-appearance:textfield;
  padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);
  background:transparent;color:inherit;font-size:1.05rem}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
.rate{font-size:0.8rem;color:var(--muted);margin-top:6px}

.results{grid-column:1/-1;margin-top:6px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.02)}
.result-row{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}
.result-row strong{color:#e6f7ef}
.result-row.grand{font-size:1.15rem;border-top:1px dashed rgba(255,255,255,0.03);padding-top:10px;margin-top:8px}

.actions{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:12px}
.btn{padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(90deg,#1f2937,#111827);color:#e6eef3;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

.footer{text-align:center;margin-top:12px;color:var(--muted)}

@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
  .header h1{font-size:1.25rem}
  body{padding:16px}
}