* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111;
  background: #f4f4f4;
}
main {
  max-width: 720px;
  margin: 32px auto;
  padding: 24px;
  background: #fff;
  border: 1px solid #ddd;
}
h1 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
form { margin-bottom: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #555; margin-bottom: 12px; }
input[type="text"], input[type="password"] {
  padding: 8px 10px;
  border: 1px solid #ccc;
  font: inherit;
  width: 100%;
}
button[type="submit"] {
  padding: 8px 16px;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.status { color: #666; font-size: 13px; min-height: 1.3em; margin: 0 0 8px; }
.error { color: #a00; }
.funnel { margin: 18px 0 10px; }
.step {
  margin: 0 auto 6px;
  padding: 10px 14px;
  background: #eee;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.step:nth-child(1) { width: 100%; }
.step:nth-child(2) { width: 90%; }
.step:nth-child(3) { width: 80%; }
.step:nth-child(4) { width: 70%; }
.step:nth-child(5) { width: 60%; }
.step:nth-child(6) { width: 50%; background: #ddd; }
.step .title { font-size: 13px; }
.step .value { font-size: 22px; font-weight: 600; white-space: nowrap; }
.money { margin: 14px 0 0; font-size: 14px; }
.money b { font-size: 18px; }