:root {
    --bg: #fafafa; --card: #ffffff; --ink: #11181c; --muted: #71717a; --line: #e4e4e7;
    --field: #f4f4f5; --btn: #11181c; --btn-ink: #ffffff; --ok: #15803d;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #09090b; --card: #18181b; --ink: #fafafa; --muted: #a1a1aa; --line: #3f3f46;
      --field: #27272a; --btn: #fafafa; --btn-ink: #11181c; --ok: #4ade80; color-scheme: dark; }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100svh; display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .mark { width: 48px; height: 48px; border-radius: 12px; display: block; }
  .brand b { display: block; font-size: 18px; }
  .brand span { color: var(--muted); font-size: 14px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
    display: flex; flex-direction: column; gap: 14px; }
  h1 { margin: 0; font-size: 22px; line-height: 1.25; }
  p { margin: 0; color: var(--muted); }
  .address { display: flex; gap: 8px; align-items: center; background: var(--field); border-radius: 12px; padding: 10px 12px; }
  .address code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); user-select: all; }
  .address button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px;
    padding: 6px 10px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
  .address button.done { color: var(--ok); }
  .stores { display: flex; flex-direction: column; gap: 10px; }
  .store { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    border-radius: 12px; padding: 12px 16px; font-weight: 600; background: var(--btn); color: var(--btn-ink); }
  .store.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .store:focus-visible, .address button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  footer { color: var(--muted); font-size: 13px; text-align: center; }
  footer a { color: inherit; }
  [hidden] { display: none !important; }
  .above { margin-bottom: 6px; }
  .below { margin-top: 8px; }