/* Shared app header (2026-09-29): the home page's nav look on the signed-in pages
   (dashboard, account, family, plans, payment). Loaded after each page's own styles. */
:root {
  --nav-ink: #1d1d1f; --nav-ink-2: #6e6e73; --nav-surface: #f5f5f7; --nav-surface-2: #e8e8ed;
  --nav-rule: rgba(0,0,0,0.08); --nav-primary: #004225; --nav-primary-hover: #003a20;
  --nav-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
nav.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 64px; padding: 0 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.86); color: var(--nav-ink); font-family: var(--nav-font);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nav-rule); box-shadow: none;
}
nav.top-nav .top-nav-brand { display: inline-flex; align-items: center; color: var(--nav-ink); }
nav.top-nav .top-nav-brand img { height: 36px !important; width: auto !important; display: block; }
nav.top-nav .top-nav-right { display: flex; align-items: center; gap: 10px; }
nav.top-nav .language-selector { margin-left: 0; gap: 0; }
nav.top-nav .language-selector label { display: none; }
nav.top-nav .language-select {
  min-width: 74px; max-width: 150px; background-color: var(--nav-surface); color: var(--nav-ink);
  border: 1px solid transparent; padding: 7px 30px 7px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 500; font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231d1d1f' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; transition: background-color 0.2s;
}
nav.top-nav .language-select:hover { background-color: var(--nav-surface-2); }
nav.top-nav .language-select:focus { outline: none; border-color: var(--nav-primary); box-shadow: none; }
nav.top-nav .auth-link, nav.top-nav .user-menu-trigger {
  color: var(--nav-ink); background: var(--nav-surface); border-radius: 999px; padding: 7px 14px;
  font-size: 0.84rem; font-weight: 500; text-decoration: none; transition: background 0.2s; font-family: inherit;
}
nav.top-nav .auth-link:hover, nav.top-nav .user-menu-trigger:hover { background: var(--nav-surface-2); }
nav.top-nav .user-menu-trigger { gap: 6px; white-space: nowrap; max-width: 46vw; }
nav.top-nav .user-menu-trigger #userName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.top-nav .user-menu-trigger span:last-child { font-size: 0.7rem; color: var(--nav-ink-2); }
nav.top-nav .user-menu { margin-top: 8px; border-radius: 14px; border: 1px solid var(--nav-rule); box-shadow: 0 12px 40px rgba(29,29,31,0.16); min-width: 220px; overflow: hidden; }
nav.top-nav .user-menu a, nav.top-nav .user-menu button { font-family: inherit; font-size: 0.9rem; color: var(--nav-ink); }
nav.top-nav .user-menu a:hover, nav.top-nav .user-menu button:hover { background: var(--nav-surface); }
nav.top-nav .user-menu-divider { border-color: var(--nav-rule); }
body.has-top-nav { padding-top: 84px !important; }
@media (max-width: 768px) {
  nav.top-nav { height: 56px; padding: 0 14px; }
  nav.top-nav .top-nav-brand img { height: 30px !important; }
  nav.top-nav .top-nav-right { gap: 8px; }
  nav.top-nav .language-selector { display: flex !important; }
  nav.top-nav .language-select { max-width: 104px; font-size: 12px; padding: 6px 26px 6px 10px; background-position: right 9px center; }
  nav.top-nav .auth-link, nav.top-nav .user-menu-trigger { padding: 6px 11px; font-size: 0.8rem; }
  body.has-top-nav { padding-top: 72px !important; }
}