/* DaaS shared site nav — single source of truth for the public-page top bar.
   Injected by site-nav.js into <header id="site-nav">. Carries its OWN light/dark
   tokens (keyed off :root[data-theme]) because page token vocabularies differ
   (geo: --acc/--bad/--good; docs/about: --ink2/--border; index: landing.css).
   Palette mirrors landing.css so the bar blends on every page. */

#site-nav {
  --snav-bg: rgba(8, 11, 20, .72);
  --snav-fg: #eaf0fb;
  --snav-mut: #aeb8d4;
  --snav-line: rgba(255, 255, 255, .08);
  --snav-hover-bg: rgba(255, 255, 255, .06);
  --snav-ghost-border: rgba(255, 255, 255, .14);
  --snav-grad: linear-gradient(135deg, #4cd0a8, #8b5cf6);
  --snav-cta-ink: #07111d;

  position: sticky;
  top: 0;
  z-index: 100;
  display: block;
  min-height: 58px;            /* reserve height → no layout shift before JS */
  background: var(--snav-bg);
  border-bottom: 1px solid var(--snav-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme="light"] #site-nav {
  --snav-bg: rgba(247, 249, 252, .85);
  --snav-fg: #0f1626;
  --snav-mut: #586176;
  --snav-line: rgba(15, 22, 38, .10);
  --snav-hover-bg: rgba(15, 22, 38, .05);
  --snav-ghost-border: rgba(15, 22, 38, .14);
}

.snav-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 58px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.snav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px;
  color: var(--snav-fg);
  text-decoration: none;
  flex-shrink: 0;
}
.snav-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--snav-grad);
  color: var(--snav-cta-ink);
  font-weight: 800;
  font-size: 16px;
}

.snav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.snav-links a {
  color: var(--snav-mut);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 8px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.snav-links a:hover {
  color: var(--snav-fg);
  background: var(--snav-hover-bg);
}
.snav-links a.active {
  color: var(--snav-fg);
  background: var(--snav-hover-bg);
}

.snav-spacer { flex: 1; }

.snav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.snav-icon {
  display: inline-grid;
  place-items: center;
  height: 34px;
  min-width: 34px;
  padding: 0 9px;
  border: 1px solid var(--snav-ghost-border);
  border-radius: 9px;
  background: none;
  color: var(--snav-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.snav-icon:hover { background: var(--snav-hover-bg); }
.snav-icon svg { width: 17px; height: 17px; display: block; }

/* theme icon swap, mirrors landing.css */
:root[data-theme="light"] #site-nav .snav-moon { display: none; }
:root[data-theme="light"] #site-nav .snav-sun  { display: block; }
:root[data-theme="dark"]  #site-nav .snav-sun,
#site-nav .snav-sun  { display: none; }
:root[data-theme="dark"]  #site-nav .snav-moon,
#site-nav .snav-moon { display: block; }

.snav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  background: var(--snav-grad);
  color: var(--snav-cta-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s;
}
.snav-cta:hover { filter: brightness(1.07); }

@media (max-width: 720px) {
  .snav-links { display: none; }
  .snav-inner { gap: 12px; }
}

/* ── shared site footer (injected by site-footer.js into <footer id="site-footer">) ──
   Carries its OWN tokens for the same reason the nav does: page var vocabularies
   differ, so the footer must look identical regardless of which page hosts it. */
#site-footer {
  --sftr-bg: #0e1424;
  --sftr-fg: #eaf0fb;
  --sftr-mut: #aeb8d4;
  --sftr-dim: #6b7596;
  --sftr-line: rgba(255, 255, 255, .08);
  --sftr-grad: linear-gradient(135deg, #4cd0a8, #8b5cf6);
  --sftr-cta-ink: #07111d;

  display: block;
  background: var(--sftr-bg);
  border-top: 1px solid var(--sftr-line);
  color: var(--sftr-mut);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="light"] #site-footer {
  --sftr-bg: #ffffff;
  --sftr-fg: #0f1626;
  --sftr-mut: #4a5468;
  --sftr-dim: #8893a8;
  --sftr-line: rgba(15, 22, 38, .10);
}
.sftr-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 28px;
}
.sftr-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.sftr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--sftr-fg);
  text-decoration: none;
}
.sftr-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--sftr-grad);
  color: var(--sftr-cta-ink);
  font-weight: 800;
  font-size: 14px;
}
.sftr-tag {
  color: var(--sftr-dim);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 290px;
  margin: 10px 0 0;
}
.sftr-tag a { color: var(--sftr-mut); text-decoration: none; }
.sftr-tag a:hover { color: var(--sftr-fg); }
.sftr-col h4 {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sftr-dim);
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 12px;
}
.sftr-col a {
  display: block;
  color: var(--sftr-mut);
  text-decoration: none;
  padding: 4px 0;
  font-size: 13px;
}
.sftr-col a:hover { color: var(--sftr-fg); }
.sftr-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 0;
  border-top: 1px solid var(--sftr-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--sftr-dim);
}
@media (max-width: 760px) {
  .sftr-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .sftr-top { grid-template-columns: 1fr; }
}