:root { color-scheme:light; font-family:"Segoe UI",Segoe,"Helvetica Neue",Arial,sans-serif; color:#333; background:#fff; }
* { box-sizing:border-box; }
body { min-width:280px; margin:0; }
button,input { font:inherit; }
.page { display:grid; grid-template-columns:332px minmax(0,1fr); min-height:100svh; }
.branding { position:relative; display:flex; align-items:center; justify-content:center; background:#0072c6; }
.sidebar-logo { display:block; width:128px; height:108px; transform:translateY(-115px); }
.content { display:flex; align-items:center; padding:70px 48px 110px 120px; }
.login-panel { width:360px; max-width:100%; transform:translateY(-60px); }
.wordmark { display:flex; align-items:center; gap:10px; height:76px; margin:0 0 38px; color:#0072c6; font-size:56px; line-height:1; font-weight:300; letter-spacing:-1.8px; }
.heading-logo { width:76px; height:65px; flex-shrink:0; }
.field { width:302px; max-width:100%; margin-bottom:21px; }
label { display:block; margin-bottom:5px; color:#666; font-size:12px; font-weight:400; line-height:16px; }
input { display:block; width:100%; height:30px; border:1px solid #98a6b3; border-radius:0; padding:3px 6px; background:#fff; color:#333; font-size:14px; line-height:22px; outline-offset:1px; appearance:none; }
input:hover { border-color:#697c8c; }
input:focus { border-color:#0072c6; outline:1px solid #0072c6; outline-offset:-1px; }
.password-field { margin-bottom:0; }
.sign-in { display:inline-flex; align-items:center; gap:9px; margin:31px 0 0; padding:0; min-height:32px; border:0; border-radius:0; background:transparent; color:#0072c6; font-size:22px; font-weight:400; line-height:30px; cursor:pointer; text-align:left; }
.sign-in:hover { color:#005a9e; }
.sign-in:focus-visible { outline:2px solid #0072c6; outline-offset:5px; }
.sign-in:active { color:#004578; }
.sign-in svg { display:block; flex-shrink:0; }
.notice { width:302px; max-width:100%; margin:12px 0 -13px; color:#c00000; font-size:12px; line-height:19px; }
.noscript-note { max-width:302px; margin-top:18px; color:#666; font-size:12px; line-height:1.5; }
@media(min-width:1600px) { .content { padding-left:160px; } }
@media(max-width:1000px) { .page { grid-template-columns:28% minmax(0,1fr); } .content { padding-left:70px; } .sidebar-logo { width:108px; height:92px; } }
@media(max-width:720px) { .page { grid-template-columns:24% minmax(0,1fr); } .content { padding-left:38px; padding-right:24px; } .sidebar-logo { width:84px; height:72px; } .wordmark { font-size:46px; height:66px; gap:6px; letter-spacing:-1.5px; } .heading-logo { width:65px; height:56px; } }
@media(max-width:520px) { .page { display:block; border-top:5px solid #0072c6; } .branding { display:none; } .content { min-height:calc(100svh - 5px); align-items:flex-start; padding:80px 28px 50px; } .login-panel { width:100%; max-width:360px; margin:0 auto; transform:none; } .wordmark { font-size:48px; height:65px; gap:8px; margin-bottom:35px; } .heading-logo { width:70px; height:59px; } .field { width:100%; margin-bottom:22px; } .password-field { margin-bottom:0; } input { height:36px; font-size:16px; } .sign-in { margin-top:29px; } .notice { width:100%; } }
@media(max-width:340px) { .content { padding-left:22px; padding-right:22px; } .wordmark { font-size:43px; gap:5px; } .heading-logo { width:61px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }