:root{--primary:#409eff;--text:#1f2937;--muted:#7b8794;--error:#f56c6c}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;color:var(--text);font-family:"Microsoft YaHei",system-ui,sans-serif;background:radial-gradient(circle at 15% 15%,rgba(64,158,255,.18),transparent 34%),radial-gradient(circle at 85% 80%,rgba(103,194,58,.12),transparent 32%),#f4f7fb}
.card{width:490px;max-width:100%;padding:34px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 20px 55px rgba(31,45,61,.13)}
header{display:flex;align-items:center;gap:15px;margin-bottom:28px}
.icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#409eff,#6a5af9);font-size:27px;color:white}
h1{margin:0;font-size:24px;font-weight:700}
header p{margin:6px 0 0;color:var(--muted);font-size:14px}
.field{margin-bottom:20px}
label{display:block;font-size:14px;margin-bottom:8px}
label:before{content:"* ";color:var(--error)}
input{width:100%;height:42px;padding:0 13px;border:1px solid #dcdfe6;border-radius:6px;background:#fff;font:16px "Microsoft YaHei",system-ui,sans-serif;outline:none;transition:border-color .15s}
input:focus{border-color:var(--primary)}
button{font:16px "Microsoft YaHei",system-ui,sans-serif;cursor:pointer}
.primary{width:100%;height:42px;border:0;border-radius:6px;background:var(--primary);color:#fff}
.primary:hover{background:#66b1ff}
.primary:disabled{opacity:.7;cursor:wait}
button:focus-visible{outline:3px solid rgba(64,158,255,.35);outline-offset:3px}
.message{margin-top:12px;min-height:20px;font-size:13px;color:var(--error);overflow-wrap:anywhere}
.result{margin-top:20px;padding:22px;text-align:center;border:1px solid #dbeafe;border-radius:14px;background:#f8fbff}
[hidden]{display:none!important}
.result-label{font-size:14px;color:#64748b}
.code{font:700 45px/1.1 ui-monospace,monospace;color:var(--primary);letter-spacing:6px;margin:10px 0 16px;padding-left:6px}
.progress{height:7px;overflow:hidden;border-radius:999px;background:#e5e7eb}
.progress span{display:block;width:100%;height:100%;background:var(--primary);transition:width .1s linear}
.remaining{margin-top:8px;font-size:14px;color:#64748b}
.copy{margin-top:14px;padding:8px 15px;background:#fff;border:1px solid #dcdfe6;border-radius:6px;color:#606266}
.copy:hover{color:var(--primary);border-color:var(--primary)}
.copy:disabled{opacity:.5;cursor:default}
.query-loading{display:flex;justify-content:center;align-items:center;gap:14px;min-height:126px;color:var(--primary)}
.loading-text{display:flex;flex-direction:column;gap:6px;font-size:15px;text-align:left}
.spinner{width:24px;height:24px;border:3px solid #dbeafe;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
footer{margin-top:24px;text-align:center;font-size:12px;color:#94a3b8}
@keyframes spin{to{transform:rotate(360deg)}}
.logout{margin-top:10px;background:none;border:0;color:#7b8794;font-size:12px;text-decoration:underline}
@media(max-width:520px){body{padding:18px}.card{padding:26px 22px}h1{font-size:22px}header{gap:12px}.icon{flex-basis:48px;width:48px;height:48px}header p{font-size:13px}.code{font-size:40px;letter-spacing:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}