/* Auth pages (login / register / password reset) - same look as the panel */
:root {
  --xm-bg: #f3f5f9; --xm-surface: #fff; --xm-border: #e6eaf0; --xm-text: #1e293b; --xm-muted: #5b6678; --xm-faint: #8b95a7;
  --xm-primary: #3a7bd5; --xm-primary-2: #5b9be6; --xm-primary-soft: #eaf1fd; --xm-success: #1fa971; --xm-danger: #e5484d;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--xm-bg); color: var(--xm-text); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 991px) { .auth-shell { grid-template-columns: 1fr; } }

/* left: brand panel */
.auth-brand { background: linear-gradient(160deg, #2f67b5 0%, #3a7bd5 55%, #5b9be6 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(255,255,255,.07); right: -200px; top: -200px; }
.auth-brand::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.06); left: -140px; bottom: -160px; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.05rem; color: #fff; text-decoration: none; }
.auth-logo .mark { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.auth-pitch h1 { font-size: 2.1rem; line-height: 1.15; font-weight: 800; margin: 0 0 .75rem; letter-spacing: -.02em; text-wrap: balance; }
.auth-pitch p { font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 1.75rem; max-width: 46ch; }
.auth-steps { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.auth-steps li { display: flex; align-items: center; gap: .9rem; font-weight: 600; font-size: .92rem; }
.auth-steps .ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.auth-steps small { display: block; font-weight: 500; color: rgba(255,255,255,.75); font-size: .78rem; }
.auth-foot { font-size: .78rem; color: rgba(255,255,255,.7); }
.auth-foot a { color: #fff; text-decoration: none; font-weight: 600; }
@media (max-width: 991px) { .auth-brand { padding: 1.75rem 1.25rem; } .auth-pitch h1 { font-size: 1.5rem; } .auth-pitch p { display: none; } .auth-steps { display: none; } .auth-foot { display: none; } }

/* right: form */
.auth-side { display: flex; align-items: center; justify-content: center; padding: 2.5rem max(16px, env(safe-area-inset-right, 0px)) 2.5rem max(16px, env(safe-area-inset-left, 0px)); }
.auth-card { width: 100%; max-width: 440px; background: var(--xm-surface); border: 1px solid var(--xm-border); border-radius: 18px; box-shadow: 0 10px 30px rgba(16,24,40,.06); padding: 2.25rem; }
@media (max-width: 575px) { .auth-card { padding: 1.5rem 1.25rem; } }
.auth-card h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 .35rem; letter-spacing: -.01em; }
.auth-card .subtitle { color: var(--xm-muted); font-size: .9rem; margin: 0 0 1.5rem; }
.form-panel { display: none; }
.form-panel.active { display: block; animation: xmfade .25s ease-out; }
@keyframes xmfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-panel.active { animation: none; } }

.alert { display: none; padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1.1rem; font-size: .85rem; font-weight: 500; border: 1px solid transparent; }
.alert.show, .alert.static { display: block; }
.alert-danger { background: #fff1f0; color: #b42318; border-color: #f7c4c3; }
.alert-success { background: #e6f6ee; color: #14784f; border-color: #b8e6cf; }
.alert-warning { background: #fff4e5; color: #b45309; border-color: #fbd9a6; }

.form-group { margin-bottom: 1rem; }
.form-group label.lbl { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .4rem; color: var(--xm-text); }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--xm-faint); font-size: 1.2rem; pointer-events: none; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] {
  width: 100%; height: 46px; padding: 0 2.8rem 0 2.8rem; border: 1px solid #cfd6e2; border-radius: 10px; font: inherit; font-size: .92rem; color: var(--xm-text); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.auth-card input::placeholder { color: #9aa5b5; }
.auth-card input:focus { outline: 0; border-color: var(--xm-primary); box-shadow: 0 0 0 3px rgba(58,123,213,.18); }
.auth-card input:focus ~ .input-icon { color: var(--xm-primary); }
.password-toggle { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--xm-faint); font-size: 1.2rem; cursor: pointer; }
.password-toggle:hover { color: var(--xm-primary); }
.form-options { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: .25rem 0 1.25rem; font-size: .85rem; flex-wrap: wrap; }
.checkbox-wrapper { display: flex; align-items: center; gap: .5rem; color: var(--xm-muted); }
.checkbox-wrapper input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--xm-primary); cursor: pointer; margin: 0; }
.checkbox-wrapper label { cursor: pointer; }
.link { color: var(--xm-primary); font-weight: 600; text-decoration: none; cursor: pointer; }
.link:hover { color: #2f67b5; text-decoration: underline; }

.btn { width: 100%; height: 46px; border: 0; border-radius: 10px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background .15s, transform .1s; }
.btn-primary { background: var(--xm-primary); color: #fff; box-shadow: 0 3px 10px rgba(58,123,213,.3); }
.btn-primary:hover { background: #2f67b5; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-success { background: var(--xm-success); color: #fff; box-shadow: 0 3px 10px rgba(31,169,113,.3); }
.btn-success:hover { background: #178c5d; }
.spinner { display: none; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: xmspin .8s linear infinite; }
@keyframes xmspin { to { transform: rotate(360deg); } }
.btn.loading .btn-text { visibility: hidden; }
.btn.loading .spinner { display: block; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; }
.switch-form { text-align: center; margin-top: 1.4rem; font-size: .88rem; color: var(--xm-muted); }

.password-strength { margin-top: .5rem; height: 4px; background: #eef1f5; border-radius: 2px; overflow: hidden; }
.password-strength-bar { height: 100%; width: 0; transition: width .3s, background-color .3s; }
.password-strength-bar.weak { width: 33%; background: var(--xm-danger); }
.password-strength-bar.medium { width: 66%; background: #f59e0b; }
.password-strength-bar.strong { width: 100%; background: var(--xm-success); }
.password-hint { font-size: .74rem; color: var(--xm-muted); margin: .3rem 0 0; }
.trial-note { display: flex; align-items: center; gap: .6rem; background: #e6f6ee; border: 1px solid #b8e6cf; color: #14784f; border-radius: 10px; padding: .65rem .9rem; font-size: .8rem; font-weight: 600; margin-bottom: 1.1rem; }
.trial-note i { font-size: 1.1rem; }
.auth-mobile-logo { display: none; }
@media (max-width: 991px) { .auth-mobile-logo { display: none; } }