/* Top bar on /login and /signup: back to home, demo, the other auth page. */
.auth-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px max(16px, calc((100vw - 1120px) / 2));
    background: rgba(11, 15, 23, .82); backdrop-filter: blur(10px);
    border-bottom: 1px solid #1f2735;
}
.auth-nav a { color: #a3aec2; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.auth-nav a:hover { color: #fff; }
.auth-nav-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; }
.auth-nav-mark {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(145deg, #3d68f5, #2447c9); color: #fff;
}
.auth-nav-links { display: flex; align-items: center; gap: 18px; }
.auth-nav-cta { padding: 7px 14px; border-radius: 9px; background: #2f5bea; color: #fff !important; font-weight: 600 !important; }
.auth-nav-cta:hover { background: #3d68f5; }
body.has-auth-nav { padding-top: 72px !important; }
@media (max-width: 520px) {
    .auth-nav-links { gap: 12px; }
    .auth-nav-home { display: none; }
    .auth-nav-brand span:last-child { display: none; }
}