#loginView *{box-sizing: border-box;}
#loginView{margin: 0px; color: rgb(37, 44, 53); background: rgb(238, 240, 243); font: 15px "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased;}
#loginView button,#loginView input{font: inherit;}
#loginView button,#loginView a{-webkit-tap-highlight-color: transparent;}
#loginView a{color: inherit; text-decoration: none;}
#loginView button{cursor: pointer;}
#loginView button:focus-visible,#loginView a:focus-visible{outline: rgb(114, 149, 71) solid 3px; outline-offset: 4px;}
#loginView [hidden]{display: none !important;}
#loginView .preview-note{padding: 8px 5%; background: rgb(226, 230, 235); border-bottom: 1px solid rgb(216, 221, 227); font-size: 9px; letter-spacing: 1.4px; color: rgb(104, 117, 131); display: flex; justify-content: space-between;}
#loginView .preview-note span{letter-spacing: 0.2px;}
#loginView header{max-width: 1280px; margin: auto; padding: 28px 0px; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 100px);}
#loginView .brand{font-size: 23px; font-weight: 750; letter-spacing: -1px;}
#loginView .brand span{font-weight: 400; color: rgb(123, 133, 146);}
#loginView .back{font-size: 12px; color: rgb(105, 117, 132); transition: color 0.2s;}
#loginView .back:hover{color: rgb(38, 53, 28);}
#loginView main{max-width: 1080px; width: calc(100% - 80px); margin: 36px auto 0px;}
#loginView .login-shell{display: grid; grid-template-columns: 1fr 1fr; background: rgb(238, 240, 243); border: 1px solid rgba(255, 255, 255, 0.81); border-radius: 35px; box-shadow: rgb(203, 208, 217) 22px 22px 60px, rgb(255, 255, 255) -20px -20px 55px; overflow: hidden; min-height: 675px;}
#loginView .identity{position: relative; padding: 38px 44px 30px; background: linear-gradient(140deg, rgb(233, 237, 241), rgb(239, 241, 244) 55%, rgb(229, 233, 238)); display: flex; flex-direction: column; border-right: 1px solid rgb(215, 221, 229);}
#loginView .identity::after{content: ""; position: absolute; left: 20%; right: 20%; bottom: 0px; height: 1px; background: rgb(255, 255, 255);}
#loginView .identity-top{display: flex; justify-content: space-between; align-items: center;}
#loginView .eyebrow{font-size: 9px; letter-spacing: 2px; color: rgb(112, 125, 140); font-weight: 600;}
#loginView .status-dot{width: 7px; height: 7px; background: rgb(164, 197, 108); border-radius: 50%; box-shadow: rgba(164, 197, 108, 0.08) 0px 0px 0px 5px, rgba(164, 197, 108, 0.314) 0px 0px 14px;}
#loginView .emblem{position: relative; width: 290px; height: 255px; margin: 16px auto 5px; display: grid; place-items: center;}
#loginView .emblem-ring{position: absolute; width: 215px; height: 215px; border-radius: 50%; background: linear-gradient(145deg, rgb(228, 232, 238), rgb(243, 245, 247)); box-shadow: rgb(205, 211, 220) 8px 8px 18px inset, rgb(255, 255, 255) -8px -8px 18px inset; border: 1px solid rgb(238, 241, 245);}
#loginView .emblem img{position: relative; width: 290px; height: 290px; object-fit: contain; filter: drop-shadow(rgba(50, 64, 80, 0.086) 0px 10px 8px); transform: translateY(-3px); animation: 1s ease 0s 1 normal both running px-login-emblem-arrive;}
#loginView .identity-copy h1{font-size: 45px; line-height: 1.11; letter-spacing: -2px; font-weight: 600; margin: 12px 0px 18px;}
#loginView .identity-copy h1 span{color: rgb(123, 133, 146);}
#loginView .identity-copy p{font-size: 14px; line-height: 1.8; color: rgb(123, 133, 146); margin: 0px;}
#loginView .areas{display: flex; gap: 20px; margin-top: auto; padding-top: 32px; font-size: 10px; color: rgb(113, 128, 143);}
#loginView .areas span{display: flex; gap: 6px; align-items: center;}
#loginView .areas i{width: 5px; height: 5px; background: rgb(156, 185, 99); border-radius: 50%;}
#loginView .areas span:nth-child(2) i{background: rgb(95, 157, 137);}
#loginView .areas span:nth-child(3) i{background: rgb(162, 139, 181);}
#loginView .access-panel{padding: 35px 47px 24px; display: flex; flex-direction: column; min-width: 0px;}
#loginView .mode-switch{position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; padding: 5px; background: rgb(233, 237, 241); box-shadow: rgb(209, 215, 224) 4px 4px 8px inset, rgb(255, 255, 255) -4px -4px 8px inset; isolation: isolate;}
#loginView .mode-switch button{padding: 12px 4px; border: 0px; background: transparent; font-size: 12px; font-weight: 600; color: rgb(133, 144, 158); transition: color 0.3s;}
#loginView .mode-switch button[aria-selected="true"]{color: rgb(57, 70, 48);}
#loginView .switch-thumb{position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 9px; background: linear-gradient(140deg, rgb(250, 251, 252), rgb(233, 237, 241)); border: 1px solid rgba(255, 255, 255, 0.74); box-shadow: rgb(205, 212, 220) 3px 3px 7px, rgb(255, 255, 255) -3px -3px 7px; transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.26, 1);}
#loginView .mode-switch.request-active .switch-thumb{transform: translateX(100%);}
#loginView .form-intro{padding: 27px 0px 20px;}
#loginView .welcome-icon{display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: rgb(133, 148, 107); background: rgb(237, 240, 243); box-shadow: rgb(212, 218, 226) 4px 4px 9px, rgb(255, 255, 255) -4px -4px 9px; margin-bottom: 17px; font-size: 22px;}
#loginView .welcome-icon svg{width: 19px; height: 19px; fill: none; stroke: currentcolor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
#loginView h2{font-size: 31px; font-weight: 600; letter-spacing: -1px; margin: 0px 0px 8px; line-height: 1.2;}
#loginView .form-intro p{font-size: 13px; color: rgb(123, 133, 146); margin: 0px; line-height: 1.7;}
#loginView label{display: block; font-size: 11px; font-weight: 600; color: rgb(105, 117, 133); margin: 0px 0px 9px;}
#loginView .input-shell{display: flex; align-items: center; gap: 11px; background: rgb(233, 237, 241); border: 1px solid rgb(239, 242, 245); border-radius: 12px; padding: 0px 15px; height: 51px; box-shadow: rgb(209, 215, 224) 5px 5px 10px inset, rgb(255, 255, 255) -5px -5px 10px inset; transition: box-shadow 0.25s, border-color 0.25s; margin-bottom: 21px;}
#loginView .input-shell:focus-within{border-color: rgb(165, 188, 132); box-shadow: rgb(209, 215, 224) 3px 3px 7px inset, rgb(255, 255, 255) -3px -3px 7px inset, rgba(172, 199, 141, 0.12) 0px 0px 0px 3px;}
#loginView .input-shell > svg{width: 17px; height: 17px; fill: none; stroke: rgb(137, 149, 162); stroke-width: 1.5; flex: 0 0 auto;}
#loginView .input-shell input{width: 100%; min-width: 0px; border: 0px; outline: 0px; background: transparent; color: rgb(52, 64, 76); font-size: 13px; height: 100%; padding: 0px;}
#loginView .input-shell input::placeholder{color: rgb(153, 163, 175);}
#loginView .show-password{padding: 4px; border: 0px; background: none; color: rgb(136, 148, 162); display: flex; border-radius: 4px;}
#loginView .show-password svg{width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.5;}
#loginView .show-password[aria-pressed="true"]{color: rgb(104, 135, 60);}
#loginView .field-hint{font-size: 10px; color: rgb(134, 145, 158); margin-top: -7px; margin-bottom: 24px;}
#loginView .login-submit{width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; padding: 15px 19px; border: 1px solid rgb(232, 245, 208); background: linear-gradient(145deg, rgb(230, 246, 201), rgb(196, 223, 153)); box-shadow: rgb(201, 209, 190) 6px 6px 13px, rgb(255, 255, 255) -5px -5px 13px, rgb(250, 255, 238) 0px 1px 0px inset; color: rgb(62, 84, 40); font-size: 13px; font-weight: 650; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;}
#loginView .login-submit:hover{transform: translateY(-2px); filter: brightness(1.025); box-shadow: rgb(195, 205, 181) 7px 9px 18px, rgb(255, 255, 255) -5px -5px 13px, rgb(250, 255, 238) 0px 1px 0px inset;}
#loginView .login-submit:active{transform: translateY(1px); box-shadow: rgb(171, 197, 131) 3px 3px 7px inset, rgb(234, 247, 211) -3px -3px 7px inset;}
#loginView .arrow{font-size: 20px; line-height: 1; transition: transform 0.2s;}
#loginView .login-submit:hover .arrow{transform: translate(2px, -2px);}
#loginView #loginError{font-size: 11px; line-height: 1.5; color: rgb(107, 131, 63); margin-top: 13px; min-height: 16px;}
#loginView .form-bottom{text-align: center; font-size: 11px; margin-top: 7px; color: rgb(137, 147, 159);}
#loginView .request-link{border: 0px; background: none; font-size: 11px; color: rgb(82, 105, 54); font-weight: 600; padding: 9px 0px 9px 4px;}
#loginView .panel-foot{text-align: center; margin-top: auto; padding-top: 24px; font-size: 9px; color: rgb(141, 151, 163); letter-spacing: 0.3px;}
#loginView .mini-lock{margin-right: 5px;}
#loginView .request-steps{list-style: none; padding: 0px; margin: 12px 0px 29px; display: grid; gap: 23px;}
#loginView .request-steps li{display: flex; align-items: center; gap: 13px; font-size: 12px; color: rgb(86, 99, 112);}
#loginView .request-steps b{display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; font-size: 10px; border-radius: 10px; box-shadow: rgb(211, 217, 225) 3px 3px 7px, rgb(255, 255, 255) -3px -3px 7px; color: rgb(140, 154, 120);}
#loginView .request-steps small{display: block; font-size: 10px; color: rgb(140, 150, 163); margin-top: 5px;}
#loginView .pane.entering{animation: 0.35s ease 0s 1 normal both running px-login-pane-in;}
#loginView footer{display: flex; justify-content: space-between; padding: 30px 8px; font-size: 9px; color: rgb(141, 151, 162); letter-spacing: 1.4px;}
@keyframes px-login-pane-in { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes px-login-emblem-arrive { 
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(-3px) scale(1); }
}
@media (max-width: 1000px){#loginView main{max-width: 880px;}
#loginView .identity{padding: 30px;}
#loginView .access-panel{padding: 30px;}
#loginView .identity-copy h1{font-size: 39px;}
#loginView .emblem{width: 245px;}
#loginView .emblem img{width: 260px; height: 260px;}}
@media (max-width: 680px){#loginView .preview-note{padding: 8px 18px; font-size: 8px; letter-spacing: 0.5px;}
#loginView .preview-note span{max-width: 170px; text-align: right;}
#loginView header{width: calc(100% - 36px); padding: 21px 0px;}
#loginView .brand{font-size: 21px;}
#loginView .back{font-size: 10px;}
#loginView main{width: calc(100% - 36px); margin: 17px auto 0px; max-width: 440px;}
#loginView .login-shell{grid-template-columns: 1fr; border-radius: 25px; box-shadow: rgb(203, 208, 217) 12px 12px 30px, rgb(255, 255, 255) -10px -10px 30px; min-height: 0px;}
#loginView .identity{padding: 19px 23px; display: grid; grid-template-columns: 83px 1fr; column-gap: 14px; border-right: 0px; border-bottom: 1px solid rgb(215, 221, 229); align-items: center;}
#loginView .identity-top{display: none;}
#loginView .emblem{grid-area: 1 / 1; width: 83px; height: 80px; margin: 0px;}
#loginView .emblem-ring{width: 66px; height: 66px; box-shadow: rgb(205, 211, 220) 3px 3px 6px inset, rgb(255, 255, 255) -3px -3px 6px inset;}
#loginView .emblem img{width: 105px; height: 105px;}
#loginView .identity-copy{grid-area: 1 / 2;}
#loginView .identity-copy h1{font-size: 23px; letter-spacing: -0.8px; margin: 0px; line-height: 1.18;}
#loginView .identity-copy p,#loginView .areas{display: none;}
#loginView .access-panel{padding: 24px 23px;}
#loginView .form-intro{padding-top: 23px;}
#loginView .welcome-icon{display: none;}
#loginView h2{font-size: 29px;}
#loginView .input-shell{height: 53px;}
#loginView .input-shell input{font-size: 16px;}
#loginView .panel-foot{padding-top: 17px;}
#loginView footer{font-size: 7px; padding: 24px 3px; letter-spacing: 0.7px;}}
@media (prefers-reduced-motion: reduce){#loginView *,#loginView ::before,#loginView ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
#loginView .login-submit:hover,#loginView .login-submit:active{transform: none;}}
#loginView .emblem-ring{width: 255px; height: 255px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#loginView .emblem img{position: absolute; left: 50%; top: 50%; transform: translate(-47.8%, -48.6%); animation: auto ease 0s 1 normal none running none;}
@media (max-width: 680px){#loginView .emblem-ring{width: 82px; height: 82px;}}
#loginView .emblem-ring{border-radius: 0px;}
@media (min-width: 681px){#loginView .emblem{margin-left: 0px; margin-right: 0px;}
#loginView .emblem img{left: 0px; transform: translate(-11.55%, -48.6%);}}
#loginView{display:block;padding:0;min-height:100vh;width:100%;position:relative;z-index:1}#loginView[hidden]{display:none!important}#loginView #loginError{color:#ad3446}#loginView .login-submit:disabled{opacity:.7;cursor:wait}

/* Keep browser autofill consistent with the light login palette. */
#loginView{color-scheme:light}
#loginView .input-shell input{color-scheme:light;color:#34404c;-webkit-text-fill-color:#34404c;caret-color:#34404c}
#loginView .input-shell input:is(:autofill,:-webkit-autofill){-webkit-background-clip:text!important;background-clip:text!important;-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-text-fill-color:#34404c!important;caret-color:#34404c;border-radius:0}

/* Keep the recessed surface unchanged while typing or autofilling. */
#loginView .input-shell:focus-within{border-color:#eff2f5;box-shadow:inset 5px 5px 10px #d1d7e0,inset -5px -5px 10px #fff}
#loginView .input-shell:has(input:focus-visible){outline:1px solid #a5bc84;outline-offset:3px}