/* Neon Sparks Sheets — simple content pages (privacy, 404). Same palette as the app. */
:root {
  --accent: #6d28d9;
  --accent-soft: #ede9fe;
  --spark: #22d3ee;
  --bg: #eceaf2;
  --chrome: #ffffff;
  --line: #dedbe8;
  --ink: #23212b;
  --ink-2: #5c5870;
  --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
body.dark {
  --accent: #a78bfa;
  --accent-soft: #2e2645;
  --bg: #17151d;
  --chrome: #22202a;
  --line: #34313f;
  --ink: #ece9f5;
  --ink-2: #a9a4bd;
  color-scheme: dark;
}
html { background: #eceaf2; }
@media (prefers-color-scheme: dark) { html { background: #17151d; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 var(--font-ui); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-head {
  position: relative;
  color: #fff;
  background: linear-gradient(100deg, #2e1065 0%, #4c1d95 38%, #6d28d9 72%, #a21caf 100%);
}
.page-head::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spark), #f0abfc, transparent);
}
.page-head-inner { max-width: 760px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.page-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 15px; }
.page-brand img { width: 32px; height: 32px; }
.page-brand b { font-weight: 700; }
.page-head :focus-visible { outline-color: #fff; }
main.page {
  max-width: 760px;
  margin: 28px auto 48px;
  padding: 28px 32px 32px;
  background: var(--chrome);
  border: 1px solid var(--line);
  border-radius: 12px;
}
main.page h1 { font-size: 30px; font-weight: 300; margin: 0 0 6px; line-height: 1.2; }
main.page h2 { font-size: 18px; font-weight: 600; margin: 28px 0 6px; }
main.page p, main.page li { color: var(--ink); }
main.page ul { padding-left: 22px; }
.lead { color: var(--ink-2) !important; margin-top: 0; }
.updated { font-size: 13px; color: var(--ink-2) !important; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
body.dark .btn { color: #17151d; }
.btn:hover { filter: brightness(1.08); }
.page-foot { max-width: 760px; margin: 0 auto 32px; padding: 0 20px; font-size: 13px; color: var(--ink-2); }
main.page .big-404 { font-size: 64px; font-weight: 800; margin: 0; line-height: 1; background: linear-gradient(135deg, #22d3ee, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 600px) {
  main.page { margin: 0 0 24px; border-radius: 0; border-left: none; border-right: none; padding: 22px 18px; }
  main.page h1 { font-size: 26px; }
}
@media print {
  .page-head { background: none; color: #000; }
  main.page { border: none; }
}