:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body.auth-page { margin: 0; min-height: 100vh; background: #f4f7fb; color: #102038; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1fr); align-items: center; gap: 4rem; max-width: 1120px; margin: auto; padding: 3rem; }
.auth-brand { text-align: center; }
.auth-logos { display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 120px; }
.auth-logos img { width: auto; object-fit: contain; }
.auth-logo-sysnet { height: 84px; max-width: 220px; }
.auth-logo-msai { height: 112px; max-width: 150px; }
.auth-logo-divider { width: 1px; height: 74px; background: #d4dce8; }
.auth-brand h1 { width: min(100%, 430px); margin: 1rem auto 0; font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; }
.auth-brand p { margin: 0; color: #607089; font-size: 1.05rem; }
.auth-card { display: flex; justify-content: center; min-height: 430px; align-items: center; }
.auth-error { max-width: 420px; color: #a51d2d; background: #fff0f1; border: 1px solid #efb6bd; border-radius: .75rem; padding: 1rem; }
.private-login { width: min(100%, 400px); padding: 2rem; border: 1px solid #dce3ed; border-radius: 1rem; background: #fff; box-shadow: 0 20px 50px rgba(23, 38, 61, .14); }
.private-login h2 { margin: 0; font-size: 1.55rem; }
.private-login div p { margin: .35rem 0 1.5rem; color: #607089; }
.private-login label { display: block; margin: 1rem 0 .4rem; font-size: .88rem; font-weight: 700; }
.private-login input { width: 100%; padding: .78rem .85rem; border: 1px solid #bdc9d9; border-radius: .6rem; font: inherit; }
.private-login input:focus { outline: 3px solid rgba(25, 61, 114, .16); border-color: #193d72; }
.private-login button { width: 100%; margin-top: 1.35rem; padding: .78rem; border: 0; border-radius: .6rem; background: #193d72; color: #fff; font-weight: 750; cursor: pointer; }
.private-login small { display: block; margin-top: 1.25rem; text-align: center; color: #718096; }
.simple-account { position: fixed; z-index: 1000; top: 1rem; right: 1rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.simple-account-trigger { display: flex; align-items: center; gap: .55rem; max-width: 210px; padding: .38rem .7rem .38rem .38rem; border: 1px solid #d4dce8; border-radius: 999px; background: #fff; color: #17263d; box-shadow: 0 4px 16px rgba(23, 38, 61, .1); cursor: pointer; }
.simple-account-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #193d72; color: #fff; font-weight: 700; }
.simple-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 650; }
.simple-account-menu { position: absolute; top: calc(100% + .5rem); right: 0; width: 250px; padding: 1rem; border: 1px solid #d4dce8; border-radius: .8rem; background: #fff; color: #17263d; box-shadow: 0 14px 38px rgba(23, 38, 61, .16); }
.simple-account-menu strong, .simple-account-menu span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-account-menu strong { font-size: .95rem; }
.simple-account-menu span { margin-top: .2rem; color: #607089; font-size: .8rem; }
.simple-account-logout { width: 100%; margin-top: 1rem; padding: .65rem .8rem; border: 1px solid #d4dce8; border-radius: .55rem; background: #f6f8fb; color: #9f2131; font-weight: 700; cursor: pointer; }
.simple-account-logout:hover { background: #fff0f1; border-color: #efb6bd; }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1rem; } .auth-logo-sysnet { height: 58px; max-width: 150px; } .auth-logo-msai { height: 76px; max-width: 105px; } .auth-logo-divider { height: 54px; } .auth-card { min-height: 400px; } .simple-account-name { display: none; } .simple-account-trigger { padding-right: .38rem; } }