/**
 * Scrinder
 *
 * File: themes/default/assets/css/auth.css
 *
 * Copyright (c) 2026 Scrinder.
 * All rights reserved.
 *
 * Author: To be defined.
 *
 * Authentication interface stylesheet.
 * This file intentionally contains no inline dependencies and remains CSP-safe.
 */


/*
|--------------------------------------------------------------------------
| Authentication stylesheet structure
|--------------------------------------------------------------------------
| This file is intentionally ordered by cascade:
| - base authentication layout
| - showcase visuals
| - form controls and validation states
| - footer and language modal states
| - responsive overrides
|
| Repeated selectors are kept when they belong to breakpoints or state-specific
| overrides. Cleanups must stay conservative to protect the modal and layout.
*/

/*
|--------------------------------------------------------------------------
| Authentication Stylesheet Notes
|--------------------------------------------------------------------------
| This stylesheet keeps its cascade order intact. Repeated selectors are
| reviewed progressively because several belong to responsive breakpoints or
| state-specific interface overrides.
*/

:root {
    --blue: #0866ff;
    --blue-2: #2c7cff;
    --green: #16c784;
    --pink: #ff2f6d;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #dbe3ef;
    --white: #ffffff;
    --danger: #dc2626;
    --success: #059669;
    --info: #1d4ed8;
    --shadow: 0 22px 58px rgba(15, 23, 42, .12);
    --shadow-strong: 0 28px 68px rgba(15, 23, 42, .16);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

@media (min-width: 1161px) and (min-height: 900px) {
    html, body { overflow-y: hidden; }
}

body {
    min-height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--white);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

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

.auth-main {
    flex: 1;
    min-height: calc(100vh - 112px);
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(460px, .88fr);
    border-bottom: 1px solid var(--line);
}

.auth-showcase {
    overflow: hidden;
    position: relative;
    padding: 38px 58px 40px;
    background:
        radial-gradient(circle at 78% 20%, rgba(8, 102, 255, .16), transparent 30%),
        radial-gradient(circle at 20% 90%, rgba(255, 47, 109, .08), transparent 32%),
        linear-gradient(180deg, #fbfdff 0%, #eef4ff 100%);
}

.brand-row { position: relative; z-index: 5; }

.brand-link { display: inline-flex; align-items: center; gap: 16px; }

.brand-symbol {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #2b7dff);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(8, 102, 255, .24);
}

.brand-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -.045em;
}

.showcase-content {
    min-height: min(720px, calc(100vh - 170px));
    display: grid;
    grid-template-columns: minmax(370px, 570px) minmax(560px, 1fr);
    align-items: center;
    gap: 28px;
}

.showcase-copy { position: relative; z-index: 4; }

.eyebrow {
    margin: 0 0 18px;
    color: var(--blue);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
}

.showcase-copy h1 {
    margin: 0;
    font-size: clamp(58px, 4.7vw, 96px);
    line-height: 1.01;
    letter-spacing: -.07em;
    font-weight: 900;
}

.showcase-copy h1 strong { color: var(--blue); font-weight: 900; }

.showcase-copy p {
    max-width: 520px;
    margin: 30px 0 0;
    color: #475569;
    font-size: clamp(18px, 1.2vw, 23px);
    line-height: 1.7;
}

.feature-list { display: grid; gap: 22px; margin-top: 44px; }

.feature-item { display: flex; align-items: center; gap: 17px; }

.feature-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .13);
}

.feature-blue { background: linear-gradient(135deg, var(--blue), #62a0ff); }
.feature-pink { background: linear-gradient(135deg, var(--pink), #ff7aa1); }
.feature-green { background: linear-gradient(135deg, var(--green), #28d796); }
.feature-icon::before {
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    background: center / contain no-repeat;
}
.feature-blue::before { background-image: url("../svg/icon-users.svg"); }
.feature-pink::before { background-image: url("../svg/icon-heart.svg"); }
.feature-green::before { background-image: url("../svg/icon-shield.svg"); }
.feature-item b { display: block; font-size: 18px; }
.feature-item small { display: block; margin-top: 4px; color: #667085; font-size: 15px; }

.showcase-visual {
    position: relative;
    width: min(720px, 100%);
    height: min(700px, calc(100vh - 190px));
    margin-left: auto;
}

.orb, .social-card, .profile-circle, .floating-reaction, .time-pill { position: absolute; }
.orb { border-radius: 999px; opacity: .46; }
.orb-one { width: 210px; height: 210px; right: 70px; top: 42px; background: rgba(8, 102, 255, .13); }
.orb-two { width: 280px; height: 280px; left: 80px; bottom: 54px; background: rgba(255, 47, 109, .08); }

.social-card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: var(--shadow);
}

.social-card-main {
    width: 410px;
    right: 42px;
    top: 76px;
    padding: 18px;
    border-radius: 30px;
    transform: rotate(2deg);
    z-index: 5;
}

.card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; }
.avatar-coral { background: radial-gradient(circle at 50% 34%, #fbbf24 0 23%, transparent 24%), linear-gradient(135deg, #fb7185, #f97316); }
.card-top b, .card-top small { display: block; }
.card-top small { color: #667085; font-size: 12px; margin-top: 2px; }
.dots { margin-left: auto; color: #98a2b3; font-weight: 900; }

.mock-photo { position: relative; overflow: hidden; border-radius: 24px; }
.photo-main { height: 362px; background: url("../svg/scene-main.svg") center / cover no-repeat; }
.photo-main::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: 34px; height: 18px; border: 5px solid rgba(255, 255, 255, .9); border-radius: 999px; }

.social-stats { display: flex; align-items: center; gap: 5px; color: #64748b; padding: 12px 4px 9px; }
.social-stats small:last-child { margin-left: auto; }
.mini-reaction {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
}
.reaction-blue { background-color: var(--blue); background-image: url("../svg/icon-like.svg"); }
.reaction-red { background-color: var(--pink); background-image: url("../svg/icon-heart.svg"); margin-left: -8px; }
.social-actions { display: flex; justify-content: space-between; border-top: 1px solid #eef2f7; padding: 13px 8px 2px; color: #475569; font-size: 14px; }

.social-card-left { width: 285px; height: 300px; left: 24px; top: 168px; padding: 16px; border-radius: 28px; transform: rotate(-3deg); z-index: 3; }
.story-label { position: absolute; left: 28px; top: 28px; z-index: 2; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .85); color: var(--blue); }
.story-label::before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: var(--blue); }
.photo-left { height: 100%; background: url("../svg/scene-left.svg") center / cover no-repeat; }

.social-card-bottom { width: 255px; height: 306px; left: 104px; bottom: 36px; padding: 15px; border-radius: 28px; z-index: 6; transform: rotate(-1deg); }
.photo-bottom { height: 205px; background: url("../svg/scene-bottom.svg") center / cover no-repeat; }
.line { height: 15px; border-radius: 999px; background: #e5e7eb; }
.line-big { margin: 18px 0 9px; width: 95%; }
.line-small { width: 62%; }

.profile-circle { width: 178px; height: 178px; right: 150px; bottom: 26px; z-index: 7; border-radius: 50%; padding: 8px; background: #fff; border: 7px solid var(--blue); box-shadow: var(--shadow); }
.profile-image { display: block; width: 100%; height: 100%; border-radius: 50%; background: url("../svg/avatar-profile.svg") center / cover no-repeat; }
.online-dot { position: absolute; right: 8px; bottom: 13px; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; border: 5px solid #fff; }

.floating-reaction {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 9;
    box-shadow: var(--shadow-strong);
}
.visual-svg {
    width: 42px;
    height: 42px;
    display: block;
    background: center / contain no-repeat;
}
.visual-heart { background-image: url("../svg/icon-heart.svg"); }
.visual-like { background-image: url("../svg/icon-like.svg"); }
.visual-smile { width: 48px; height: 48px; background-image: url("../svg/icon-smile.svg"); }
.floating-heart { right: 10px; top: 365px; background: linear-gradient(135deg, var(--pink), #ff7aa1); }
.floating-like { left: 76px; bottom: 22px; background: linear-gradient(135deg, var(--blue), #4f9bff); }
.floating-smile { left: 160px; top: 114px; background: #fff; box-shadow: 0 18px 48px rgba(245, 158, 11, .16); }
.time-pill { right: 24px; top: 140px; z-index: 10; padding: 11px 17px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #7069ff, #8b5cf6); font-weight: 900; box-shadow: var(--shadow); }

.auth-panel { position: relative; display: flex; justify-content: center; align-items: center; padding: 78px clamp(38px, 5vw, 94px); background: #fff; border-left: 1px solid var(--line); }
.auth-nav { position: absolute; right: 56px; top: 40px; display: flex; gap: 28px; font-size: 15px; font-weight: 900; }
.auth-nav a { color: #64748b; }
.auth-nav a.active { color: var(--blue); }
.auth-form { width: 100%; max-width: 500px; }
.form-heading { margin-bottom: 30px; }
.form-heading h2 { margin: 0; font-size: clamp(30px, 2vw, 39px); line-height: 1.15; letter-spacing: -.045em; font-weight: 900; }
.form-heading p { margin: 12px 0 0; color: #64748b; font-size: 16px; }

.message { margin-bottom: 18px; padding: 15px 17px; border-radius: 16px; font-weight: 700; font-size: 14px; }
.message strong { display: block; margin-bottom: 3px; }
.message-error { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.message-info { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; }
.message-success { color: #065f46; background: #ecfdf5; border: 1px solid #bbf7d0; }

.field { position: relative; display: block; margin-bottom: 25px; }
.field input { width: 100%; height: 66px; border: 1px solid #d7deea; border-radius: 17px; padding: 0 58px; color: #101828; background: #fff; font-size: 16px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.field input::placeholder { color: #748198; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(8, 102, 255, .10); }
.field.is-error input { border-color: #ef4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, .10); }
.field-error { display: none; margin: 8px 0 0 3px; color: var(--danger); font-weight: 700; font-size: 12px; }
.field.is-error .field-error { display: block; }
.field-icon {
    position: absolute;
    left: 18px;
    top: 33px;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 12px;
    background-color: #eff6ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    box-shadow: inset 0 0 0 1px rgba(8, 102, 255, .08);
}
.icon-mail { background-image: url("../svg/field-mail.svg"); }
.icon-lock { background-image: url("../svg/field-lock.svg"); }
.icon-user { background-image: url("../svg/field-user.svg"); }
.password-toggle {
    position: absolute;
    right: 18px;
    top: 33px;
    width: 32px;
    height: 32px;
    border: 0;
    background: url("../svg/field-eye.svg") center / 23px 23px no-repeat;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 999px;
}
.password-toggle.is-visible { background-image: url("../svg/field-eye-off.svg"); }
.password-toggle:hover { background-color: #f1f5f9; }

.btn { width: 100%; min-height: 64px; display: grid; place-items: center; border-radius: 16px; font-weight: 900; font-size: 16px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--blue), #0b5be7); box-shadow: 0 17px 38px rgba(8, 102, 255, .22); }
.btn-success { border: 0; color: #fff; background: linear-gradient(135deg, var(--green), #0fb776); box-shadow: 0 17px 38px rgba(16, 185, 129, .22); }
.btn-outline { position: relative; border: 2px solid var(--blue); color: var(--blue); background: #fff; }
.btn-outline::before { content: ""; width: 24px; height: 24px; margin-right: 10px; background: url("../svg/button-users.svg") center / 24px 24px no-repeat; display: inline-block; vertical-align: middle; }
.btn-outline { display: flex; align-items: center; justify-content: center; }
.small-link { display: block; margin: 24px 0 28px; text-align: center; color: var(--blue); font-weight: 900; }
.divider { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 28px; color: #667085; font-size: 14px; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #dfe5ef; }
.divider span { position: relative; padding: 0 18px; background: #fff; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.legal-text { color: #667085; text-align: center; font-size: 13px; line-height: 1.6; margin: 20px 0 0; }

.auth-footer { background: #fff; border-top: 1px solid #e2e8f0; }
.footer-inner { width: 100%; margin: 0; padding: 26px 44px; color: #667085; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 28px; }
.footer-links a + a { position: relative; }
.footer-links a + a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 1px; height: 14px; background: #d9e0ea; transform: translateY(-50%); }
.footer-inner a:hover { color: var(--blue); }
.footer-inner p { margin: 0; white-space: nowrap; }

@keyframes floatSoft { 0%, 100% { transform: translateY(0) rotate(var(--rotate, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--rotate, 0deg)); } }
.social-card-main, .floating-heart, .floating-like, .floating-smile, .profile-circle, .time-pill { animation: floatSoft 6s ease-in-out infinite; }
.social-card-main { --rotate: 2deg; }
.floating-heart { animation-delay: .3s; }
.floating-like { animation-delay: .9s; }
.floating-smile { animation-delay: 1.2s; }
.profile-circle { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (min-width: 1800px) {
    .auth-main { grid-template-columns: minmax(0, 1.7fr) minmax(560px, .85fr); }
    .showcase-content { min-height: min(780px, calc(100vh - 190px)); }
    .showcase-visual { transform: scale(1.06); transform-origin: center; }
}

@media (max-width: 1420px) {
    .showcase-content { grid-template-columns: minmax(320px, 470px) minmax(520px, 1fr); }
    .showcase-visual { transform: scale(.84); transform-origin: center right; }
}

@media (max-width: 1160px) {
    .auth-main { grid-template-columns: 1fr; }
    .auth-panel { min-height: auto; padding: 88px 32px 58px; border-left: 0; border-top: 1px solid var(--line); }
    .auth-nav { right: 32px; top: 30px; }
    .showcase-content { min-height: auto; grid-template-columns: 1fr; }
    .showcase-copy { max-width: 760px; }
    .showcase-visual { height: 620px; margin: 8px auto 0; transform: scale(.88); transform-origin: center top; }
}

@media (max-width: 720px) {
    .auth-showcase { padding: 28px 22px 0; }
    .brand-symbol { width: 42px; height: 42px; font-size: 20px; }
    .brand-text { font-size: 30px; }
    .eyebrow { margin-top: 34px; }
    .showcase-copy h1 { font-size: 46px; }
    .showcase-copy p { font-size: 16px; }
    .feature-list { margin-top: 30px; }
    .showcase-visual { width: 700px; height: 520px; margin-left: 50%; transform: translateX(-50%) scale(.58); transform-origin: top center; }
    .auth-panel { padding: 90px 22px 44px; }
    .auth-nav { left: 22px; right: 22px; justify-content: space-between; }
    .form-heading h2 { font-size: 29px; }
    .field input, .btn { height: 58px; min-height: 58px; font-size: 15px; }
    .field-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-inner { padding: 22px; font-size: 13px; flex-direction: column; align-items: flex-start; }
    .footer-links { justify-content: flex-start; }
}

@media (min-width: 1161px) and (min-height: 900px) {
    .auth-form { max-height: calc(100vh - 190px); }
    .auth-panel { overflow: hidden; }
    .auth-footer { flex: 0 0 auto; }
}

/*
|--------------------------------------------------------------------------
| Authentication language modal
|--------------------------------------------------------------------------
| Clean modal UI used from the authentication footer language link.
*/
html.modal-open,
html.modal-open body{
    overflow:hidden;
}

.auth-language-modal[hidden]{
    display:none !important;
}

.auth-language-modal:not([hidden]){
    position:fixed;
    inset:0;
    z-index:120;
    display:grid;
    place-items:center;
    padding:24px;
}

.auth-language-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.54);
    backdrop-filter:blur(8px);
}

.auth-language-modal-card{
    position:relative;
    width:min(460px,100%);
    overflow:hidden;
    border:1px solid rgba(219,227,239,.95);
    border-radius:26px;
    background:#ffffff;
    box-shadow:0 34px 95px rgba(15,23,42,.25);
    animation:authLanguageModalIn .18s ease-out both;
}

.auth-language-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:24px;
    border-bottom:1px solid #eef2f7;
}

.auth-language-modal-header p{
    margin:0 0 5px;
    color:#0866ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.auth-language-modal-header h2{
    margin:0;
    color:#0f172a;
    font-size:24px;
    letter-spacing:-.035em;
}

.auth-language-modal-close{
    width:40px;
    height:40px;
    border:1px solid #dbe3ef;
    border-radius:50%;
    background:#ffffff;
    color:#64748b;
    cursor:pointer;
    display:grid;
    place-items:center;
}

.auth-language-modal-close svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.auth-language-form{
    display:grid;
    gap:14px;
    padding:22px 24px 24px;
}

.auth-language-choice{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border:1px solid #dbe3ef;
    border-radius:18px;
    background:#ffffff;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-language-choice:hover,
.auth-language-choice.is-active{
    border-color:#9bb7e7;
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.auth-language-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.auth-language-code{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#0866ff;
    background:#eef4ff;
    font-size:13px;
    font-weight:950;
}

.auth-language-choice strong,
.auth-language-choice small{
    display:block;
}

.auth-language-choice strong{
    color:#0f172a;
    font-size:15px;
}

.auth-language-choice small{
    margin-top:4px;
    color:#64748b;
    font-size:13px;
}

.footer-links a[data-language-modal-open]{
    color:#0866ff;
    font-weight:800;
}

@keyframes authLanguageModalIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.auth-language-modal.is-open{
    position:fixed;
    inset:0;
    z-index:120;
    display:grid;
    place-items:center;
    padding:24px;
}

/*
|--------------------------------------------------------------------------
| Language modal automatic save
|--------------------------------------------------------------------------
| Removes the manual save flow and turns language selection into a
| direct, animated, premium interaction.
*/
.auth-language-form{
    padding-bottom:24px;
}

.auth-language-choice{
    position:relative;
    padding-right:64px;
}

.auth-language-text{
    min-width:0;
}

.auth-language-check{
    position:absolute;
    right:18px;
    top:50%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid #dbe3ef;
    border-radius:50%;
    color:#94a3b8;
    background:#ffffff;
    transform:translateY(-50%) scale(.92);
    opacity:.72;
    transition:opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}

.auth-language-check svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-language-choice.is-active .auth-language-check,
.auth-language-choice.is-saving .auth-language-check{
    color:#ffffff;
    border-color:#0866ff;
    background:#0866ff;
    opacity:1;
    transform:translateY(-50%) scale(1);
    box-shadow:0 10px 24px rgba(8,102,255,.22);
}

.auth-language-choice.is-saving .auth-language-check{
    animation:authLanguageCheckPulse .55s ease-in-out infinite alternate;
}

.auth-language-modal.is-closing .auth-language-modal-card{
    animation:authLanguageModalOut .17s ease-in both;
}

.auth-language-modal.is-closing .auth-language-modal-backdrop{
    animation:authLanguageBackdropOut .17s ease-in both;
}

@keyframes authLanguageCheckPulse{
    from{
        transform:translateY(-50%) scale(1);
    }
    to{
        transform:translateY(-50%) scale(1.08);
    }
}

@keyframes authLanguageModalOut{
    from{
        opacity:1;
        transform:translateY(0) scale(1);
    }
    to{
        opacity:0;
        transform:translateY(10px) scale(.985);
    }
}

@keyframes authLanguageBackdropOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

/*
|--------------------------------------------------------------------------
| Language modal success animation
|--------------------------------------------------------------------------
| Shows a premium success state with a large SVG check before the page
| reloads with the selected language.
*/
.auth-language-modal.is-success .auth-language-modal-header,
.auth-language-modal.is-success .auth-language-choice{
    opacity:.18;
    transform:scale(.985);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
}

.auth-language-form{
    position:relative;
}

.auth-language-success[hidden]{
    display:none !important;
}

.auth-language-success{
    position:absolute;
    inset:14px 24px 24px;
    z-index:6;
    display:grid;
    place-items:center;
    align-content:center;
    gap:12px;
    min-height:220px;
    border:1px solid #bbf7d0;
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%);
    color:#065f46;
    text-align:center;
    box-shadow:0 22px 58px rgba(16,185,129,.18);
    animation:authLanguageSuccessIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.auth-language-success-icon{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#ffffff;
    background:linear-gradient(135deg,#22c55e,#10b981);
    box-shadow:0 18px 42px rgba(16,185,129,.32);
    animation:authLanguageSuccessPop .42s cubic-bezier(.2,1.35,.35,1) both;
}

.auth-language-success-icon svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:currentColor;
    stroke-width:3.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:34;
    stroke-dashoffset:34;
    animation:authLanguageCheckDraw .38s ease-out .18s forwards;
}

.auth-language-success strong{
    display:block;
    color:#064e3b;
    font-size:18px;
    font-weight:950;
    letter-spacing:-.02em;
}

.auth-language-success small{
    display:block;
    max-width:260px;
    color:#047857;
    font-size:13px;
    line-height:1.5;
}

.auth-language-modal.is-closing .auth-language-success{
    animation:authLanguageSuccessOut .18s ease-in both;
}

@keyframes authLanguageSuccessIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes authLanguageSuccessPop{
    from{
        opacity:0;
        transform:scale(.72);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes authLanguageCheckDraw{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes authLanguageSuccessOut{
    from{
        opacity:1;
        transform:translateY(0) scale(1);
    }
    to{
        opacity:0;
        transform:translateY(8px) scale(.985);
    }
}

/*
|--------------------------------------------------------------------------
| Language modal readable success state
|--------------------------------------------------------------------------
| Final refinement for the language changed state:
| - stronger contrast
| - readable text
| - longer success display before reload
| - cleaner card spacing
*/
.auth-language-modal.is-success .auth-language-modal-header{
    opacity:.28;
    filter:blur(.2px);
}

.auth-language-modal.is-success .auth-language-choice{
    opacity:.08;
    transform:scale(.98);
}

.auth-language-success{
    inset:8px 22px 22px;
    min-height:285px;
    gap:14px;
    border:1px solid #a7f3d0;
    border-radius:24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(34,197,94,.14), transparent 38%),
        linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%);
    box-shadow:
        0 28px 72px rgba(16,185,129,.20),
        inset 0 1px 0 rgba(255,255,255,.86);
}

.auth-language-success-icon{
    width:88px;
    height:88px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    box-shadow:
        0 20px 46px rgba(22,163,74,.34),
        0 0 0 12px rgba(34,197,94,.10);
}

.auth-language-success-icon svg{
    width:44px;
    height:44px;
    stroke-width:3.4;
}

.auth-language-success strong{
    margin-top:4px;
    color:#052e1d;
    font-size:22px;
    font-weight:950;
    letter-spacing:-.035em;
}

.auth-language-success small{
    max-width:310px;
    color:#047857;
    font-size:15px;
    font-weight:650;
    line-height:1.55;
}

.auth-language-modal.is-closing .auth-language-success{
    animation:authLanguageSuccessOut .24s ease-in both;
}

@media (max-width:640px){
    .auth-language-success{
        min-height:250px;
        inset:8px 18px 18px;
    }

    .auth-language-success-icon{
        width:76px;
        height:76px;
    }

    .auth-language-success strong{
        font-size:19px;
    }

    .auth-language-success small{
        font-size:14px;
    }
}

/*
|--------------------------------------------------------------------------
| Language modal success state
|--------------------------------------------------------------------------
| Premium success state inspired by the selected model:
| larger success panel, visible progress bar, sparkles and readable timing.
*/
.auth-language-modal-card{
    width:min(560px,100%);
}

.auth-language-modal.is-success .auth-language-modal-header{
    opacity:1;
    filter:none;
}

.auth-language-modal.is-success .auth-language-choice{
    opacity:1;
    transform:none;
    pointer-events:none;
}

.auth-language-modal.is-success .auth-language-choice:not(.is-saving):not(.is-active){
    opacity:.45;
}

.auth-language-success{
    position:relative;
    inset:auto;
    min-height:300px;
    margin-top:18px;
    padding:34px 28px 28px;
    gap:13px;
    border:1px solid #a7f3d0;
    border-radius:24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(34,197,94,.18), transparent 36%),
        linear-gradient(180deg,#ffffff 0%,#effdf5 100%);
    box-shadow:
        0 30px 72px rgba(16,185,129,.20),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.auth-language-success-icon{
    width:92px;
    height:92px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    box-shadow:
        0 22px 48px rgba(22,163,74,.34),
        0 0 0 14px rgba(34,197,94,.10);
}

.auth-language-success-icon svg{
    width:46px;
    height:46px;
}

.auth-language-success strong{
    margin-top:8px;
    font-size:24px;
    color:#052e1d;
}

.auth-language-success small{
    max-width:340px;
    color:#475569;
    font-size:15px;
    font-weight:650;
}

.auth-language-success em{
    margin-top:4px;
    color:#64748b;
    font-size:14px;
    font-style:normal;
    font-weight:750;
}

.auth-language-progress{
    width:min(320px,100%);
    height:8px;
    margin-top:8px;
    display:block;
    overflow:hidden;
    border-radius:999px;
    background:#dff7e9;
}

.auth-language-progress span{
    display:block;
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#22c55e,#16a34a);
    animation:authLanguageProgressFill 2.05s ease-out forwards;
}

.auth-language-success-sparkle{
    position:absolute;
    width:9px;
    height:9px;
    background:#22c55e;
    transform:rotate(45deg);
    border-radius:2px;
    opacity:.75;
    animation:authLanguageSparkle 1.2s ease-in-out infinite alternate;
}

.auth-language-success-sparkle::before,
.auth-language-success-sparkle::after{
    content:"";
    position:absolute;
    inset:3px -4px;
    border-radius:999px;
    background:inherit;
}

.auth-language-success-sparkle::after{
    inset:-4px 3px;
}

.sparkle-one{
    left:30%;
    top:25%;
}

.sparkle-two{
    right:30%;
    top:23%;
    background:#60a5fa;
    animation-delay:.18s;
}

.sparkle-three{
    right:24%;
    top:42%;
    background:#86efac;
    animation-delay:.34s;
}

@keyframes authLanguageProgressFill{
    from{
        width:0;
    }
    to{
        width:100%;
    }
}

@keyframes authLanguageSparkle{
    from{
        opacity:.35;
        transform:rotate(45deg) scale(.82);
    }
    to{
        opacity:.9;
        transform:rotate(45deg) scale(1.08);
    }
}

/*
|--------------------------------------------------------------------------
| Authentication footer brand mark
|--------------------------------------------------------------------------
*/
.footer-brand-line{
    display:inline-flex;
    align-items:center;
    gap:12px;
}

.footer-heart-mark{
    width:30px;
    height:30px;
    display:inline-grid;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,#0866ff 0%,#8b5cf6 48%,#ff2f6d 100%);
    box-shadow:0 12px 26px rgba(8,102,255,.18);
}

.footer-heart-mark svg{
    width:18px;
    height:18px;
    fill:#ffffff;
}

@media (max-width:640px){
    .auth-language-modal-card{
        width:min(460px,100%);
    }

    .auth-language-success{
        min-height:260px;
        padding:28px 20px 24px;
    }

    .auth-language-success-icon{
        width:78px;
        height:78px;
    }

    .auth-language-success strong{
        font-size:20px;
    }

    .auth-language-success small,
    .auth-language-success em{
        font-size:13px;
    }
}

/*
|--------------------------------------------------------------------------
| Authentication footer and form refinements
|--------------------------------------------------------------------------
| Final refinements:
| - language control is a real button, not an URL/hash link
| - cleaner copyright heart SVG
| - lighter and sharper typography on the right auth panel
| - footer spacing closer to the selected mockup
*/

/* Right auth panel typography refinement */
.form-heading h2,
.auth-form h2{
    font-weight:850;
    letter-spacing:-.045em;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
}

.form-heading p{
    font-weight:500;
    color:#64748b;
}

.auth-nav a{
    font-weight:750;
    -webkit-font-smoothing:antialiased;
}

.field input{
    font-weight:500;
    -webkit-font-smoothing:antialiased;
}

.btn,
.primary-btn,
.success-btn,
.outline-btn,
.small-link,
.forgot{
    font-weight:800;
    -webkit-font-smoothing:antialiased;
}

/* Footer premium layout */
.auth-footer{
    background:#ffffff;
    border-top:1px solid #dbe3ef;
}

.auth-footer .footer-inner{
    min-height:82px;
    padding:0 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.footer-brand-line{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin:0;
    color:#64748b;
    font-weight:500;
}

.footer-heart-mark{
    width:34px;
    height:34px;
    display:inline-grid;
    place-items:center;
    border-radius:12px;
    background:
        radial-gradient(circle at 28% 25%, rgba(255,255,255,.55), transparent 22%),
        linear-gradient(135deg,#0866ff 0%,#7c3aed 50%,#ff2f6d 100%);
    box-shadow:
        0 12px 28px rgba(8,102,255,.18),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.footer-heart-mark svg{
    width:20px;
    height:20px;
    fill:#ffffff;
}

.footer-heart-mark .footer-heart-shine{
    fill:none;
    stroke:#ffffff;
    stroke-width:1.7;
    stroke-linecap:round;
    opacity:.7;
}

.auth-footer .footer-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:0;
    margin:0;
}

.auth-footer .footer-links a,
.footer-language-button{
    position:relative;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border:0;
    background:transparent;
    color:#64748b;
    font:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    text-decoration:none;
    -webkit-font-smoothing:antialiased;
    transition:color .18s ease, transform .18s ease;
}

.auth-footer .footer-links a:hover,
.footer-language-button:hover{
    color:#0866ff;
}

.auth-footer .footer-links a::after,
.footer-language-button::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:1px;
    height:16px;
    background:#dbe3ef;
    transform:translateY(-50%);
}

.auth-footer .footer-links a:last-child::after,
.footer-language-button:last-child::after{
    display:none;
}

.footer-language-button{
    color:#0866ff;
    font-weight:800;
}

.footer-language-icon,
.footer-language-caret{
    display:inline-grid;
    place-items:center;
    color:#0866ff;
}

.footer-language-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.footer-language-caret svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Language modal should still look clickable with button trigger */
.footer-language-button:focus-visible,
.auth-footer .footer-links a:focus-visible{
    outline:3px solid rgba(8,102,255,.18);
    outline-offset:3px;
    border-radius:999px;
}

@media (max-width:920px){
    .auth-footer .footer-inner{
        min-height:auto;
        padding:22px;
        flex-direction:column-reverse;
        justify-content:center;
        text-align:center;
        gap:16px;
    }

    .auth-footer .footer-links{
        justify-content:center;
        row-gap:10px;
    }

    .auth-footer .footer-links a,
    .footer-language-button{
        min-height:30px;
        padding:0 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Authentication footer neutral language control
|--------------------------------------------------------------------------
| Footer cleanup:
| - language control uses neutral footer color
| - globe/caret are neutral, not blue
| - old pseudo separators are disabled
| - exactly one separator is drawn between each footer item
*/
.auth-footer .footer-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:0;
    margin:0;
}

.auth-footer .footer-links a,
.auth-footer .footer-language-button{
    position:relative;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border:0 !important;
    background:transparent !important;
    color:#64748b !important;
    font:inherit;
    font-size:14px;
    font-weight:600 !important;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    box-shadow:none !important;
}

.auth-footer .footer-links a::before,
.auth-footer .footer-links a::after,
.auth-footer .footer-language-button::before,
.auth-footer .footer-language-button::after{
    content:none !important;
    display:none !important;
}

.auth-footer .footer-links > * + *{
    border-left:1px solid #dbe3ef !important;
}

.auth-footer .footer-links a:hover,
.auth-footer .footer-language-button:hover{
    color:#0f172a !important;
}

.auth-footer .footer-language-icon,
.auth-footer .footer-language-caret{
    color:#64748b !important;
}

.auth-footer .footer-language-icon svg,
.auth-footer .footer-language-caret svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor !important;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-footer .footer-language-caret svg{
    width:15px;
    height:15px;
    stroke-width:2.4;
}

.auth-footer .footer-brand-line{
    display:inline-flex;
    align-items:center;
    gap:0;
    margin:0;
    color:#64748b;
    font-weight:500;
}

html[data-appearance="dark"] .auth-footer .footer-links a,
html[data-appearance="dark"] .auth-footer .footer-language-button,
html[data-appearance="dark"] .auth-footer .footer-language-icon,
html[data-appearance="dark"] .auth-footer .footer-language-caret,
html[data-appearance="dark"] .auth-footer .footer-brand-line{
    color:#94a3b8 !important;
}

html[data-appearance="dark"] .auth-footer .footer-links > * + *{
    border-left-color:#334155 !important;
}

@media (max-width:920px){
    .auth-footer .footer-links > * + *{
        border-left:0 !important;
    }

    .auth-footer .footer-links a,
    .auth-footer .footer-language-button{
        padding:0 10px;
    }
}

/*
|--------------------------------------------------------------------------
| Authentication UI final refinements
|--------------------------------------------------------------------------
| Small final visual refinements:
| - slightly clearer footer readability
| - softer single separators
| - less heavy right-side form typography
| - no functional/security changes
*/
.auth-form h2,
.form-heading h2{
    font-weight:820;
    letter-spacing:-.04em;
}

.form-heading p{
    font-weight:450;
    color:#64748b;
}

.auth-nav a{
    font-weight:720;
}

.field input{
    font-weight:450;
}

.field input::placeholder{
    font-weight:450;
}

.btn,
.primary-btn,
.success-btn,
.outline-btn{
    font-weight:780;
}

.small-link,
.forgot{
    font-weight:760;
}

.auth-footer .footer-brand-line,
.auth-footer .footer-links a,
.auth-footer .footer-language-button{
    font-size:14px;
    font-weight:560 !important;
    color:#5f6f86 !important;
}

.auth-footer .footer-language-button{
    font-weight:650 !important;
}

.auth-footer .footer-language-icon,
.auth-footer .footer-language-caret{
    color:#5f6f86 !important;
}

.auth-footer .footer-links > * + *{
    border-left:1px solid rgba(203,213,225,.72) !important;
}

.auth-footer .footer-links a,
.auth-footer .footer-language-button{
    padding:0 14px;
}

@media (max-width:920px){
    .auth-footer .footer-inner{
        padding:22px;
    }

    .auth-footer .footer-links a,
    .auth-footer .footer-language-button{
        font-size:13px;
    }
}


/*
|--------------------------------------------------------------------------
| Remember Me And Login Countdown
|--------------------------------------------------------------------------
| Login helper states for persistent sessions and live rate-limit countdowns.
*/
.remember-option{
    display:flex;
    align-items:center;
    gap:10px;
    margin:-2px 0 4px;
    color:#475569;
    font-size:14px;
    font-weight:650;
    cursor:pointer;
}

.remember-option input{
    width:18px;
    height:18px;
    accent-color:var(--blue);
}

.message-warning{
    border:1px solid #fde68a;
    background:#fffbeb;
    color:#92400e;
}

.message-warning strong{
    color:#78350f;
}

.auth-lock-countdown b{
    display:inline-flex;
    min-width:54px;
    justify-content:center;
    padding:2px 8px;
    border-radius:999px;
    color:#78350f;
    background:#fef3c7;
    font-variant-numeric:tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Remember Me Checkbox
|--------------------------------------------------------------------------
| Visible custom checkbox for the authentication remember-me option.
*/
.remember-option{
    display:flex;
    align-items:center;
    gap:10px;
    margin:-2px 0 8px;
    color:#475569;
    font-size:14px;
    font-weight:650;
    cursor:pointer;
    user-select:none;
}

.remember-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.remember-box{
    width:19px;
    height:19px;
    flex:0 0 19px;
    display:inline-grid;
    place-items:center;
    border:1px solid #cbd5e1;
    border-radius:7px;
    background:#ffffff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.remember-box::after{
    content:"";
    width:9px;
    height:5px;
    border-left:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    transform:rotate(-45deg) scale(.72);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}

.remember-option input:checked + .remember-box{
    border-color:var(--blue);
    background:var(--blue);
    box-shadow:0 8px 18px rgba(8,102,255,.18);
}

.remember-option input:checked + .remember-box::after{
    opacity:1;
    transform:rotate(-45deg) scale(1);
}

.remember-option input:focus-visible + .remember-box{
    outline:3px solid rgba(8,102,255,.16);
    outline-offset:3px;
}


/*
|--------------------------------------------------------------------------
| Auth Final Premium Alerts
|--------------------------------------------------------------------------
| Final login/register UI polish: softer errors, grouped security messages,
| premium remember-me control, and disabled login countdown state.
*/
.auth-form{
    gap:16px;
}

.message{
    border-radius:18px;
    padding:14px 16px;
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.message strong{
    margin-bottom:3px;
    font-size:13px;
    letter-spacing:.01em;
}

.message-error{
    border-color:#fecaca;
    background:linear-gradient(180deg,#fff7f7 0%,#fff1f2 100%);
    color:#991b1b;
}

.message-error strong{
    color:#7f1d1d;
}

.auth-security-stack{
    display:grid;
    gap:10px;
    margin:-2px 0 2px;
}

.auth-security-stack .message{
    margin:0;
}

.auth-security-stack .message-warning{
    border-color:#fde68a;
    background:
        radial-gradient(circle at 16px 14px, rgba(245,158,11,.12), transparent 24px),
        linear-gradient(180deg,#fffbeb 0%,#fff7d6 100%);
    color:#854d0e;
}

.auth-security-stack .message-warning strong{
    color:#713f12;
}

.auth-lock-countdown{
    position:relative;
    overflow:hidden;
}

.auth-lock-countdown::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#f59e0b,#facc15);
    opacity:.8;
}

.auth-lock-countdown b{
    min-width:66px;
    padding:4px 10px;
    border-radius:999px;
    color:#78350f;
    background:#fef3c7;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.remember-option{
    min-height:28px;
    margin:-2px 0 2px;
    padding:2px 0;
    color:#475569;
    font-size:14px;
    font-weight:750;
}

.remember-box{
    border-radius:8px;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
}

.remember-option:hover .remember-box{
    border-color:#94a3b8;
}

.auth-form.is-locked .btn-primary,
.btn-primary:disabled{
    cursor:not-allowed;
    opacity:.82;
    background:linear-gradient(135deg,#94a3b8,#64748b);
    box-shadow:0 14px 30px rgba(100,116,139,.18);
}

.field.is-error{
    filter:none;
}

.field.is-error input{
    border-color:#fb7185;
    box-shadow:0 0 0 4px rgba(251,113,133,.12), 0 16px 34px rgba(251,113,133,.10);
}

.field-error{
    margin-top:8px;
    padding-left:3px;
    color:#be123c;
    font-size:12px;
    font-weight:750;
}

@media (max-width:720px){
    .auth-security-stack{
        gap:8px;
    }

    .message{
        padding:13px 14px;
    }
}


/*
|--------------------------------------------------------------------------
| Auth Security Card Final Compact
|--------------------------------------------------------------------------
| Final compact treatment for login security messages and locked countdown.
*/
.auth-panel{
    align-items:center;
}

.auth-form{
    gap:14px;
}

.form-heading{
    margin-bottom:8px;
}

.auth-security-stack{
    display:grid;
    gap:0;
    margin:0;
}

.auth-security-card{
    position:relative;
    display:grid;
    gap:4px;
    padding:13px 16px;
    border:1px solid #fde68a;
    border-radius:18px;
    background:linear-gradient(180deg,#fffbeb 0%,#fff7d6 100%);
    color:#854d0e;
    box-shadow:0 14px 34px rgba(146,64,14,.07);
}

.auth-security-card strong{
    color:#713f12;
    font-size:13px;
    font-weight:900;
}

.auth-security-card span{
    color:#78350f;
    font-size:13px;
    font-weight:750;
    line-height:1.45;
}

.auth-security-card b{
    display:inline-flex;
    min-width:64px;
    justify-content:center;
    margin-left:6px;
    padding:3px 9px;
    border-radius:999px;
    color:#78350f;
    background:#fef3c7;
    font-weight:950;
    font-variant-numeric:tabular-nums;
}

.auth-security-card.is-locked{
    border-color:#facc15;
}

.auth-security-card.is-locked::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:-1px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#f59e0b,#facc15);
}

.message-error{
    padding:13px 16px;
    border-radius:18px;
    background:linear-gradient(180deg,#fff7f7 0%,#fff1f2 100%);
    box-shadow:0 14px 34px rgba(153,27,27,.06);
}

.message-error strong,
.message-error span{
    font-size:13px;
}

.remember-option{
    margin:-3px 0 1px;
    color:#334155;
    font-size:14px;
    font-weight:750;
}

.btn-primary:disabled,
.auth-form.is-locked .btn-primary{
    background:linear-gradient(135deg,#94a3b8,#64748b);
    box-shadow:0 14px 30px rgba(100,116,139,.18);
    cursor:not-allowed;
    opacity:.9;
}

@media (max-width:720px){
    .auth-form{
        gap:13px;
    }

    .auth-security-card,
    .message-error{
        padding:12px 14px;
    }
}


/*
|--------------------------------------------------------------------------
| Auth Options Row Final
|--------------------------------------------------------------------------
| Remember-me and forgotten-password link share one premium compact row.
*/
.auth-options-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:-2px 0 2px;
}

.auth-options-row .remember-option{
    margin:0;
    min-width:0;
}

.forgot-inline{
    flex:0 0 auto;
    margin:0;
    color:var(--blue);
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
}

.forgot-inline:hover{
    text-decoration:underline;
    text-underline-offset:4px;
}

.auth-options-row + .btn-primary{
    margin-top:4px;
}

.auth-form.is-locked .btn-primary,
.btn-primary:disabled{
    color:#ffffff;
    background:linear-gradient(135deg,#94a3b8,#64748b);
    box-shadow:0 14px 30px rgba(100,116,139,.18);
    cursor:not-allowed;
    opacity:.92;
}

@media (max-width:520px){
    .auth-options-row{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .forgot-inline{
        margin-left:29px;
    }
}


/*
|--------------------------------------------------------------------------
| Auth Login Final Visual Balance V4
|--------------------------------------------------------------------------
| Final visual balance for login states:
| - removes harsh browser focus outline on alert cards
| - softens error/security cards
| - fixes divider spacing under the login button
| - improves option row balance
*/
.auth-panel{
    padding-top:clamp(32px,6vh,72px);
    padding-bottom:clamp(32px,6vh,72px);
}

.auth-form{
    gap:15px;
}

.form-heading{
    margin-bottom:10px;
}

.form-heading h2{
    margin-bottom:8px;
}

.message{
    outline:none;
}

.message:focus,
.message:focus-visible{
    outline:none;
}

.message-error{
    border:1px solid #fecaca !important;
    border-radius:18px;
    background:linear-gradient(180deg,#fffafa 0%,#fff1f2 100%);
    box-shadow:0 16px 38px rgba(244,63,94,.08);
}

.message-error:focus,
.message-error:focus-visible{
    border-color:#fecaca !important;
    box-shadow:0 0 0 4px rgba(244,63,94,.10), 0 16px 38px rgba(244,63,94,.08);
}

.message-error strong{
    color:#991b1b;
}

.message-error span{
    color:#a01818;
}

.auth-security-card{
    border:1px solid #f8d66d !important;
    border-radius:18px;
    background:linear-gradient(180deg,#fffdf3 0%,#fff8da 100%);
    box-shadow:0 16px 38px rgba(217,119,6,.08);
}

.auth-security-card.is-locked::after{
    left:18px;
    right:18px;
    height:2px;
    opacity:.75;
}

.auth-security-card b{
    min-width:62px;
    padding:3px 10px;
    background:#fff0bc;
}

.field.is-error input{
    border-color:#fb7185 !important;
    box-shadow:0 0 0 4px rgba(251,113,133,.10), 0 14px 30px rgba(251,113,133,.08) !important;
}

.field-error{
    margin-top:7px;
    margin-left:4px;
}

.auth-options-row{
    margin:0 0 4px;
    padding:0 1px;
}

.remember-option{
    gap:9px;
}

.remember-box{
    width:18px;
    height:18px;
    flex-basis:18px;
}

.forgot-inline{
    font-size:14px;
    font-weight:850;
}

.auth-options-row + .btn-primary{
    margin-top:2px;
}

.btn-primary{
    min-height:58px;
}

.btn-primary:disabled,
.auth-form.is-locked .btn-primary{
    color:#ffffff;
    background:linear-gradient(135deg,#9aa8ba,#708199) !important;
    box-shadow:0 14px 30px rgba(100,116,139,.14) !important;
    opacity:.96;
}

.divider{
    margin:22px 0 20px !important;
}

.divider::before,
.divider::after{
    opacity:.85;
}

.btn-outline{
    min-height:58px;
}

@media (max-width:720px){
    .auth-panel{
        padding-top:28px;
        padding-bottom:28px;
    }

    .btn-primary,
    .btn-outline{
        min-height:56px;
    }

    .divider{
        margin:20px 0 18px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Auth Social Login Buttons V6
|--------------------------------------------------------------------------
| Compact social sign-in buttons and final spacing for the login form.
*/
.auth-form{
    gap:16px;
}

.auth-security-stack{
    margin:2px 0 0;
}

.auth-security-card{
    padding:14px 17px;
}

.auth-options-row{
    margin:1px 0 0;
}

.auth-options-row + .btn-primary{
    margin-top:6px;
}

.btn-primary{
    min-height:60px;
}

.divider{
    margin:26px 0 18px !important;
}

.social-login-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:0;
}

.social-login-button{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 10px;
    border:1px solid #dbe3ef;
    border-radius:17px;
    background:#ffffff;
    color:#0f172a;
    font-size:13px;
    font-weight:850;
    box-shadow:0 12px 28px rgba(15,23,42,.05);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.social-login-button:hover{
    transform:translateY(-1px);
    border-color:#b8c7dc;
    box-shadow:0 18px 38px rgba(15,23,42,.09);
}

.social-login-icon{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#ffffff;
    font-size:13px;
    font-weight:950;
    line-height:1;
}

.social-google .social-login-icon{
    background:linear-gradient(135deg,#ea4335,#fbbc05);
}

.social-tiktok .social-login-icon{
    background:linear-gradient(135deg,#111827,#ff0050);
}

.social-discord .social-login-icon{
    background:linear-gradient(135deg,#5865f2,#7c8cff);
}

.social-facebook .social-login-icon{
    background:linear-gradient(135deg,#1877f2,#0866ff);
    font-family:Arial,sans-serif;
    font-size:18px;
}

.social-x .social-login-icon{
    background:linear-gradient(135deg,#111827,#334155);
}

.auth-register-hint{
    margin:2px 0 0;
    color:#64748b;
    font-size:14px;
    font-weight:650;
    text-align:center;
}

.auth-register-hint a{
    color:var(--blue);
    font-weight:900;
}

.auth-register-hint a:hover{
    text-decoration:underline;
    text-underline-offset:4px;
}

@media (max-width:720px){
    .social-login-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .social-login-button:last-child{
        grid-column:1 / -1;
    }
}

@media (max-width:420px){
    .social-login-grid{
        grid-template-columns:1fr;
    }

    .social-login-button:last-child{
        grid-column:auto;
    }
}


/*
|--------------------------------------------------------------------------
| Auth Social Login Spacious V7
|--------------------------------------------------------------------------
| More breathable login layout and premium social button grid.
*/
.auth-form{
    gap:18px;
}

.form-heading{
    margin-bottom:14px;
}

.auth-security-stack{
    margin:4px 0 6px;
}

.auth-security-card{
    padding:16px 18px;
}

.field{
    min-height:66px;
}

.auth-options-row{
    margin:2px 0 4px;
}

.auth-options-row + .btn-primary{
    margin-top:8px;
}

.btn-primary{
    min-height:62px;
    border-radius:17px;
}

.divider{
    margin:30px 0 22px !important;
}

.social-login-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin:0;
}

.social-login-button{
    min-height:58px;
    padding:0 14px;
    border-radius:18px;
    justify-content:flex-start;
    gap:10px;
    font-size:14px;
    box-shadow:0 14px 34px rgba(15,23,42,.055);
}

.social-login-button:nth-child(1),
.social-login-button:nth-child(2),
.social-login-button:nth-child(3){
    grid-column:span 2;
}

.social-login-button:nth-child(4),
.social-login-button:nth-child(5){
    grid-column:span 3;
}

.social-login-icon{
    width:28px;
    height:28px;
    border-radius:10px;
}

.auth-register-hint{
    margin:12px 0 0;
    font-size:14px;
    line-height:1.5;
}

@media (min-width:1161px){
    .auth-form{
        width:min(100%,560px);
    }
}

@media (max-width:720px){
    .social-login-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .social-login-button:nth-child(n){
        grid-column:auto;
    }

    .social-login-button{
        justify-content:center;
    }

    .divider{
        margin:24px 0 18px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Social Icon Only Buttons V8
|--------------------------------------------------------------------------
| Icon-only social login buttons. Visible labels are removed from the UI while
| aria-label values keep the controls accessible.
*/
.social-login-icons{
    grid-template-columns:repeat(5,64px) !important;
    justify-content:center;
    gap:14px !important;
    margin-top:2px;
}

.social-login-icons .social-login-button{
    width:64px;
    min-width:64px;
    height:58px;
    min-height:58px;
    padding:0 !important;
    justify-content:center !important;
    border-radius:18px;
}

.social-login-icons .social-login-icon{
    display:none;
}

.social-svg{
    width:28px;
    height:28px;
    display:block;
}

.social-login-icons .social-login-button:hover .social-svg{
    transform:scale(1.06);
}

.social-login-icons .social-login-button:nth-child(n){
    grid-column:auto !important;
}

.auth-register-hint{
    margin-top:14px;
}

@media (max-width:520px){
    .social-login-icons{
        grid-template-columns:repeat(5,52px) !important;
        gap:9px !important;
    }

    .social-login-icons .social-login-button{
        width:52px;
        min-width:52px;
        height:52px;
        min-height:52px;
        border-radius:16px;
    }

    .social-svg{
        width:25px;
        height:25px;
    }
}


/*
|--------------------------------------------------------------------------
| Divider Spacious V9
|--------------------------------------------------------------------------
| Adds premium vertical spacing around the auth divider section.
*/
.auth-options-row + .btn-primary{
    margin-top:25px;
}

.btn-primary + .divider,
.divider{
    margin:25px 0 !important;
}

.divider + .social-login-grid{
    margin-top:2px;
}

.auth-register-hint{
    margin-top:16px;
}


/*
|--------------------------------------------------------------------------
| Forgot Password Hover Clean
|--------------------------------------------------------------------------
| Keeps the forgotten-password link premium on hover without a harsh underline.
*/
.forgot-inline,
.small-link{
    text-decoration:none;
}

.forgot-inline:hover,
.forgot-inline:focus-visible,
.small-link:hover,
.small-link:focus-visible{
    color:#0057e6;
    text-decoration:none;
}

.forgot-inline{
    position:relative;
}

.forgot-inline::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    opacity:0;
    transform:scaleX(.65);
    transition:opacity .18s ease, transform .18s ease;
}

.forgot-inline:hover::after,
.forgot-inline:focus-visible::after{
    opacity:.22;
    transform:scaleX(1);
}


/*
|--------------------------------------------------------------------------
| No Underline Stable Buttons Premium Checkbox
|--------------------------------------------------------------------------
| Final interaction cleanup:
| - no underline on forgotten-password links
| - buttons never move on hover
| - remember checkbox uses a premium filled-dot effect instead of a checkmark
*/
.forgot-inline,
.forgot-inline:hover,
.forgot-inline:focus,
.forgot-inline:focus-visible,
.small-link,
.small-link:hover,
.small-link:focus,
.small-link:focus-visible,
.auth-register-hint a,
.auth-register-hint a:hover,
.auth-register-hint a:focus,
.auth-register-hint a:focus-visible{
    text-decoration:none !important;
}

.forgot-inline::after,
.forgot-inline:hover::after,
.forgot-inline:focus-visible::after{
    display:none !important;
    content:none !important;
}

.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-outline,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:focus-visible,
.social-login-button,
.social-login-button:hover,
.social-login-button:focus,
.social-login-button:focus-visible{
    transform:none !important;
}

.social-login-button:hover{
    border-color:#b8c7dc;
    box-shadow:0 14px 34px rgba(15,23,42,.075);
}

.remember-box{
    position:relative;
    overflow:hidden;
    border:1px solid #cbd5e1;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.04);
}

.remember-box::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:999px;
    background:#ffffff;
    opacity:0;
    transform:scale(.35);
    transition:opacity .18s ease, transform .18s ease;
}

.remember-box::after{
    display:none !important;
    content:none !important;
}

.remember-option:hover .remember-box{
    border-color:#8fb6ff;
    box-shadow:0 0 0 4px rgba(8,102,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.remember-option input:checked + .remember-box{
    border-color:var(--blue);
    background:linear-gradient(135deg,var(--blue),#2c7cff);
    box-shadow:0 10px 22px rgba(8,102,255,.20);
}

.remember-option input:checked + .remember-box::before{
    opacity:1;
    transform:scale(1);
}

.remember-option input:focus-visible + .remember-box{
    outline:3px solid rgba(8,102,255,.16);
    outline-offset:3px;
}


/*
|--------------------------------------------------------------------------
| Button Colors Final Polish
|--------------------------------------------------------------------------
| Final button gradients and neutral forgotten-password interaction.
*/
.btn-primary{
    background:linear-gradient(135deg,var(--blue),#62a0ff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible{
    background:linear-gradient(135deg,var(--blue),#62a0ff) !important;
}

.btn-outline{
    color:#ffffff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--green),#28d796) !important;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:focus-visible{
    color:#ffffff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--green),#28d796) !important;
}

.forgot-inline,
.forgot-inline:hover,
.forgot-inline:focus,
.forgot-inline:focus-visible{
    color:var(--blue) !important;
    text-decoration:none !important;
    box-shadow:none !important;
    background:none !important;
}

.forgot-inline::before,
.forgot-inline::after{
    display:none !important;
    content:none !important;
}


/*
|--------------------------------------------------------------------------
| Remember Checkbox Final Premium
|--------------------------------------------------------------------------
| Smaller, cleaner and better aligned remember-me control.
*/
.remember-option{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:24px;
    line-height:1;
}

.remember-option input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
}

.remember-box{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
    border-radius:50% !important;
    border:1px solid #c7d4e5 !important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 14px rgba(15,23,42,.045) !important;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.remember-box::before{
    content:"" !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    background:#ffffff !important;
    opacity:0;
    transform:scale(.35);
    transition:opacity .18s ease, transform .18s ease;
}

.remember-box::after{
    display:none !important;
    content:none !important;
}

.remember-option:hover .remember-box{
    border-color:#8db8ff !important;
    box-shadow:0 0 0 4px rgba(8,102,255,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.remember-option input:checked + .remember-box{
    border-color:#1d6fff !important;
    background:linear-gradient(135deg,var(--blue),#62a0ff) !important;
    box-shadow:0 8px 18px rgba(8,102,255,.18) !important;
}

.remember-option input:checked + .remember-box::before{
    opacity:1;
    transform:scale(1);
}

.remember-option input:focus-visible + .remember-box{
    outline:3px solid rgba(8,102,255,.14);
    outline-offset:3px;
}

.remember-option span:last-child{
    color:#0f172a;
    font-size:14px;
    font-weight:800;
}


/*
|--------------------------------------------------------------------------
| Remember Text Soft Color
|--------------------------------------------------------------------------
| Softens remember-me text so it follows the authentication UI palette.
*/
.remember-option{
    color:#475569 !important;
}

.remember-option span:last-child{
    color:#475569 !important;
    font-size:14px;
    font-weight:750;
    letter-spacing:-.01em;
}

.remember-option:hover span:last-child{
    color:#334155 !important;
}

.remember-option input:checked ~ span:last-child{
    color:#1d4ed8 !important;
}


/*
|--------------------------------------------------------------------------
| Login Micro Finish Final
|--------------------------------------------------------------------------
| Soft final login adjustments:
| - calmer remember-me active state
| - slightly shorter main button
| - tighter social footer spacing
*/
.remember-option span:last-child{
    color:#475569 !important;
    font-weight:740;
}

.remember-option input:checked + .remember-box{
    border-color:#3b82f6 !important;
    background:linear-gradient(135deg,#2563eb,#60a5fa) !important;
    box-shadow:0 8px 18px rgba(37,99,235,.16) !important;
}

.remember-option input:checked ~ span:last-child{
    color:#2563eb !important;
}

.btn-primary{
    min-height:58px !important;
}

.social-login-icons{
    margin-top:0 !important;
}

.auth-register-hint{
    margin-top:10px !important;
}


/*
|--------------------------------------------------------------------------
| Final Auth Premium Micro Polish
|--------------------------------------------------------------------------
| Last visual refinements for authentication screens:
| - clearer social icons
| - softer input focus state
| - slightly better desktop panel balance
*/
@media (min-width:1161px){
    .auth-form{
        width:min(100%,540px);
    }
}

.field input:focus{
    border-color:#a9c8ff;
    box-shadow:0 0 0 4px rgba(8,102,255,.085), 0 16px 34px rgba(15,23,42,.055);
}

.social-svg{
    width:30px !important;
    height:30px !important;
}

.social-login-icons .social-login-button{
    width:66px !important;
    min-width:66px !important;
    height:60px !important;
    min-height:60px !important;
}

.social-login-icons .social-login-button:hover{
    box-shadow:0 16px 36px rgba(15,23,42,.085);
}

@media (max-width:520px){
    .social-svg{
        width:26px !important;
        height:26px !important;
    }

    .social-login-icons .social-login-button{
        width:54px !important;
        min-width:54px !important;
        height:54px !important;
        min-height:54px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Register Legal Links Final
|--------------------------------------------------------------------------
| Makes only the legal document names clickable in the register legal sentence.
*/
.legal-text .auth-inline-link{
    color:var(--blue);
    font-weight:800;
    text-decoration:none !important;
}

.legal-text .auth-inline-link:hover,
.legal-text .auth-inline-link:focus-visible{
    color:var(--blue);
    text-decoration:none !important;
    opacity:.86;
}


/*
|--------------------------------------------------------------------------
| Register Legal Inline Links
|--------------------------------------------------------------------------
*/
.legal-text{
    color:#64748b;
}

.auth-inline-link{
    color:var(--blue);
    font-weight:700;
    text-decoration:none !important;
    transition:opacity .18s ease;
}

.auth-inline-link:hover,
.auth-inline-link:focus-visible{
    color:var(--blue);
    text-decoration:none !important;
    opacity:.82;
}


/*
|--------------------------------------------------------------------------
| Register Legal UI Polish
|--------------------------------------------------------------------------
*/
.legal-text{
    max-width:420px;
    margin:20px auto 0;
    color:#64748b;
    font-size:14px;
    line-height:1.7;
    text-align:center;
}

.legal-text .auth-inline-link{
    color:#2563eb;
    font-weight:650;
    text-decoration:none !important;
    transition:opacity .18s ease,color .18s ease;
}

.legal-text .auth-inline-link:hover,
.legal-text .auth-inline-link:focus-visible{
    color:#1d4ed8;
    opacity:.88;
    text-decoration:none !important;
}

.small-link{
    display:inline-flex;
    justify-content:center;
    margin-top:18px;
    color:#64748b !important;
    font-weight:650;
}

.small-link:hover,
.small-link:focus-visible{
    color:#2563eb !important;
}


/*
|--------------------------------------------------------------------------
| Register Legal Final Balance
|--------------------------------------------------------------------------
| Final visual balance for legal and login helper links on register screen.
*/
.legal-text{
    max-width:520px !important;
    margin:22px auto 0 !important;
    color:#64748b !important;
    font-size:14px !important;
    line-height:1.65 !important;
    text-align:center !important;
}

.legal-text .auth-inline-link{
    color:#2563eb !important;
    font-weight:700 !important;
    text-decoration:none !important;
    white-space:nowrap;
}

.legal-text .auth-inline-link:hover,
.legal-text .auth-inline-link:focus-visible{
    color:#1d4ed8 !important;
    opacity:.9;
    text-decoration:none !important;
}

.auth-form .small-link{
    width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    margin:20px auto 0 !important;
    color:#64748b !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-align:center !important;
}

.auth-form .small-link:hover,
.auth-form .small-link:focus-visible{
    color:#2563eb !important;
    text-decoration:none !important;
}


/*
|--------------------------------------------------------------------------
| Fix Login Options Row Scope
|--------------------------------------------------------------------------
| The register helper link is centered, but the login remember/forgot row must
| stay as a compact two-column row.
*/
.auth-options-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    width:100% !important;
}

.auth-options-row .remember-option{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 1 auto !important;
    gap:9px !important;
    min-width:0 !important;
    white-space:nowrap !important;
}

.auth-options-row .remember-option span:last-child{
    display:inline !important;
    white-space:nowrap !important;
    line-height:1.2 !important;
}

.auth-options-row .small-link,
.auth-options-row .forgot-inline{
    width:auto !important;
    display:inline-flex !important;
    flex:0 0 auto !important;
    justify-content:flex-end !important;
    margin:0 !important;
    color:var(--blue) !important;
    font-size:14px !important;
    font-weight:850 !important;
    text-align:right !important;
    white-space:nowrap !important;
    text-decoration:none !important;
}

/* Only the register link placed after the legal text is centered. */
.legal-text + .small-link{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:20px auto 0 !important;
    color:#64748b !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-align:center !important;
}

.legal-text + .small-link:hover,
.legal-text + .small-link:focus-visible{
    color:#2563eb !important;
    text-decoration:none !important;
}

@media (max-width:520px){
    .auth-options-row{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    .auth-options-row .small-link,
    .auth-options-row .forgot-inline{
        margin-left:26px !important;
        justify-content:flex-start !important;
        text-align:left !important;
    }
}

/*
|--------------------------------------------------------------------------
| Auth Responsive Final
|--------------------------------------------------------------------------
| Final tablet and phone layout.
| Desktop keeps the two-column showcase. Below desktop width the showcase and
| top auth navigation are hidden, and the form becomes a full page layout.
*/
@media (max-width:1159px){
    html,
    body{
        width:100%;
        min-width:0;
        min-height:100%;
        overflow-x:hidden;
        background:#ffffff;
    }

    .auth-page{
        width:100%;
        min-height:100vh;
        min-height:100dvh;
        display:grid;
        grid-template-rows:minmax(0,1fr) auto;
        background:#ffffff !important;
    }

    .auth-main{
        width:100%;
        min-height:0 !important;
        display:flex !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        padding:0 !important;
        border:0 !important;
        background:#ffffff !important;
    }

    .auth-showcase,
    .auth-nav{
        display:none !important;
    }

    .auth-panel{
        width:100% !important;
        max-width:none !important;
        min-height:0 !important;
        display:flex !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        padding:0 !important;
        background:#ffffff !important;
    }

    .auth-form{
        width:100% !important;
        max-width:none !important;
        min-height:auto !important;
        margin:0 !important;
        padding:clamp(38px,7vh,70px) clamp(28px,8vw,88px) 34px !important;
        border:0 !important;
        border-radius:0 !important;
        background:#ffffff !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
    }

    .auth-form > *{
        width:min(100%,680px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .form-heading{
        text-align:left !important;
        margin-bottom:22px !important;
    }

    .form-heading h2{
        margin:0 0 10px !important;
        font-size:clamp(34px,6vw,46px) !important;
        line-height:1.05 !important;
        letter-spacing:-.05em !important;
        white-space:normal !important;
    }

    .form-heading p{
        margin:0 !important;
        font-size:16px !important;
        line-height:1.45 !important;
    }

    .field{
        min-height:auto !important;
    }

    .field input{
        min-height:58px !important;
        padding-left:68px !important;
        padding-right:56px !important;
        border-radius:22px !important;
        font-size:16px !important;
    }

    .field-icon{
        top:50% !important;
        left:24px !important;
        width:36px !important;
        height:36px !important;
        transform:translateY(-50%) !important;
    }

    .field-icon::before{
        width:18px !important;
        height:18px !important;
        margin:auto !important;
    }

    .password-toggle{
        top:50% !important;
        right:22px !important;
        transform:translateY(-50%) !important;
    }

    .auth-options-row{
        width:min(100%,680px) !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-direction:row !important;
        gap:16px !important;
        margin:2px auto 4px !important;
    }

    .auth-options-row .remember-option{
        display:inline-flex !important;
        align-items:center !important;
        flex:0 1 auto !important;
        gap:9px !important;
        min-width:0 !important;
        white-space:nowrap !important;
    }

    .auth-options-row .remember-option span:last-child{
        display:inline !important;
        white-space:nowrap !important;
        line-height:1.2 !important;
    }

    .auth-options-row .forgot-inline,
    .auth-options-row .small-link{
        width:auto !important;
        display:inline-flex !important;
        flex:0 0 auto !important;
        justify-content:flex-end !important;
        margin:0 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .btn-primary{
        min-height:58px !important;
        border-radius:20px !important;
    }

    .divider{
        margin:22px auto 20px !important;
    }

    .social-login-icons{
        display:grid !important;
        grid-template-columns:repeat(5,56px) !important;
        justify-content:center !important;
        gap:11px !important;
        margin-top:0 !important;
    }

    .social-login-icons .social-login-button{
        width:56px !important;
        min-width:56px !important;
        height:56px !important;
        min-height:56px !important;
        display:grid !important;
        place-items:center !important;
        padding:0 !important;
        border-radius:17px !important;
        transform:none !important;
    }

    .social-svg{
        width:26px !important;
        height:26px !important;
        display:block !important;
        margin:auto !important;
    }

    .auth-register-hint{
        margin-top:12px !important;
        font-size:14px !important;
        line-height:1.3 !important;
        text-align:center !important;
    }

    .legal-text{
        max-width:680px !important;
        margin:20px auto 0 !important;
        line-height:1.55 !important;
        text-align:center !important;
    }

    .legal-text + .small-link{
        width:min(100%,680px) !important;
        display:flex !important;
        justify-content:center !important;
        margin:18px auto 0 !important;
    }

    .auth-footer{
        width:100% !important;
        padding:14px 24px 16px !important;
        border-top:1px solid rgba(203,213,225,.65) !important;
        background:#ffffff !important;
    }

    .footer-inner{
        width:100% !important;
        max-width:760px !important;
        margin:0 auto !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        text-align:center !important;
    }

    .footer-brand-line{
        order:2 !important;
        justify-content:center !important;
        margin:0 !important;
        font-size:13px !important;
        line-height:1.2 !important;
    }

    .footer-links{
        order:1 !important;
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px 16px !important;
        font-size:13px !important;
        line-height:1.15 !important;
    }

    .footer-links a,
    .footer-language-button{
        min-height:22px !important;
        padding:0 !important;
        font-size:13px !important;
        line-height:1.15 !important;
    }

    .footer-language-icon,
    .footer-language-caret{
        width:16px !important;
        height:16px !important;
    }
}

@media (max-width:720px){
    .auth-form{
        padding:28px 22px 22px !important;
    }

    .form-heading{
        margin-bottom:18px !important;
    }

    .form-heading h2{
        font-size:clamp(30px,8.2vw,38px) !important;
    }

    .field input{
        min-height:54px !important;
        padding-left:64px !important;
        font-size:16px !important;
    }

    .field-icon{
        left:22px !important;
        width:34px !important;
        height:34px !important;
    }

    .btn-primary{
        min-height:54px !important;
    }

    .social-login-icons{
        grid-template-columns:repeat(5,50px) !important;
        gap:8px !important;
    }

    .social-login-icons .social-login-button{
        width:50px !important;
        min-width:50px !important;
        height:50px !important;
        min-height:50px !important;
        border-radius:16px !important;
    }

    .social-svg{
        width:24px !important;
        height:24px !important;
    }

    .auth-footer{
        padding:12px 16px 14px !important;
    }

    .footer-links{
        gap:8px 14px !important;
    }
}

@media (max-width:430px){
    .auth-form{
        padding:24px 18px 18px !important;
    }

    .form-heading h2{
        font-size:30px !important;
    }

    .form-heading p{
        font-size:15px !important;
    }

    .auth-options-row{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:7px !important;
    }

    .auth-options-row .forgot-inline,
    .auth-options-row .small-link{
        margin-left:27px !important;
        justify-content:flex-start !important;
        text-align:left !important;
    }

    .social-login-icons{
        grid-template-columns:repeat(5,46px) !important;
        gap:7px !important;
    }

    .social-login-icons .social-login-button{
        width:46px !important;
        min-width:46px !important;
        height:46px !important;
        min-height:46px !important;
    }

    .social-svg{
        width:22px !important;
        height:22px !important;
    }

    .auth-footer{
        padding:10px 12px 12px !important;
    }

    .footer-links{
        gap:7px 12px !important;
        font-size:12px !important;
    }

    .footer-brand-line{
        font-size:12px !important;
    }
}

@supports (padding:max(0px)){
    @media (max-width:720px){
        .auth-form{
            padding-left:max(18px,env(safe-area-inset-left)) !important;
            padding-right:max(18px,env(safe-area-inset-right)) !important;
        }

        .auth-footer{
            padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
        }
    }
}