:root{
  --auth-bg:#eef2f7;
  --auth-card:#fff;
  --auth-text:#172033;
  --auth-muted:#667085;
  --auth-border:#dfe5ec;
  --auth-nav:#111827;
  --auth-nav-soft:#1f2937;
  --auth-accent:#2563eb;
  --auth-accent-soft:#eff6ff;
  --auth-danger:#b42318;
  --auth-danger-soft:#fee4e2;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--auth-text)}
body.auth-page{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,48px);
  background:
    radial-gradient(circle at 12% 14%,rgba(37,99,235,.08),transparent 28%),
    radial-gradient(circle at 88% 86%,rgba(15,23,42,.07),transparent 30%),
    var(--auth-bg);
}
button,input{font:inherit}

.auth-shell{
  width:min(980px,100%);
  min-height:570px;
  display:grid;
  grid-template-columns:minmax(340px,.92fr) minmax(410px,1.08fr);
  overflow:hidden;
  background:var(--auth-card);
  border:1px solid var(--auth-border);
  border-radius:22px;
  box-shadow:0 26px 80px rgba(15,23,42,.14);
}

.auth-brand-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:570px;
  padding:48px;
  overflow:hidden;
  background:var(--auth-nav);
  color:#fff;
}
.auth-brand-panel::before{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  right:-180px;
  top:-170px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 118px rgba(255,255,255,.018);
}
.auth-brand-panel>*{position:relative;z-index:1}
.auth-emblem{
  width:86px;
  height:98px;
  display:block;
  object-fit:contain;
}
.auth-brand-copy{max-width:330px}
.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:#93c5fd;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-kicker::before{content:"";width:24px;height:2px;border-radius:99px;background:#60a5fa}
.auth-brand-copy h1{margin:0 0 14px;font-size:clamp(30px,3.3vw,42px);line-height:1.06;letter-spacing:-.035em}
.auth-brand-copy p{margin:0;color:#cbd5e1;font-size:15px;line-height:1.7}
.auth-security{padding-top:18px;border-top:1px solid #374151;color:#9ca3af;font-size:12px;line-height:1.55}

.auth-form-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,6vw,68px);
  background:#fff;
}
.auth-form-panel h2{margin:0 0 7px;font-size:28px;letter-spacing:-.025em}
.auth-subtitle{margin:0 0 30px;color:var(--auth-muted);font-size:14px;line-height:1.55}
.auth-field{display:grid;gap:7px;margin-bottom:17px}
.auth-field label{font-size:13px;font-weight:750;color:#344054}
.auth-field input{
  width:100%;
  min-height:46px;
  border:1px solid var(--auth-border);
  border-radius:11px;
  padding:11px 13px;
  color:var(--auth-text);
  background:#fff;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.auth-field input:hover{border-color:#c8d1dc}
.auth-field input:focus{border-color:#93b4fb;box-shadow:0 0 0 4px var(--auth-accent-soft)}
.auth-submit{
  width:100%;
  min-height:46px;
  margin-top:3px;
  border:1px solid #93b4fb;
  border-radius:11px;
  padding:11px 16px;
  background:#fff;
  color:var(--auth-accent);
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .08s ease;
}
.auth-submit:hover{background:var(--auth-accent-soft);border-color:var(--auth-accent);color:#1d4ed8}
.auth-submit:active{transform:translateY(1px);background:#dbeafe}
.auth-error{margin-bottom:18px;padding:11px 12px;border:1px solid #fecdca;border-radius:10px;background:var(--auth-danger-soft);color:var(--auth-danger);font-size:13px;line-height:1.45}
.auth-hint{margin-top:19px;color:var(--auth-muted);font-size:12px;line-height:1.55}

.auth-shell-single{
  width:min(680px,100%);
  min-height:0;
  display:block;
}
.auth-single-head{
  display:flex;
  align-items:center;
  gap:18px;
  padding:28px 34px;
  background:var(--auth-nav);
  color:#fff;
}
.auth-single-head .auth-emblem{width:58px;height:66px;flex:0 0 auto}
.auth-single-head h1{margin:0 0 5px;font-size:24px;letter-spacing:-.02em}
.auth-single-head p{margin:0;color:#cbd5e1;font-size:13px;line-height:1.5}
.auth-shell-single .auth-form-panel{padding:34px}

@media(max-width:780px){
  body.auth-page{padding:16px;place-items:start center}
  .auth-shell{grid-template-columns:1fr;min-height:0;border-radius:18px}
  .auth-brand-panel{min-height:210px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:18px 24px}
  .auth-emblem{width:64px;height:74px}
  .auth-brand-copy{max-width:none}
  .auth-kicker{margin-bottom:8px;font-size:11px}
  .auth-brand-copy h1{font-size:27px;margin-bottom:8px}
  .auth-brand-copy p{font-size:13px;line-height:1.55}
  .auth-security{grid-column:1/-1;padding-top:14px}
  .auth-form-panel{padding:32px 28px 34px}
  .auth-form-panel h2{font-size:25px}
}

@media(max-width:520px){
  body.auth-page{padding:0;background:#fff}
  .auth-shell{width:100%;min-height:100svh;border:0;border-radius:0;box-shadow:none}
  .auth-brand-panel{min-height:178px;padding:22px;grid-template-columns:56px 1fr;gap:14px 18px}
  .auth-emblem{width:54px;height:62px}
  .auth-brand-copy h1{font-size:22px}
  .auth-brand-copy p{display:none}
  .auth-security{font-size:11px}
  .auth-form-panel{justify-content:flex-start;padding:30px 22px 36px}
  .auth-subtitle{margin-bottom:24px}
  .auth-shell-single{min-height:100svh}
  .auth-single-head{padding:22px}
  .auth-single-head .auth-emblem{width:48px;height:56px}
  .auth-single-head h1{font-size:21px}
  .auth-shell-single .auth-form-panel{padding:28px 22px 36px}
}

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