*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);}
a{color:inherit;}
::selection{background:color-mix(in oklch, var(--accent) 30%, transparent);}

:root{
  --bg: oklch(21% 0.02 260);
  --surface: oklch(25% 0.02 260);
  --card: oklch(27% 0.02 260);
  --ink: oklch(95% 0.01 260);
  --muted: oklch(68% 0.02 260);
  --border: oklch(38% 0.02 260);
  --accent: oklch(62% 0.19 29);
  --accent2: oklch(48% 0.18 29);
  --shadow: 0 2px 16px rgba(0,0,0,0.35);
}
html.light-mode{
  --bg: oklch(97% 0.014 75);
  --surface: oklch(99% 0.006 75);
  --card: oklch(99.5% 0.002 75);
  --ink: oklch(24% 0.03 260);
  --muted: oklch(50% 0.02 260);
  --border: oklch(89% 0.01 260);
  --accent: oklch(52% 0.20 29);
  --accent2: oklch(38% 0.17 29);
  --shadow: 0 2px 14px rgba(31,37,51,0.08);
}

@keyframes pf-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Full-bleed blurred backdrop behind every screen + the wrapper that sits above it. */
.bg-photo{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    linear-gradient(color-mix(in oklch, var(--bg) 35%, transparent), color-mix(in oklch, var(--bg) 45%, transparent)),
    url('/images/backdrop-lake.jpg') center/cover no-repeat;
  filter: blur(6px);
  transform: scale(1.05);
}
.page-content{position:relative;z-index:1;}

/* Shared page/layout helpers, reused across views */
.page-pad{padding-left:32px;padding-right:32px;}
@media (max-width:860px){.page-pad{padding-left:18px!important;padding-right:18px!important;}}

.stat-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:860px){.stat-row-3{grid-template-columns:repeat(2,1fr);}}

.stat-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:860px){.stat-row-4{grid-template-columns:repeat(2,1fr);}}

/* Shared chrome: theme toggle, feedback FAB, minimal top-controls row */
.theme-toggle{background:var(--bg);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:8px 14px;font-family:inherit;font-weight:600;font-size:.85rem;cursor:pointer;}
.theme-toggle:hover{border-color:var(--accent2);}

.feedback-fab{position:fixed;bottom:20px;right:20px;z-index:40;background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;text-decoration:none;box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s,color .15s;}
.feedback-fab:hover{border-color:var(--accent2);color:var(--ink);}

.top-controls{display:flex;justify-content:flex-end;padding:16px 24px;}
.top-links{display:flex;gap:8px;flex-wrap:wrap;}
.top-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:7px 14px;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;text-decoration:none;background:var(--card);transition:background .15s,border-color .15s;}
.top-link:hover{border-color:var(--accent2);}

.menu-link{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;}
.menu-link:hover{color:var(--ink);}