body.auth-page{
margin:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:32px 16px;
background:
radial-gradient(circle at top right, rgba(212,175,55,0.16), transparent 26%),
linear-gradient(135deg,#f8f2e7,#efe0df);
font-family:'Manrope',sans-serif;
}

.login-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(18,14,11,0.45);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
backdrop-filter:blur(10px);
padding:20px;
box-sizing:border-box;
}

.login-container{
width:min(1040px,100%);
display:flex;
border-radius:28px;
overflow:hidden;
box-shadow:0 40px 90px rgba(0,0,0,0.22);
animation:popup .35s ease;
position:relative;
min-height:min(760px, calc(100vh - 64px));
}

.auth-page-shell{
max-width:1040px;
}

.premium-auth-shell{
background:#fff;
border:1px solid rgba(255,255,255,0.35);
}

.login-left{
flex:1.15;
padding:52px;
text-align:left;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
}

.premium-auth-left{
background:
radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 28%),
linear-gradient(135deg,#7f4a5d,#b7777f);
}

.login-left .brand{
font-family:'Cormorant Garamond',serif;
font-size:46px;
margin:8px 0 10px;
font-weight:700;
letter-spacing:.4px;
}

.subtitle{
font-size:15px;
line-height:1.7;
margin-bottom:38px;
opacity:.95;
max-width:420px;
}

.badges{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.badge{
min-height:150px;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.16);
border-radius:22px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
padding:18px;
box-shadow:0 16px 30px rgba(0,0,0,0.14);
transition:.3s;
backdrop-filter:blur(8px);
}

.star{
width:42px;
height:42px;
background:#fff8ec;
color:#77501a;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
font-size:13px;
font-weight:700;
box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.badge h4{
font-family:'Cormorant Garamond',serif;
font-size:24px;
margin:0 0 6px;
}

.badge p{
font-size:13px;
line-height:1.6;
margin:0;
opacity:.92;
}

.badge:hover{
transform:translateY(-4px);
}

.login-right{
flex:0.92;
background:#fbfaf7;
padding:44px 36px;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}

.premium-auth-right{
background:
radial-gradient(circle at top right, rgba(212,175,55,0.08), transparent 22%),
linear-gradient(180deg,#fffdf9,#f8f5ef);
}

.login-right h2{
font-family:'Cormorant Garamond',serif;
font-size:38px;
font-weight:700;
margin:0 0 8px;
color:#241b12;
}

.auth-copy{
font-size:14px;
line-height:1.7;
color:#6e6250;
margin:0 0 18px;
}

.auth-trust-note{
padding:14px 16px;
border-radius:16px;
background:#f7f2e9;
border:1px solid #e4d7c2;
color:#5f4f3f;
font-size:13px;
line-height:1.7;
margin:0 0 18px;
}

.auth-trust-note strong{
display:block;
font-size:13px;
letter-spacing:.02em;
color:#2b2119;
margin-bottom:4px;
}

.auth-trust-note p{
margin:0;
}

.auth-trust-note a,
.auth-footer-links a{
color:#7d5a1c;
font-weight:700;
text-decoration:none;
}

.auth-label{
font-size:12px;
letter-spacing:1.2px;
text-transform:uppercase;
color:#967537;
margin:14px 0 8px;
font-weight:700;
}

.password-field{
position:relative;
display:flex;
align-items:center;
}

.password-field input{
padding-right:54px;
}

.password-toggle{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
border:none;
background:transparent;
color:#8e7442;
cursor:pointer;
padding:0;
width:30px;
height:30px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:none;
min-width:0;
margin:0;
z-index:2;
}

.password-toggle:hover,
.password-toggle:focus-visible{
color:#6d5423;
background:rgba(212,175,55,0.08);
outline:none;
}

.password-toggle-icon{
display:inline-flex;
width:18px;
height:18px;
}

.password-toggle-icon svg{
width:18px;
height:18px;
}

.password-toggle-slash{
opacity:0;
transition:opacity .18s ease;
}

.password-toggle[aria-pressed="true"] .password-toggle-slash{
opacity:1;
}

.login-right input{
padding:15px 16px;
border:1px solid #ddd4c5;
border-radius:14px;
font-size:14px;
margin-bottom:2px;
background:#fff;
outline:none;
transition:.25s;
font-family:'Manrope',sans-serif;
width:100%;
display:block;
box-sizing:border-box;
max-width:100%;
min-width:0;
-webkit-appearance:none;
appearance:none;
background-clip:padding-box;
}

.login-right input:focus{
border-color:#c8a64c;
box-shadow:0 0 0 4px rgba(212,175,55,0.12);
}

.login-right button:not(.password-toggle){
background:linear-gradient(135deg,#111,#2e2419);
color:white;
padding:14px 16px;
border:none;
border-radius:14px;
font-size:14px;
font-weight:700;
cursor:pointer;
margin-top:16px;
font-family:'Manrope',sans-serif;
width:100%;
display:block;
box-sizing:border-box;
max-width:100%;
min-width:0;
-webkit-appearance:none;
appearance:none;
}

.login-right form{
width:100%;
max-width:100%;
min-width:0;
}

.login-right button:not(.password-toggle):hover{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(0,0,0,0.18);
}

.forgot,
.register-link{
font-size:13px;
margin-top:14px;
color:#6b5d47;
}

.register-link span,
.forgot{
cursor:pointer;
}

.register-link span{
font-weight:700;
color:#7d5a1c;
}

.auth-footer-links{
display:flex;
flex-wrap:wrap;
gap:12px;
font-size:12px;
margin-top:18px;
padding-top:14px;
border-top:1px solid #e6ddcf;
}

.close-login{
position:absolute;
top:18px;
right:20px;
font-size:18px;
cursor:pointer;
color:white;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:rgba(255,255,255,0.15);
}

.auth-status{
min-height:18px;
font-size:13px;
margin-top:12px;
}

.auth-status.error{
color:#b42318;
}

.auth-status.success{
color:#1d7a43;
}

@keyframes popup{
from{
transform:scale(.9);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}
}

@media(max-width:900px){
body.auth-page{
padding:24px 14px;
align-items:flex-start;
}

.login-container{
flex-direction:column;
min-height:auto;
width:min(100%, 720px);
}

.badges{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.login-left,
.login-right{
padding:32px 24px;
}

.login-left{
gap:18px;
}

.subtitle{
max-width:none;
margin-bottom:0;
}
}

@media(max-width:768px){
body.auth-page{
padding:18px 12px 24px;
}

.login-container{
width:min(100%, 560px);
border-radius:24px;
box-shadow:0 24px 56px rgba(53,35,24,0.14);
}

.login-left{
display:none;
}

.login-right{
width:100%;
padding:28px 22px 24px;
border-radius:24px;
}

.login-right h2{
font-size:30px;
line-height:1.08;
text-align:center;
}

.auth-copy{
text-align:center;
margin:0 auto 18px;
max-width:320px;
}

.auth-trust-note{
padding:16px;
margin:0 0 20px;
}

.login-right form{
display:grid;
gap:10px;
}

.auth-footer-links,
.register-link,
.forgot,
.auth-status{
text-align:center;
justify-content:center;
}
}

@media(max-width:520px){
body.auth-page{
padding:18px 14px;
align-items:flex-start;
background:
radial-gradient(circle at top right, rgba(212,175,55,0.12), transparent 26%),
linear-gradient(180deg,#f6efe4,#efe4de 68%,#e8ddd8);
}

.login-container{
width:min(100%, 430px);
margin:0 auto;
border-radius:26px;
min-height:auto;
border:1px solid rgba(197,166,108,0.2);
box-shadow:0 22px 56px rgba(53,35,24,0.14);
}

.login-right{
padding:28px 20px 24px;
}

.login-left{
display:none;
}

.login-right{
width:100%;
border-radius:26px;
box-shadow:none;
overflow:hidden;
box-sizing:border-box;
}

.subtitle{
font-size:14px;
margin-bottom:24px;
}

.login-right h2{
font-size:27px;
text-align:center;
line-height:1.06;
letter-spacing:.2px;
margin-bottom:10px;
}

.auth-copy{
max-width:280px;
margin:0 auto 20px;
font-size:14px;
line-height:1.55;
}

.auth-trust-note{
padding:18px 18px;
border-radius:20px;
margin:0 0 22px;
font-size:13px;
line-height:1.75;
}

.auth-trust-note strong{
font-size:14px;
margin-bottom:8px;
}

.login-right form{
display:grid;
gap:10px;
width:100%;
max-width:100%;
min-width:0;
}

.auth-label{
margin:2px 0 2px;
font-size:11px;
letter-spacing:1.4px;
}

.login-right input{
min-height:58px;
padding:0 18px;
border-radius:18px;
font-size:16px;
margin:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.65);
width:100%;
max-width:100%;
min-width:0;
}

.login-right button:not(.password-toggle){
min-height:60px;
padding:0 18px;
border-radius:18px;
margin-top:8px;
font-size:15px;
letter-spacing:.2px;
box-shadow:0 18px 34px rgba(34,24,19,0.18);
width:100%;
max-width:100%;
min-width:0;
}

.auth-copy,
.auth-status,
.forgot,
.register-link,
.auth-footer-links{
text-align:center;
justify-content:center;
}

.auth-status{
min-height:20px;
margin-top:0;
}

.forgot{
margin-top:12px;
font-size:14px;
}

.register-link{
margin-top:2px;
font-size:14px;
}

.auth-footer-links{
gap:14px;
row-gap:10px;
margin-top:14px;
padding-top:18px;
font-size:12px;
}
}