.auth-layout {
max-width:1000px;
margin:54px auto 20px;
display:grid;
grid-template-columns:.95fr 1fr;
border:1px solid var(--line);
border-radius:26px;
background:var(--surface);
box-shadow:var(--shadow);
overflow:hidden;
animation:page-in .5s var(--ease)}

.auth-story {
position:relative;
display:flex;
flex-direction:column;
padding:52px 42px;
background:linear-gradient(155deg,var(--blue-soft),var(--bg) 75%);
overflow:hidden}

.auth-story .eyebrow {
font-size:10px;
color:var(--blue)}

.auth-story h1 {
font-size:30px;
line-height:1.65;
margin:21px 0 18px}

.auth-story>p {
font-size:13px;
color:var(--muted);
line-height:1.9}

.auth-benefits {
display:grid;
gap:21px;
margin:37px 0 45px}

.auth-benefits>div {
display:flex;
align-items:center;
gap:13px;
font-size:12px;
color:var(--muted)}

.auth-benefits .icon {
width:36px;
height:36px;
padding:9px;
background:var(--surface);
border-radius:12px;
color:var(--blue)}

.story-foot {
margin-top:auto;
display:flex;
align-items:center;
gap:7px;
font-size:11px;
color:var(--muted)}

.story-foot .icon {
width:15px;
height:15px}

.auth-panel {
padding:43px 44px}

.auth-title {
margin-bottom:26px}

.auth-title h2 {
font-size:26px;
margin:10px 0}

.auth-title p {
font-size:12px;
color:var(--muted)}

.auth-title .eyebrow {
font-size:9px}

.auth-tabs {
display:flex;
gap:24px;
margin-bottom:27px;
border-bottom:1px solid var(--line)}

.auth-tabs a {
padding:0 2px 11px;
font-size:13px;
color:var(--muted);
border-bottom:2px solid transparent;
margin-bottom:-1px}

.auth-tabs a.active {
color:var(--blue);
border-color:var(--blue);
font-weight:600}

.auth-panel .field {
margin-bottom:18px}

.captcha-row {
display:flex;
gap:10px}

.captcha-row input {
flex:1;
min-width:0}

.captcha-refresh {
padding:0;
border:1px solid var(--line);
border-radius:12px;
background:var(--subtle);
overflow:hidden;
flex:0 0 132px;
line-height:0}

.captcha-refresh img {
width:132px;
height:46px;
object-fit:fill}

.password-wrap {
position:relative}

.password-wrap input {
padding-right:65px}

.password-toggle {
position:absolute;
right:5px;
top:5px;
height:38px;
padding:0 12px;
background:transparent;
color:var(--muted);
font-size:11px;
border-radius:8px}

.password-toggle:hover {
background:var(--subtle);
color:var(--blue)}

.remember-line {
margin:0 0 15px}

.agreement-line {
margin:18px 0 24px;
font-size:11px;
line-height:1.9}

.auth-switch {
margin-top:23px;
text-align:center;
font-size:12px;
color:var(--muted)}

.auth-switch a {
color:var(--blue);
font-weight:500;
margin-left:4px}


.setup-panel {
padding:37px 42px;
animation:page-in .5s var(--ease)}

.setup-panel>h1 {
font-size:27px;
margin:12px 0}

.setup-panel>p {
font-size:13px}

.setup-steps {
padding:18px 23px 18px 39px;
background:var(--bg);
border:1px solid var(--line);
border-radius:14px;
color:var(--muted);
font-size:12px;
line-height:2;
margin:25px 0}

.setup-steps li+li {
margin-top:7px}

.setup-steps code {
color:var(--blue)}

.environment-check {
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:28px}

.admin-login-panel {
max-width:456px;
margin:28px auto}

.admin-login-panel .brand {
display:flex;
justify-content:center;
font-size:19px}

.admin-login-panel .auth-title {
text-align:center;
margin-top:27px}

.admin-login-panel .auth-title h2 {
font-size:25px}

.admin-login-toolbar {
display:flex;
justify-content:space-between;
align-items:center;
max-width:456px;
margin:0 auto 14px;
font-size:12px;
color:var(--muted)}

.admin-login-toolbar a {
display:flex;
gap:7px;
align-items:center}

.admin-login-toolbar a .icon {
width:16px;
transform:rotate(180deg)}


.legal-copy {
padding:42px 48px;
animation:page-in .5s var(--ease)}

.legal-copy h1 {
font-size:29px;
margin:13px 0}

.legal-copy>p.muted {
font-size:11px;
padding-bottom:24px;
border-bottom:1px solid var(--line)}

.legal-copy h2 {
font-size:17px;
margin:31px 0 12px;
display:flex;
align-items:center;
gap:10px}

.legal-copy h2::before {
content:"";
width:4px;
height:17px;
border-radius:4px;
background:var(--blue);
opacity:.65}

.legal-copy p {
font-size:13px;
line-height:2;
color:var(--muted)}

.legal-copy>.text-link {
margin-top:35px;
padding-top:25px;
border-top:1px solid var(--line);
display:flex}