:root { color-scheme: dark; font-family: "Microsoft YaHei", system-ui, sans-serif; background: #090c12; color: #f5f7fb; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(circle at 12% 10%, #283e67 0, transparent 30rem), radial-gradient(circle at 90% 92%, #3d1c4e 0, transparent 28rem), #090c12; }
.shell { width: min(680px, calc(100% - 32px)); padding: 52px 0 36px; }
.hero { margin-bottom: 28px; }
.eyebrow { color: #9fb5ff; font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
h1 { margin: 10px 0; font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: -.07em; }
.lead { margin: 0; color: #aab2c3; font-size: 1.1rem; }
.card, .result, .status { border: 1px solid #2b3445; background: rgba(17, 22, 33, .86); border-radius: 18px; box-shadow: 0 16px 44px rgba(0,0,0,.25); }
.card { padding: 22px; }
label { display: block; margin-bottom: 9px; font-size: .88rem; color: #cdd5e5; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; border: 1px solid #374155; border-radius: 10px; background: #0e131d; color: #fff; padding: 14px; font: inherit; outline: none; }
input:focus { border-color: #819dff; box-shadow: 0 0 0 3px #819dff2e; }
button, .download { border: 0; border-radius: 10px; padding: 13px 16px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .15s, opacity .15s; }
button:hover, .download:hover { transform: translateY(-1px); }
button:disabled { opacity: .6; cursor: wait; transform: none; }
.secondary { background: #252d3c; color: #e8edf9; }
.primary { width: 100%; margin-top: 12px; background: linear-gradient(110deg, #8198ff, #b278ff); color: #0b0e16; }
.hint, footer, .meta, .expiry { color: #929caf; font-size: .83rem; line-height: 1.5; }
.hint { margin: 13px 2px 0; }
.status { margin-top: 16px; padding: 16px 18px; color: #c6d3ff; }
.status.error { border-color: #8d3b4a; color: #ffc1c9; }
.result { margin-top: 16px; padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.success-icon { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1d614b; color: #baffdf; font-weight: 800; }
.result-label { margin: 0; color: #91e3bf; font-size: .8rem; font-weight: 700; }
h2 { margin: 2px 0; font-size: 1.15rem; }
.meta { grid-column: 2; margin: 0; }
.download { grid-column: 1 / -1; margin-top: 15px; text-align: center; background: #eff2fb; color: #111521; }
.expiry { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; }
.hidden { display: none; }
footer { margin-top: 24px; text-align: center; }
@media (max-width: 480px) { .shell { padding-top: 32px; } .input-row { flex-direction: column; } .secondary { width: 100%; } }