:root{
  --bg:#0f1419;--panel:#1a2028;--border:#2a3441;--fg:#e6edf3;--muted:#8b96a5;
  --accent:#3b82f6;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1b2533 0%,var(--bg) 60%);
  color:var(--fg);display:flex;align-items:center;justify-content:center;padding:24px;
}
.card{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:32px;box-shadow:0 12px 40px rgba(0,0,0,.5);
}
h1{margin:0 0 20px;font-size:20px;font-weight:600;letter-spacing:.5px}
.device{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  background:#131922;border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;margin-bottom:20px;
}
.device code{color:var(--fg);font-size:11px;margin-left:auto;word-break:break-all}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
     box-shadow:0 0 8px rgba(34,197,94,.6);flex-shrink:0}
label{display:block;margin-bottom:16px}
label span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input{
  width:100%;background:#0d1219;border:1px solid var(--border);color:var(--fg);
  padding:10px 12px;border-radius:8px;font-size:14px;transition:border-color .15s;
}
input:focus{outline:none;border-color:var(--accent)}
button{
  width:100%;background:var(--accent);color:#fff;border:0;padding:12px;
  border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;margin-top:8px;
}
button:hover{filter:brightness(1.15)}
.footnote{margin:20px 0 0;font-size:11px;color:var(--muted);text-align:center}
.error{
  background:#3a1517;border:1px solid #5a1f1f;color:#fca5a5;
  padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:16px;
}
.error-card{max-width:440px;text-align:center}
.error-icon{font-size:36px;color:var(--warn);margin-bottom:8px;
            animation:pop .3s ease-out}
@keyframes pop{
  from{transform:scale(.5);opacity:0}
  to{transform:scale(1);opacity:1}
}
.error-card h1{font-size:18px;font-weight:500;margin:0 0 16px;line-height:1.5}
.error-meta{display:flex;align-items:center;justify-content:center;
            gap:8px;margin-bottom:16px}
.error-meta .badge{
  padding:2px 10px;border-radius:12px;background:#3a1517;color:#fca5a5;
  font-size:12px;border:1px solid #5a1f1f;
}
.error-meta code{font-family:ui-monospace,Consolas,monospace;
                 font-size:12px;color:var(--muted)}
.error-detail{
  background:#131922;border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;margin-bottom:20px;font-size:12px;color:var(--muted);
  text-align:left;word-break:break-all;
}
.info{display:grid;grid-template-columns:100px 1fr;gap:10px 16px;margin:0 0 24px}
.info dt{color:var(--muted);font-size:12px}
.info dd{margin:0;font-size:13px}
.info code{font-family:ui-monospace,Consolas,monospace;color:var(--accent);
           font-size:12px;word-break:break-all}
.actions{display:flex;gap:10px;justify-content:center;margin-bottom:4px}
.actions .btn,.actions .ghost{
  padding:10px 18px;border-radius:8px;font-size:13px;cursor:pointer;
  text-decoration:none;display:inline-block;width:auto;margin:0;
}
.actions .ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.actions .btn{background:var(--accent);color:#fff;border:0}
.actions .btn:hover{filter:brightness(1.15)}
.actions .ghost:hover{background:#1a2028}
/* 手机端隐藏返回 (扫码流程一次性, 不引导用户离开) */
@media (max-width: 480px) {
           .card-home.hide-on-mobile {
                     display: none;
           }
}
/* ---- 卡片内右上角"首页"按钮 (纯文字, 无边框) ---- */
.card-home{
            position:absolute;
            top:18px;
            right:20px;
            display:inline-flex;
            align-items:center;
            gap:4px;
            background:transparent;
            border:0;
            color:var(--muted);
            font-size:13px;
            font-family:inherit;
            font-weight:400;
            padding:0;
            border-radius:0;
            cursor:pointer;
            text-decoration:none;
            transition:color .15s;
            white-space:nowrap;
            line-height:1;
}
card-home:hover,
.card-home:focus{
            color:var(--accent);
            text-decoration:none;
            outline:none;
}
.card{
           position:relative;
}

.card-home-btn,
.card-home-btn:link,
.card-home-btn:visited{
           position:absolute;
           top:18px;
           right:20px;
           display:inline-flex;
           align-items:center;
           gap:4px;
           background:transparent;
           border:0;
           color:var(--muted);
           font-size:13px;
           font-family:inherit;
           font-weight:400;
           padding:0;
           border-radius:0;
           cursor:pointer;
           text-decoration:none;
           transition:color .15s;
           white-space:nowrap;
           line-height:1;
           z-index:1;
}

.card-home-btn:hover,
.card-home-btn:focus{
           color:var(--accent);
           text-decoration:none;
           outline:none;
}

.card-home-btn svg{
           width:12px;
           height:12px;
           flex-shrink:0;
           opacity:.85;
}

.card-home-btn:hover svg{
           opacity:1;
}