/* The two legal pages (privacy.html, terms.html). Plain HTML on purpose: they must open
   without the app, without JavaScript and without signing in. Same colours as the site —
   night blue + the house cyan — and the same light/dark choice (the `dark` class on <html>). */
:root {
  --bg: #f1f5f9; --card: #ffffff; --text: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --accent: #0e7490; --soft: #f8fafc;
}
html.dark {
  --bg: #020617; --card: #0b1220; --text: #e2e8f0; --muted: #94a3b8; --line: #1e293b;
  --accent: #22d3ee; --soft: #0f172a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 'Segoe UI', -apple-system, Roboto, sans-serif;
  background-image:
    radial-gradient(ellipse 70% 40% at 100% 0%, rgb(34 211 238 / 0.10), transparent 70%),
    radial-gradient(ellipse 60% 35% at 0% 100%, rgb(34 211 238 / 0.06), transparent 70%);
  background-attachment: fixed;
}
.top { background: #0b1220; border-bottom: 1px solid rgb(34 211 238 / 0.25); }
.top div { max-width: 46rem; margin: 0 auto; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 600; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.back { color: #22d3ee; font-size: .9rem; text-decoration: none; }
.back:hover { text-decoration: underline; }
main { max-width: 46rem; margin: 1.5rem auto 0; padding: 2rem 1.25rem 2.5rem; background: var(--card);
       border: 1px solid var(--line); border-radius: 16px; }
@media (max-width: 48rem) { main { margin: 0; border-radius: 0; border-left: 0; border-right: 0; } }
h1 { font-size: 1.8rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 2.25rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.date { color: var(--muted); margin: 0 0 1.5rem; font-size: .95rem; }
a { color: var(--accent); }
ul { padding-left: 1.25rem; }
li { margin-bottom: .35rem; }
.note { background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--accent);
        border-radius: 8px; padding: .9rem 1.1rem; margin: 1.25rem 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: .92rem; }
th, td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--soft); }
footer { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; text-align: center; color: var(--muted); font-size: .75rem; line-height: 1.7; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; margin-bottom: 1rem; font-size: .8rem; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--accent); }