/* Вход и регистрация (templates/auth/login.html) */

.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.auth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #f4f7ff; }
.auth-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: auth-drift 18s ease-in-out infinite alternate; }
.auth-bg i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -120px; background: #9fd8ff; }
.auth-bg i:nth-child(2) { width: 460px; height: 460px; right: -120px; top: 20%; background: #c5b8ff; animation-delay: -6s; }
.auth-bg i:nth-child(3) { width: 420px; height: 420px; left: 30%; bottom: -200px; background: #a8c4ff; animation-delay: -12s; }

@keyframes auth-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } }

.auth-top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.auth-top-link { font-size: 14.5px; font-weight: 700; color: var(--s-blue) !important; text-decoration: none; }

.auth-main { flex: 1; display: grid; place-items: center; padding-bottom: 40px; }

.auth-card {
    display: grid;
    grid-template-columns: 400px 1fr;
    width: 100%;
    max-width: 960px;
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--s-shadow);
    animation: auth-in .5s cubic-bezier(.2, 1, .3, 1);
}

@keyframes auth-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.auth-side {
    position: relative;
    padding: 34px 34px 36px;
    color: #fff;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(123, 92, 255, .75), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(31, 182, 255, .7), transparent 60%),
        linear-gradient(160deg, #2f7bff, #2246d6);
    overflow: hidden;
}

.auth-side::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -110px;
    bottom: -120px;
    border-radius: 50%;
    border: 44px solid rgba(255, 255, 255, .08);
}

.auth-mascot {
    display: block;
    width: 170px;
    height: auto;
    margin: -6px 0 10px -8px;
    filter: drop-shadow(0 18px 30px rgba(10, 30, 120, .35));
    animation: auth-float 5s ease-in-out infinite;
}

@keyframes auth-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(1deg); } }

.auth-side h2 { margin: 0 0 18px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.4px; }
.auth-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.auth-side li {
    padding: 12px 14px 12px 44px;
    position: relative;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}
.auth-side li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7bff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
}
.auth-side li b { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }

.auth-form-wrap { padding: 34px 44px 34px; }

.auth-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: 16px;
    background: #eef2fb;
    max-width: 300px;
}

.auth-tabs button {
    position: relative;
    z-index: 1;
    height: 40px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--s-muted);
    cursor: pointer;
    transition: color .2s;
}

.auth-tabs button.is-active { color: var(--s-ink); }

.auth-tabs-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: 40px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(30, 60, 160, .1);
    transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
}

.auth-card[data-mode="register"] .auth-tabs-pill { transform: translateX(100%); }

.auth-title { margin: 26px 0 6px; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.6px; }
.auth-sub { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--s-muted); }

.auth-card:not([data-mode="register"]) [data-only="register"],
.auth-card:not([data-mode="login"]) [data-only="login"],
.auth-card[data-mode="forgot"] [data-hide="forgot"],
.auth-card[data-mode="reset"] [data-hide="reset"] { display: none; }

/* Смена пароля: вкладки входа и регистрации не нужны */
.auth-card[data-mode="forgot"] .auth-tabs,
.auth-card[data-mode="reset"] .auth-tabs { display: none; }

.auth-forgot { display: block; margin: 10px 0 0 auto; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--s-blue); cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.auth-note { margin-top: 14px; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; color: #166534; background: #ecfdf3; border: 1px solid #bbf7d0; }

.auth-submit { width: 100%; margin-top: 22px; }

.auth-switch { margin: 18px 0 0; font-size: 14px; color: var(--s-muted); text-align: center; }
.auth-switch button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--s-blue); cursor: pointer; padding: 0; }

.auth-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-shake { animation: auth-shake .4s; }
@keyframes auth-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 860px) {
    .auth-card { grid-template-columns: 1fr; max-width: 520px; }
    .auth-side { padding: 22px 22px 22px 150px; min-height: 150px; }
    .auth-mascot { position: absolute; left: 10px; bottom: -16px; width: 130px; margin: 0; }
    .auth-side h2 { font-size: 21px; margin: 6px 0 0; }
    .auth-side ul { display: none; }
    .auth-form-wrap { padding: 24px 22px 28px; }
    .auth-title { font-size: 26px; margin-top: 20px; }
    .auth-top-link { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg i, .auth-mascot { animation: none; }
}