/* Оболочка: шапка (fixed), прокручиваемый main, нижняя навигация (fixed). */

header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--sep);
}
header .brand { cursor: pointer; font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; letter-spacing: -.2px; }
/* плитка-иконка с 3D-яблоком (img/apple.png) — та же, на которую садится яблоко в заставке (css/intro.css) */
header .brand .logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(140deg, #ffe066, #ff9a3c 50%, #ff5c8a);
}
header .brand .logo .i { width: 40px; height: 40px; max-width: none; margin: -5px; }  /* у картинки прозрачные поля — яблоко почти во всю плитку */
/* стекло: наклон за курсором/телефоном (js/logo.js), яблоко глубже стекла, блик пробегает раз в 7 с */
header .brand { perspective: 240px; }
header .brand .logo {
  position: relative; overflow: hidden; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(255,100,80,.3);
}
header .brand .logo .i { transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform .5s cubic-bezier(.22,1,.36,1); }
header .brand .logo::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-100%); animation: logo-glint 7s ease-in-out 1.5s infinite;
}
@keyframes logo-glint { 0% { transform: translateX(-100%) } 14%, 100% { transform: translateX(100%) } }
/* поиск нашёл скидку: яблоко подпрыгивает, плитка вспыхивает */
header .brand .logo.deal .i { animation: logo-deal .9s cubic-bezier(.34,1.56,.64,1); }
header .brand .logo.deal { animation: logo-flash .9s ease-out; }
@keyframes logo-deal { 0% { transform: none } 30% { transform: translateY(-5px) scale(1.2) rotate(-12deg) } 60% { transform: translateY(1px) scale(.95) } 100% { transform: none } }
@keyframes logo-flash { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(255,100,80,.3) } 30% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 4px rgba(255,180,80,.45), 0 0 18px rgba(255,150,80,.7) } }
/* яблоко при открытии качнётся; то же по наведению */
header .brand .logo .i { transform-origin: 50% 90%; animation: logo-sway .9s cubic-bezier(.34,1.56,.64,1) .2s backwards; }
@media (hover: hover) { header .brand:hover .logo .i { animation-name: logo-sway2; animation-delay: 0s; } }
@keyframes logo-sway { 0% { transform: rotate(0) } 30% { transform: rotate(-9deg) } 60% { transform: rotate(6deg) } 100% { transform: rotate(0) } }
@keyframes logo-sway2 { 0% { transform: rotate(0) } 30% { transform: rotate(-9deg) } 60% { transform: rotate(6deg) } 100% { transform: rotate(0) } }
@media (prefers-reduced-motion: reduce) { header .brand .logo, header .brand .logo *, header .brand .logo::after { animation: none !important; } }
header .gear {
  width: 34px; height: 34px; border: none; background: var(--bg); border-radius: 50%;
  font-size: 17px; color: var(--text); display: grid; place-items: center; cursor: pointer;
}

main {
  position: fixed; top: var(--header-h); bottom: var(--nav-h); left: 0; right: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 24px;
}

.view { display: none; }
.view.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* клавиатура открыта — меню скрыто, лента тянется до низа */
body.kb-open nav.tabbar { opacity: 0; visibility: hidden; pointer-events: none; }
body.kb-open main { bottom: 0; }

nav.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h); z-index: 20;
  display: flex; background: var(--card); border-top: 1px solid var(--sep);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabbar button {
  flex: 1; border: none; background: none; color: var(--hint); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; padding-top: 6px;
}
nav.tabbar button .ic { display: grid; place-items: center; line-height: 1; transition: .15s; }
nav.tabbar button .ic .i { width: 23px; height: 23px; }
nav.tabbar button { position: relative; }
nav.tabbar button .nav-badge {
  position: absolute; top: 2px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
nav.tabbar button.active { color: var(--accent); }
nav.tabbar button.active .ic { transform: translateY(-1px); }
nav.tabbar button.active .ic .i { stroke-width: 2.3; }