.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 10%, #edf4ff, transparent 36%), #f3f6fb;
}

.auth-card {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid #e1e9f2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 60px #16395c17;
}

.auth-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 15px;
  background: #e7f0ff;
  color: #1769e8;
  font-size: 17px;
  font-weight: 900;
}

.auth-card h1 { margin: 7px 0 8px; color: #183858; font-size: 26px; }
.auth-description { margin: 0 0 24px; color: #718096; font-size: 13px; line-height: 1.6; }
.auth-card form { display: grid; gap: 14px; }
.auth-card label { display: grid; gap: 7px; color: #415a76; font-size: 13px; font-weight: 700; }
.auth-card input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #cfd9e5; border-radius: 9px; outline: none; font: inherit; }
.auth-card input:focus { border-color: #3282f6; box-shadow: 0 0 0 3px #3282f622; }
.auth-submit { min-height: 46px; border: 0; border-radius: 9px; background: #1672ee; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-error { min-height: 20px; margin: 0; color: #b42318; font-size: 12px; }
.auth-switch { width: 100%; padding: 8px; border: 0; background: transparent; color: #1769e8; font: inherit; cursor: pointer; }
.auth-footnote { display: block; margin-top: 15px; color: #8795a6; font-size: 11px; line-height: 1.6; }
.auth-controls { position: fixed; z-index: 10000; top: 12px; right: 20px; display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 12px; border: 1px solid #e1e9f2; border-radius: 999px; background: #ffffffed; box-shadow: 0 4px 16px #16395c12; }
.auth-user { max-width: 220px; overflow: hidden; color: #718096; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.auth-logout { min-height: 32px; padding: 0 12px; border: 1px solid #cbd9e8; border-radius: 8px; background: #fff; color: #385575; font: inherit; font-size: 12px; cursor: pointer; }
.is-readonly-user [data-hd-update-data],
.is-readonly-user [data-ms-collector-toggle],
.is-readonly-user [data-np-update],
.is-readonly-user [data-np-collector],
.is-readonly-user [data-et-refresh],
.is-readonly-user [data-sf-collector],
.is-readonly-user [data-sf-add],
.is-readonly-user [data-sf-remove] { display: none !important; }

@media (max-width: 600px) {
  .auth-card { padding: 26px 22px; }
  .auth-user { max-width: 130px; }
}