/* Shared site header + navbar (used by the main app and the standalone tool pages).
   Everything is prefixed with "site-" so it can't clash with a tool page's own styles. */
.site-top {
  --n-bg: #0d0f13;
  --n-panel: #15181e;
  --n-panel-2: #1b1f27;
  --n-line: #262b35;
  --n-text: #e9ecf1;
  --n-muted: #8b93a1;
  --n-accent: #ff5a36;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 28px; border-bottom: 1px solid var(--n-line);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: transparent; position: relative; z-index: 50; box-sizing: border-box; width: 100%;
}
.site-top *, .site-menu * { box-sizing: border-box; }
.site-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n-muted); text-decoration: none; flex: none; }
.site-brand:hover span { color: var(--n-text); }
.site-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--n-accent); box-shadow: 0 0 16px var(--n-accent); }

.site-tabs { display: inline-flex; gap: 4px; background: var(--n-panel); border: 1px solid var(--n-line); border-radius: 12px; padding: 4px; min-width: 0; }
.site-tabs a, .site-tabs button {
  color: var(--n-muted); text-decoration: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 7px 14px; border-radius: 8px;
  background: none; border: 0; cursor: pointer; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px;
}
.site-tabs a:hover, .site-tabs button:hover { color: var(--n-text); }
.site-tabs .on { background: var(--n-text); color: #111; }
.site-tabs .on:hover { color: #111; }
.site-caret { width: 10px; height: 10px; transition: transform .15s; }
.site-tabs button[aria-expanded="true"] .site-caret { transform: rotate(180deg); }
.site-tabs button.has-active:not(.on) { color: var(--n-text); }

.site-menu {
  --n-panel-2: #1b1f27; --n-line: #262b35; --n-text: #e9ecf1; --n-muted: #8b93a1; --n-accent: #ff5a36;
  position: fixed; z-index: 1000; min-width: 260px; padding: 6px; margin: 0; list-style: none;
  background: var(--n-panel-2); border: 1px solid var(--n-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.site-menu[hidden] { display: none; }
.site-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--n-text); text-decoration: none; }
.site-menu a:hover, .site-menu a:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.site-menu a.on { background: rgba(255, 90, 54, .14); }
.site-menu b { font-size: 14px; font-weight: 600; }
.site-menu small { font-size: 12px; color: var(--n-muted); }

@media (max-width: 820px) {
  .site-top { padding: 12px 16px; gap: 10px; }
  .site-brand > span:not(.site-dot) { display: none; }
  .site-tabs { max-width: calc(100vw - 60px); overflow-x: auto; scrollbar-width: none; }
  .site-tabs::-webkit-scrollbar { display: none; }
  .site-tabs a, .site-tabs button { padding: 7px 10px; }
  .site-menu { min-width: 0; width: calc(100vw - 32px); left: 16px !important; }
}