body.auth-body { min-height: 100vh; background: #070b12; overflow-x: hidden; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.02fr) minmax(480px, .98fr); }
.auth-aside { position: relative; overflow: hidden; padding: 38px 44px; display: flex; flex-direction: column; background: #0c141c; border-right: 1px solid rgba(255,255,255,.07); min-height: 100vh; }
.auth-aside::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(145deg, black 0%, rgba(0,0,0,.55) 52%, transparent 90%); pointer-events: none; }
.auth-aside::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; left: 15%; top: 27%; background: radial-gradient(circle, rgba(215,255,114,.16), rgba(110,231,249,.035) 42%, transparent 66%); filter: blur(20px); pointer-events: none; }
.auth-aside .brand { position: relative; z-index: 3; color: var(--text); align-self: flex-start; }
.auth-aside-content { position: relative; z-index: 2; margin: auto 0; padding: 50px 0 35px; max-width: 520px; }
.auth-aside-content .eyebrow { margin-bottom: 25px; }
.auth-aside h1 { font-size: clamp(39px, 4.2vw, 59px); line-height: 1.08; letter-spacing: -.055em; font-weight: 700; }
.auth-aside h1 .gradient { color: transparent; background: linear-gradient(105deg,#edffc0,#d7ff72 48%,#9fe8c2); -webkit-background-clip: text; background-clip: text; }
.auth-aside-content > p { color: #8b9aac; font-size: 13.5px; line-height: 1.85; max-width: 410px; margin-top: 21px; }
.auth-points { display: flex; flex-direction: column; gap: 13px; margin-top: 31px; }
.auth-point { display: flex; align-items: flex-start; gap: 11px; color: #c5d0dc; font-size: 12px; }
.auth-point .ap-icon { width: 26px; height: 26px; border: 1px solid rgba(215,255,114,.15); background: rgba(215,255,114,.06); color: var(--lime); border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; }
.auth-point .ap-icon .icon { width: 13px; height: 13px; }
.auth-point small { display: block; color: #6f7e91; font-size: 10px; margin-top: 3px; line-height: 1.5; }
.auth-quote { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.auth-quote-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#283a29,#1a2a22); border: 1px solid rgba(215,255,114,.15); display: grid; place-items: center; font-size: 16px; }
.auth-quote p { color: #8f9daf; font-size: 10.5px; line-height: 1.6; max-width: 330px; }
.auth-quote strong { color: #d3dde8; font-weight: 500; }
.auth-aside-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #536276; font-size: 9px; letter-spacing: .02em; }
.auth-aside-footer .status { display: inline-flex; align-items: center; gap: 5px; }
.auth-aside-footer .status i { width: 4px; height: 4px; background: var(--green); border-radius: 50%; }
.auth-orbit { position: absolute; width: 340px; height: 340px; border: 1px solid rgba(215,255,114,.09); border-radius: 50%; right: -160px; bottom: 6%; box-shadow: 0 0 0 38px rgba(215,255,114,.025), 0 0 0 84px rgba(215,255,114,.016); pointer-events: none; }
.auth-orbit::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px rgba(215,255,114,.65); left: 25px; top: 70px; }
.auth-orbit::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #6ee7f9; box-shadow: 0 0 14px rgba(110,231,249,.5); right: 48px; bottom: 58px; }

.auth-main { background: #070b12; padding: 36px 42px; display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
.auth-main::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 12%, rgba(255,255,255,.025), transparent 48%); pointer-events: none; }
.auth-panel { width: min(390px, 100%); position: relative; z-index: 2; animation: authIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-mobile-brand { display: none; margin-bottom: 38px; }
.auth-heading .auth-kicker { color: #8b9b6c; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.auth-heading h2 { font-size: 31px; line-height: 1.15; letter-spacing: -.045em; font-weight: 650; }
.auth-heading p { color: #78869a; font-size: 12px; margin-top: 10px; line-height: 1.65; }
.auth-heading p a { color: #cfe992; }
.auth-heading p a:hover { text-decoration: underline; text-underline-offset: 2px; }
.auth-alert { display: none; margin-top: 18px; padding: 10px 12px; border-radius: 9px; font-size: 11.5px; line-height: 1.55; border: 1px solid rgba(251,113,133,.25); background: rgba(251,113,133,.07); color: #fecdd3; align-items: flex-start; gap: 8px; }
.auth-alert.show { display: flex; }
.auth-alert.success { border-color: rgba(134,239,172,.22); background: rgba(134,239,172,.06); color: #bbf7d0; }
.auth-alert .icon { width: 14px; height: 14px; margin-top: 1px; }
.auth-form { margin-top: 27px; display: flex; flex-direction: column; gap: 16px; }
.auth-form .field label { font-size: 12px; }
.auth-form .input { height: 45px; background: rgba(255,255,255,.028); border-color: rgba(255,255,255,.09); font-size: 13px; border-radius: 10px; }
.auth-form .input:focus { border-color: rgba(215,255,114,.5); }
.auth-form .input::placeholder { color: #566579; }
.password-toggle { background: none; border: 0; color: #6d7c90; font-size: 10px; padding: 5px; }
.password-toggle:hover { color: #b8c4d3; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-row .checkbox { font-size: 11px; color: #7d8b9f; }
.auth-forgot { font-size: 10.5px; color: #8a986b; }
.auth-forgot:hover { color: var(--lime); }
.auth-submit { width: 100%; height: 47px; margin-top: 3px; font-size: 13.5px; }
.auth-submit .icon { width: 16px; height: 16px; }
.auth-divider { display: flex; align-items: center; gap: 11px; margin: 21px 0; color: #526176; font-size: 9px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.07); }
.demo-card { border: 1px solid rgba(215,255,114,.14); background: linear-gradient(120deg, rgba(215,255,114,.055), rgba(215,255,114,.015)); border-radius: 11px; padding: 12px 13px; display: flex; align-items: center; gap: 10px; }
.demo-card .dc-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(215,255,114,.1); color: var(--lime); flex: 0 0 auto; }
.demo-card .dc-icon .icon { width: 14px; height: 14px; }
.demo-card .dc-main { flex: 1; min-width: 0; }
.demo-card .dc-title { font-size: 10.5px; color: #dce6ef; font-weight: 600; }
.demo-card .dc-sub { font-size: 9px; color: #718095; margin-top: 2px; font-family: var(--mono); }
.demo-card .dc-fill { border: 1px solid rgba(215,255,114,.2); background: rgba(215,255,114,.08); color: #d3f58e; border-radius: 6px; padding: 5px 7px; font-size: 8.5px; font-weight: 600; flex: 0 0 auto; }
.demo-card .dc-fill:hover { background: rgba(215,255,114,.14); }
.auth-legal { color: #566579; font-size: 9.5px; line-height: 1.7; margin-top: 20px; text-align: center; }
.auth-legal a { color: #8d9d6e; text-decoration: underline; text-underline-offset: 2px; }
.auth-bottom { margin-top: 31px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.065); display: flex; justify-content: space-between; gap: 15px; color: #536174; font-size: 9px; }
.auth-bottom a { color: #7c8b9f; }
.auth-bottom a:hover { color: #c6d0dc; }
.password-strength { display: flex; gap: 4px; margin-top: 2px; }
.password-strength span { height: 3px; border-radius: 3px; flex: 1; background: rgba(255,255,255,.07); transition: background .2s; }
.password-strength[data-score="1"] span:nth-child(1) { background: #fb7185; }
.password-strength[data-score="2"] span:nth-child(-n+2) { background: #fbbf24; }
.password-strength[data-score="3"] span:nth-child(-n+3) { background: #d7ff72; }
.password-strength[data-score="4"] span { background: #86efac; }
.auth-check-row { margin-top: 1px; }

@media (max-width: 1040px) {
  .auth-shell { grid-template-columns: minmax(360px, .9fr) 1.1fr; }
  .auth-aside { padding: 32px 32px; }
  .auth-aside h1 { font-size: 43px; }
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { min-height: 100vh; padding: 30px 24px; }
  .auth-mobile-brand { display: block; }
  .auth-panel { width: min(410px, 100%); }
  .auth-heading h2 { font-size: 28px; }
}

@media (max-width: 480px) {
  .auth-main { padding: 24px 18px; }
  .auth-mobile-brand { margin-bottom: 28px; }
  .auth-heading h2 { font-size: 26px; }
  .auth-form { gap: 14px; margin-top: 23px; }
  .auth-bottom { flex-direction: column; gap: 8px; }
}