:root { --fg:#1d2733; --muted:#6b7785; --line:#dde3ea; --bg:#f6f8fa; --accent:#1f6feb; --danger:#cf222e; --warn:#9a6700; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--fg); background:var(--bg); }
.page { max-width:480px; margin:0 auto; padding:20px 16px 48px; }
.wide { max-width:960px; margin:0 auto; padding:16px 16px 48px; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:17px; margin:24px 0 8px; } h1 small { color:var(--muted); font-weight:400; font-size:15px; }
label { display:block; margin:12px 0; font-size:14px; color:var(--muted); }
input, textarea, select { display:block; width:100%; margin-top:4px; padding:10px 12px; font:inherit; color:var(--fg); background:#fff; border:1px solid var(--line); border-radius:6px; }
button, a.button { display:inline-block; padding:10px 18px; font:inherit; color:#fff; background:var(--accent); border:0; border-radius:6px; cursor:pointer; text-decoration:none; }
button:disabled { background:#a9b4c0; cursor:not-allowed; }
button.secondary { color:var(--accent); background:#fff; border:1px solid var(--accent); }
button.danger { background:var(--danger); }
button.link { color:var(--accent); background:none; padding:4px; }
.hint, .muted { color:var(--muted); font-size:14px; } .muted { font-size:13px; word-break:break-all; }
.error { padding:10px 12px; color:var(--danger); background:#ffebe9; border-radius:6px; }
.warn { padding:8px 12px; color:var(--warn); background:#fff8c5; border-radius:6px; font-size:14px; }
.device b { font-family:ui-monospace, Menlo, monospace; font-size:18px; letter-spacing:1px; }
.code { margin:16px 0; padding:20px 0; text-align:center; font:700 44px/1 ui-monospace, Menlo, monospace; letter-spacing:4px; background:#fff; border:2px solid var(--accent); border-radius:10px; }
.spinner { width:32px; height:32px; margin:16px auto; border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#receiver { margin:12px 0; } .file-fallback { margin-top:20px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:0 16px; background:#fff; border-bottom:1px solid var(--line); }
.topbar nav a { display:inline-block; padding:14px 12px; color:var(--fg); text-decoration:none; border-bottom:3px solid transparent; }
.topbar nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
.badge { padding:2px 10px; font-size:14px; color:#fff; background:var(--accent); border-radius:10px; vertical-align:middle; }
.card { margin:16px 0; padding:16px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.card h2 { margin-top:0; } .card h2 small { color:var(--muted); font:400 14px ui-monospace, Menlo, monospace; }
dl { display:grid; grid-template-columns:64px 1fr; gap:6px 12px; margin:0 0 12px; } dt { color:var(--muted); font-size:14px; } dd { margin:0; word-break:break-all; }
dd a { margin-left:8px; }
.approve { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .approve label { flex:1 1 180px; margin:0; }
form.inline { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:12px 0; } form.inline label { flex:1 1 220px; margin:0; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
th, td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:14px; } th { color:var(--muted); font-weight:500; }
pre { padding:12px; overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:13px; word-break:break-all; white-space:pre-wrap; }
.break { word-break:break-all; }
.scan-viewport { width:100%; aspect-ratio:4/3; background:#000; border-radius:8px; overflow:hidden; }
.source-link { padding:8px 16px 24px; text-align:center; font-size:12px; } .source-link a { color:var(--muted); }

body.scanner { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.scanner-page { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; }
.scanner-page h1 { margin:0; font-size:18px; font-weight:600; }
.frame { position:relative; width:min(80vw, 320px); aspect-ratio:1; border:2px dashed #b6c0cc; border-radius:16px; background:#fff; overflow:hidden; }
.frame[data-state="scanning"], .frame[data-state="receiving"] { border:2px solid var(--accent); background:#000; }
.viewport { position:absolute; inset:0; display:none; }
.frame[data-state="scanning"] .viewport, .frame[data-state="receiving"] .viewport { display:block; }
.panel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; }
.frame[data-state="scanning"] .panel, .frame[data-state="receiving"] .panel { display:none; }
.panel [data-view] { display:none; width:100%; }
.frame[data-state="idle"] [data-view="idle"], .frame[data-state="waiting"] [data-view="waiting"],
.frame[data-state="denied"] [data-view="denied"], .frame[data-state="confirm"] [data-view="confirm"], .frame[data-state="approved"] [data-view="approved"] { display:block; }
.qr-icon { width:96px; height:96px; fill:#b6c0cc; fill-rule:evenodd; }
.panel .spinner { margin:0 auto 12px; }
.panel p { margin:4px 0; }
.verdict { font-size:18px; color:var(--danger); }
.frame .code { margin:8px 0; padding:0; border:0; background:none; font-size:34px; letter-spacing:2px; }
.progress { position:absolute; left:0; right:0; bottom:0; padding:8px; color:#fff; text-align:center; font-size:14px; background:rgba(0,0,0,.6); }
.scanner-page button { width:min(80vw, 320px); padding:14px 0; font-size:17px; }
.scanner-page button.invisible { visibility:hidden; }
.message { min-height:22px; margin:0; max-width:min(80vw, 320px); text-align:center; font-size:14px; color:var(--danger); }
.consent { margin:0; padding:0 24px 4px; text-align:center; font-size:12px; line-height:1.5; color:#9aa4b0; }
.scanner .source-link { padding:0 16px 12px; }
.device-id { margin-top:6px; font:700 30px/1.2 ui-monospace, Menlo, monospace; letter-spacing:2px; }
.message[data-tone="warn"] { color:var(--warn); }
.icp { margin:0; padding:0 24px 8px; text-align:center; font-size:12px; line-height:1.5; }
.icp a { color:#9aa4b0; text-decoration:none; }