:root { color-scheme: dark; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; color: #e8e9eb; background: #191b1e; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(920px, calc(100% - 40px)); margin-inline: auto; }
header { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; border-bottom: 1px solid #3d4249; }
header a { color: #e8e9eb; text-decoration: none; letter-spacing: .04em; }
header span, .muted, footer, label { color: #b4bac2; font-size: 14px; }
.intro { padding-block: 38px 28px; }
.eyebrow { color: #70b5ff; font-size: 14px; margin: 0 0 10px; }
h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.35; margin: 0 0 16px; font-weight: 650; }
h2 { font-size: 21px; margin: 0; font-weight: 600; }
p { margin: 12px 0 18px; }
.intro > p:not(.eyebrow) { max-width: 650px; color: #b4bac2; }
.scope { font-size: 14px; }
section { padding: 26px 28px; margin-bottom: 18px; background: #242629; border: 1px solid #3d4249; border-radius: 12px; }
.section-head { display: flex; align-items: baseline; gap: 14px; }
.step { color: #70b5ff; font-variant-numeric: tabular-nums; font-size: 14px; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-block: 20px; }
form { margin: 0; }
button { font: inherit; line-height: 1.4; min-height: 44px; padding: 10px 18px; color: #102334; background: #70b5ff; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
button.secondary { color: #e8e9eb; background: transparent; border-color: #606974; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid #70b5ff; outline-offset: 4px; }
textarea { display: block; width: 100%; min-height: 200px; margin-top: 8px; padding: 14px; font: 14px/1.7 'Segoe UI', 'Microsoft YaHei', sans-serif; color: #e8e9eb; background: #191b1e; border: 1px solid #606974; border-radius: 6px; resize: vertical; }
.warning { color: #f0bc8c; }
.success { color: #a0d1be; }
footer { padding-block: 10px 36px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { header { flex-direction: column; gap: 3px; padding-block: 20px; } section { padding: 22px 18px; } .intro { padding-top: 28px; } .actions { align-items: stretch; } .actions > span { width: 100%; } }