:root {
  color: #5b4354;
  background: #fff7fb;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #fff7fb; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.page { width: min(100% - 32px, 560px); margin: 0 auto; padding: 28px 0 42px; }
.hero { display: flex; align-items: center; gap: 14px; padding: 6px 2px 22px; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px 17px 17px 6px; color: #fff; background: #ee8eac; box-shadow: 0 10px 20px rgba(238,142,172,.25); font-size: 24px; }
.eyebrow { margin: 0; color: #c96b8c; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 3px; color: #4e3648; font-size: 28px; line-height: 1.1; }
h2 { margin-bottom: 0; color: #5b4354; font-size: 19px; line-height: 1.25; }
.subtitle { margin: 0; color: #aa91a2; font-size: 13px; }
.hero-sparkle { align-self: flex-start; margin-left: auto; color: #e8a3ba; font-size: 26px; }
.status-card, .card { border: 1px solid #f2dfe7; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(130,91,112,.06); }
.status-card { display: flex; align-items: center; gap: 11px; padding: 15px 17px; margin-bottom: 14px; }
.status-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #e3b7c6; }
.status-dot.ok { background: #6ec398; box-shadow: 0 0 0 5px #e9f8f0; }
.status-dot.error { background: #d47878; box-shadow: 0 0 0 5px #fff0ee; }
.status-card strong { display: block; font-size: 14px; }
.status-card p { margin: 3px 0 0; color: #a18b9a; font-size: 12px; }
.card { padding: 22px 20px; margin-bottom: 14px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.step, .ready-badge { padding: 5px 9px; border-radius: 999px; color: #c96b8c; background: #fff0f4; font-size: 11px; white-space: nowrap; }
.ready-badge { color: #4a9875; background: #e9f8f0; }
.help { margin: 10px 0 18px; color: #9c8998; font-size: 13px; line-height: 1.6; }
label { display: block; margin: 13px 0 7px; color: #765d6d; font-size: 12px; font-weight: 650; }
input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #eedbe4; border-radius: 11px; outline: 0; color: #5b4354; background: #fffafd; }
input:focus { border-color: #ee8eac; box-shadow: 0 0 0 3px #fff0f4; }
.primary, .secondary, .ghost { min-height: 43px; padding: 0 17px; border-radius: 11px; font-size: 13px; font-weight: 700; }
.primary { width: 100%; margin-top: 19px; color: #fff; background: #ee8eac; box-shadow: 0 8px 16px rgba(238,142,172,.2); }
.primary:disabled, .secondary:disabled { cursor: wait; opacity: .65; }
.secondary { color: #c96b8c; background: #fff0f4; }
.ghost { color: #aa91a2; background: transparent; }
.note { min-height: 18px; margin: 11px 0 0; color: #a18b9a; font-size: 11px; line-height: 1.5; }
.button-row { display: flex; align-items: center; gap: 8px; }
.button-row .secondary { flex: 1; }
.registered-card { border-color: #d9eee1; }
footer { padding: 5px 0; text-align: center; }
footer a { color: #c96b8c; font-size: 12px; text-decoration: none; }
.toast { position: fixed; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); left: 16px; padding: 12px 14px; border-radius: 12px; color: #fff; background: #684f60; box-shadow: 0 8px 24px rgba(79,59,74,.18); font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (min-width: 600px) { .page { padding-top: 54px; } }