:root { --tab-navigation-ready: 1; }
.tab-transition {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg, #F3F6FB); color: var(--ink, #1A2440);
  overflow: auto; overscroll-behavior: contain;
}
.tab-transition__body {
  max-width: var(--maxw, 430px); margin: 0 auto; box-sizing: border-box;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(90px + env(safe-area-inset-bottom));
}
.tab-transition__brand { color: var(--blue, #2F6BFF); font-weight: 800; letter-spacing: .08em; }
.tab-transition h1 { margin: 28px 0 12px; font-size: 24px; outline: none; }
.tab-transition [role=status] { color: var(--ink-2, #5A6B86); font-size: 14px; }
.tab-transition .bottom-nav a { transition: none; }
.tab-transition__skeleton { display: grid; gap: 16px; margin-top: 24px; }
.tab-transition__skeleton i {
  display: block; height: 78px; border-radius: 16px;
  background: linear-gradient(100deg, #E7ECF4 30%, #F9FBFE 50%, #E7ECF4 70%);
  background-size: 200% 100%; animation: tab-skeleton 1.4s ease-in-out infinite;
}
.tab-transition__skeleton i:first-child { height: 120px; }
.tab-transition__cancel { margin-top: 20px; padding: 12px 16px; border: 0; border-radius: 12px; background: #EAF1FF; color: #1F54D6; }
@keyframes tab-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tab-transition__skeleton i { animation: none; } }