/* Megapanel palette and Onest; native authentication markup/behavior retained. */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_mail_brand/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_mail_brand/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light dark;
  --bg: #efefef;
  --card: #ffffff;
  --text: #16191f;
  --muted: #555b65;
  --border: #b0b0b0;
  --input-bg: #f6f6f6;
  --placeholder: #656b73;
  --accent: #0037ad;
  --accent-hover: #002a8a;
  --accent-fg: #ffffff;
  --focus: #0037ad;
  --error: #991b1b;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --success: #086646;
  --success-bg: #e6f7f1;
  --success-border: #a7f3d0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e20;
    --card: #2c2c2e;
    --text: #f5f5f7;
    --muted: #adadb2;
    --border: #737379;
    --input-bg: #252527;
    --placeholder: #adadb2;
    --accent: #4a6a8e;
    --accent-hover: #3a5a7e;
    --focus: #7aacde;
    --error: #fca5a5;
    --error-bg: #2a1a1a;
    --error-border: #5c2929;
    --success: #86efac;
    --success-bg: #0f2a1f;
    --success-border: #1a5640;
  }
}
html { font-family: Onest, system-ui, sans-serif; background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--border) var(--bg);
}
::selection { background: var(--accent); color: var(--accent-fg); }
.card {
  width: 100%;
  max-width: 420px;
  padding: 32px 32px 36px;
  border-radius: 16px;
  background: var(--card);
}
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0 auto 32px;
}
.logo-wrap .default-logo, .logo-wrap .default-logo img { display: block; width: 204px; height: 36px; max-width: 100%; }
.logo-wrap img.custom-logo { display: block; max-width: 220px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 8px; overflow-wrap: anywhere; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; overflow-wrap: anywhere; }
.fields { display: flex; flex-direction: column; gap: 20px; }
.field label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  caret-color: var(--focus);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
  -webkit-appearance: none;
}
input::placeholder { color: var(--placeholder); opacity: 1; }
input:hover { border-color: var(--muted); }
input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
#otp { letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
#device-code { letter-spacing: .15em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.btn {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.btn:hover:not(:disabled), .btn:active:not(:disabled) { background: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:disabled { cursor: wait; opacity: .65; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--error-border); border-radius: 8px; margin-bottom: 20px; background: var(--error-bg); color: var(--error); font-size: 13px; overflow-wrap: anywhere; }
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert.success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
[hidden] { display: none !important; }
@media (max-width: 380px) { body { padding: 20px 12px; } .card { padding: 28px 24px 32px; } }
@media (prefers-reduced-motion: reduce) { input, .btn { transition: none; } }