:root { font-family: system-ui, sans-serif; }
body  { display:flex; justify-content:center; min-height:100vh; margin:0; background:#f6f7fb; }
main  { text-align:center; padding:2rem; }
#cards { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.card {
  background:#fff; border-radius:12px; padding:1.5rem; width:250px;
  box-shadow:0 4px 12px rgba(0,0,0,.06); position:relative;
}
.card h3 { margin:0 0 .5rem; font-size:1.1rem; line-height:1.3; }
.card span { font-weight:400; font-size:.9rem; color:#666; }
.card strong { display:block; font-size:2.5rem; margin:.5rem 0; }
.card button {
  all:unset; cursor:pointer; background:#007bff; color:#fff; padding:.6rem 1.2rem;
  border-radius:8px; font-weight:600; font-size:.9rem;
}
.card button[disabled] { background:#b3c7ff; cursor:not-allowed; }
dialog {
  padding:2rem; border:none; border-radius:12px; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}