/* ============ APP SHELL ============ */
.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  max-width:100vw;
  overflow-x:hidden;
}

/* ============ TOP NAV ============ */
.topnav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:1180px;margin:0 auto;
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:-.02em;
}
.brand-mark{
  width:30px;height:30px;
  background:var(--accent);color:#fff;
  border-radius:9px;
  display:grid;place-items:center;
  font-size:15px;font-weight:800;
  box-shadow:0 4px 12px rgba(255,77,109,.35);
}
.nav-actions{display:flex;align-items:center;gap:8px}

/* ============ GENERIC SCREEN ============ */
.screen{
  flex:1;max-width:560px;margin:0 auto;width:100%;
  padding:32px 20px 80px;
  display:flex;flex-direction:column;gap:24px;
}
.screen-wide{max-width:760px}

/* ============ BOTTOM NAV ============ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  display:none;
  justify-content:space-around;
}
.bn-item{
  padding:8px 12px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--ink-3);
  transition:color .2s;
}
.bn-item.active{color:var(--accent)}
.bn-item .em{font-size:20px}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .screen{padding:24px 18px 100px}
  .bottom-nav{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}