/* Shared by the sign-in, privacy and dashboard pages. Same tokens as the extension. */
@font-face {
  font-family: 'Fredoka';
  font-weight: 700;
  src: url('fredoka-700-latin.woff2') format('woff2');
}
:root {
  --ink: #1d2a3a;
  --muted: #5a6a7e;
  --line: #dde5ee;
  --soft: #eef3f8;
  --brand: #fb4d38;
  --brand-ink: #fff;
  --bg: #f8fafc;
  --card: #fff;
  --ok: #2f8a5b;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf5;
    --muted: #9aaabd;
    --line: #2c3a4a;
    --soft: #1d2835;
    --brand: #ff5f4b;
    --bg: #121a24;
    --card: #18222e;
    --ok: #5cc28d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
a { color: var(--brand); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 20px; height: 28px; }
.brand span { font-family: 'Fredoka', ui-rounded, system-ui, sans-serif; font-size: 22px; font-weight: 700; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 3px rgba(20, 30, 45, .06);
}
.muted { color: var(--muted); }

.btn {
  appearance: none; border: 0; border-radius: 10px; padding: 11px 16px; font: inherit; font-weight: 600;
  cursor: pointer; background: var(--soft); color: var(--ink); text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
}
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible { outline: 3px solid #e9a93a; outline-offset: 2px; }

.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.check small { display: block; color: var(--muted); font-size: 13px; }