:root{--auth-navy:#031b3c;--auth-green:#08a94f;--auth-text:#071a38;--auth-muted:#60708e;--auth-border:#d8e0ea}
*{box-sizing:border-box}
#authRoot{min-height:100vh;background:#eef3f8;padding:24px 40px;box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.auth-screen{width:min(1460px,100%);min-height:calc(100vh - 48px);margin:auto;background:#fff;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:52.65% 47.35%;box-shadow:0 14px 42px rgba(4,25,55,.14)}
.auth-screen[hidden]{display:none}
.auth-side{position:relative;overflow:hidden;background:radial-gradient(circle at 42% 12%,#06366f 0,#031f45 43%,#01142e 100%);padding:54px clamp(56px,5.3vw,82px);color:#fff}
.auth-brand{position:relative;z-index:4;display:block;width:272px;height:198px;object-fit:contain;margin:40px auto}
.auth-side-copy{position:relative;z-index:4;margin-top:37px;max-width:510px}
.auth-side-copy h2{font-size:clamp(34px,2.65vw,44px);line-height:1.12;letter-spacing:-.025em;margin:0;font-weight:600}
.auth-side-copy h2 span,.auth-form-card h1 span{color:var(--auth-green)}
.auth-side-copy i{display:block;width:48px;height:3px;background:#0bd267;margin:27px auto 24px}
.auth-side-copy p{font-size:16px;line-height:1.68;color:#dce6f4;max-width:470px;text-align:center;margin:0 auto}
.auth-bars{position:absolute;z-index:1;width:122%;max-width:none;left:-19%;bottom:-7%;opacity:.98;pointer-events:none}
.auth-feature-row{position:absolute;z-index:5;left:76px;right:76px;bottom:55px;display:grid;grid-template-columns:repeat(3,1fr)}
.auth-feature{min-width:0;display:flex;align-items:center;gap:13px;padding:0 20px;border-right:1px solid rgba(100,169,213,.42)}
.auth-feature:first-child{padding-left:0}.auth-feature:last-child{padding-right:0;border-right:0}
.auth-feature>span{width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:#052855;display:grid;place-items:center;color:#13dc69;font-size:25px}
.auth-feature>span img{width:31px;height:31px;object-fit:contain;filter:brightness(0) saturate(100%) invert(67%) sepia(71%) saturate(1519%) hue-rotate(93deg) brightness(97%) contrast(91%)}
.auth-feature b{display:block;font-size:15px;line-height:1.2}.auth-feature small{display:block;margin-top:5px;color:#d5e0ee;font-size:13px;line-height:1.25;white-space:nowrap}
.auth-side-note{position:absolute;z-index:5;left:72px;bottom:48px;display:flex;gap:14px;align-items:center}.auth-side-note small{display:block;margin-top:5px;color:#d6e2f1}.auth-note-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#073060;color:#15da6a;font-size:24px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:50px clamp(58px,6.2vw,96px)}
.auth-form-card{width:100%;max-width:570px}.auth-form-card.wide{max-width:760px}.auth-form-card.centered{text-align:center}
.auth-heading{margin-bottom:42px}.auth-form-card h1{font-size:42px;line-height:1.08;letter-spacing:-.025em;color:var(--auth-text);margin:0 0 12px;font-weight:600}.auth-form-card>p,.auth-heading p{font-size:18px;color:var(--auth-muted);margin:0}
.auth-form-card form{text-align:left}.auth-field-label,.auth-form-card label{display:block;color:var(--auth-text);font-size:14px;font-weight:600;margin:0 0 30px}
.auth-control{height:68px;border:1px solid var(--auth-border);border-radius:11px;display:flex;align-items:center;margin-top:12px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}
.auth-control:focus-within{border-color:#9fcab2;box-shadow:0 0 0 3px rgba(8,169,79,.08)}
.auth-control-icon{width:64px!important;height:100%;display:grid!important;place-items:center!important;flex:0 0 64px}.auth-control-icon img{width:24px;height:24px;object-fit:contain}
.auth-control input{flex:1;min-width:0;height:100%;border:0;outline:0;font-size:16px;color:var(--auth-text);background:transparent;padding:0 14px 0 0}
.auth-eye{width:62px!important;height:100%;border:0;background:none;cursor:pointer;display:grid;place-items:center}.auth-eye img{width:24px;height:24px;object-fit:contain}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 31px}
.auth-check{position:relative;display:flex!important;align-items:center;gap:10px;margin:0!important;font-size:14px!important;font-weight:500!important;cursor:pointer}.auth-check input{position:absolute;opacity:0;pointer-events:none}.auth-check-box{width:20px;height:20px;border:1px solid #9eabbc;border-radius:4px;display:grid;place-items:center;background:#fff;overflow:hidden}.auth-check-box img{display:none;width:20px;height:20px}.auth-check input:checked+.auth-check-box{border-color:var(--auth-green);background:var(--auth-green)}.auth-check input:checked+.auth-check-box img{display:block;filter:brightness(0) invert(1)}
.auth-link,.auth-switch button{border:0;background:none;color:#079846;font-weight:600;cursor:pointer;padding:0;font-size:14px}
.auth-primary{width:100%;height:68px;border:0;border-radius:10px;background:linear-gradient(100deg,#09b94f 0%,#089342 58%,#087269 100%);color:#fff;font-size:20px;font-weight:600;cursor:pointer;box-shadow:0 10px 22px rgba(8,169,79,.2);display:flex;align-items:center;justify-content:center;gap:13px}.auth-primary img{width:27px;height:27px;filter:brightness(0) invert(1)}.auth-primary:disabled{opacity:.65;cursor:wait}
.auth-divider{display:flex;align-items:center;gap:24px;color:#63708a;margin:39px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#dbe2eb}
.auth-google{width:100%;height:64px;background:#fff;border:1px solid var(--auth-border);border-radius:10px;font-size:17px;font-weight:600;color:var(--auth-text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:15px}.auth-google img{width:26px;height:26px}
.auth-switch{text-align:center!important;margin:34px 0 0!important;font-size:16px!important;color:var(--auth-muted)!important}.auth-switch button{font-size:16px}
.auth-error{color:#b42318;min-height:22px;margin-top:12px;font-weight:600}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.auth-grid .full,.auth-account-type{grid-column:1/-1}.auth-account-type{border:0;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.auth-account-type legend{font-weight:600;margin-bottom:12px}.auth-account-type label{border:1px solid var(--auth-border);border-radius:10px;padding:20px;margin:0;display:grid;grid-template-columns:28px 1fr}.auth-account-type label:has(input:checked){border-color:var(--auth-green);background:#f3fbf6}.auth-account-type input{grid-row:1/3;accent-color:var(--auth-green)}.auth-account-type small{display:block;font-weight:400;color:var(--auth-muted);margin-top:4px}.auth-round-icon{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:#eaf8ef;color:#069847;font-size:38px}.auth-info{padding:20px;border-radius:10px;background:#f2f6f8;color:#526480;margin-top:30px}.auth-progress{display:flex;align-items:flex-start;margin:0 auto 52px;max-width:620px}.auth-step{text-align:center;min-width:110px;color:#7b879b}.auth-step b{display:grid;place-items:center;margin:auto;width:46px;height:46px;border-radius:50%;background:#edf1f5;font-size:18px}.auth-step span{display:block;margin-top:10px;font-weight:600;font-size:14px}.auth-step.done,.auth-step.active{color:#079a47}.auth-step.done b,.auth-step.active b{background:#0aaa50;color:#fff}.auth-progress>i{height:2px;background:#dce3eb;flex:1;margin-top:23px}.otp-boxes{display:flex;justify-content:center;gap:16px;margin:28px 0}.otp-boxes input{width:62px;height:72px;border:1px solid var(--auth-border);border-radius:9px;text-align:center;font-size:26px;font-weight:600;outline:0}.otp-boxes input:focus{border-color:var(--auth-green);box-shadow:0 0 0 3px rgba(8,169,79,.1)}.password-rules{list-style:none;padding:0;margin:-10px 0 28px;text-align:left;color:#5a6b85}.password-rules li:before{content:'✓';color:#fff;background:#0aa54d;border-radius:4px;padding:1px 4px;margin-right:10px}
@media(max-height:880px) and (min-width:901px){#authRoot{padding:18px 32px}.auth-screen{min-height:calc(100vh - 36px)}.auth-side{padding-top:36px;padding-bottom:36px}.auth-brand{width:225px;height:160px}.auth-side-copy{margin-top:18px}.auth-side-copy h2{font-size:36px}.auth-side-copy i{margin:20px auto 18px}.auth-side-copy p{font-size:14px;line-height:1.55}.auth-feature-row{bottom:32px;left:66px;right:66px}.auth-main{padding-top:34px;padding-bottom:34px}.auth-heading{margin-bottom:30px}.auth-field-label,.auth-form-card label{margin-bottom:22px}.auth-control{height:62px}.auth-primary{height:62px}.auth-divider{margin:28px 0}.auth-google{height:60px}.auth-switch{margin-top:26px!important}}
@media(max-width:900px){#authRoot{padding:0}.auth-screen{border-radius:0;min-height:100vh;display:block}.auth-side{display:none}.auth-main{min-height:100vh;padding:36px 22px;box-sizing:border-box}.auth-form-card h1{font-size:34px}.auth-grid{grid-template-columns:1fr}.auth-account-type{grid-template-columns:1fr}.auth-grid .full,.auth-account-type{grid-column:1}.otp-boxes{gap:8px}.otp-boxes input{width:44px;height:58px}}


/* UI-001 v3.2 — compact 80% login alignment */
@media (min-width:901px){
  #authRoot{
    padding:56px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .auth-screen{
    width:min(1240px,calc(100vw - 112px));
    height:min(780px,calc(100vh - 112px));
    min-height:0;
    border-radius:20px;
    grid-template-columns:52.7% 47.3%;
    box-shadow:0 12px 34px rgba(4,25,55,.13);
  }
  .auth-side{
    padding:34px 54px 30px;
  }
  .auth-brand{
    width:188px;
    height:138px;
  }
  .auth-side-copy{
    margin-top:22px;
    max-width:420px;
  }
  .auth-side-copy h2{
    font-size:32px;
    line-height:1.14;
    letter-spacing:-.018em;
    font-weight:600;
  }
  .auth-side-copy i{
    width:42px;
    height:2px;
    margin:22px auto 20px;
  }
  .auth-side-copy p{
    max-width:405px;
    font-size:13px;
    line-height:1.62;
  }
  .auth-bars{
    width:110%;
    left:-10%;
    bottom:-2%;
  }
  .auth-feature-row{
    left:48px;
    right:48px;
    bottom:31px;
  }
  .auth-feature{
    gap:10px;
    padding:0 15px;
  }
  .auth-feature>span{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:10px;
  }
  .auth-feature>span img{
    width:25px;
    height:25px;
  }
  .auth-feature b{
    font-size:12px;
    font-weight:600;
  }
  .auth-feature small{
    margin-top:3px;
    font-size:10px;
  }
  .auth-main{
    padding:42px 64px;
  }
  .auth-form-card{
    max-width:460px;
  }
  .auth-heading{
    margin-bottom:30px;
  }
  .auth-form-card h1{
    font-size:34px;
    line-height:1.1;
    margin-bottom:9px;
    font-weight:600;
  }
  .auth-form-card>p,.auth-heading p{
    font-size:14px;
  }
  .auth-field-label,.auth-form-card label{
    font-size:12px;
    font-weight:600;
    margin-bottom:22px;
  }
  .auth-control{
    height:54px;
    margin-top:9px;
    border-radius:9px;
  }
  .auth-control-icon{
    width:52px!important;
    flex-basis:52px;
  }
  .auth-control-icon img,
  .auth-eye img{
    width:19px;
    height:19px;
  }
  .auth-control input{
    font-size:13px;
    padding-right:10px;
  }
  .auth-eye{
    width:50px!important;
  }
  .auth-row{
    margin:-1px 0 24px;
  }
  .auth-check{
    gap:8px;
    font-size:12px!important;
    font-weight:500!important;
  }
  .auth-check-box{
    width:17px;
    height:17px;
  }
  .auth-check-box img{
    width:17px;
    height:17px;
  }
  .auth-link,.auth-switch button{
    font-size:12px;
    font-weight:600;
  }
  .auth-primary{
    height:54px;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    gap:10px;
  }
  .auth-primary img{
    width:21px;
    height:21px;
  }
  .auth-error{
    min-height:16px;
    margin-top:8px;
    font-size:12px;
  }
  .auth-divider{
    gap:18px;
    margin:26px 0;
    font-size:12px;
  }
  .auth-google{
    height:52px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    gap:12px;
  }
  .auth-google img{
    width:21px;
    height:21px;
  }
  .auth-switch{
    margin-top:25px!important;
    font-size:13px!important;
  }
  .auth-switch button{
    font-size:13px;
  }
}

/* Typography rule: authentication UI never exceeds weight 600. */
#authRoot h1,#authRoot h2,#authRoot h3,#authRoot h4,#authRoot h5,#authRoot h6,
#authRoot b,#authRoot strong,#authRoot button,#authRoot label,#authRoot legend{
  font-weight:600;
}

/* UI-001 v3.3 — approved login typography, centered hero and form-control alignment */
@media (min-width:901px){
  #authRoot{
    padding:56px;
  }

  .auth-screen{
    width:min(1160px,calc(100vw - 112px));
    height:min(780px,calc(100vh - 112px));
    grid-template-columns:52.5% 47.5%;
  }

  /* Approved left-panel composition: all copy is centered. */
  .auth-side{
    padding:34px 50px 30px;
    text-align:center;
  }
  .auth-brand{
    width:196px;
    height:142px;
    margin:40px auto;
  }
  .auth-side-copy{
    width:100%;
    max-width:360px;
    margin:24px auto 0;
    text-align:center;
  }
  .auth-side-copy h2{
    max-width:350px;
    margin:0 auto;
    font-size:34px;
    line-height:1.12;
    letter-spacing:-.018em;
    text-align:center;
    font-weight:600;
  }
  .auth-side-copy i{
    width:44px;
    margin:23px auto 20px;
  }
  .auth-side-copy p{
    max-width:350px;
    margin:0 auto;
    font-size:13.5px;
    line-height:1.62;
    text-align:center;
  }
  .auth-bars{
    width:112%;
    left:-7%;
    bottom:-1%;
  }
  .auth-feature-row{
    left:42px;
    right:42px;
    bottom:30px;
  }
  .auth-feature{
    justify-content:center;
    text-align:left;
    padding:0 12px;
  }

  /* Approved right-panel proportions and vertical rhythm. */
  .auth-main{
    padding:48px 58px 42px;
  }
  .auth-form-card{
    max-width:420px;
    transform:translateY(7px);
  }
  .auth-heading{
    margin-bottom:34px;
  }
  .auth-form-card h1{
    font-size:34px;
    line-height:1.1;
    margin-bottom:10px;
    font-weight:600;
  }
  .auth-form-card>p,
  .auth-heading p{
    font-size:14px;
    line-height:1.45;
  }
  .auth-field-label,
  .auth-form-card label{
    font-size:12.5px;
    font-weight:600;
    margin-bottom:27px;
  }

  /* Inputs: approved width, icon scale, padding and subtle finish. */
  .auth-control{
    height:54px;
    margin-top:10px;
    border-radius:10px;
    border-color:#d5dee9;
    background:#fff;
    box-shadow:0 2px 7px rgba(7,26,56,.035);
  }
  .auth-control-icon{
    width:50px!important;
    flex:0 0 50px;
    background:transparent;
  }
  .auth-control-icon img{
    width:22px;
    height:22px;
  }
  .auth-control input{
    font-size:13.5px;
    font-weight:500;
    padding:0 12px 0 1px;
    background:#fff;
  }
  .auth-eye{
    width:48px!important;
    flex:0 0 48px;
    padding:0 4px 0 0;
  }
  .auth-eye img{
    width:22px;
    height:22px;
  }

  /* Prevent Chrome autofill from painting the input area blue. */
  .auth-control input:-webkit-autofill,
  .auth-control input:-webkit-autofill:hover,
  .auth-control input:-webkit-autofill:focus,
  .auth-control input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--auth-text);
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    box-shadow:0 0 0 1000px #fff inset!important;
    caret-color:var(--auth-text);
    transition:background-color 9999s ease-out 0s;
  }

  .auth-row{
    margin:0 0 27px;
  }
  .auth-check{
    font-size:12px!important;
  }
  .auth-check-box{
    width:18px;
    height:18px;
  }
  .auth-check-box img{
    width:18px;
    height:18px;
  }
  .auth-primary{
    height:54px;
    font-size:16px;
  }
  .auth-primary img{
    width:22px;
    height:22px;
  }
  .auth-divider{
    margin:30px 0;
  }
  .auth-google{
    height:53px;
    font-size:14px;
  }
  .auth-google img{
    width:22px;
    height:22px;
  }
  .auth-switch{
    margin-top:27px!important;
  }
}

/* UI-001 v3.4 — strict desktop alignment to approved Login.png */
@media (min-width:901px){
  /* Preserve the already-correct outer card proportions. */
  .auth-screen{
    width:min(1160px,calc(100vw - 112px));
    height:min(780px,calc(100vh - 112px));
    grid-template-columns:52.5% 47.5%;
  }

  /* Left panel: approved composition is centered and sits lower. */
  .auth-side{
    padding:51px 50px 30px;
    text-align:center;
  }
  .auth-brand{
    width:196px;
    height:142px;
    margin:40px auto;
  }
  .auth-side-copy{
    max-width:390px;
    margin:31px auto 0;
    text-align:center;
  }
  .auth-side-copy h2{
    max-width:370px;
    margin:0 auto;
    font-size:35px;
    line-height:1.105;
    letter-spacing:-.016em;
    text-align:center;
    font-weight:600;
  }
  .auth-side-copy i{
    width:44px;
    height:2px;
    margin:25px auto 20px;
  }
  .auth-side-copy p{
    max-width:352px;
    margin:0 auto;
    font-size:13.5px;
    line-height:1.58;
    text-align:center;
  }
  .auth-bars{
    width:106%;
    left:-2.5%;
    bottom:5.5%;
  }
  .auth-feature-row{
    left:43px;
    right:43px;
    bottom:41px;
  }
  .auth-feature{
    justify-content:center;
    gap:10px;
    padding:0 13px;
    text-align:left;
  }
  .auth-feature>span{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
  .auth-feature b{font-size:12px;font-weight:600}
  .auth-feature small{font-size:10px;line-height:1.2}

  /* Right panel: shift the upper form rhythm down without changing card size. */
  .auth-main{
    padding:48px 58px 42px;
  }
  .auth-form-card{
    max-width:420px;
    transform:translateY(16px);
  }
  .auth-heading{
    margin-bottom:33px;
  }
  .auth-form-card h1{
    font-size:36px;
    line-height:1.08;
    margin-bottom:10px;
    letter-spacing:-.02em;
    font-weight:600;
  }
  .auth-form-card>p,
  .auth-heading p{
    font-size:14px;
    line-height:1.45;
  }
  .auth-field-label,
  .auth-form-card label{
    font-size:12.5px;
    font-weight:600;
    margin-bottom:27px;
  }

  /* Match approved controls and icon treatment. */
  .auth-control{
    height:54px;
    margin-top:10px;
    border-radius:9px;
    border-color:#d7dfe9;
    box-shadow:none;
  }
  .auth-control-icon{
    width:52px!important;
    flex:0 0 52px;
  }
  .auth-control-icon img{
    width:21px;
    height:21px;
    filter:grayscale(1) saturate(0) opacity(.72);
  }
  .auth-control input{
    font-size:14px;
    font-weight:500;
    padding:0 12px 0 0;
  }
  .auth-eye{
    width:50px!important;
    flex:0 0 50px;
    padding-right:2px;
  }
  .auth-eye img{
    width:21px;
    height:21px;
    filter:grayscale(1) saturate(0) opacity(.72);
  }
  .auth-row{
    margin:-1px 0 24px;
  }
  .auth-check{
    gap:8px;
    font-size:12px!important;
    font-weight:500!important;
  }
  .auth-check-box{
    width:17px;
    height:17px;
    border-radius:3px;
  }
  .auth-check-box img{width:17px;height:17px}
  .auth-link{font-size:12px;font-weight:600}
  .auth-primary{
    height:54px;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    gap:10px;
  }
  .auth-primary img{
    width:21px;
    height:21px;
    filter:brightness(0) invert(1);
  }
  .auth-error{
    min-height:12px;
    margin-top:5px;
  }
  .auth-divider{
    gap:18px;
    margin:24px 0;
    font-size:12px;
  }
  .auth-google{
    height:52px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    gap:12px;
  }
  .auth-google img{width:21px;height:21px}
  .auth-switch{
    margin-top:24px!important;
    font-size:13px!important;
  }
  .auth-switch button{font-size:13px;font-weight:600}
}