:root{
  --bg:#0b1220; --card:#121a2b; --ink:#e7eefc; --muted:#9eb1d8;
  --brand:#3aa0ff; --ok:#a3ffb3; --danger:#ff6b6b; --ring:0 0 0 3px rgba(58,160,255,.25);
}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.wrap{max-width:1100px;margin:36px auto;padding:0 16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 150px),var(--card);
      border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px 18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{font-size:clamp(20px,3vw,28px);margin:0 0 8px}
p.lead{margin:0 0 14px; color:var(--muted)}
.grid{display:grid; gap:12px; grid-template-columns:repeat(12,1fr); align-items:end}
.col-4{grid-column:span 4} .col-3{grid-column:span 3} .col-6{grid-column:span 6} .col-12{grid-column:span 12}
@media (max-width:900px){ .col-4,.col-3,.col-6{grid-column:span 12} }
label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}
select,input[type="number"],input[type="text"]{width:100%; padding:10px 12px; background:#0e1628; color:#e7eefc;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; outline:none}
select:focus,input:focus{box-shadow:var(--ring); border-color:var(--brand)}
.btn{appearance:none; border:0; background:linear-gradient(135deg,var(--brand),#6cc0ff); color:#001428; font-weight:700;
  padding:10px 14px; border-radius:12px; cursor:pointer}
.btn.alt{background:linear-gradient(135deg,#2d3f66,#445b8a); color:#e7eefc}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.18); color:#e7eefc}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row-mt{margin-top:8px}
.result{margin-top:16px; padding:14px; border-radius:12px; background:#0f1a2d; border:1px solid rgba(255,255,255,.08)}
.result .big{font-size:clamp(24px,4.5vw,34px); font-weight:800; letter-spacing:.2px}
.muted{color:var(--muted)} .tiny{font-size:12px}
.pill{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; background:#0c253d; border:1px solid rgba(255,255,255,.12); margin-right:6px}
details{background:#0f1a2d; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px; margin-top:16px}
details summary{cursor:pointer; font-weight:700}
.table{width:100%; border-collapse:collapse; margin-top:8px; font-size:14px}
.table th,.table td{padding:8px 10px; border-bottom:1px dashed rgba(255,255,255,.08)}
.ok{color:var(--ok)} .danger{color:var(--danger)}
.split{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.text-right{text-align:right}

/* Prevent inner scrollbars when parent iframe is briefly smaller */
html, body { overflow: hidden; }