/* login.html / register.html — visual layer only. Load LAST. */
:root{--au-cu:#b4561f;--au-cu2:#f0a35e;--au-navy:#0b1530}
@keyframes auIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes auFloat{50%{transform:translateY(18px) scale(1.07)}}
@keyframes auShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-wrap{position:relative;overflow:hidden;background:radial-gradient(620px 320px at 88% 0,rgba(240,163,94,.32),transparent 62%),radial-gradient(520px 300px at 6% 80%,rgba(75,123,255,.14),transparent 62%),linear-gradient(180deg,#fff8f1,#f6f8fc)}
.auth-wrap::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;inset-inline-start:-100px;top:-120px;background:radial-gradient(circle,rgba(255,184,107,.55),transparent 66%);animation:auFloat 8s ease-in-out infinite;pointer-events:none}
.auth-card{position:relative;overflow:visible;border-radius:30px!important;border:1px solid #fff!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px);box-shadow:0 36px 80px rgba(11,21,48,.16)!important;padding-top:56px!important;animation:auIn .7s cubic-bezier(.2,.8,.2,1) both}
.auth-card::before{content:"☀️";position:absolute;top:-34px;inset-inline:0;margin-inline:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,var(--au-cu),var(--au-cu2));box-shadow:0 14px 30px rgba(180,86,31,.45),0 0 0 8px rgba(255,255,255,.9)}
.auth-card h1{text-align:center;font-weight:800;font-size:clamp(1.4rem,4vw,1.8rem)!important;background:linear-gradient(120deg,#0b1530 30%,#b4561f);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-card p.auth-sub{text-align:center}
.auth-card .field label{font-weight:700;color:var(--au-navy)}
.auth-card .input{min-height:54px;border-radius:16px;border:2px solid #e5e9f2;padding-inline:16px;transition:.25s}
.auth-card .input:focus{outline:0;border-color:var(--au-cu);box-shadow:0 0 0 5px rgba(180,86,31,.14)}
.auth-card .field.has-error .input{animation:auShake .4s}
.auth-card .field-hint{font-size:.8rem;color:#64748b}
.auth-card .btn-cta{min-height:54px;border-radius:99px;font-weight:800;font-size:1rem;box-shadow:0 16px 34px rgba(180,86,31,.42);transition:transform .25s,box-shadow .25s}
.auth-card .btn-cta:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 22px 42px rgba(180,86,31,.5)}
.auth-card .btn-cta:active{transform:scale(.98)}
.auth-error.is-visible{border-radius:16px;animation:auShake .4s}
.auth-switch a{color:var(--au-cu);font-weight:800}
@media(prefers-reduced-motion:reduce){.auth-wrap::before,.auth-card,.auth-card *{animation:none!important;transition:none!important}}

/* ===== v2: two-column layout, side panel, password eye + strength ===== */
.auth-wrap{display:grid!important;grid-template-columns:minmax(360px,520px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;justify-content:center;padding:clamp(48px,7vw,96px) clamp(16px,6vw,140px)!important;min-height:calc(100vh - 120px)}
.auth-card{max-width:520px!important;justify-self:center;padding-inline:clamp(24px,4vw,44px)!important}
.auth-side{position:relative;overflow:hidden;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(28px,4vw,56px);border-radius:36px;color:#fff;background:radial-gradient(420px 260px at 85% 0,rgba(240,163,94,.45),transparent 60%),linear-gradient(135deg,#0b1530,#14244d);box-shadow:0 36px 80px rgba(11,21,48,.3);animation:auIn .8s .15s cubic-bezier(.2,.8,.2,1) both;min-height:460px}
.auth-side__orb{position:absolute;width:260px;height:260px;border-radius:50%;inset-inline-end:-80px;bottom:-90px;background:radial-gradient(circle,rgba(255,184,107,.55),transparent 66%);animation:auFloat 7s ease-in-out infinite;pointer-events:none}
.auth-side__kicker{align-self:flex-start;margin:0;padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#ffd9b0;font-weight:800;font-size:13px}
.auth-side__title{margin:0;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.5;font-weight:800;color:#fff}
.auth-side__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px;position:relative}
.auth-side__list li{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s;animation:auIn .7s both}
.auth-side__list li:nth-child(1){animation-delay:.3s}.auth-side__list li:nth-child(2){animation-delay:.4s}.auth-side__list li:nth-child(3){animation-delay:.5s}
.auth-side__list li:hover{transform:translateX(-6px);background:rgba(255,255,255,.14)}
.auth-side__list li>span{flex:0 0 52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#b4561f,#f0a35e);box-shadow:0 10px 22px rgba(180,86,31,.45)}
.auth-side__list strong{display:block;font-size:1.05rem;color:#fff}
.auth-side__list small{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.7}
.auth-side__note{margin:6px 0 0;color:rgba(255,255,255,.6);font-size:.85rem;position:relative}
.auth-pass{position:relative}
.auth-pass .input{padding-inline-end:56px}
.auth-pass__btn{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:12px;background:transparent;font-size:20px;cursor:pointer;transition:background .2s,transform .2s}
.auth-pass__btn:hover{background:#fff4e8}.auth-pass__btn:active{transform:translateY(-50%) scale(.9)}
.auth-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.auth-meter i{height:6px;border-radius:6px;background:#e5e9f2;transition:background .3s}
.auth-meter[data-s="1"] i:nth-child(-n+1){background:#ef4444}.auth-meter[data-s="2"] i:nth-child(-n+2){background:#f59e0b}.auth-meter[data-s="3"] i:nth-child(-n+3){background:#84cc16}.auth-meter[data-s="4"] i{background:#10b981}
.auth-meter-text{display:block;margin-top:6px;font-size:.8rem;font-weight:700;color:#64748b;min-height:1.3em}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr!important;padding-inline:16px!important}.auth-side{display:none}}

/* recovery pages */
.auth-success{padding:14px 16px;border-radius:16px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;line-height:1.9;font-weight:600;margin-bottom:12px}
.auth-success[hidden]{display:none}
form[hidden]{display:none}