.auth-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);overflow-x:hidden;min-height:100vh;position:relative;z-index:1}

/* art side */
.auth-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:36px 44px;border-right:1px solid var(--line)}
.auth-art-img{position:absolute;inset:0;background:url(../Pics/hero.webp) center/cover;transform:scale(1.04);filter:none}
.auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,17,.28),rgba(10,12,17,0) 28%,rgba(10,12,17,0) 52%,rgba(10,12,17,.82))}
.auth-art>*:not(.auth-art-img){position:relative;z-index:1}
.auth-art-top,.auth-mobile-brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.01em}
.auth-art-bot h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;margin-bottom:12px}
.auth-art-bot h2 em{font-style:normal;color:var(--accent2)}
.auth-art-bot p{color:#aab2c3;max-width:380px}

/* form side */
.auth-pane{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:32px 24px;min-width:0}
.auth-box{width:min(400px,100%);min-width:0}
.auth-mobile-brand{display:none;margin-bottom:26px}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:30px}
.tab{position:relative;z-index:1;height:38px;border:0;background:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;border-radius:9px;transition:color .2s}
.tab.on{color:#fff}
.tab-ink{position:absolute;top:4px;left:4px;height:38px;width:calc(50% - 4px);background:var(--accent);border-radius:9px;transition:transform .3s cubic-bezier(.3,.8,.3,1),width .3s;box-shadow:0 6px 18px -6px var(--accent)}
.in-code .tabs{display:none}

.pane{display:none}
.pane.on{display:block;animation:paneIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}}
.pane h1{font-size:28px;letter-spacing:-.025em;margin-bottom:6px}
.sub{color:var(--muted);margin-bottom:26px;font-size:14.5px}
.sub b{color:var(--text);font-weight:600}

.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:500}
.fld small{display:block;margin-top:6px;color:var(--dim);font-size:12px}
.fld input{width:100%;height:46px;padding:0 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line2);outline:0;font-size:15px;transition:.18s}
.fld input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pw{position:relative}
.pw input{padding-right:46px}
.eye{position:absolute;right:4px;top:4px;width:38px;height:38px;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--dim);display:grid;place-items:center}
.eye::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.eye:hover,.eye.on{color:var(--text)}

.err{min-height:0;max-height:0;overflow:hidden;opacity:0;color:#ff9a9a;font-size:13.5px;background:rgba(255,77,77,.08);border:1px solid rgba(255,77,77,.25);border-radius:10px;padding:0 12px;margin-bottom:0;transition:.25s}
.err.on{max-height:90px;opacity:1;padding:10px 12px;margin-bottom:16px}
.full{width:100%}
.btn.load{pointer-events:none;opacity:.8}
.btn.load span{opacity:0}
.btn.load{position:relative}
.btn.load::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.otp{display:flex;gap:10px;margin-bottom:22px}
.otp input{flex:1 1 0;width:0;min-width:0;height:58px;text-align:center;font:600 24px 'JetBrains Mono',monospace;border-radius:12px;background:var(--surface);border:1px solid var(--line2);outline:0;color:var(--text);transition:.18s}
.otp input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);transform:translateY(-2px)}
.code-links{display:flex;justify-content:space-between;margin-top:18px}
.link{background:none;border:0;color:var(--accent2);font-size:13.5px;cursor:pointer;padding:4px 0}
.link:disabled{color:var(--dim);cursor:default}
.link:not(:disabled):hover{text-decoration:underline}

@media (max-width:900px){
  .auth-page{grid-template-columns:minmax(0,1fr)}
  .auth-art{display:none}
  .auth-mobile-brand{display:flex}
}

.forgot-row{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:13px;color:var(--muted);cursor:pointer;line-height:1.45}
.agree input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--accent)}
.agree a{color:var(--accent2)}
.agree a:hover{text-decoration:underline}
.codein{height:56px!important;text-align:center;font:600 26px 'JetBrains Mono',monospace!important;letter-spacing:.4em}

.spam-hint{margin:-12px 0 18px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.45}
.spam-hint b{color:var(--text)}