/* myCaseFoam — delad ljus palett + toppmeny (landning + verktyg). */
:root {
  --bg: #f6f7fa;
  --card: #ffffff;
  --ink: #1a1d24;
  --muted: #626b7a;
  --accent: #3a7afe;
  --accent-ink: #ffffff;
  --ok: #1f9d5a;
  --warn: #b9770e;
  --border: #e4e7ee;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-nav .brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.site-nav .nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.site-nav .nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.site-nav .nav-links a:hover { color: var(--ink); }
.site-nav .nav-links a.cta {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 20px;
}
.site-nav .nav-links a.cta:hover { color: var(--accent-ink); opacity: .9; }
#authArea a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
#authArea a:hover { color: var(--ink); }

@media (max-width: 480px) {
  .site-nav { padding: 10px 14px; gap: 8px 12px; }
  .site-nav .nav-links { gap: 10px 12px; font-size: 13px; }
}