:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0b0b; color: #fff; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { margin: 8px 0 4px; letter-spacing: .5px; }
#subtitle { margin: 0 0 16px; opacity: .8; }

.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.tile {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 0;
  text-align: center;
  user-select: none;
  cursor: pointer;
  background: rgba(255,255,255,.04);
}
.tile.selected { outline: 2px solid #fff; background: rgba(255,255,255,.12); }
.tile.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.card { margin-top: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 16px; }
label { display: grid; gap: 6px; margin-bottom: 12px; }
input {
  border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  padding: 12px; background: rgba(255,255,255,.06); color: #fff;
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
button {
  border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22);
  background: #fff; color: #000; font-weight: 700; cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.fineprint { opacity: .75; font-size: 13px; margin-top: 12px; }
.msg { margin-top: 12px; min-height: 20px; opacity: .9; }