:root { --auth-navy:#0b2347; --auth-blue:#2367d8; --auth-ink:#17243a; --auth-muted:#69778d; --auth-line:#dce3ed; }
.auth-page,.auth-page * { box-sizing:border-box; }
.auth-page { background:radial-gradient(circle at 8% 20%,rgba(62,127,222,.14),transparent 30%),#f3f6fb; min-height:100vh; padding:9rem 1.25rem 5rem; }
.auth-shell { background:#fff; border:1px solid rgba(180,193,212,.6); border-radius:1.75rem; box-shadow:0 30px 75px rgba(15,35,68,.14); display:grid; grid-template-columns:minmax(330px,.88fr) minmax(480px,1.12fr); margin:auto; max-width:1120px; min-height:700px; overflow:hidden; position:relative; width:100%; }
.auth-mode-control { position:absolute; opacity:0; pointer-events:none; }
.auth-story { background:radial-gradient(circle at 18% 12%,rgba(72,139,236,.42),transparent 30%),linear-gradient(145deg,#091d3e,#123b73); color:#fff; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(2.5rem,5vw,4.5rem); position:relative; }
.auth-story::after { border:1px solid rgba(255,255,255,.1); border-radius:50%; content:""; height:370px; position:absolute; right:-200px; top:48%; width:370px; }
.auth-brand { align-items:center; color:#fff; display:flex; gap:.8rem; margin-bottom:4.5rem; text-decoration:none; }
.auth-brand>span { background:#fff; border-radius:.85rem; height:48px; overflow:hidden; padding:4px; width:48px; }
.auth-brand img { height:100%; object-fit:contain; width:100%; }
.auth-brand strong,.auth-brand small { display:block; }
.auth-brand strong { font-family:"Manrope",sans-serif; font-size:.95rem; }
.auth-brand small { color:#a9bedc; font-size:.67rem; font-weight:500; margin-top:.1rem; }
.auth-eyebrow,.auth-heading>span { color:#75a9f7; font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.auth-story h1 { font-family:"Manrope",sans-serif; font-size:clamp(2.5rem,4vw,4.25rem); letter-spacing:-.06em; line-height:1.02; margin:.8rem 0 1.35rem; max-width:500px; }
.auth-story p { color:#bdcbe0; line-height:1.75; max-width:470px; }
.auth-benefits { display:grid; gap:.8rem; margin:3rem 0; }
.auth-benefits span { align-items:center; color:#d9e4f3; display:flex; font-size:.82rem; gap:.7rem; }
.auth-benefits i { color:#74aaf8; font-size:1rem; }
.auth-support { color:#8398b6; font-size:.66rem; }
.auth-forms { align-self:center; margin:auto; max-width:610px; padding:clamp(2rem,5vw,4rem); width:100%; }
.auth-mobile-brand { align-items:center; display:none; gap:.65rem; margin-bottom:1.5rem; }
.auth-mobile-brand img { height:42px; object-fit:contain; width:42px; }
.auth-mobile-brand strong,.auth-mobile-brand small { display:block; }
.auth-mobile-brand strong { color:var(--auth-navy); font-size:.85rem; }
.auth-mobile-brand small { color:var(--auth-muted); font-size:.65rem; }
.auth-switch { background:#eef2f7; border-radius:2rem; display:grid; grid-template-columns:1fr 1fr; margin-bottom:2.2rem; padding:.3rem; }
.auth-switch label { border-radius:1.7rem; color:#68778d; cursor:pointer; font-size:.76rem; font-weight:800; margin:0; padding:.7rem; text-align:center; transition:.2s ease; }
#flip:not(:checked)~.auth-forms .login-tab,#flip:checked~.auth-forms .signup-tab { background:#fff; box-shadow:0 4px 14px rgba(23,43,74,.09); color:var(--auth-blue); }
.auth-heading { margin-bottom:1.65rem; }
.auth-heading h2 { color:var(--auth-ink); font-family:"Manrope",sans-serif; font-size:clamp(1.65rem,3vw,2.15rem); letter-spacing:-.04em; margin:.35rem 0 .45rem; }
.auth-heading p { color:var(--auth-muted); font-size:.83rem; margin:0; }
.auth-heading.compact { margin-bottom:1.25rem; }
.auth-form-pane { display:none; }
#flip:not(:checked)~.auth-forms .login-form,#flip:checked~.auth-forms .signup-form { display:block; animation:auth-in .3s ease; }
@keyframes auth-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.auth-field { margin-bottom:1rem; min-width:0; }
.auth-field>label,.field-label-row label,.account-type legend { color:#35445b; display:block; font-size:.72rem; font-weight:800; margin-bottom:.42rem; }
.field-label-row { align-items:center; display:flex; justify-content:space-between; }
.field-label-row a { color:var(--auth-blue); font-size:.68rem; font-weight:700; text-decoration:none; }
.field-control { position:relative; }
.field-control>i { color:#8492a7; left:1rem; position:absolute; top:50%; transform:translateY(-50%); }
.auth-field input,.auth-field select,.field-control input { background:#fff; border:1px solid var(--auth-line); border-radius:.8rem; box-sizing:border-box; color:var(--auth-ink); font-size:.8rem; min-height:48px; padding:.75rem .9rem; width:100%; }
.field-control input { padding-left:2.75rem; padding-right:2.7rem; }
.auth-field input:focus,.auth-field select:focus,.field-control input:focus { border-color:var(--auth-blue); box-shadow:0 0 0 3px rgba(35,103,216,.11); outline:0; }
.password-toggle { background:transparent; border:0; color:#7b899c; padding:.5rem; position:absolute; right:.45rem; top:50%; transform:translateY(-50%); }
.password-toggle:hover,.password-toggle:focus-visible { color:var(--auth-blue); outline:none; }
.password-feedback { background:#f7f9fc; border:1px solid #e1e7ef; border-radius:.8rem; margin:-.15rem 0 1rem; padding:.8rem .9rem; }
.password-strength-row { align-items:center; color:#65748a; display:flex; font-size:.66rem; font-weight:700; justify-content:space-between; }
.password-strength-row strong { color:#78869a; }
.password-strength-row strong[data-level="weak"] { color:#bd4034; }
.password-strength-row strong[data-level="fair"] { color:#b87513; }
.password-strength-row strong[data-level="good"] { color:#2770bd; }
.password-strength-row strong[data-level="strong"] { color:#18825a; }
.password-strength-track { background:#e3e8ef; border-radius:1rem; height:5px; margin:.5rem 0 .65rem; overflow:hidden; }
.password-strength-track span { background:#b8c1ce; border-radius:inherit; display:block; height:100%; transition:width .25s ease,background .25s ease; width:0; }
.password-strength-track span[data-level="weak"] { background:#d95749; }
.password-strength-track span[data-level="fair"] { background:#d8942d; }
.password-strength-track span[data-level="good"] { background:#3785d5; }
.password-strength-track span[data-level="strong"] { background:#22a06b; }
.password-guidance { display:flex; flex-wrap:wrap; gap:.4rem .75rem; }
.password-guidance span { color:#7b8798; font-size:.61rem; white-space:nowrap; }
.password-guidance span i { margin-right:.18rem; }
.password-guidance span.passed { color:#18825a; }
.password-match { font-size:.64rem; font-weight:700; min-height:1em; margin-top:.55rem; }
.password-match.matched { color:#18825a; }
.password-match.mismatched { color:#b94a3d; }
.auth-grid { display:grid; gap:0 1rem; grid-template-columns:1fr 1fr; }
.auth-grid .full { grid-column:1/-1; }
.account-type { border:0; margin:0 0 1rem; padding:0; }
.account-type>input[type=checkbox] { opacity:0; position:absolute; }
.account-type>label { background:#edf2f8; border-radius:.8rem; cursor:pointer; display:grid; grid-template-columns:1fr 1fr; padding:.25rem; }
.account-type>label span { border-radius:.65rem; color:#718097; font-size:.72rem; font-weight:800; padding:.65rem; text-align:center; }
#userToggle:checked+label span:first-child,#userToggle:not(:checked)+label span:last-child { background:#fff; box-shadow:0 3px 10px rgba(24,42,71,.08); color:var(--auth-blue); }
.auth-submit { align-items:center; background:linear-gradient(135deg,#276ddd,#174fae); border:0; border-radius:2rem; box-shadow:0 10px 24px rgba(35,103,216,.22); color:#fff; display:flex; font-size:.78rem; font-weight:800; justify-content:space-between; margin-top:.45rem; padding:.88rem 1.2rem; transition:.2s; width:100%; }
.auth-submit:hover { box-shadow:0 14px 28px rgba(35,103,216,.3); transform:translateY(-1px); }
.auth-change { color:var(--auth-muted); font-size:.72rem; margin:1rem 0 0; text-align:center; }
.auth-change label { color:var(--auth-blue); cursor:pointer; font-weight:800; }
.auth-alert { align-items:flex-start; background:#fff0ee; border:1px solid #f5cbc4; border-radius:.75rem; color:#9f3e2f; display:flex; font-size:.72rem; gap:.5rem; margin-bottom:1rem; padding:.75rem; }
.field-error { color:#b84434; display:block; font-size:.66rem; margin-top:.3rem; }
[hidden] { display:none!important; }
@media(max-width:900px) {
  .auth-page { min-height:auto; padding:7.25rem 1rem 3rem; }
  .auth-shell { grid-template-columns:1fr; max-width:650px; min-height:0; overflow:visible; }
  .auth-story { display:none; }
  .auth-mobile-brand { display:flex; }
  .auth-forms { padding:2.2rem; }
}
@media(max-width:520px) {
  .public-site:has(.auth-page) .public-navbar { min-height:64px; }
  .public-site:has(.auth-page) .public-navbar .navbar-brand img { max-height:42px !important; }
  .auth-page {
    background:linear-gradient(180deg,#edf4ff 0,#f6f8fb 180px,#f6f8fb 100%);
    padding:5.75rem .65rem 2.25rem;
  }
  .auth-shell {
    border-color:rgba(199,211,227,.85);
    border-radius:1rem;
    box-shadow:0 16px 42px rgba(15,35,68,.11);
    width:100%;
  }
  .auth-forms { max-width:none; padding:1.15rem 0 1.35rem; width:100%; }
  .auth-forms>.auth-mobile-brand,
  .auth-forms>.auth-switch,
  .auth-forms>.auth-form-pane {
    margin-left:1.35rem;
    margin-right:1.35rem;
    max-width:calc(100% - 2.7rem);
    width:auto;
  }
  .auth-mobile-brand {
    border-bottom:1px solid #e7edf4;
    margin-bottom:1rem;
    padding:0 .15rem .9rem;
  }
  .auth-mobile-brand img {
    background:#fff;
    border:1px solid #e3e9f1;
    border-radius:.65rem;
    height:38px;
    padding:2px;
    width:38px;
  }
  .auth-mobile-brand strong { font-size:.8rem; }
  .auth-mobile-brand small { font-size:.6rem; }
  .auth-switch {
    border:1px solid #e1e7ef;
    border-radius:.8rem;
    margin-bottom:1.35rem;
    padding:.22rem;
  }
  .auth-switch label {
    align-items:center;
    border-radius:.62rem;
    display:flex;
    font-size:.72rem;
    justify-content:center;
    min-height:42px;
    padding:.55rem .35rem;
    white-space:nowrap;
  }
  .auth-heading { margin-bottom:1.25rem; }
  .auth-heading>span { font-size:.62rem; letter-spacing:.11em; }
  .auth-grid { grid-template-columns:1fr; }
  .auth-grid .full { grid-column:auto; }
  .auth-heading h2 { font-size:clamp(1.45rem,7vw,1.75rem); line-height:1.15; margin-top:.3rem; }
  .auth-heading p { font-size:.75rem; line-height:1.55; }
  .auth-field { margin-bottom:.85rem; }
  .auth-field>label,.field-label-row label,.account-type legend { font-size:.69rem; }
  .field-label-row { gap:.75rem; }
  .field-label-row a { flex:none; font-size:.65rem; min-height:28px; padding-top:.2rem; }
  .auth-field input,.auth-field select,.field-control input {
    border-radius:.7rem;
    font-size:16px;
    min-height:50px;
    padding:.7rem .8rem;
  }
  .field-control input { padding-left:2.55rem; padding-right:2.9rem; }
  .field-control>i { left:.9rem; }
  .password-toggle {
    align-items:center;
    display:flex;
    height:44px;
    justify-content:center;
    right:.2rem;
    width:44px;
  }
  .account-type>label { border-radius:.72rem; gap:.15rem; }
  .account-type>label span {
    align-items:center;
    border-radius:.55rem;
    display:flex;
    font-size:.7rem;
    gap:.35rem;
    justify-content:center;
    min-height:42px;
    padding:.55rem .3rem;
  }
  .auth-submit {
    border-radius:.75rem;
    font-size:.76rem;
    min-height:50px;
    padding:.75rem 1rem;
  }
  .auth-submit i { font-size:1rem; }
  .auth-change { font-size:.69rem; line-height:1.5; margin-top:.9rem; }
  .auth-change label { display:inline-block; min-height:30px; padding:.3rem .1rem; }
  .auth-alert { font-size:.69rem; line-height:1.45; }
  .field-error { font-size:.63rem; line-height:1.4; }
}
@media(max-width:360px) {
  .auth-page { padding-inline:.35rem; }
  .auth-forms { padding:1rem 0 1.2rem; }
  .auth-forms>.auth-mobile-brand,
  .auth-forms>.auth-switch,
  .auth-forms>.auth-form-pane {
    margin-left:1.1rem;
    margin-right:1.1rem;
    max-width:calc(100% - 2.2rem);
  }
  .auth-switch label { font-size:.68rem; }
  .account-type>label span { font-size:.65rem; }
}
@media(max-width:520px) and (orientation:landscape) {
  .auth-page { padding-top:5.25rem; }
}
@media(prefers-reduced-motion:reduce) {
  #flip:not(:checked)~.auth-forms .login-form,
  #flip:checked~.auth-forms .signup-form { animation:none; }
}