/* Login and 2FA: presentation-only refresh. */
@media screen {
  body.erp-login {
    display: grid !important;
    grid-template-columns: minmax(320px, .95fr) minmax(360px, 1fr);
    min-height: 100vh; height: auto; margin: 0 !important;
    padding: clamp(20px, 5vw, 64px) !important;
    align-items: center !important; justify-content: center !important;
    gap: clamp(28px, 6vw, 100px);
    color: #233653;
    background: #eff4fb !important;
    font-family: Inter, ui-sans-serif, 'Segoe UI', sans-serif !important;
  }
  body.erp-login .login-brand-panel {
    min-height: 550px; align-self: stretch; display: flex; flex-direction: column;
    justify-content: space-between; padding: clamp(28px,4vw,64px);
    background: linear-gradient(145deg,#142f66,#2f66ca 80%,#4f8ee1);
    border-radius: 26px; color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 25px 55px rgba(28,75,158,.17);
  }
  body.erp-login .login-brand-panel::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; border: 75px solid rgba(255,255,255,.055); top: -230px; right: -210px; }
  body.erp-login .login-brand-panel::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.045); bottom: -130px; right: -70px; }
  body.erp-login .login-brand-logo { display:flex; align-items:center; gap: 13px; font-weight: 750; font-size: 16px; letter-spacing:-.02em; position: relative; z-index: 1; }
  body.erp-login .login-brand-mark { width: 43px; height: 43px; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.28); border-radius: 13px; display:grid; place-items:center; font-weight: 800; font-size: 20px; }
  body.erp-login .login-brand-copy { position: relative; z-index: 1; }
  body.erp-login .login-brand-copy h1 { font-size: clamp(30px,3vw,49px); line-height: 1.13; margin: 0 0 22px; letter-spacing: -.048em; max-width: 540px; }
  body.erp-login .login-brand-copy p { max-width: 420px; font-size: 14px; line-height: 1.85; color: #d8e5ff; }
  body.erp-login .login-brand-foot { position: relative; z-index: 1; color: #c7d7f7; font-size: 11px; }
  body.erp-login .window.login-window {
    width: min(100%, 490px) !important;
    max-width: 100% !important; margin: 0 auto !important;
    border: 1px solid #e4eaf4 !important; border-radius: 21px !important;
    overflow: hidden !important; background: #fff !important;
    box-shadow: 0 19px 50px rgba(30, 54, 98, .075) !important;
  }
  body.erp-login .window.login-window.lebar { width: min(100%, 540px) !important; }
  body.erp-login .title-bar { background: #fff !important; color: #203653 !important; padding: 27px 30px 4px !important; font-size: 17px !important; border: 0 !important; }
  body.erp-login .title-bar .user-badge { font-size: 11px; background: #ecf3ff !important; color: #2856c6 !important; padding: 6px 11px; }
  body.erp-login .login-body { padding: 20px 30px 27px !important; }
  body.erp-login fieldset { background: #fff !important; padding: 18px 0 0 !important; margin: 0 !important; border: 0 !important; }
  body.erp-login legend { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #74849e !important; }
  body.erp-login .form-grid { display: grid; grid-template-columns: 1fr !important; gap: 8px !important; }
  body.erp-login .form-grid label { font-size: 12px !important; font-weight: 600 !important; color: #405271 !important; padding-top: 7px; }
  body.erp-login .form-grid input { height: 45px !important; border: 1px solid #dce5f1 !important; border-radius: 10px !important; padding: 0 13px !important; font-size: 13px !important; background: #fafdff; }
  body.erp-login :is(input, select, button):focus-visible { outline: 2px solid #8ab0f9; outline-offset: 2px; }
  body.erp-login .form-grid input:focus { outline: none !important; border-color: #668de5 !important; box-shadow: 0 0 0 3px rgba(67,108,211,.10); }
  body.erp-login .login-btn-container { margin-top: 25px !important; }
  body.erp-login .btn-primary { background: #2856c6 !important; border: 1px solid #2856c6 !important; border-radius: 10px !important; color: white !important; min-height: 46px !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 9px 20px rgba(40,86,198,.16); }
  body.erp-login .btn-primary:hover { background: #1d439f !important; }
  body.erp-login .btn-tool { border-radius: 8px; padding: 8px 12px; }
  body.erp-login .status-bar { background: #fbfcff !important; border-color: #eaf0f7 !important; padding: 13px 30px !important; color: #8290a4 !important; }
  body.erp-login .status-badge { background: #e9f7f0 !important; color: #18875d !important; border-radius: 999px !important; padding: 5px 10px !important; }
  body.erp-login .error-msg { padding: 12px 14px; border-radius: 9px; }
  body.erp-login .info-msg { padding: 12px 14px; border-radius: 9px; }
  body.erp-login .kode-2fa { border: 1px solid #d6e3f4 !important; border-radius: 10px !important; height: 48px !important; }
  body.erp-login .cadangan span, body.erp-login .secret { border-radius: 7px; }
  @media (max-width: 900px) {
    body.erp-login { display: flex !important; flex-direction: column; padding: 20px !important; gap: 20px !important; }
    body.erp-login .login-brand-panel { width: 100%; min-height: auto; padding: 22px 24px; border-radius: 17px; gap: 18px; }
    body.erp-login .login-brand-copy h1 { font-size: 21px; margin-bottom: 8px; }
    body.erp-login .login-brand-copy p { font-size: 12px; margin: 0; }
    body.erp-login .login-brand-foot { display: none; }
    body.erp-login .login-window { width: min(100%, 540px) !important; }
  }
  @media (max-width: 500px) {
    body.erp-login { padding: 10px !important; }
    body.erp-login .login-brand-panel { padding: 18px; }
    body.erp-login .title-bar { padding: 22px 18px 4px !important; }
    body.erp-login .login-body { padding: 16px 18px 22px !important; }
    body.erp-login .status-bar { padding: 12px 18px !important; }
    body.erp-login .qr-box { flex-wrap: wrap; }
  }
}