:root {
  color-scheme: light;
  --auth-ink: #202638;
  --auth-muted: #778198;
  --auth-line: #dfe5f0;
  --auth-blue: #6894ed;
  --auth-blue-dark: #4b78d3;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  color: var(--auth-ink);
  background:
    radial-gradient(ellipse at 12% 10%, rgba(176, 186, 247, .21), transparent 36%),
    radial-gradient(ellipse at 91% 82%, rgba(112, 215, 211, .16), transparent 34%),
    linear-gradient(140deg, #f4f4ff 0%, #f4f8ff 55%, #effcfb 100%);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.auth-shell { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--auth-ink); text-decoration: none; }
.auth-brand:hover { text-decoration: none; }
.auth-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7656d8, #3477db); font-size: 20px; font-weight: 800; }
.auth-brand strong, .auth-brand small { display: block; line-height: 1.2; }
.auth-brand strong { font-size: 16px; }
.auth-brand small { margin-top: 4px; color: var(--auth-muted); font-size: 12px; }
.auth-card { width: 100%; padding: 27px 25px 25px; border: 1px solid rgba(227, 232, 244, .9); border-radius: 15px; background: rgba(255, 255, 255, .9); box-shadow: 0 14px 40px rgba(53, 68, 106, .1); }
.auth-card h1 { margin: 0 0 20px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-size: 13px; font-weight: 600; }
.auth-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--auth-line); border-radius: 7px; background: #fff; color: var(--auth-ink); font: inherit; outline: none; }
.auth-field input:focus { border-color: #8ba9ed; box-shadow: 0 0 0 3px rgba(104, 148, 237, .14); }
.auth-field input::placeholder { color: #a3adbf; }
.auth-submit { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 9px 14px; border: 0; border-radius: 7px; background: var(--auth-blue); color: #fff; text-align: center; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.auth-submit:hover { background: var(--auth-blue-dark); color: #fff; text-decoration: none; }
.auth-submit-link { margin-top: 16px; }
.auth-consent { display: flex; align-items: flex-start; gap: 8px; color: #768095; font-size: 11px; line-height: 1.45; }
.auth-consent input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #648be2; }
.auth-consent a, .auth-switch a { color: #4d70b7; text-decoration: underline; }
.auth-note { margin: 14px 0 0; color: var(--auth-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.auth-note-main { font-size: 13px; }
.auth-switch { margin: 19px 0 0; color: #68748b; font-size: 12px; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 15px; color: #98a1b1; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--auth-line); }
.telegram-widget { min-height: 42px; display: flex; justify-content: center; }
.auth-error { color: #b33d4a; font-size: 12px; }
.auth-error ul { margin: 0; padding-left: 18px; }
.auth-messages { margin: 0 0 15px; }
.auth-message { margin: 0; padding: 9px 11px; border-radius: 7px; background: #eef2fa; color: #53607a; font-size: 12px; }
.auth-message + .auth-message { margin-top: 7px; }
.auth-message.success { background: #e7f5ed; color: #26744a; }
.auth-message.error { background: #fff0f0; color: #a73844; }
.auth-message.warning { background: #fff5df; color: #805d11; }
.account-email { margin: 0 0 5px; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.account-status { margin: 0 0 12px; color: #26744a; font-size: 13px; }
.account-telegram { padding-top: 13px; border-top: 1px solid var(--auth-line); }
.account-logout { margin-top: 20px; }
.auth-secondary { width: 100%; min-height: 40px; border: 1px solid var(--auth-line); border-radius: 7px; background: #fff; color: #546078; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.auth-secondary:hover { background: #f7f8fc; }

@media (max-width: 420px) {
  body.auth-page { padding: 20px 14px; }
  .auth-card { padding: 23px 19px; }
}