:root { --primary-color: #262626; --secondary-color: #F9F9F9; --text-color: #838383; --accent-color: #9B9A84; --white-color: #fff; --divider-color: #EEEDED; }
body.apga-auth { margin: 0; font-family: "Sora", sans-serif; background: var(--secondary-color); color: var(--primary-color); }
.auth-wrap { display: flex; min-height: 100vh; }
.auth-side { flex: 1 1 45%; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; }
.auth-side::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,38,38,.25) 0%, rgba(38,38,38,.88) 100%); }
.auth-side-inner { position: relative; padding: 60px; color: #fff; max-width: 560px; }
.auth-side-inner h2 { font-family: "Marcellus", serif; font-size: 40px; line-height: 1.2; margin: 40px 0 24px; }
.auth-side-inner ul { list-style: none; padding: 0; margin: 0; }
.auth-side-inner li { padding: 8px 0; opacity: .92; }
.auth-side-inner li i { color: var(--accent-color); width: 26px; }
.auth-logo-light { height: 38px; }
.auth-main { flex: 1 1 55%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 24px; padding: 40px; box-shadow: 0 20px 60px rgba(38,38,38,.06); }
.auth-logo img { height: 40px; margin-bottom: 28px; }
.auth-card h1 { font-family: "Marcellus", serif; font-size: 30px; margin: 0 0 8px; font-weight: 400; }
.auth-card .muted { color: var(--text-color); font-size: 15px; margin-bottom: 24px; }
.auth-card .form-control { border-radius: 14px; padding: 13px 16px; border: 1px solid var(--divider-color); background: var(--secondary-color); }
.auth-card .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(155,154,132,.15); background: #fff; }
.auth-card .form-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.auth-card a { color: var(--accent-color); }
.btn-auth { width: 100%; border: 0; border-radius: 100px; padding: 14px; background: var(--primary-color); color: #fff; font-weight: 600; transition: background .3s; }
.btn-auth:hover { background: var(--accent-color); color: #fff; }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-color); }
.letter-spaced { letter-spacing: .4em; }
.auth-foot { margin-top: 24px; font-size: 13px; color: var(--text-color); }
.auth-foot a { color: var(--text-color); }
@media (max-width: 991px) { .auth-side { display: none; } .auth-card { padding: 30px 22px; } }