/* ===================================================================
   Wordly — Auth pages (login / register)
   Elegant theme matching the landing page. Builds on main.css tokens.
   =================================================================== */

.auth-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
    background:
        radial-gradient(55% 55% at 50% 0%, #efeafe 0%, transparent 70%),
        linear-gradient(180deg, #f7f5ff 0%, #ffffff 100%);
}

/* Floating glow orbs */
.auth-container::before,
.auth-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
.auth-container::before {
    width: 400px; height: 400px;
    top: -120px; left: -100px;
    background: rgba(139, 92, 246, 0.45);
    animation: authFloat 9s ease-in-out infinite;
}
.auth-container::after {
    width: 340px; height: 340px;
    bottom: -120px; right: -90px;
    background: rgba(192, 38, 211, 0.28);
    animation: authFloat 11s ease-in-out infinite reverse;
}
@keyframes authFloat {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(28px) translateX(18px); }
}

.auth-box {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 24px;
    padding: 3rem 2.75rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 70px rgba(109, 40, 217, 0.16);
    animation: authPop 0.5s ease;
}
@keyframes authPop {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}
/* The Wordly logo is a wordmark, not a square mark, so it is sized by
   height and left to find its own width. It replaces both the old "W"
   tile and the word "Wordly" that used to sit in the heading. */
.auth-logo {
    display: inline-block;
    margin-bottom: 1.1rem;
    line-height: 0;
}
.auth-logo img {
    height: 44px;
    width: auto;
    max-width: 100%;
}

/* Fallback lettermark: only revealed by the image's onerror, so a failed
   logo never leaves an empty header. */
.auth-brand {
    display: none;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    box-shadow: 0 10px 26px var(--purple-glow);
}
.auth-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink, #1a1424);
    margin-bottom: 0.4rem;
}
.auth-header h1 span {
    background: linear-gradient(120deg, var(--primary-blue) 0%, var(--primary-blue-dark) 55%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-header p { color: #6b6478; margin: 0; }

/* Form polish */
.auth-box .form-group { margin-bottom: 1.25rem; }
.auth-box .form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b4458;
}
.auth-box .form-control {
    border: 1.5px solid rgba(139, 92, 246, 0.18);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
}
.auth-box .form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}

.auth-box .btn-primary {
    width: 100%;
    padding: 0.95rem;
    font-size: 1.05rem;
    border-radius: 12px;
    margin-top: 0.25rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.75rem;
    color: #6b6478;
    font-size: 0.95rem;
}
.auth-footer p { margin: 0.4rem 0; color: #6b6478; }
.auth-footer a {
    color: var(--primary-blue-dark);
    font-weight: 700;
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }