html { min-width:320px; background:var(--suite-navy); scrollbar-gutter:auto; }
body.suite-login { min-height:100dvh; background:var(--suite-navy); color:#fff; }
.login-page { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); border-top:3px solid var(--suite-accent); }

.department-panel {
  display:grid; grid-template-rows:auto 1fr; min-width:0;
  padding:36px clamp(32px,4.4vw,76px) 44px;
  color:#fff;
}
.department-brand { display:flex; align-items:center; gap:24px; }
.department-wordmark { font-size:24px; font-weight:800; letter-spacing:.08em; }
.department-brand>div { min-width:0; padding-left:24px; border-left:1px solid #486071; }
.department-brand h1 { margin:0; font-size:22px; line-height:1.4; font-weight:700; }
.department-brand p { margin:5px 0 0; color:#a7bbc9; font-size:10px; font-weight:600; letter-spacing:.14em; }
.department-story { align-self:center; margin:72px 0 24px; max-width:600px; }
.department-eyebrow { margin:0 0 20px; color:#b9cbd8; font-size:13px; font-weight:600; letter-spacing:.04em; }
.department-story h2 { margin:0; font-size:clamp(32px,3.3vw,52px); line-height:1.45; font-weight:750; letter-spacing:-.025em; }
.department-story h2 span { display:block; }
.department-intro { max-width:33em; margin:24px 0 0; color:#b9cbd8; font-size:15px; line-height:1.95; }
.department-values { display:flex; align-items:center; flex-wrap:wrap; margin:40px 0 0; padding-top:24px; border-top:1px solid #2b4051; color:#a7bbc9; font-size:13px; }
.department-values span+span::before { content:'·'; display:inline-block; padding:0 22px; color:#6c8495; }

.login-side { display:flex; flex-direction:column; align-items:center; min-width:0; padding:48px clamp(28px,4vw,64px) 26px; }
.login-panel { width:100%; max-width:440px; margin:auto 0; padding:36px 32px 38px; background:#fff; color:var(--suite-text); border:1px solid #dce3e9; border-radius:12px; box-shadow:0 18px 48px #09162226; }
.login-department { margin:0 0 14px; color:#2b5fae; font-size:13px; font-weight:650; }
.login-panel h2 { margin:0; color:var(--suite-text); font-size:30px; line-height:1.4; font-weight:700; }
.login-intro { margin:12px 0 28px; color:#647585; font-size:14px; line-height:1.8; }
.login-panel fieldset { min-width:0; margin:0; padding:0; border:0; }
.field-group { display:grid; gap:9px; margin-bottom:22px; }
.field-group label { color:var(--suite-text); font-weight:600; font-size:14px; }
.field-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.field-label span { color:#647585; font-size:12px; }
.field-group small { color:#647585; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.suite-app.suite-login .login-panel .field-group input { width:100%; min-width:0; min-height:48px; padding:11px 13px; font-size:14px; background:#fff; color:var(--suite-text); border-color:#bdcce0; color-scheme:light; }
.suite-login .field-group input::placeholder { color:#65727d; }
.suite-app.suite-login .login-panel :is(input,button):focus-visible { outline:2px solid #658bc0; outline-offset:2px; }
.password-row { position:relative; }
.suite-app.suite-login .login-panel .password-row input { padding-right:70px; }
.toggle-password { position:absolute; top:5px; right:5px; bottom:5px; min-width:54px; padding:0 10px; border:0; border-radius:5px; background:transparent; color:#2b5fae; font:inherit; font-size:12px; cursor:pointer; }
.toggle-password:hover { color:#204e93; background:#eef3fa; }
.suite-login .login-panel .login-submit { width:100%; min-height:50px; margin-top:12px; background:#2b5fae; border-color:#2b5fae; font-size:15px; }
.suite-login .login-panel .login-submit:hover { background:#204e93; border-color:#204e93; }
.login-recovery { margin:-8px 0 14px; color:#647585; font-size:12px; line-height:1.8; }
.login-help { margin-top:22px; }
.login-help>summary { width:fit-content; min-height:36px; margin:auto; padding:6px 10px; border-radius:5px; color:#2b5fae; font-size:14px; line-height:24px; text-align:center; list-style:none; cursor:pointer; }
.login-help>summary::-webkit-details-marker { display:none; }
.login-help>summary:hover { background:#eef3fa; color:#204e93; }
.login-help>p { margin:14px 0 0; padding:16px; border-radius:8px; background:#f5f7fa; color:#526579; font-size:13px; line-height:1.9; }
.login-error { margin-top:16px; padding:12px 14px; border:1px solid #edc8ce; border-radius:8px; background:var(--suite-soft); color:var(--suite-accent-hover); line-height:1.7; overflow-wrap:anywhere; }
.login-footer { margin-top:40px; color:#bec6ce; font-size:11px; letter-spacing:.03em; text-align:center; }

@media (max-width:1000px) and (min-width:821px) {
  .department-panel { padding:32px; }
  .department-brand { align-items:flex-start; flex-direction:column; gap:16px; }
  .department-brand>div { border-left:0; padding-left:0; }
  .login-side { padding-left:32px; padding-right:32px; }
}
@media (max-width:820px) {
  .login-page { grid-template-columns:1fr; }
  .department-panel { padding:24px 28px; }
  .department-brand { gap:18px; }
  .department-wordmark { font-size:21px; }
  .department-brand>div { padding-left:18px; }
  .department-brand h1 { font-size:20px; }
  .department-brand p { font-size:8px; }
  .department-story { margin:26px 0 0; }
  .department-story h2 { font-size:26px; line-height:1.5; }
  .department-intro { margin-top:12px; font-size:13px; }
  .department-eyebrow { margin-bottom:12px; font-size:11px; }
  .department-values { display:none; }
  .login-side { padding:28px 28px 22px; }
  .login-panel { padding:28px 24px; }
  .login-panel h2 { font-size:26px; }
  .login-intro { margin-bottom:26px; }
  .login-footer { margin-top:32px; }
}
@media (max-width:380px) {
  .department-panel { padding:22px; }
  .department-wordmark { font-size:18px; }
  .department-brand { gap:12px; }
  .department-brand>div { padding-left:12px; }
  .department-brand h1 { font-size:18px; }
  .department-brand p { font-size:7px; letter-spacing:.1em; }
  .department-story h2 { font-size:23px; }
  .login-side { padding-left:22px; padding-right:22px; }
  .login-panel { padding:26px 20px; }
}