/* ═══════════════════════════════════════════════════════════
   FoodTracker — Навигация (Navigation)
   ═══════════════════════════════════════════════════════════
   Шапка, нижняя навигация (floating pill), переключатель
   темы, кнопка настроек, дата.
   ═══════════════════════════════════════════════════════════ */

/* ─── Шапка (Header) ─── */
.header{
  background:var(--header-bg);
  backdrop-filter:blur(var(--blur-lg));
  -webkit-backdrop-filter:blur(var(--blur-lg));
  border-bottom:1px solid var(--border);
  padding:var(--space-xl) var(--space-4xl);
  padding-top:max(var(--space-xl), env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100
}
.header h1{font-size:var(--font-2xl);font-weight:700;display:flex;align-items:center;gap:10px}
.header h1 span{
  background:linear-gradient(135deg,var(--pri),var(--pri2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.header h1 .rank-header-badge{
  -webkit-text-fill-color:initial;-webkit-background-clip:initial;
  background-clip:initial;background:none
}

/* Логотип */
.logo-icon{width:34px;height:34px;background:var(--accent);border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:20px;height:20px}

/* Действия в шапке */
.header-actions{display:flex;align-items:center;gap:var(--space-sm)}

/* Переключатель темы */
.theme-toggle{background:none;border:none;color:var(--muted);cursor:pointer;padding:var(--space-sm);border-radius:var(--r-xs);display:flex;align-items:center;transition:all var(--transition)}
.theme-toggle:hover{background:rgba(var(--pri-rgb),.1);color:var(--pri)}
.theme-toggle svg{width:var(--icon-xl);height:var(--icon-xl)}

/* Дата */
.header .date{font-size:var(--font-base);color:var(--muted);cursor:pointer;padding:var(--space-xs) var(--space-md);border-radius:var(--space-md);transition:background var(--transition)}
.header .date:hover{background:rgba(var(--pri-rgb),.08)}

/* Шестерёнка (настройки) */
.header .gear-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--font-4xl);padding:var(--space-sm);border-radius:var(--r-xs);transition:all var(--transition);display:flex;align-items:center}
.header .gear-btn:hover{background:rgba(var(--pri-rgb),.08);color:var(--pri)}
.header .gear-btn svg{width:var(--icon-xl);height:var(--icon-xl)}

/* ─── Нижняя навигация — Floating Pill ─── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--card);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:0;
  display:flex;z-index:9999;
  padding:12px 6px;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:var(--space-md) 0;border:none;background:none;color:var(--muted);
  font-size:10px;cursor:pointer;transition:all var(--transition);
  border-radius:var(--r-sm);position:relative
}
.nav-btn.active{color:var(--accent)}
.nav-btn.active::before{content:'';position:absolute;inset:4px 8px;background:rgba(var(--accent-rgb),.1);border-radius:12px;z-index:-1}
.nav-btn svg{width:var(--icon-2xl);height:var(--icon-2xl)}
.nav-btn span{font-size:var(--font-xs);font-weight:500}