#app { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

.app-header {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) 12px 0 12px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.app-header .title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: var(--maroon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .back { width: var(--tap); height: var(--tap); display: grid; place-items: center; margin-left: -8px; color: var(--maroon); }
.icon-btn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text); position: relative; }
.icon-btn:active { background: var(--surface-sunken); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-deep); }

.store-switch {
  display: inline-flex; align-items: center; gap: 6px; max-width: 58%;
  height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-weight: 600; color: var(--maroon);
}
.store-switch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-switch svg.ic { width: 16px; height: 16px; }

.app-main { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(var(--tabbar-h) + var(--safe-bottom) + 24px); }
.app-main.no-tabbar { padding-bottom: calc(var(--safe-bottom) + 24px); }

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--line); z-index: 20;
  transition: transform .22s ease;
}
.tabbar-hidden .tabbar { transform: translateY(100%); }
.tabbar-hidden .fab { bottom: calc(var(--safe-bottom) + 16px); }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; color: var(--text-muted); position: relative;
}
.tabbar a.active { color: var(--maroon); font-weight: 700; }
.tabbar a.active::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--gold-gradient);
}
.tabbar .badge {
  position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--pink-deep); color: #fff; font-size: 10px; line-height: 17px; text-align: center; font-weight: 700;
}

.fab {
  transition: bottom .22s ease;
  position: absolute; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--maroon); color: #fff; box-shadow: var(--shadow-lg), var(--halo); z-index: 15;
}
.fab:active { background: var(--maroon-dark); transform: scale(0.96); }