/* Client login follows the platform-admin visual language while retaining client-facing actions. */
:root { --auth-ink:#18233d; --auth-muted:#8490a7; --auth-accent:#0f9f78; --auth-accent-dark:#08745a; --auth-line:#e6e9f1; }
body { min-height:100vh; color:var(--auth-ink); background:#f7f8fc; font-family:Manrope,"Public Sans",Arial,sans-serif; }
.client-login-shell { display:grid; min-height:100vh; grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr); }
.client-brand-panel { position:relative; display:flex; overflow:hidden; min-height:100%; flex-direction:column; justify-content:space-between; padding:52px clamp(42px,7vw,116px); color:#fff; background:linear-gradient(145deg,#101a31 0%,#173a42 52%,#096b53 150%); isolation:isolate; }
.client-brand-panel::before,.client-brand-panel::after { position:absolute; z-index:-1; border-radius:999px; content:""; filter:blur(3px); }
.client-brand-panel::before { top:-150px; left:-160px; width:470px; height:470px; background:rgba(15,159,120,.34); }.client-brand-panel::after { right:-100px; bottom:-180px; width:360px; height:360px; background:rgba(38,187,221,.22); }
.client-brand,.client-mobile-brand { display:flex; align-items:center; color:inherit; text-decoration:none; }.client-brand { width:max-content; }.client-brand .brand-logo__word { color:#fff; }
.client-brand-copy { max-width:540px; margin:auto 0; padding:60px 0; }.client-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; color:#a7e8d4; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.client-eyebrow::before { width:25px; height:1px; background:#62d6b2; content:""; }
.client-brand-copy h1 { max-width:510px; margin:0; color:#fff; font-size:clamp(42px,5vw,68px); font-weight:800; line-height:1.07; letter-spacing:-.055em; }.client-brand-copy p { max-width:450px; margin:25px 0 0; color:#c6cee3; font-size:16px; line-height:1.75; }.client-trust { display:flex; gap:12px; align-items:center; color:#aeb9d2; font-size:13px; }.client-trust i { color:#82ddc0; font-size:18px; }
.client-form-panel { display:grid; place-items:center; padding:36px; background:#f7f8fc; }.client-form-wrap { width:min(100%,425px); }.client-mobile-brand { display:none; }.client-form-header { margin-bottom:32px; }.client-form-header h2 { margin:0 0 9px; color:var(--auth-ink); font-size:28px; font-weight:800; letter-spacing:-.045em; }.client-form-header p { margin:0; color:var(--auth-muted); font-size:14px; line-height:1.6; }
.client-alert { margin:0 0 20px; border-radius:11px; font-size:13px; }.client-field { margin-bottom:20px; }.client-field .form-label { display:block; margin:0 0 8px; color:#35415a; font-size:13px; font-weight:700; }.client-input-wrap { position:relative; display:flex; align-items:center; }.client-input-wrap>i { position:absolute; z-index:2; left:15px; color:#99a3b6; font-size:19px; pointer-events:none; }.client-input-wrap .form-control { width:100%; height:52px; padding:0 47px; border:1px solid var(--auth-line); border-radius:12px!important; color:var(--auth-ink); background:#fff; font:500 15px Manrope,Arial,sans-serif; transition:border-color .18s,box-shadow .18s; }.client-input-wrap.client-input-wrap--password>.form-control { box-sizing:border-box; flex:0 0 100%; max-width:100%; padding:0 47px!important; border:1px solid var(--auth-line)!important; border-radius:12px!important; }.client-input-wrap .form-control:focus { border-color:#21ad85; box-shadow:0 0 0 4px rgba(15,159,120,.13); }.client-input-wrap .form-control::placeholder { color:#b5bdca; }.client-input-wrap .input-group-text { position:absolute; z-index:3; right:8px; border:0; color:#8490a7; background:transparent; }.client-input-wrap .input-group-text:hover { color:var(--auth-accent); }
.client-options { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 26px; }.client-options .form-check-label { color:#526078; font-size:13px; }.client-options .form-check-input { border-color:#aab2c1; }.client-options .form-check-input:checked { border-color:var(--auth-accent); background-color:var(--auth-accent); }.client-forgot,.client-register a { color:#087f61; font-size:13px; font-weight:700; text-decoration:none; }.client-forgot:hover,.client-register a:hover { color:#055b45; text-decoration:underline; }.client-submit { display:flex; width:100%; min-height:54px; align-items:center; justify-content:center; gap:10px; border:0; border-radius:12px; background:linear-gradient(110deg,#0f9f78,#08745a); box-shadow:0 12px 22px rgba(8,116,90,.27); font-size:14px; font-weight:700; transition:transform .18s,box-shadow .18s; }.client-submit:hover { background:linear-gradient(110deg,#0f9f78,#08745a); box-shadow:0 16px 28px rgba(8,116,90,.35); transform:translateY(-1px); }.client-submit:focus-visible { outline:3px solid rgba(15,159,120,.35); outline-offset:3px; }.client-register { margin:26px 0 0; color:#6d7890; font-size:13px; text-align:center; }
.client-password-toggle { position:absolute; z-index:4; top:50%; right:8px; display:grid; width:36px; height:36px; place-items:center; padding:0; border:0; border-radius:8px; color:#8490a7; background:transparent; transform:translateY(-50%); }.client-password-toggle:hover,.client-password-toggle:focus-visible { color:var(--auth-accent); background:#e9f8f2; outline:0; }.client-input-wrap--password>.form-control { position:relative; z-index:1; padding-left:47px!important; padding-right:47px!important; }

/* Choice on onboarding needs the same deliberately designed surface as the login form. */
.onboarding-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.onboarding-choice-card { display:flex; min-height:330px; flex-direction:column; padding:26px; border:1px solid #e1e7ef; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(23,42,64,.06); }.onboarding-choice-card h3 { margin:16px 0 8px; color:var(--auth-ink); font-size:20px; font-weight:800; letter-spacing:-.035em; }.onboarding-choice-card>p { min-height:48px; margin:0 0 20px; color:#718099; font-size:14px; line-height:1.55; }.onboarding-choice-card form { display:flex; flex:1; flex-direction:column; }.onboarding-choice-card .form-label { margin:0 0 8px; color:#35415a; font-size:13px; font-weight:700; }.onboarding-choice-card .form-control { min-height:50px; border:1px solid var(--auth-line); border-radius:11px; color:var(--auth-ink); font:500 14px Manrope,Arial,sans-serif; }.onboarding-choice-card .form-control:focus { border-color:#21ad85; box-shadow:0 0 0 4px rgba(15,159,120,.13); }.onboarding-choice-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:13px; color:#087f61; background:#e5f8f0; font-size:19px; }.onboarding-choice-icon--team { color:#2867c7; background:#eaf1ff; }.onboarding-choice-submit,.onboarding-choice-secondary { display:flex; width:100%; min-height:49px; align-items:center; justify-content:center; gap:9px; margin-top:auto; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; }.onboarding-choice-secondary { border:1px solid #88aee6; color:#1768d6; background:#fff; }.onboarding-choice-secondary:hover { border-color:#1768d6; color:#1258b5; background:#f3f7ff; }

/* Shared client-auth surfaces: registration and password recovery use the same language as login. */
.auth-shell { display:grid; min-height:100vh; grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr); }.auth-brand-panel { position:relative; display:flex; overflow:hidden; flex-direction:column; justify-content:space-between; padding:52px clamp(42px,6vw,104px); color:#fff; background:linear-gradient(145deg,#101a31 0%,#173a42 52%,#096b53 150%); isolation:isolate; }.auth-brand-panel::before,.auth-brand-panel::after { position:absolute; z-index:-1; border-radius:999px; content:""; filter:blur(3px); }.auth-brand-panel::before { top:-150px; left:-160px; width:440px; height:440px; background:rgba(15,159,120,.34); }.auth-brand-panel::after { right:-120px; bottom:-190px; width:360px; height:360px; background:rgba(38,187,221,.22); }.auth-brand-panel .brand-logo__word { color:#fff; }.auth-brand-copy { max-width:460px; margin:auto 0; padding:60px 0; }.auth-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; color:#a7e8d4; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.auth-eyebrow::before { width:25px; height:1px; background:#62d6b2; content:""; }.auth-brand-copy h1 { margin:0; color:#fff; font-size:clamp(38px,4.1vw,60px); font-weight:800; line-height:1.08; letter-spacing:-.055em; }.auth-brand-copy p { margin:24px 0 0; color:#c6cee3; font-size:15px; line-height:1.75; }.auth-trust { display:flex; gap:11px; align-items:center; color:#aeb9d2; font-size:13px; }.auth-trust i { color:#82ddc0; font-size:18px; }.auth-form-panel { display:grid; place-items:center; padding:48px; background:#f7f8fc; }.auth-form-wrap { width:min(100%,460px); }.auth-form-wrap--wide { width:min(100%,700px); }.auth-mobile-brand { display:none; }.auth-form-header { margin-bottom:30px; }.auth-form-header h2 { margin:0 0 9px; color:var(--auth-ink); font-size:28px; font-weight:800; letter-spacing:-.045em; }.auth-form-header p { margin:0; color:var(--auth-muted); font-size:14px; line-height:1.6; }.auth-progress { display:flex; gap:12px; margin-bottom:32px; }.auth-progress-step { display:flex; flex:1; gap:10px; align-items:center; color:#8d99ad; font-size:12px; font-weight:700; }.auth-progress-step::before { display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border-radius:9px; color:#718099; background:#e8ebf2; content:attr(data-step); }.auth-progress-step.is-active { color:#265249; }.auth-progress-step.is-active::before { color:#fff; background:#0f9f78; box-shadow:0 6px 13px rgba(15,159,120,.25); }.auth-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }.auth-field { min-width:0; }.auth-field--full { grid-column:1 / -1; }.auth-field .form-label { display:block; margin:0 0 8px; color:#35415a; font-size:13px; font-weight:700; }.auth-field .form-control { min-height:52px; border:1px solid var(--auth-line); border-radius:12px; color:var(--auth-ink); background:#fff; font:500 15px Manrope,Arial,sans-serif; }.auth-field .form-control:focus { border-color:#21ad85; box-shadow:0 0 0 4px rgba(15,159,120,.13); }.auth-field .form-control::placeholder { color:#b5bdca; }.auth-password-wrap { position:relative; }.auth-password-wrap .form-control { width:100%; padding-right:48px!important; }.auth-password-toggle { position:absolute; z-index:2; top:50%; right:8px; display:grid; width:36px; height:36px; place-items:center; padding:0; border:0; border-radius:8px; color:#8490a7; background:transparent; transform:translateY(-50%); }.auth-password-toggle:hover,.auth-password-toggle:focus-visible { color:var(--auth-accent); background:#e9f8f2; outline:0; }.auth-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; }.auth-button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; gap:9px; padding:0 22px; border:0; border-radius:12px; color:#fff!important; background:linear-gradient(110deg,#0f9f78,#08745a)!important; box-shadow:0 12px 22px rgba(8,116,90,.24); font-size:14px; font-weight:700; text-decoration:none; }.auth-button:hover { box-shadow:0 16px 28px rgba(8,116,90,.33); transform:translateY(-1px); }.auth-button--full { display:flex; width:100%; }.auth-back { display:inline-flex; align-items:center; gap:6px; color:#087f61; font-size:13px; font-weight:700; text-decoration:none; }.auth-back:hover { color:#055b45; text-decoration:underline; }.auth-footer { margin:26px 0 0; color:#6d7890; font-size:13px; text-align:center; }.auth-footer a { color:#087f61; font-weight:700; text-decoration:none; }.auth-footer a:hover { text-decoration:underline; }.auth-alert { margin-bottom:20px; border-radius:11px; }.auth-status-icon { display:grid; width:54px; height:54px; place-items:center; margin-bottom:20px; border-radius:17px; color:#087f61; background:#e2f6ee; font-size:26px; }
@media (max-width:850px) { .auth-shell { display:block; }.auth-brand-panel { display:none; }.auth-form-panel { min-height:100vh; padding:28px 22px; background:linear-gradient(160deg,#f9fdfb,#e7f7f0); }.auth-form-wrap { padding:30px 25px; border:1px solid rgba(229,231,241,.9); border-radius:22px; background:rgba(255,255,255,.9); box-shadow:0 20px 55px rgba(34,35,72,.1); }.auth-mobile-brand { display:flex; margin-bottom:32px; }.auth-mobile-brand .brand-logo__word { color:var(--auth-ink); } }.auth-mobile-brand { text-decoration:none; } @media (max-width:575px) { .auth-form-panel { padding:18px; }.auth-form-wrap { padding:25px 20px; border-radius:18px; }.auth-fields { grid-template-columns:1fr; gap:18px; }.auth-field--full { grid-column:auto; }.auth-progress { gap:8px; }.auth-progress-step { font-size:11px; }.auth-actions { align-items:stretch; flex-direction:column-reverse; }.auth-button { width:100%; }.auth-form-header h2 { font-size:25px; } }
@media (max-width:850px) { .client-login-shell { display:block; }.client-brand-panel { display:none; }.client-form-panel { min-height:100vh; padding:28px 22px; background:linear-gradient(160deg,#f9fdfb,#e7f7f0); }.client-form-wrap { padding:30px 25px; border:1px solid rgba(229,231,241,.9); border-radius:22px; background:rgba(255,255,255,.86); box-shadow:0 20px 55px rgba(34,35,72,.1); }.client-mobile-brand { display:flex; margin-bottom:32px; }.client-mobile-brand .brand-logo__word { color:var(--auth-ink); } }
@media (max-width:430px) { .client-form-panel { padding:18px; }.client-form-wrap { padding:25px 20px; border-radius:18px; }.client-form-header h2 { font-size:25px; }.client-options { align-items:flex-start; flex-direction:column; gap:12px; } }
@media (max-width:575px) { .onboarding-choice-grid { grid-template-columns:1fr; }.onboarding-choice-card { min-height:0; padding:22px; }.onboarding-choice-card>p { min-height:0; } }

/* Keep the recovery action visually separated from its single email field. */
.auth-form-wrap form>.auth-field+.auth-button { margin-top:20px; }
.auth-form-wrap--join { width:min(100%,520px); }
.auth-form-wrap--join .auth-fields { grid-template-columns:1fr; gap:18px; }
.auth-form-wrap--join .auth-button { margin-top:24px; }
.client-register--secondary { margin-top:10px; }

/* Registration photo: preserve the native control for the form while presenting a clear picker. */
.auth-field--photo { grid-column:1 / -1; }
.auth-photo-picker { display:flex; align-items:center; gap:15px; min-height:96px; padding:14px; border:1px solid var(--auth-line); border-radius:14px; background:#fff; transition:border-color .18s,box-shadow .18s; }
.auth-photo-picker:focus-within { border-color:#21ad85; box-shadow:0 0 0 4px rgba(15,159,120,.13); }
.auth-photo-picker__preview { display:grid; width:64px; height:64px; flex:0 0 64px; place-items:center; overflow:hidden; border-radius:50%; color:#4aa889; background:#e2f6ee; font-size:24px; }
.auth-photo-picker__preview img { width:100%; height:100%; object-fit:cover; }
.auth-photo-picker__content { display:flex; min-width:0; flex:1; flex-direction:column; align-items:flex-start; gap:4px; }
.auth-photo-picker__input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.auth-photo-picker__button { display:inline-flex; min-height:36px; align-items:center; gap:7px; padding:0 12px; border:1px solid #9ad8c5; border-radius:9px; color:#087f61; background:#f4fcf8; font-size:13px; font-weight:700; cursor:pointer; transition:background .18s,border-color .18s; }
.auth-photo-picker__button:hover { border-color:#21ad85; background:#e5f8f0; }
.auth-photo-picker__content p,.auth-photo-picker__filename { max-width:100%; margin:0; overflow:hidden; color:#8490a7; font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.auth-photo-picker__filename { color:#526078; font-weight:600; }

/* Both onboarding actions keep their field and action visually distinct. */
.onboarding-choice-card form { gap:14px; }
.onboarding-choice-form-fields { display:grid; gap:8px; }
.onboarding-choice-card .form-control { display:block; width:100%; padding:0 14px; }
.onboarding-choice-submit,.onboarding-choice-secondary { flex:0 0 auto; }

@media (max-width:575px) { .auth-field--photo { grid-column:auto; }.auth-photo-picker { align-items:flex-start; }.auth-photo-picker__content p,.auth-photo-picker__filename { max-width:210px; } }