:root { color-scheme: light dark; --page:#f2f6fa; --surface:#fff; --ink:#172238; --muted:#637087; --line:#dce4ed; --accent:#008ab5; --field:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--page); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
header { height:76px; max-width:1040px; margin:auto; display:flex; align-items:center; padding:0 28px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:750; font-size:19px; }
.brand span { display:grid; place-items:center; width:32px; height:32px; background:var(--accent); color:white; border-radius:11px; font-size:20px; }
main { width:min(100%,510px); margin:7vh auto 0; padding:0 22px 48px; }
.panel { background:var(--surface); padding:38px 32px 28px; border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 60px #16334d0a; text-align:center; }
[hidden] { display:none!important; }
.mark { width:60px; height:60px; margin:0 auto; display:grid; place-items:center; border-radius:19px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); font-size:32px; }
h1 { font-size:27px; line-height:1.3; margin:24px 0 30px; letter-spacing:-.5px; }
button { width:100%; border:0; border-radius:12px; font:inherit; font-weight:600; padding:12px 14px; cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:3px; }
.primary { color:white; background:var(--accent); }
.secondary { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); margin-top:12px; }
.quiet { color:var(--muted); background:transparent; font-size:14px; }
p { color:var(--muted); font-size:14px; }
#status:empty,#copy-status:empty { display:none; }
#status { margin:15px 0 0; }
details { border-top:1px solid var(--line); margin-top:26px; padding-top:18px; text-align:left; }
summary { color:var(--muted); font-size:14px; cursor:pointer; text-align:center; }
form { margin-top:20px; }
label { display:block; margin:14px 0 8px; font-size:14px; font-weight:600; }
input,textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); font:15px/1.55 ui-monospace,monospace; }
input[readonly] { font-size:12px; }
textarea { resize:none; overflow-wrap:anywhere; }
.hint { margin:-14px 0 24px; }
.token { text-align:left; margin-top:22px; }
.success { color:#099a75; background:#099a7514; }
@media (prefers-color-scheme:dark) { :root { --page:#0d1520; --surface:#15202e; --ink:#e6edf6; --muted:#9aadc3; --line:#2d3b4e; --accent:#32b9d4; --field:#101a27; } }
@media (max-width:480px) { header { padding:0 22px; height:68px; } main { margin-top:5vh; padding:0 16px 32px; } .panel { padding:32px 22px 24px; } h1 { font-size:25px; } }