/* Live-app additions to the approved design: loading shapes, the warning banner, the sign-in states. Same tokens. */
.skel { background: var(--soft); border-radius: var(--r-lg); animation: pulse 1.2s ease-in-out infinite; }
.skel.hero { height: 300px; } .skel.row { height: 64px; margin-bottom: 8px; border-radius: var(--r-md); }
@keyframes pulse { 50% { opacity: .55; } }
.banner { border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 12px; font-size: 14px; background: var(--orange-tint); color: var(--orange-text); }
.banner b { font-weight: 600; }
.err { border-radius: var(--r-md); padding: 14px 16px; background: var(--danger-tint); color: var(--danger-text); margin-bottom: 16px; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate .card { max-width: 520px; text-align: center; }
.pager { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; align-items: center; }
.result { display: flex; flex-direction: column; gap: 8px; }