/* ============================================
   AUTH/PUBLIC PAGE BACKGROUND THEME
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-deep: #0f1224;
    --accent1: #4f46e5;
    --accent2: #0ea5b7;
}

html, body { height: 100%; }

body.auth-bg {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(79,70,229,0.35), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(14,165,183,0.30), transparent 45%),
        linear-gradient(135deg, var(--bg-deep) 0%, #1b1f3b 55%, #101229 100%);
}

/* Subtle QR-code-inspired dot/module pattern */
body.auth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* White rounded card shared by the login box and the "file not found" card */
.auth-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: slideUp 0.6s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .auth-card { padding: 32px 20px; border-radius: 20px; }
}