:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; color: #17233b; background: #eef3f9; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 15%, #dcecff, transparent 35%), radial-gradient(circle at 85% 85%, #ffe2e2, transparent 32%), #eef3f9; }
button, input, select { font: inherit; }
.shell { width: min(980px, calc(100% - 32px)); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1fr 430px; align-items: center; gap: 72px; padding: 48px 0; }
.intro h1 { margin: 12px 0 16px; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -.04em; }
.intro p { max-width: 560px; color: #607089; line-height: 1.8; }
.intro ul { padding-left: 20px; color: #3b4c65; line-height: 2; }
.eyebrow { color: #2671cd; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.card { padding: 28px; border: 1px solid #dbe4ef; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(32,61,96,.14); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 24px; padding: 5px; border-radius: 12px; background: #f0f4f8; }
.tabs button { padding: 10px; border: 0; border-radius: 8px; color: #718096; background: transparent; cursor: pointer; }
.tabs button.active { color: #185faf; background: #fff; box-shadow: 0 3px 12px rgba(35,70,110,.1); }
form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; color: #42526a; font-size: 13px; font-weight: 700; }
input, select { width: 100%; padding: 12px 13px; border: 1px solid #ccd8e6; border-radius: 10px; outline: none; color: #16243a; background: #fbfdff; }
input:focus, select:focus { border-color: #438bd9; box-shadow: 0 0 0 4px rgba(67,139,217,.12); }
.primary { min-height: 46px; margin-top: 4px; border: 0; border-radius: 11px; color: #fff; font-weight: 800; background: linear-gradient(100deg, #2677cf, #d83b43); cursor: pointer; }
.primary:disabled { opacity: .55; cursor: wait; }
.message { margin-top: 18px; padding: 12px 14px; border-radius: 10px; color: #276b50; background: #eaf8f1; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.message.error { color: #9e3037; background: #fff0f1; }
.hidden { display: none !important; }
.hint { margin: 0; color: #7d8ca0; font-size: 11px; line-height: 1.6; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.codes { overflow: auto; margin: 18px 0 0; padding: 16px; border-radius: 12px; color: #eaf2ff; background: #15243a; font: 600 15px/1.8 ui-monospace, Consolas, monospace; user-select: all; }
.stats { margin-top: 22px; color: #45617f; font-size: 13px; line-height: 1.8; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; } .intro h1 { font-size: 38px; } }
@media (max-width: 480px) { .shell { width: min(100% - 20px, 430px); } .card { padding: 20px; border-radius: 16px; } .row { grid-template-columns: 1fr; } }