/* ── Auth (login / register) — peb.rs-style card ──────────────── */
.auth-page{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 240px);
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(57,152,253,0.10), transparent 60%),
        #ffffff;
}

.auth-bg-overlay{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
}
.auth-bg-overlay img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(30%) brightness(1.2);
}

.auth-card{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(41,41,43,0.10);
    padding: 2.4rem 2rem 2rem;
    animation: auth-card-in 0.5s ease-out;
}
@keyframes auth-card-in{
    from{ opacity:0; transform: translateY(16px) scale(0.98); }
    to  { opacity:1; transform: translateY(0) scale(1); }
}

.auth-card .auth-header{ text-align:center; margin-bottom: 1.75rem; }
.auth-card .auth-logo{
    height: 44px;
    width: auto;
    margin-bottom: 0.75rem;
}
.auth-card .auth-header h1{
    font-size: 1.5rem;
    font-weight: 800;
    color: #29292b;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}
.auth-card .auth-header p{
    font-size: 0.9rem;
    color: #666;
}

.auth-form{ display:flex; flex-direction:column; gap:1.1rem; }
.auth-form .form-group{ display:flex; flex-direction:column; gap:0.35rem; }
.auth-form .form-group label{
    font-size:0.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.05em; color:#666;
}
.auth-form .form-group input{
    padding:0.75rem 1rem;
    background:#f7f9fb;
    border:1px solid #d0d4da;
    border-radius:8px;
    color:#29292b;
    font-size:0.95rem;
    transition:all 0.2s ease;
}
.auth-form .form-group input:focus{
    border-color:#3998fd;
    box-shadow:0 0 0 3px rgba(57,152,253,0.18);
    background:#fff;
}
.auth-form .form-group input.error{
    border-color:#e74c3c;
    box-shadow:0 0 0 3px rgba(231,76,60,0.15);
}
.auth-field-error{ font-size:0.75rem; color:#e74c3c; min-height:1.2em; }

.auth-message{
    text-align:center; font-size:0.85rem; font-weight:500;
    min-height:1.2em; padding:0.5rem; border-radius:8px;
}
.auth-message.error{ color:#e74c3c; background:rgba(231,76,60,0.08); }
.auth-message.success{ color:#0a7a2f; background:rgba(10,122,47,0.08); }

.auth-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.85rem 1.75rem; border-radius:10px;
    font-size:0.95rem; font-weight:700;
    border:none; cursor:pointer; transition:all 0.2s ease;
    background:#3998fd; color:#fff; width:100%;
}
.auth-btn:hover{
    background:#1664c0;
    box-shadow:0 8px 24px rgba(57,152,253,0.30);
    transform:translateY(-1px);
}
.auth-btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; }
.auth-btn .auth-spinner{ display:none; animation:auth-spin 0.8s linear infinite; }
.auth-btn.is-loading .auth-spinner{ display:inline-block; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

.auth-switch{
    margin-top:1.25rem;
    text-align:center;
    font-size:0.85rem;
    color:#666;
}
.auth-switch a{
    color:#3998fd; font-weight:600; text-decoration:none;
}
.auth-switch a:hover{ text-decoration:underline; color:#1664c0; }

@media (max-width:480px){
    .auth-page{ padding:1.5rem 1rem; }
    .auth-card{ padding:1.75rem 1.25rem 1.5rem; }
}