/* Шапка сайта на страницах Django (вход, профиль, документы, оплата…).
 *
 * Копия шапки главной: правила ниже — frontend/src/marketing/marketingHeader.css
 * плюс кнопки и плашка баланса из landing.css. Палитра главной объявлена на
 * самой шапке, а не на :root: у Django-страниц своя палитра (светлая тема у них
 * бежевая), и шапка не должна её менять, а страница — шапку.
 * Правите шапку главной — правьте и этот файл.
 */
.nav{
  --void:#0b0e1a; --void-2:#10142a; --void-3:#171b33;
  --stroke:rgba(255,255,255,.08); --stroke-2:rgba(255,255,255,.14);
  --text:#f4f5fa; --text-dim:#9195b8; --text-faint:#676c93;
  --blue:#6c7eff; --purple:#a78bfa; --pink:#f472b6; --on-accent:#0b0e1a;
  --grad:linear-gradient(90deg,var(--blue),var(--purple),var(--pink));
  --grad-soft:linear-gradient(90deg,rgba(108,126,255,.14),rgba(167,139,250,.14),rgba(244,114,182,.14));
  --btn-grad:linear-gradient(135deg,#4757e6,#6f4be3);
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--text);
}
html[data-theme="light"] .nav{
  --void:#f5f6fb; --void-2:#ffffff; --void-3:#eceef7;
  --stroke:rgba(20,24,58,.09); --stroke-2:rgba(20,24,58,.16);
  --text:#14172e; --text-dim:#4d5375; --text-faint:#6b7194;
  --blue:#4757e6; --purple:#6f4be3; --pink:#cf3a92; --on-accent:#ffffff;
  --grad-soft:linear-gradient(90deg,rgba(71,87,230,.1),rgba(111,75,227,.1),rgba(207,58,146,.1));
}
.nav a{ color:inherit; text-decoration:none; }
.nav button{ font:inherit; cursor:pointer; }

/* Кнопки — из landing.css, только внутри шапки. */
.nav .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px; border:1px solid var(--stroke-2);
  background:transparent; color:var(--text); transition:all .15s ease; white-space:nowrap;
}
.nav .btn:hover{ border-color:var(--purple); }
.nav .btn.primary{
  background:var(--blue); border:1px solid var(--blue); color:var(--on-accent);
  box-shadow:0 4px 18px -6px rgba(108,126,255,.5);
}
.nav .btn.primary:hover{ background:#8593FF; border-color:#8593FF; }
html[data-theme="light"] .nav .btn{ background:var(--void-2); }
html[data-theme="light"] .nav .btn.primary{
  background:var(--btn-grad); border-color:transparent; color:#fff;
  box-shadow:0 8px 22px -10px rgba(71,87,230,.7), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme="light"] .nav .btn.primary:hover{ background:var(--btn-grad); filter:brightness(1.08); }

/* Плашка баланса — из landing.css. На Django-страницах это ссылка на пополнение. */
.nav .balance-chip{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px;
  color:var(--text); background:var(--grad-soft); border:1px solid var(--stroke-2);
  border-radius:999px; padding:6px 8px 6px 14px; transition:border-color .15s;
}
.nav .balance-chip:hover{ border-color:var(--purple); }
.nav .balance-chip > .ui-icon{ width:14px; height:14px; color:var(--purple); }
.nav .balance-chip b{ font-weight:700; }
.nav .balance-chip .bc-label{ color:var(--text-faint); font-size:11px; }
.nav .balance-chip .bc-add{
  width:22px; height:22px; border-radius:50%; background:var(--grad); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav .balance-chip .bc-add .ui-icon{ width:14px; height:14px; stroke-width:2.4; }
html[data-theme="light"] .nav .balance-chip{ background:var(--void-2); }
@media (max-width:900px){ .nav .balance-chip .bc-label{ display:none; } }

html[data-theme="light"] .nav{
  background:rgba(255,255,255,.78);
  box-shadow:0 1px 0 rgba(20,24,58,.04), 0 8px 24px -18px rgba(20,24,58,.25);
}
html[data-theme="light"] .nav .mobile-burger{ background:var(--void-2); }

/* Ниже — marketingHeader.css без изменений. */
.nav{
  position:sticky; top:0; z-index:50; isolation:isolate;
  background:color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--stroke);
  box-shadow:0 12px 36px -28px var(--blue);
  padding-top:env(safe-area-inset-top, 0px);
}
.nav::after{
  content:''; position:absolute; bottom:-1px; left:8%; right:8%; height:1px;
  background:var(--grad); opacity:.5; pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent);
}
.nav-inner{
  display:flex; align-items:center; gap:22px; max-width:1440px; margin:0 auto; position:relative;
  padding:14px max(16px, env(safe-area-inset-right, 0px), min(28px, 4vw)) 14px max(16px, env(safe-area-inset-left, 0px), min(28px, 4vw));
}
.nav-logo{ display:flex; align-items:center; flex-shrink:0; border-radius:8px; }
.nav-logo .lg{ font-family:var(--font-display); font-weight:800; font-size:19px; }
.nav-links{
  display:flex; align-items:center; gap:2px; margin-right:auto; padding:4px;
  border:1px solid var(--stroke); border-radius:999px;
  background:color-mix(in srgb, var(--void-3) 48%, transparent);
}
.nav-links a{
  position:relative; padding:9px 11px; border-radius:999px; white-space:nowrap;
  font-size:12.5px; color:var(--text-dim); font-weight:500;
  transition:color .18s ease, background-color .18s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:center; transition:transform .2s ease;
}
.nav-links a:is(:hover,:focus-visible,.active){ color:var(--text); background:var(--grad-soft); }
.nav-links a:is(:hover,:focus-visible,.active)::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; margin-left:auto; }
.nav-right .btn{ min-height:40px; }
.nav-right .theme-switch{ min-height:40px; }
.nav :is(.btn,.theme-switch,.balance-chip,.mobile-burger){
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav .btn.primary{ box-shadow:0 8px 24px -12px var(--blue); }
.nav :focus-visible{ outline:2px solid var(--purple); outline-offset:3px; }
.mobile-burger{
  display:flex; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--stroke-2); background:var(--void-3); color:var(--text);
  align-items:center; justify-content:center; flex-shrink:0;
}
.mobile-burger .ui-icon{ width:20px; height:20px; }
.mobile-burger[aria-expanded="true"]{ background:var(--grad-soft); border-color:var(--purple); }
.nav:has(.balance-chip) .nav-links a{ padding-inline:8px; font-size:12px; }
@media (hover:hover) and (pointer:fine){
  .nav :is(.theme-switch,.mobile-burger):hover{ border-color:var(--purple); background:var(--grad-soft); }
  .nav .btn.primary:hover{ transform:translateY(-1px); }
}
.header-menu{
  position:absolute; top:calc(100% + 8px); right:28px; width:280px; z-index:40;
  padding:10px; border:1px solid var(--stroke-2); border-radius:20px;
  background:var(--void-2); box-shadow:0 24px 48px -20px rgba(0,0,0,.35);
  max-height:min(78dvh,calc(100dvh - 100% - 24px),680px); overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:calc(100% - 20px) 0;
  transform:translateY(-12px) scale(.3,.08);
  clip-path:polygon(84% 0,100% 0,100% 20%,98% 70%,96% 100%,92% 100%,90% 70%,88% 20%);
}
.header-menu[data-genie-active]{ visibility:visible; will-change:transform,opacity,clip-path; }
.header-menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  clip-path:none;
}
html[data-theme="light"] .header-menu{
  box-shadow:0 16px 36px -16px rgba(20,24,58,.18);
}
.header-menu-links{ display:none; }
.header-menu-tools{ display:flex; flex-direction:column; gap:4px; }
.header-menu-profile, .header-menu-links a{
  min-height:44px; display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-radius:11px; color:var(--text-dim); font-size:14px;
  transition:color .18s ease, background-color .18s ease;
}
.header-menu-profile svg{ width:18px; height:18px; color:var(--purple); }
.header-menu :is(a,.theme-switch):is(:hover,:focus-visible){ color:var(--text); background:var(--grad-soft); }
.header-menu .theme-switch{
  width:100%; min-height:44px; gap:7px; padding:11px 14px;
  background:transparent; border:0; border-radius:11px;
}
.header-menu .theme-switch-label{ margin-right:auto; color:var(--text-dim); font-size:14px; line-height:1.4; }
.header-menu-logout{ margin:4px 0 0; }
.header-menu-logout .btn{ width:100%; justify-content:center; }
@media (max-width:1240px){
  .nav-links{ display:none; }
  .header-menu{ left:16px; right:16px; width:auto; }
  .header-menu-links{ display:flex; flex-direction:column; gap:2px; }
  .header-menu-tools{ margin-top:8px; padding-top:8px; border-top:1px solid var(--stroke); }
}
@media (max-width:520px){
  .nav-inner{ gap:8px; padding:12px max(12px,env(safe-area-inset-left,0px)) 12px max(12px,env(safe-area-inset-right,0px)); }
  .nav-logo .logo-mark{ width:110px !important; height:auto !important; }
  .nav-logo .lg{ font-size:16px; }
  .nav-right{ gap:4px; }
  .nav-right .btn.ghost{ padding:10px; min-width:36px; }
  .nav-right .btn.ghost .bt-text, .nav-right .app-header-cabinet{ display:none; }
  .nav-right .btn.primary{ padding:9px 12px; font-size:12px; }
  .nav-right .theme-switch{ padding:5px; gap:0; justify-content:center; min-width:40px; }
  .nav-right :is(.theme-switch-sun,.theme-switch-moon){ display:none; }
  .header-menu{ left:12px; right:12px; }
  .balance-chip{ padding:5px 8px; gap:4px; font-size:11px; min-height:40px; }
  .balance-chip .bc-add{ display:none; }
  .balance-chip .bc-label{ font-size:10px; }
  .balance-pop{ right:-12px; width:230px; }
}
@media (max-width:430px){
  .nav-inner{ flex-wrap:wrap; gap:3px; row-gap:8px; }
  .nav-logo .logo-mark{ width:92px !important; }
  .nav .balance-chip .bc-label{ display:none; }
  .app-header-logout{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nav *, .nav *::after{ transition:none !important; animation:none !important; }
  .header-menu{ transform:none; clip-path:none; }
  .nav .btn.primary:hover{ transform:none; }
}