* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #39404a; background: #f7f8fb; font-synthesis: none; }
body { position: relative; isolation: isolate; margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 28px; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 12% 18%, rgb(211 219 244 / 48%), transparent 42%), radial-gradient(ellipse at 88% 82%, rgb(214 234 230 / 42%), transparent 42%), radial-gradient(ellipse at 80% 12%, rgb(235 226 244 / 30%), transparent 34%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(#8793ac 0.7px, transparent 0.7px); background-size: 24px 24px; opacity: .09; mask-image: radial-gradient(ellipse at center, transparent 20%, #000 95%); }
.shell { width: 100%; max-width: 410px; }
.card { padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgb(35 45 65 / 3%); }
h1 { margin: 0 0 28px; font-size: 22px; font-weight: 400; line-height: 1.5; }
label { display: block; margin-bottom: 10px; color: #747b85; font-size: 13px; font-weight: 400; }
input, button { font-family: inherit; font-weight: 400; }
input { width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: #f5f6f8; color: #39404a; font-size: 16px; }
input::placeholder { color: #a0a5ae; font-size: 14px; }
input:focus { outline: none; background: #eceff5; }
button { cursor: pointer; }
.primary { width: 100%; height: 40px; margin-top: 16px; border: 0; border-radius: 5px; background: #f0f2f8; color: #4355b5; font-size: 14px; }
.primary:hover { background: #e8ecf5; }
button:focus-visible, .guide-link:focus-visible { outline: 2px solid #acb7d5; outline-offset: 3px; }
button:disabled { color: #8a93a9; cursor: default; }
#message { margin: 16px 0 0; color: #ad6262; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.result { text-align: center; }
.success-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; background: #edf6f0; color: #4b8b66; }
.success-mark svg { width: 25px; height: 25px; }
.result h2 { margin: 0 0 22px; font-size: 21px; font-weight: 400; line-height: 1.5; outline: none; }
#copy { width: 100%; padding: 16px 10px; border: 1px dashed #ccd5de; border-radius: 8px; background: #fafbfc; }
#copy:hover { background: #f4f6f9; border-color: #98a8bd; }
#code { display: block; color: #39404a; font-family: ui-monospace, Consolas, monospace; font-size: 17px; line-height: 1.6; user-select: all; overflow-wrap: anywhere; }
#copy-hint { display: block; margin-top: 7px; color: #8b919a; font-size: 12px; }
.result p { margin: 16px 0 0; font-size: 12px; color: #8b919a; line-height: 1.7; }

@media (max-width: 480px) { body { padding: 24px 20px; } .card { padding: 28px 24px; } }

.notice-mark { color: #a58248; background: #f8f3e9; }
.notice h2 { margin-bottom: 12px; }
.notice #notice-detail { margin: 0; color: #68717e; font-size: 13px; }
.notice #notice-help { margin: 8px 0 0; color: #9299a3; }
.notice .primary { margin-top: 24px; }
h1:focus { outline: none; }

.guide-link { display: inline-block; margin-top: 16px; padding: 10px 16px; color: #4355b5; font-size: 14px; text-underline-offset: 4px; }
.guide-link:hover { color: #303f91; }