.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-side{background:var(--navy);color:#E7ECF3;padding:40px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.auth-side .logo{color:#fff}
.auth-side h2{color:#fff;font-size:var(--t-30);line-height:1.2;max-width:22ch;letter-spacing:-.02em}
.auth-side p{color:#B9C4D4;max-width:46ch;margin-top:12px}
.mini{display:grid;gap:10px;max-width:460px}
.mini .row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#111A2E;border:1px solid #22304D;border-radius:10px;padding:12px 14px;font-size:var(--t-13)}
.mini .row b{color:#fff;font-weight:600}
.mini .row span{color:#9FB0C6}
.mini .pill{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:#13254A;color:#A9C8FF}
.auth-side .cap{font-size:var(--t-12);color:#8FA0B7}
.auth-main{display:flex;flex-direction:column;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-box{width:100%;max-width:400px;margin:0 auto;display:grid;gap:20px}
.auth-box h1{font-size:var(--t-30);letter-spacing:-.02em}
.auth-box .sub{color:var(--text-2)}
.auth-top{display:flex;justify-content:space-between;align-items:center;max-width:400px;width:100%;margin:0 auto 24px}
.auth-top .logo{visibility:hidden}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);font-size:var(--t-14)}
.alert.error{background:var(--danger-bg);color:var(--danger)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.info{background:var(--info-bg);color:var(--info)}
.demo-box{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:14px;display:grid;gap:10px;background:var(--surface)}
.demo-box p{font-size:var(--t-13);color:var(--text-2)}
.demo-box .b{display:flex;gap:8px;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:8px}
.auth-box .linkbtn{font-size:var(--t-13);text-decoration:none}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.auth{grid-template-columns:minmax(0,1fr)}.auth-side{display:none}.auth-top .logo{visibility:visible}.auth-main{justify-content:flex-start;padding-top:24px}}

@media (max-width:600px){.demo-banner .long{display:none}}

.auth-foot{max-width:400px;width:100%;margin:28px auto 0;font-size:var(--t-13);color:var(--text-3)}
.auth-foot a{color:var(--text-2)}
.auth-box .btn.lg{text-decoration:none}
.auth-box h1:focus{outline:none}
.auth-box .demo-box .row-between{border-top:1px solid var(--border);padding-top:8px}

.plans{display:grid;gap:8px}
.plan-opt{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);cursor:pointer;background:var(--bg)}
.plan-opt input{grid-row:1/3;margin:0;accent-color:var(--accent);width:18px;height:18px}
.plan-opt .pn{font-weight:650}
.plan-opt .pp{font-weight:600;justify-self:end;font-size:var(--t-13)}
.plan-opt .pb{grid-column:2/4;font-size:var(--t-13);color:var(--text-3)}
.plan-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-opt:focus-within{box-shadow:var(--focus)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}