:root { --bg:#f5f7f2; --card:#fff; --text:#1f3a2f; --muted:#5d7468; --line:#dbe3dc; --accent:#2f7d5b; --danger:#b3412f; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#14201a; --card:#1c2b23; --text:#e6efe9; --muted:#9ab0a4; --line:#2c3f35; --accent:#52b788; --danger:#e08a78; }
  }
  * { box-sizing: border-box; }
  body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text);
         font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; padding:16px; }
  main { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 24px; text-align:center; }
  h1 { margin:0 0 6px; font-size:22px; }
  p { margin:8px 0; line-height:1.7; color:var(--muted); font-size:14px; }
  #qr { width:240px; height:240px; margin:18px auto 8px; border-radius:12px; background:#fff; display:block; }
  #qr[hidden] { display:none; }
  .state { min-height:24px; font-size:15px; color:var(--text); }
  .error { color:var(--danger); }
  button { margin-top:14px; padding:10px 22px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:15px; cursor:pointer; }
  button.plain { background:transparent; color:var(--muted); border:1px solid var(--line); }
  button[hidden] { display:none; }
  .who { font-size:18px; margin:18px 0 4px; }
  .links { display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
  .links[hidden], a[hidden] { display:none; }
  a.enter { display:block; padding:10px 22px; border-radius:10px; background:var(--accent); color:#fff; font-size:15px; text-decoration:none; }
  a.enter.plain { background:transparent; color:var(--muted); border:1px solid var(--line); }