/* The menu and footer shared by every BackendGen.dev page. Class names start with "sitenav"/"sitefoot" so they
   never clash with a page's own styles. */
.sitenav {
  --sn-bg: #0d1117; --sn-panel: #161b22; --sn-line: #30363d; --sn-text: #c9d1d9; --sn-muted: #8b949e;
  --sn-strong: #ffffff; --sn-cyan: #00f2fe; --sn-blue: #4facfe;
  background: var(--sn-bg); border-bottom: 1px solid var(--sn-line); position: relative; z-index: 50;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5;
}
.sitenav * { box-sizing: border-box; }
.sitenav-in { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; min-height: 58px; }
.sitenav .sitenav-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.12rem; color: var(--sn-strong); text-decoration: none; white-space: nowrap; }
.sitenav .sitenav-brand img { border-radius: 7px; display: block; }
.sitenav .sitenav-name span { background: linear-gradient(90deg, var(--sn-cyan), var(--sn-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sitenav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.sitenav .sitenav-links a {
  color: var(--sn-text); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 7px 11px; border-radius: 7px; white-space: nowrap;
}
.sitenav .sitenav-links a:hover { color: var(--sn-strong); background: var(--sn-panel); }
.sitenav .sitenav-links a[aria-current="page"] { color: var(--sn-strong); background: var(--sn-panel); box-shadow: inset 0 -2px 0 var(--sn-cyan); }
.sitenav .sitenav-links .sitenav-account {
  margin-left: auto; border: 1px solid var(--sn-blue); color: var(--sn-strong);
}
.sitenav .sitenav-links .sitenav-account:hover { background: rgba(79, 172, 254, .12); }
/* signed-in / signed-out links (site-nav.js sets html.bg-in) */
html:not(.bg-in) .sitenav [data-when="in"], html.bg-in .sitenav [data-when="out"] { display: none !important; }
.sitenav .sitenav-signout {
  background: none; border: 0; color: var(--sn-muted); font: inherit; font-weight: 600; font-size: .93rem; padding: 7px 11px; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
}
.sitenav .sitenav-signout:hover { color: var(--sn-strong); background: var(--sn-panel); }
.sitenav-extra { display: flex; align-items: center; gap: 14px; font-size: .88rem; color: var(--sn-muted); }
.sitenav-extra:empty { display: none; }
.sitenav-extra button, .sitenav-extra a { background: none; border: 0; padding: 0; color: var(--sn-blue); cursor: pointer; font: inherit; text-decoration: none; }
.sitenav-extra button:hover, .sitenav-extra a:hover { text-decoration: underline; }
.sitenav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--sn-line); border-radius: 7px; color: var(--sn-strong);
  font-size: 1.2rem; line-height: 1; padding: 7px 10px; cursor: pointer;
}
.sitenav :focus-visible, .sitefoot :focus-visible { outline: 2px solid var(--sn-cyan); outline-offset: 2px; }

/* the menu folds into the ☰ button when its links don't fit: signed-out links need about 1200px, signed-in ones about 1180px */
@media (max-width: 1200px) {
  .sitenav-in { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .sitenav-toggle { display: inline-block; }
  .sitenav-links { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px; }
  .sitenav.open .sitenav-links { display: flex; }
  .sitenav .sitenav-links a { padding: 10px 12px; font-size: 1rem; }
  .sitenav .sitenav-links .sitenav-account { margin-left: 0; margin-top: 6px; text-align: center; }
  .sitenav .sitenav-signout { padding: 10px 12px; font-size: 1rem; }
  .sitenav-extra { order: 2; flex-basis: 100%; justify-content: flex-end; }
  .sitenav-extra:empty { display: none; }
}
@media (max-width: 1180px) {
  html.bg-in .sitenav-in { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  html.bg-in .sitenav-toggle { display: inline-block; }
  html.bg-in .sitenav-links { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px; }
  html.bg-in .sitenav.open .sitenav-links { display: flex; }
  html.bg-in .sitenav .sitenav-links a { padding: 10px 12px; font-size: 1rem; }
  html.bg-in .sitenav .sitenav-links .sitenav-account { margin-left: 0; margin-top: 6px; text-align: center; }
  html.bg-in .sitenav .sitenav-signout { padding: 10px 12px; font-size: 1rem; }
  html.bg-in .sitenav-extra { order: 2; flex-basis: 100%; justify-content: flex-end; }
  html.bg-in .sitenav-extra:empty { display: none; }
}

.sitebanner {
  background: linear-gradient(90deg, rgba(79, 172, 254, .16), rgba(0, 242, 254, .10)); border-bottom: 1px solid rgba(0, 242, 254, .45);
  color: #c9d1d9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;
}
.sitebanner-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; justify-content: center; text-align: center; }
.sitebanner strong { color: #fff; font-size: 1.3rem; white-space: nowrap; }
.sitebanner span { font-size: 1rem; max-width: 760px; }
.sitebanner a { color: #00f2fe; font-weight: 600; }
.sitebanner.offer { background: linear-gradient(90deg, rgba(240, 180, 41, .18), rgba(255, 123, 114, .12)); border-bottom-color: rgba(240, 180, 41, .55); }
.sitebanner.offer .sitebanner-in { padding: 11px 24px; align-items: center; }
.sitebanner.offer strong { font-size: 1.05rem; }
.sitebanner.offer span { font-size: .95rem; }
.sitebanner.offer a { color: #f0b429; white-space: nowrap; }
/* offer price under a price card (home and business pages) */
.price.was, .amt.was { font-size: 1.3rem !important; color: #8b949e !important; text-decoration: line-through; margin-bottom: 0 !important; }
.offer-now { color: #8b949e; font-size: .85rem; margin: 2px 0 6px; }
.offer-now strong { display: block; color: #f0b429; font-size: 2.3rem; line-height: 1.15; font-weight: 800; }
@media (max-width: 860px) { .sitebanner-in { padding: 14px 16px; } .sitebanner strong { font-size: 1.15rem; white-space: normal; } .sitebanner span { font-size: .93rem; } }

.sitefoot {
  border-top: 1px solid #30363d; background: #0d1117; color: #8b949e; font-size: .84rem; line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sitefoot-in { max-width: 1180px; margin: 0 auto; padding: 22px 24px 32px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sitefoot a { color: #c9d1d9; text-decoration: none; }
.sitefoot a:hover { color: #ffffff; text-decoration: underline; }
.sitefoot .sitefoot-tm { flex-basis: 100%; font-size: .76rem; margin: 0; }
@media (max-width: 860px) { .sitefoot-in { padding: 20px 16px 28px; } }

/* the demo game stands out in the menu */
.sitenav .sitenav-links a.sitenav-demo { color: #f0b429; border: 1px solid rgba(240, 180, 41, .45); }
.sitenav .sitenav-links a.sitenav-demo:hover, .sitenav .sitenav-links a.sitenav-demo[aria-current="page"] { color: #fff; background: rgba(240, 180, 41, .15); box-shadow: none; }