*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex; align-items: flex-start; justify-content: center; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 8vh) 16px 24px;
  background: var(--bg); color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.4;
}
.card {
  width: min(380px, 100%); margin: auto; padding: 32px 28px 24px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.logo { width: 96px; height: 96px; border-radius: 22px; display: block; margin: 0 auto 10px; }
h1 { margin: 6px 0 2px; font-size: 28px; }
.tagline { margin: 0 0 22px; color: var(--text-secondary); }
.message {
  margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; text-align: left;
  background: var(--warn-soft-bg); color: var(--warn-color); font-weight: 600;
}
.message.ok { background: var(--accent-soft); color: var(--text-primary); }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  height: 46px; border-radius: 23px; border: 1px solid #747775; background: #ffffff; color: #1f1f1f;
  font-weight: 600; text-decoration: none; font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}
.google-btn:hover { background: #f5f5f5; }
.google-btn.off { opacity: 0.5; pointer-events: none; }
[data-theme="dark"] .google-btn { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.dev-btn {
  display: block; margin-top: 12px; padding: 10px; border-radius: 23px; text-decoration: none;
  border: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 14px;
}
.fine { margin: 22px 0 0; font-size: 13px; color: var(--text-tertiary); }
.pair-code {
  margin: 4px 0 18px; font-size: 52px; font-weight: 800; letter-spacing: 6px;
  font-variant-numeric: tabular-nums; color: var(--text-primary); min-height: 1.2em;
}
button.dev-btn { width: 100%; background: none; font: inherit; cursor: pointer; }
.dev-btn + .dev-btn, .fine + .dev-btn { margin-top: 12px; }

/* Privacy and terms pages: the same card, wider, text left-aligned. */
.card.doc { width: min(680px, 100%); text-align: left; }
.doc h1 { font-size: 24px; }
.doc h2 { margin: 22px 0 6px; font-size: 17px; }
.doc p, .doc li { line-height: 1.55; }
.doc ul { padding-left: 20px; }
.doc a, .fine a { color: var(--accent-strong); }