:root { 
  --bg:#0b1020; 
  --card:#121934; 
  --text:#f1f5f9; 
  --muted:#a3aed0; 
}
* { box-sizing:border-box; }
body {
  margin:0; 
  font-family:system-ui,Segoe UI,Roboto,Inter,sans-serif; 
  color:var(--text); 
  background:linear-gradient(180deg,#0b1020,#070b18);
}
.wrap {
  min-height:100vh; 
  display:grid; 
  place-items:center; 
  padding:24px;
}
.card {
  width:100%; 
  max-width:780px; 
  background:var(--card); 
  border-radius:20px; 
  padding:24px; 
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
h1 { margin:8px 0 2px; font-size:28px; }
p.sub { margin:0 0 16px; color:var(--muted); }
.grid {
  display:grid; 
  grid-template-columns:repeat(3,minmax(0,1fr)); 
  gap:16px; 
  margin:16px 0;
}
.tile {
  background:#0f1430; 
  border:1px solid #1a245b; 
  border-radius:16px; 
  padding:18px; 
  text-align:center;
}
.label { color:#95a1d4; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.value { font-size:36px; font-weight:800; margin-top:6px; }
.unit { font-size:14px; color:#a3aed0; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
button {
  background:#2b5fe0; 
  border:none; 
  color:white; 
  padding:12px 16px; 
  border-radius:12px; 
  font-weight:700; 
  cursor:pointer;
}
button.secondary { background:#23315e; }
.log {
  margin-top:16px; 
  background:#0f1430; 
  border:1px dashed #1a245b; 
  border-radius:12px; 
  padding:12px; 
  font-family:ui-monospace,Consolas,monospace; 
  font-size:12px; 
  max-height:200px; 
  overflow:auto; 
  white-space:pre-wrap;
}
.foot { margin-top:14px; color:#9db0ff; font-size:12px; }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} }