:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 15%, #29313c, #101216 58%); }
.card { width: min(410px, calc(100vw - 32px)); padding: 32px; text-align: center; border: 1px solid #3b414a; border-radius: 20px; background: rgb(23 26 31 / 94%); box-shadow: 0 24px 80px #0009; }
.mascot { width: 148px; height: 148px; object-fit: contain; margin: -6px auto 8px; }
.brand { color: #b4becb; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
h1 { margin: 10px 0 24px; font-size: 28px; }
form { display: grid; gap: 12px; }
input, button { width: 100%; min-height: 46px; border-radius: 10px; font: inherit; }
input { padding: 0 14px; color: #f5f7fa; background: #15181d; border: 1px solid #414852; outline: none; }
input:focus { border-color: #a2afbf; }
button { border: 0; cursor: pointer; color: #101216; font-weight: 700; background: #dce2ea; }
button:disabled { cursor: wait; opacity: .65; }
.feedback { color: #ffb4b4; font-size: 14px; }
.assist-row { display: flex; justify-content: flex-end; margin-top: -3px; }
.text-button { width: auto; min-height: auto; padding: 0; color: #aeb9c7; background: transparent; font-size: 13px; font-weight: 500; }
.text-button:hover, .text-button:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.contact-dialog { width: min(360px, calc(100vw - 32px)); padding: 26px; border: 1px solid #424a55; border-radius: 16px; color: #edf1f6; background: #1a1e24; box-shadow: 0 20px 60px #000b; text-align: center; }
.contact-dialog::backdrop { background: rgb(0 0 0 / 62%); backdrop-filter: blur(4px); }
.contact-dialog p { margin: 0 0 22px; color: #c4cedb; line-height: 1.65; }
.contact-dialog button { min-height: 42px; color: #111317; background: #dce2ea; }