:root {
  color-scheme: light dark;
  --background: #fbf9f9; --surface: #fff; --ink: #232126; --muted: #6e6870;
  --line: #eae4e6; --accent: #ba0035; --soft: #fff0f3; --panel: #f8f5f6;
  --warning: #9b581b; --warning-soft: #fff4e7;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--background); color: var(--ink); }
.shell { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 52px 24px 28px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 750; letter-spacing: -.7px; margin-bottom: 48px; }
.brand-mark { display: grid; place-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: white; font: italic bold 30px Georgia, serif; position: relative; }
.brand-mark span { position: absolute; right: 7px; bottom: 5px; font-size: 17px; }
.card { width: min(100%, 520px); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 44px 40px 32px; box-shadow: 0 12px 48px #37212a05; text-align: center; }
.status-icon { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--soft); margin: 0 auto 28px; }
.status-icon svg { width: 36px; height: 36px; }
.icon-success, .icon-error { display: none; }
[data-state="success"] .icon-envelope, [data-state="error"] .icon-envelope { display: none; }
[data-state="success"] .icon-success, [data-state="error"] .icon-error { display: initial; }
[data-state="error"] .status-icon { color: var(--warning); background: var(--warning-soft); }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 2.3px; color: var(--muted); margin: 0 0 12px; }
h1 { font-size: clamp(26px, 5vw, 32px); letter-spacing: -.8px; line-height: 1.3; margin: 0 0 16px; font-weight: 750; }
.description { color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0; overflow-wrap: anywhere; }
.next-steps { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 20px; margin-top: 28px; }
h2 { font-size: 13px; font-weight: 650; margin: 0 0 16px; }
ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.7; }
.step-number { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: 12px; line-height: 22px; color: var(--muted); }
.note { margin: 24px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; margin-top: 24px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
button:hover { filter: brightness(.9); } button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } button:disabled { opacity: .6; cursor: wait; }
footer { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; padding-top: 36px; margin-top: auto; }
footer span { display: block; font-size: 10px; letter-spacing: 1px; margin-top: 8px; }
.noscript { font-size: 14px; line-height: 1.8; }
@media (max-width: 420px) { .shell { padding: 32px 20px 24px; } .brand { margin-bottom: 32px; } .card { padding: 32px 24px 28px; border-radius: 24px; } .next-steps { padding: 16px; } }
@media (prefers-color-scheme: dark) { :root { --background: #161417; --surface: #201d21; --ink: #f7f0f3; --muted: #b8adb4; --line: #3a3239; --accent: #e84973; --soft: #3c1b29; --panel: #282329; --warning: #f0b978; --warning-soft: #382b20; } .brand-mark, button { background: #ba0035; } }