/* Canonical navigation styling. Loaded by every public template. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar, #dedede);
  border-bottom: 1px solid #c8c8c8;
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  min-height: 64px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 92px;
  align-items: center;
  padding: 8px 14px;
  gap: 8px;
}

.logo-button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; padding: 0; background: transparent; color: var(--purple, #6b3fa0); }
.brand-icon,.logo-button img { width: 40px; height: 40px; display: block; object-fit: contain; }
.app-title { min-width: 0; text-align: center; line-height: 1.1; }
.app-title strong,.app-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title strong { color: #111; font-size: 1rem; font-weight: 800; }
.app-title span { margin-top: 2px; color: #333; font-size: .82rem; font-weight: 500; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; justify-self: end; min-height: 38px; padding: 0 12px; border: 1px solid rgba(107,63,160,.32); border-radius: 4px; background: #fff; color: var(--purple, #6b3fa0); font-size: .82rem; line-height: 1; font-weight: 800; white-space: nowrap; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--bar, #dedede); border-top: 1px solid #c8c8c8; padding: 6px 6px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 18px rgba(0,0,0,.08); }
.nav-item { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; color: #555; font-size: .68rem; line-height: 1.05; text-align: center; }
.nav-item .material-icons-outlined { font-size: 25px; }
.nav-item .app-icon { width: 25px; height: 25px; }
.nav-item.active { color: var(--purple, #6b3fa0); font-weight: 850; }

.app-topbar[data-shared-topbar],.bottom-nav[data-shared-bottom-nav] { transition: transform .22s ease, opacity .18s ease; will-change: transform, opacity; }
.app-topbar[data-shared-topbar].is-scroll-hidden { transform: translateY(-110%); }
.bottom-nav[data-shared-bottom-nav].is-scroll-hidden { opacity: 0; pointer-events: none; }

@media (min-width: 700px) {
  .topbar-inner { grid-template-columns: 82px minmax(0, 1fr) 92px; padding-left: 24px; padding-right: 24px; }
  .bottom-nav { width: min(100%, 900px); margin: 0 auto; left: 50%; right: auto; transform: translateX(-50%); }
  .bottom-nav[data-shared-bottom-nav].is-scroll-hidden { transform: translateX(-50%); opacity: 0; }
}

@media (max-width: 380px) {
  .topbar-inner { grid-template-columns: 52px minmax(0, 1fr) 82px; padding-left: 10px; padding-right: 10px; }
  .logo-button { width: 38px; height: 38px; }
  .lang-switch { min-height: 36px; padding: 0 9px; font-size: .78rem; }
  .nav-item { font-size: .63rem; }
}