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

:root {
  --be-navy:        #223458;
  --be-navy-deep:   #16223d;
  --be-navy-rail:   #101a30;
  --be-accent:      #5463F2;
  --be-accent-deep: #3B49D6;
  --be-accent-soft: #EEF0FE;
  --be-ink:         #1F2733;
  --be-muted:       #7C8798;
  --be-line:        #E8EBF1;
  --be-bg:          #F4F6FA;
  --be-field:       #F6F7FB;
  --be-danger:      #D64550;
  --be-danger-soft: #FDEEEF;
  --be-ok:          #1F9D6B;

  --be-r-card:  28px;
  --be-r-field: 14px;
  --be-r-pill:  999px;

  --be-shadow:      0 1px 2px rgba(20,30,55,.04), 0 24px 60px rgba(20,30,55,.14);
  --be-shadow-soft: 0 1px 3px rgba(20,30,55,.06), 0 10px 28px rgba(20,30,55,.08);

  --be-logo-h: 76px;
  --be-logo-w: 260px;
  --be-brand-image: none;

  --be-brand-scrim: linear-gradient(165deg, rgba(22,34,61,.72) 0%, rgba(16,26,48,.88) 100%);

  --be-brand-position: center;
  --be-brand-size: cover;
  --be-brand-grid: .85;
  --be-brand-bloom: 1;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: #525d68;
  background-image:
    radial-gradient(900px 460px at 12% -6%,  rgba(84,99,242,.10), transparent 62%),
    radial-gradient(760px 420px at 92% 104%, rgba(34,52,88,.10),  transparent 60%);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--be-ink);
  -webkit-font-smoothing: antialiased;
}

.auth-card {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: var(--be-r-card);
  box-shadow: var(--be-shadow);
  overflow: hidden;
  animation: be-rise .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes be-rise {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

.auth-brand {
  position: relative;
  padding: 52px 44px 40px;
  color: #fff;
  background-color: var(--be-navy-deep);
  background-image:
    var(--be-brand-scrim),                 /* 1. readability scrim      */
    var(--be-brand-image),                 /* 2. your photo (or none)   */
    linear-gradient(158deg, var(--be-navy) 0%, var(--be-navy-deep) 58%, var(--be-navy-rail) 100%);
  background-size: cover, var(--be-brand-size), cover;
  background-position: center, var(--be-brand-position), center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: rotate(-8deg);
  opacity: var(--be-brand-grid);
}
.auth-brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px; height: 420px;
  right: -140px; bottom: -170px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(84,99,242,.55), transparent 68%);
  filter: blur(6px);
  opacity: var(--be-brand-bloom);
}

.brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px 7px 10px;
  border-radius: var(--be-r-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.brand-eyebrow i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6FE3B0;
  box-shadow: 0 0 0 3px rgba(111,227,176,.22);
}

.brand-copy { margin-top: 34px; }
.brand-copy h1 {
  font-size: 34px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.022em;
  margin: 0 0 12px;
  color: #fff;
  text-wrap: balance;
}
.brand-copy p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 34ch;
  margin: 0;
}

.brand-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.brand-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.86);
  list-style: none;
}
.brand-points span.dot {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
}
.brand-points svg { width: 15px; height: 15px; stroke: #fff; opacity: .9; }

.brand-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  color: rgba(255,255,255,.58);
}
.brand-foot strong { color: rgba(255,255,255,.86); font-weight: 600; }

.auth-pane {
  padding: 46px 52px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-plate {
  height: var(--be-logo-h);
  max-width: var(--be-logo-w);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 0 26px;
}
.logo-plate img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.logo-plate.is-landscape { --be-logo-h:  76px; --be-logo-w: 280px; }
.logo-plate.is-square    { --be-logo-h:  96px; --be-logo-w: 150px; }
.logo-plate.is-portrait  { --be-logo-h: 128px; --be-logo-w: 150px; }
.logo-plate.is-centered { margin-left: auto; margin-right: auto; }

.auth-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--be-ink);
  margin: 0 0 6px;
}
.auth-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--be-muted);
  margin: 0 0 26px;
  line-height: 1.55;
}

.field { margin-bottom: 18px; border-bottom: none; }

.field > label,
.field .label-input100 {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--be-ink);
  padding: 0 0 8px 2px;
  line-height: 1.2;
}

.field-control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--be-field);
  border: 1.5px solid transparent;
  border-radius: var(--be-r-field);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field-control:hover { background: #F1F3F9; }
.field-control:focus-within {
  background: #fff;
  border-color: var(--be-accent);
  box-shadow: 0 0 0 4px rgba(84,99,242,.13);
}

.field-icon {
  width: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.field-icon svg {
  width: 18px; height: 18px;
  stroke: #9AA4B4;
  transition: stroke .18s ease;
}
.field-control:focus-within .field-icon svg { stroke: var(--be-accent); }

.field-control .input100,
.field-control input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 8px 0 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--be-ink);
  letter-spacing: .01em;
}
.field-control input::placeholder { color: #A9B1BE; font-weight: 400; }
.field-control input:-webkit-autofill {
  -webkit-text-fill-color: var(--be-ink);
  -webkit-box-shadow: 0 0 0 60px #F6F7FB inset;
  transition: background-color 5000s ease-in-out 0s;
}
.pw-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-right: 4px;
  border: none;
  border-radius: 11px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #9AA4B4;
  transition: background .16s ease, color .16s ease;
}
.pw-toggle:hover  { background: rgba(84,99,242,.09); color: var(--be-accent); }
.pw-toggle:active { transform: scale(.94); }
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(84,99,242,.32);
  color: var(--be-accent);
}
.pw-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.pw-toggle .icon-off { display: none; }
.pw-toggle[aria-pressed="true"] .icon-on  { display: none; }
.pw-toggle[aria-pressed="true"] .icon-off { display: block; }
.pw-toggle[aria-pressed="true"] { color: var(--be-accent); }

.caps-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: #B0740E;
}
.caps-hint.is-on { display: flex; }
.caps-hint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

.field-msg {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 2px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--be-danger);
}
.field-msg svg { width: 13px; height: 13px; flex: 0 0 13px; stroke: currentColor; fill: none; }

.field.has-error .field-control {
  border-color: var(--be-danger);
  background: var(--be-danger-soft);
}
.field.has-error .field-control:focus-within {
  box-shadow: 0 0 0 4px rgba(214,69,80,.14);
}
.field.has-error .field-icon svg { stroke: var(--be-danger); }
.field.has-error .field-msg { display: flex; animation: be-msg-in .22s ease both; }

@keyframes be-msg-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.form-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  margin: 0 0 20px;
  border-radius: var(--be-r-field);
  background: var(--be-danger-soft);
  border: 1px solid rgba(214,69,80,.22);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #9E2B34;
}
.form-alert.is-visible { display: flex; animation: be-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
.form-alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; stroke: var(--be-danger); fill: none; }
.form-alert strong { font-weight: 700; }

@keyframes be-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.login100-form .error {
  display: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--be-danger);
  margin-top:20px;
  text-align: center;
  padding-left: 3px;
}
.alert-validate::before,
.alert-validate::after { display: none !important; content: none !important; }

.field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 26px;
}
.remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--be-muted);
  cursor: pointer;
  user-select: none;
}
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .box {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid #CBD2DE;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all .16s ease;
}
.remember .box svg { width: 11px; height: 11px; stroke: #fff; fill: none; opacity: 0; transition: opacity .16s ease; }
.remember input:checked + .box { background: var(--be-accent); border-color: var(--be-accent); }
.remember input:checked + .box svg { opacity: 1; }
.remember input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(84,99,242,.28); }

a#forgot-password {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-accent);
  text-decoration: none;
  transition: color .16s ease;
}
a#forgot-password:hover { color: var(--be-accent-deep); text-decoration: underline; }

.login100-form-btn.login-button,
.be-btn {
  position: relative;
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: none;
  border-radius: var(--be-r-pill);
  background: var(--be-navy) !important;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(84,99,242,.30);
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease;
}
.login100-form-btn.login-button:hover,
.be-btn:hover {
  background: var(--be-navy-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(84,99,242,.36);
}
.login100-form-btn.login-button:active,
.be-btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(84,99,242,.28); }
.login100-form-btn.login-button:focus-visible,
.be-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(84,99,242,.34); }
.login100-form-btn.login-button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.login100-form-btn.login-button.is-busy { pointer-events: none; opacity: .72; }

.auth-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 20px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: #9AA4B4;
}
.auth-note svg { width: 13px; height: 13px; flex: 0 0 13px; stroke: currentColor; fill: none; }

#login-modal .modal-dialog,
#login-alert-modal .modal-dialog { max-width: 460px; }

#login-modal .modal-content,
#login-alert-modal .modal-content {
  border: none;
  border-radius: var(--be-r-card);
  box-shadow: var(--be-shadow);
  overflow: hidden;
}
#login-modal .modal-body { padding: 0; }

.portal-card { font-family: 'Inter', sans-serif; }

.portal-card__head {
  position: relative;
  padding: 30px 30px 26px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid var(--be-line);
}
.portal-card__head h5 {
  margin: 20px 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--be-ink);
}
.portal-card__head p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--be-muted);
}

.portal-list {
  list-style: none;
  margin: 0;
  padding: 12px;
  max-height: 52vh;
  overflow-y: auto;
}
.portal-list::-webkit-scrollbar { width: 8px; }
.portal-list::-webkit-scrollbar-thumb { background: #DFE3EC; border-radius: 8px; }

.portal-list .select-portal,
.portal-list .list-group-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  margin: 0 0 8px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: var(--be-field);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.portal-list .select-portal:last-child { margin-bottom: 0; }
.portal-list .select-portal:hover {
  background: #fff;
  border-color: var(--be-accent);
  transform: translateX(2px);
  box-shadow: var(--be-shadow-soft);
}
.portal-list .select-portal:focus-visible {
  outline: none;
  border-color: var(--be-accent);
  box-shadow: 0 0 0 4px rgba(84,99,242,.16);
}

.portal-mono {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--be-navy) 0%, #34497A 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.portal-list .select-portal:hover .portal-mono {
  background: linear-gradient(150deg, var(--be-accent) 0%, var(--be-accent-deep) 100%);
}

.portal-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--be-ink) !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-name small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--be-muted);
  margin-top: 2px;
}

.portal-go {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  stroke: #B4BCCA;
  fill: none;
  transition: stroke .16s ease, transform .16s ease;
}
.portal-list .select-portal:hover .portal-go { stroke: var(--be-accent); transform: translateX(3px); }

.portal-card__foot {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--be-line);
  text-align: center;
}
.portal-card__foot a {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--be-muted);
  text-decoration: none;
}
.portal-card__foot a:hover { color: var(--be-danger); }

.portal-empty {
  padding: 34px 24px;
  text-align: center;
}
.portal-empty svg { width: 40px; height: 40px; stroke: #C3CAD7; fill: none; margin-bottom: 12px; }
.portal-empty h6 { font-size: 15px; font-weight: 700; color: var(--be-ink); margin: 0 0 4px; }
.portal-empty p  { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--be-muted); margin: 0; }

#login-alert-modal .modal-header {
  border: none;
  padding: 24px 26px 6px;
}
#login-alert-modal .modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--be-ink);
}
#login-alert-modal .modal-body { padding: 6px 26px 20px; }
#login-alert-modal .modal-footer { border: none; padding: 0 26px 20px; }

.forgot-panel { padding: 32px 30px 30px; font-family: 'Inter', sans-serif; }
.forgot-panel h5 {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  color: var(--be-ink); margin: 0 0 6px;
}
.forgot-panel p.hint {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--be-muted); line-height: 1.55; margin: 0 0 22px;
}
.forgot-panel .be-btn { height: 48px; font-size: 14px; }
.forgot-result {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--be-r-field);
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
.forgot-result.is-ok   { background: #EAF7F1; border: 1px solid rgba(31,157,107,.25); color: #14764F; }
.forgot-result.is-fail { background: var(--be-danger-soft); border: 1px solid rgba(214,69,80,.22); color: #9E2B34; }
.forgot-result svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; stroke: currentColor; fill: none; }

#loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(244,246,250,.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#loading-message {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--be-navy);
  margin: 0;
}
.lds-ellipsis { position: relative; width: 72px; height: 26px; margin: unset; }
.lds-ellipsis div {
  position: absolute;
  top: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--be-accent);
  animation-timing-function: cubic-bezier(0,1,1,0);
}
.lds-ellipsis div:nth-child(1) { left: 6px;  animation: lds-e1 .6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 6px;  animation: lds-e2 .6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 26px; animation: lds-e2 .6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 46px; animation: lds-e3 .6s infinite; }
@keyframes lds-e1 { 0% { transform: scale(0);} 100% { transform: scale(1);} }
@keyframes lds-e3 { 0% { transform: scale(1);} 100% { transform: scale(0);} }
@keyframes lds-e2 { 0% { transform: translate(0,0);} 100% { transform: translate(20px,0);} }

.auth-card.is-single {
  grid-template-columns: 1fr;
  max-width: 470px;
}
.auth-card.is-single .auth-pane {
  padding: 46px 44px 40px;
  text-align: center;
  align-items: center;
}
.auth-card.is-single .logo-plate { margin-left: auto; margin-right: auto; }
.auth-card.is-single .auth-sub { margin-bottom: 0; }


.status-badge {
  width: 74px; height: 74px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: be-pop .45s cubic-bezier(.2,.8,.3,1.2) both;
}
.status-badge svg { width: 32px; height: 32px; stroke-width: 2.4; fill: none; }

.status-badge.is-success { background: #E8F7F0; box-shadow: 0 0 0 8px rgba(31,157,107,.07); }
.status-badge.is-success svg { stroke: var(--be-ok); }

.status-badge.is-notice  { background: var(--be-accent-soft); box-shadow: 0 0 0 8px rgba(84,99,242,.07); }
.status-badge.is-notice svg { stroke: var(--be-accent); }

.status-badge.is-error   { background: var(--be-danger-soft); box-shadow: 0 0 0 8px rgba(214,69,80,.07); }
.status-badge.is-error svg { stroke: var(--be-danger); }

@keyframes be-pop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

.status-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--be-ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.status-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--be-muted);
  margin: 0 auto 26px;
  max-width: 34ch;
}
.status-text strong { color: var(--be-ink); font-weight: 600; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 14px;
  margin: 0 0 22px;
  border-radius: var(--be-r-pill);
  background: var(--be-field);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--be-navy);
  word-break: break-all;
}
.status-chip svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: var(--be-muted); fill: none; }

.status-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.auth-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-accent);
  text-decoration: none;
}
.auth-link:hover { color: var(--be-accent-deep); text-decoration: underline; }
.auth-link.is-quiet { color: var(--be-muted); font-weight: 500; }
.auth-link.is-quiet:hover { color: var(--be-navy); }

.be-btn.is-ghost {
  background: #fff !important;
  color: var(--be-navy);
  border: 1.5px solid var(--be-line);
  box-shadow: none;
}
.be-btn.is-ghost:hover {
  background: var(--be-field) !important;
  color: var(--be-navy);
  border-color: #D8DEE9;
  box-shadow: none;
}

a.login100-form-btn.login-button,
a.be-btn { text-decoration: none; }
a.login100-form-btn.login-button:hover,
a.be-btn:hover { color: #fff; text-decoration: none; }
a.be-btn.is-ghost:hover { color: var(--be-navy); }

.pw-rules {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--be-r-field);
  background: var(--be-field);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--be-muted);
  transition: color .18s ease;
}
.pw-rules li .mark {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  border: 1.5px solid #CBD2DE;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all .18s ease;
}
.pw-rules li .mark svg { width: 9px; height: 9px; stroke: #fff; fill: none; opacity: 0; transition: opacity .18s ease; }
.pw-rules li.is-ok { color: #14764F; }
.pw-rules li.is-ok .mark { background: var(--be-ok); border-color: var(--be-ok); }
.pw-rules li.is-ok .mark svg { opacity: 1; }
.pw-rules li.is-bad .mark { border-color: var(--be-danger); }
.pw-rules li.is-bad { color: var(--be-danger); }
.pw-rules li.is-wide { grid-column: 1 / -1; }

.show-pw {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--be-muted);
  cursor: pointer;
  user-select: none;
}
.show-pw input { position: absolute; opacity: 0; pointer-events: none; }
.show-pw .box {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid #CBD2DE;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all .16s ease;
}
.show-pw .box svg { width: 11px; height: 11px; stroke: #fff; fill: none; opacity: 0; transition: opacity .16s ease; }
.show-pw input:checked + .box { background: var(--be-accent); border-color: var(--be-accent); }
.show-pw input:checked + .box svg { opacity: 1; }
.show-pw input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(84,99,242,.28); }
.show-pw:hover { color: var(--be-navy); }

.field-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 2px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #14764F;
}
.field-hint.is-visible { display: flex; }
.field-hint svg { width: 13px; height: 13px; flex: 0 0 13px; stroke: currentColor; fill: none; }

.field-control.is-locked { background: #F1F3F9; }
.field-control.is-locked input { color: var(--be-navy); cursor: default; text-overflow: ellipsis; }
.field-control.is-locked:focus-within { border-color: transparent; box-shadow: none; background: #F1F3F9; }
.lock-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--be-muted);
}
.lock-note svg { width: 11px; height: 11px; stroke: currentColor; fill: none; }

.has-error .field-control { border-color: var(--be-danger); background: var(--be-danger-soft); }
.invalid-password {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--be-danger);
  margin: 8px 0 0 2px;
}
.btnDisabled, .be-btn:disabled, .login100-form-btn:disabled {
  background: #B9C0E9 !important;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.logo-container{
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .auth-shell { padding: 0; align-items: stretch; }
  .auth-card {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    align-content: start;
  }
  .auth-brand {
    padding: 30px 28px 34px;
    border-radius: 0 0 30px 30px;
  }
  .brand-copy { margin-top: 20px; }
  .brand-copy h1 { font-size: 25px; }
  .brand-copy p  { font-size: 13.5px; max-width: none; }
  .brand-points, .brand-foot { display: none; }
  .auth-pane { padding: 30px 26px 40px; }
  .logo-plate { margin-left: auto; margin-right: auto; }
  .logo-plate.is-landscape { --be-logo-h:  60px; --be-logo-w: 215px; }
  .logo-plate.is-square    { --be-logo-h:  78px; --be-logo-w: 125px; }
  .logo-plate.is-portrait  { --be-logo-h: 104px; --be-logo-w: 125px; }
  .auth-title, .auth-sub { text-align: center; }
  .auth-sub { margin-bottom: 22px; }

  .auth-shell.is-status { padding: 24px 18px; align-items: center; }
  .auth-card.is-single {
    min-height: 0;
    border-radius: var(--be-r-card);
    box-shadow: var(--be-shadow);
  }
  .auth-card.is-single .auth-pane { padding: 34px 26px 32px; }
}

@media (max-width: 560px) {
  .auth-brand { padding: 26px 22px 30px; }
  .brand-copy h1 { font-size: 22px; }
  .auth-pane { padding: 26px 20px 36px; }
  .field-control .input100, .field-control input { height: 50px; font-size: 15px; }
  .field-meta { flex-direction: row; flex-wrap: wrap; }
  #login-modal .modal-dialog { margin: 12px; }
  .portal-list { max-height: 60vh; }
  .pw-rules { grid-template-columns: 1fr; }
  .status-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card, .form-alert.is-visible, .field.has-error .field-msg, .status-badge { animation: none !important; }
  * { transition-duration: .01ms !important; }
}