@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

*{box-sizing:border-box}
        html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#12345d;background:#f7fbff}
        body{min-height:100vh}
        .page{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);overflow:hidden;background:
            radial-gradient(circle at 8% 8%,rgba(67,151,255,.18),transparent 24%),
            radial-gradient(circle at 92% 8%,rgba(27,104,218,.10),transparent 18%),
            linear-gradient(135deg,#eef7ff 0%,#fff 58%,#f5faff 100%)}
        .brand{position:relative;min-height:100vh;padding:52px 6vw 95px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
        .brand:before{content:"";position:absolute;width:530px;height:530px;left:-285px;top:-300px;border-radius:50%;border:68px solid rgba(73,157,255,.12)}
        .brand:after{content:"";position:absolute;width:700px;height:700px;left:-365px;bottom:-485px;border-radius:50%;background:linear-gradient(145deg,#0a76e8,#0755b4);box-shadow:130px -45px 0 rgba(44,144,245,.68),245px -98px 0 rgba(94,177,255,.25);transform:rotate(-10deg)}
        .brand-top,.brand-copy,.campus{position:relative;z-index:2}
        .brand-top{display:flex;align-items:center;gap:18px}
        .logo{width:86px;height:96px;object-fit:contain}
        .brand-name strong{display:block;color:#123b81;font-size:clamp(24px,2.4vw,37px);line-height:1.05}
        .brand-name span{display:block;margin-top:5px;color:#20498f;font-size:17px;font-weight:700;letter-spacing:5px}
        .brand-copy{max-width:620px;margin-top:48px}
        .tag{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:rgba(11,104,216,.09);color:#0c67c7;font-size:13px;font-weight:700}
        .tag i{width:8px;height:8px;border-radius:50%;background:#0d78ed;box-shadow:0 0 0 5px rgba(13,120,237,.12)}
        .brand-copy h1{max-width:650px;margin:18px 0 0;color:#10376f;font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-2.4px}
        .line{width:86px;height:6px;margin:25px 0 24px;border-radius:999px;background:#0b77ea}
        .brand-copy p{max-width:520px;margin:0;color:#284565;font-size:clamp(17px,1.35vw,22px);line-height:1.7}
        .campus{width:min(720px,96%);margin-top:22px;align-self:center;filter:drop-shadow(0 18px 24px rgba(17,91,168,.14))}
        .login-side{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:42px 5vw 105px}
        .card{width:100%;max-width:590px;padding:45px 48px 40px;border:1px solid rgba(140,174,211,.28);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 28px 75px rgba(27,70,116,.16),inset 0 1px 0 rgba(255,255,255,.9);text-align:center}
        .shield{width:92px;height:92px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#eef7ff,#dceeff);color:#0c72df}
        .shield svg{width:52px;height:52px}
        .card h2{margin:0;color:#10376f;font-size:clamp(34px,3.2vw,48px);line-height:1.08}
        .sub{margin:12px 0 0;color:#526a85;font-size:18px;line-height:1.6}
        .divider{position:relative;height:1px;margin:34px 0 31px;background:#dce7f3}
        .divider:after{content:"";position:absolute;width:108px;height:5px;left:50%;top:-2px;transform:translateX(-50%);border-radius:999px;background:#0c78ed}
        .instruction{margin:0 0 23px;color:#18395f;font-size:17px;line-height:1.55}
        #google-button{min-height:50px;display:flex;justify-content:center;align-items:center}
        #login-message{display:none;margin-top:18px;padding:13px 15px;border-radius:10px;font-size:14px;line-height:1.5;text-align:left}
        .message-info{color:#245269;background:#d9edf7;border:1px solid #bce8f1}
        .message-error{color:#a94442;background:#f2dede;border:1px solid #ebccd1}
        .loading{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:middle;border:2px solid #b8d5e5;border-top-color:#31708f;border-radius:50%;animation:spin .8s linear infinite}
        .domain{margin-top:24px;padding:18px;display:flex;align-items:center;gap:15px;border:1px solid #d6e6f6;border-radius:15px;background:linear-gradient(145deg,#f8fbff,#eef7ff);text-align:left}
        .domain-icon{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#d9ecff;color:#0a72dd}
        .domain p{margin:0;color:#3b526d;font-size:14px;line-height:1.5}
        .domain strong{display:block;margin-top:2px;color:#086ed7;font-size:15px}
        .secure{margin-top:27px;padding-top:24px;border-top:1px solid #e2eaf3;color:#435a73;font-size:14px;line-height:1.55}
        .help{display:inline-block;margin-top:21px;color:#0873e1;font-size:14px;text-decoration:none;font-weight:700}
        .footer{position:absolute;z-index:10;left:0;right:0;bottom:0;padding:19px 20px;color:rgba(255,255,255,.92);background:linear-gradient(90deg,#082e65,#084d9e);text-align:center;font-size:13px}
        @keyframes spin{to{transform:rotate(360deg)}}
        @media(max-width:1080px){
            .page{grid-template-columns:1fr}
            .brand{min-height:auto;padding:34px 32px 65px}
            .brand-copy{margin-top:34px}
            .campus{max-height:280px}
            .login-side{min-height:auto;padding:42px 24px 55px}
            .footer{position:relative}
        }
        @media(max-width:640px){
            .brand{padding:25px 20px 44px}
            .logo{width:60px;height:68px}
            .brand-name strong{font-size:20px}.brand-name span{font-size:12px;letter-spacing:3px}
            .brand-copy h1{font-size:42px;letter-spacing:-1.4px}
            .brand-copy p{font-size:16px}
            .campus{max-height:210px}
            .login-side{padding:28px 15px 45px}
            .card{padding:31px 19px 28px;border-radius:20px}
            .shield{width:74px;height:74px}
            .card h2{font-size:34px}
            .sub{font-size:15px}
        }

/* Fine tuning to match the supplied reference mockup */
.page{grid-template-columns:52.2% 47.8%;}
.brand{padding-left:7.1vw;padding-right:4.2vw;}
.brand-copy h1,.card h2,.brand-name strong{font-family:Poppins,Inter,Arial,sans-serif;}
.card{max-width:640px;min-height:780px;display:flex;flex-direction:column;justify-content:center;}
.login-side{padding-left:4vw;padding-right:5.4vw;}
.footer{height:60px;display:flex;align-items:center;justify-content:center;}
.card,.domain{transition:transform .25s ease,box-shadow .25s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 34px 82px rgba(27,70,116,.19),inset 0 1px 0 rgba(255,255,255,.95);}
.help:focus-visible{outline:3px solid rgba(11,119,234,.35);outline-offset:5px;border-radius:4px;}
@media(max-height:900px) and (min-width:1081px){.brand{padding-top:34px}.brand-copy{margin-top:25px}.campus{max-height:360px}.card{min-height:auto;padding-top:34px;padding-bottom:32px}.login-side{padding-top:25px;padding-bottom:80px}}