/* ---------- NAV ---------- */
  #nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px clamp(20px,4vw,56px);
    background:rgba(246,247,251,0.82);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--border);
  }
  .logo{ display:flex; flex-direction:column; line-height:0.78; cursor:pointer; user-select:none; flex-shrink:0; }
  .logo .flip{
    display:inline-block;
    font-family:'Unbounded',sans-serif;
    font-weight:900;
    font-size:22px;
    transform: rotate(180deg) scaleX(-1);
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
    color:var(--ink);
  }
  .logo:hover .flip{ transform: rotate(0deg) scaleX(1); color:var(--coral); }
  .logo .app{
    font-family:'Unbounded',sans-serif;
    font-weight:400;
    font-size:11px;
    letter-spacing:0.18em;
    color:var(--ink-soft);
    margin-top:8px;
  }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .nav-links{ display:flex; align-items:center; gap:18px; }
  .heart-nav{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface);
    color:var(--ink-soft); transition: all .2s ease;
  }
  .heart-nav svg{ width:16px; height:16px; }
  .heart-nav:hover{ border-color:var(--coral); color:var(--coral); }
  .heart-badge{
    position:absolute; top:-6px; right:-6px; background:var(--coral); color:#fff;
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; line-height:1;
    min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    padding:0 3px; box-shadow:0 0 0 2px var(--bg);
  }
  .mini-logo{
    display:inline-block; font-family:'Unbounded',sans-serif; font-weight:900;
    transform: rotate(180deg) scaleX(-1); color:var(--coral);
  }
  .nav-link{ font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
  .hamburger-btn{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
    width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface);
    flex-shrink:0;
  }
  .hamburger-btn span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:all .25s ease; }
  .hamburger-btn.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger-btn.open span:nth-child(2){ opacity:0; }
  .hamburger-btn.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .heart-nav.is-logged-in{ border-color:var(--teal); color:var(--teal); }
  /* Значок поддержки "?" — фиксирован в правом нижнем углу на всех страницах
     (SPA), виден только залогиненным (см. index.html/js/support-chat.js,
     updateNavAuthState() в js/nav-and-auth-entry.js переключает display).
     Тот же визуальный язык, что и .heart-nav в шапке, но крупнее и с тенью —
     обычный паттерн плавающей кнопки чата поддержки. */
  .support-widget-btn{
    position:fixed; right:22px; bottom:22px; z-index:60;
    display:none; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%; border:none;
    background:var(--ink); color:#fff; cursor:pointer;
    box-shadow:0 6px 20px rgba(20,21,26,0.28); transition: transform .2s ease, background .2s ease;
  }
  .support-widget-btn svg{ width:24px; height:24px; }
  .support-widget-btn:hover{ background:var(--coral); transform:translateY(-2px); }
  .support-widget-btn.support-widget-visible{ display:flex; }
  .support-widget-badge{ position:absolute; top:-4px; right:-4px; box-shadow:0 0 0 2px #fff; }
  .nav-link:hover{ color:var(--ink); }
  .nav-logout-btn{ background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
  .lang-switch{
    display:flex; border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--surface);
  }
  .lang-switch button{
    border:none; background:transparent; padding:6px 12px; border-radius:999px;
    font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--ink-faint);
    transition: all .25s ease;
  }
  .lang-switch button.active{ background:var(--ink); color:#fff; }
  .nav-mobile-controls{ display:none; align-items:center; gap:8px; }
  .nav-mobile-icon{ display:none; flex-shrink:0; }
  /* Компактный переключатель языка для мобильной шапки: одна кнопка с
     текущим языком вместо пары RU/EN-кнопок сразу — экономит место рядом
     с иконками уведомлений/сообщений/избранного/кабинета, из-за которого
     они слипались на узких экранах. Клик открывает выпадающий список
     с обоими языками (см. toggleLangMenu()/closeLangMenu() в
     js/nav-and-auth-entry.js). */
  .lang-switch-compact{ display:none; position:relative; flex-shrink:0; }
  .lang-toggle-btn{
    display:flex; align-items:center; gap:4px; flex-shrink:0;
    height:32px; padding:0 10px; border:1.5px solid var(--border); border-radius:999px;
    background:var(--surface); color:var(--ink);
    font-size:12px; font-weight:700; letter-spacing:0.04em; cursor:pointer; transition: all .2s ease;
  }
  .lang-toggle-btn:hover{ border-color:var(--coral); color:var(--coral); }
  .lang-toggle-caret{ flex-shrink:0; transition: transform .2s ease; }
  .lang-switch-compact.open .lang-toggle-caret{ transform:rotate(180deg); }
  .lang-dropdown{
    display:none; flex-direction:column; gap:2px; position:absolute; top:calc(100% + 8px); right:0; z-index:70;
    min-width:64px; padding:5px; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; box-shadow:var(--shadow-card);
  }
  .lang-switch-compact.open .lang-dropdown{ display:flex; }
  .lang-dropdown .lang-btn{
    display:block; width:100%; text-align:center; padding:8px 10px; border-radius:8px;
    font-size:12px; font-weight:700; letter-spacing:0.04em;
    color:var(--ink-soft); background:transparent; border:none; appearance:none; -webkit-appearance:none;
    transition: all .2s ease;
  }
  .lang-dropdown .lang-btn:hover{ background:var(--bg); color:var(--ink); }
  .lang-dropdown .lang-btn.active{ background:var(--ink); color:#fff; }
  .nav-logout-btn{
    appearance:none; -webkit-appearance:none;
    text-align:left; border-radius:12px;
  }