:root{
    --bg0:#070a0e;
    --bg1:#0b111a;
    --text: rgba(235,242,255,.92);
    --muted: rgba(235,242,255,.62);
    --tiffany:#2FFFD5;
    --tiffany2:#1FD1B5;
    --r: 18px;
}

*, *::before, *::after{ box-sizing: border-box; }

body.auth{
    min-height: 100dvh;
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
    color: var(--text);
    display: grid;
    place-items: center;
    background:
        radial-gradient(1200px 800px at 20% -10%, rgba(47,255,213,.18), transparent 55%),
        radial-gradient(900px 700px at 110% 10%, rgba(47,255,213,.12), transparent 55%),
        linear-gradient(180deg, #0b111a, #070a0e);
}

.auth__wrap{
    width: 100%;
    padding: 20px;
    display: grid;
    place-items: center;
}

.auth__card{
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 26px;
    border-radius: var(--r);
    background: rgba(20,24,28,.94);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    display: grid;
    gap: 18px;
    overflow: visible;
}

.auth__card::before{
    content:"";
    position:absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from 180deg,
        rgba(47,255,213,.25),
        rgba(47,255,213,1) 12%,
        rgba(180,255,245,1) 28%,
        rgba(47,255,213,1) 48%,
        rgba(120,255,235,1) 68%,
        rgba(47,255,213,1) 88%,
        rgba(47,255,213,.25)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
    animation: borderPulse 2.6s ease-in-out infinite;
}

.auth__card::after{
    content:"";
    position:absolute;
    inset: -18px;
    border-radius: inherit;
    pointer-events:none;
    background:
        radial-gradient(circle at 30% 30%, rgba(47,255,213,.45), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(47,255,213,.35), transparent 65%);
    filter: blur(18px);
    opacity: .7;
    animation: haloPulse 2.6s ease-in-out infinite;
}

@keyframes borderPulse{
    0%,100%{ inset:-3px; filter:brightness(1.05) saturate(1.2); box-shadow:0 0 14px rgba(47,255,213,.65),0 0 36px rgba(47,255,213,.45),0 0 90px rgba(47,255,213,.35); }
    50%{ inset:-5px; filter:brightness(1.4) saturate(1.6); box-shadow:0 0 26px rgba(47,255,213,1),0 0 64px rgba(47,255,213,.8),0 0 160px rgba(47,255,213,.55); }
}

@keyframes haloPulse{
    0%,100%{ opacity:.55; filter:blur(18px); }
    50%{ opacity:1; filter:blur(26px); }
}

.auth__brand{ display:flex; justify-content:center; margin-bottom:6px; }

.auth__logo{ max-width:180px; max-height:56px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(47,255,213,.65)) drop-shadow(0 0 42px rgba(47,255,213,.25)); }

.auth__title{ text-align:center; }
.auth__title h1{ margin:0; font-size:28px; letter-spacing:.3px; }
.auth__title p{ margin:6px 0 0; font-size:14px; color:var(--muted); }

.auth__error{ background:rgba(255,62,62,.12); border:1px solid rgba(255,62,62,.35); color:#ffd7d7; padding:10px 12px; border-radius:12px; font-size:14px; }

.auth__field{ display:grid; gap:6px; }
.auth__field span{ font-size:13px; color:var(--muted); }

.auth__field input{
    height:44px; padding:0 14px; border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(10,16,24,.75) !important;
    color:var(--text); outline:none;
}
.auth__field input:focus{ border-color:rgba(47,255,213,.85); box-shadow:0 0 0 3px rgba(47,255,213,.24); }
.auth__field input:valid{ background-color:rgba(10,16,24,.75) !important; }
.auth__field input:not(:placeholder-shown){ background-color:rgba(10,16,24,.75) !important; }
.auth__field input:-webkit-autofill,
.auth__field input:-webkit-autofill:hover,
.auth__field input:-webkit-autofill:focus,
.auth__field input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--text) !important;
    caret-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px rgba(10,16,24,.75) inset !important;
    box-shadow:0 0 0 1000px rgba(10,16,24,.75) inset !important;
    transition:background-color 999999s ease-out 0s;
}

.auth__btn{
    margin-top:6px; height:46px; border-radius:16px; border:none;
    background:linear-gradient(135deg, var(--tiffany), var(--tiffany2));
    color:#04201b; font-size:15px; font-weight:700; cursor:pointer;
}
.auth__btn:hover{ box-shadow:0 10px 26px rgba(47,255,213,.45),0 0 30px rgba(47,255,213,.35); }

@media (max-width:420px){ .auth__card{ padding:24px 20px; } }