/* ============================================================================
   Telegram-style authentication pages
   ----------------------------------------------------------------------------
   Tokens below are taken from Telegram Web's own stylesheet where verified:
   accent #3390EC, secondary text #707579, input border #DFE1E5, primary button
   3rem tall / 16px radius / uppercase / weight 500, Roboto as the UI font.
   Dark tokens follow the Telegram Desktop/Web dark palette (#17212B surface,
   #708499 secondary, #64B5EF accent).
   ========================================================================== */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/roboto-latin-var.woff2') format('woff2');
}

:root {
  /* Telegram Web "day" theme (themeController.js) */
  color-scheme: light dark;

  --tg-bg: #ffffff;
  --tg-surface: #ffffff;
  --tg-text: #000000;
  --tg-secondary: #707579;
  --tg-accent: #3390ec;
  --tg-accent-contrast: #ffffff;
  --tg-accent-soft: rgba(51, 144, 236, .12);
  --tg-border: #dfe1e5;
  --tg-border-strong: #c4c9cc;
  --tg-hover: #f4f4f5;
  --tg-danger: #df3f40;
  --tg-danger-soft: rgba(223, 63, 64, .1);
  --tg-success: #70b768;
  --tg-success-soft: rgba(112, 183, 104, .12);
  --tg-shadow: 0 4px 24px rgba(16, 35, 47, .12);

  --tg-radius: 16px;
  --tg-field-h: 54px;
  --tg-btn-h: 48px;

  --tg-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Telegram Web "night" theme: body #181818, card #212121, purple accent. */
@media (prefers-color-scheme: dark) {
  :root {
    --tg-bg: #181818;
    --tg-surface: #212121;
    --tg-text: #ffffff;
    --tg-secondary: #aaaaaa;
    --tg-accent: #8774e1;
    --tg-accent-contrast: #ffffff;
    --tg-accent-soft: rgba(135, 116, 225, .16);
    --tg-border: #0f0f0f;
    --tg-border-strong: #707579;
    --tg-hover: rgba(255, 255, 255, .08);
    --tg-danger: #ff595a;
    --tg-danger-soft: rgba(255, 89, 90, .14);
    --tg-success: #5cc85e;
    --tg-success-soft: rgba(92, 200, 94, .16);
    --tg-shadow: 0 4px 24px rgba(0, 0, 0, .45);
  }
}
html[data-theme="dark"] {
  --tg-bg: #181818;
  --tg-surface: #212121;
  --tg-text: #ffffff;
  --tg-secondary: #aaaaaa;
  --tg-accent: #8774e1;
  --tg-accent-soft: rgba(135, 116, 225, .16);
  --tg-border: #0f0f0f;
  --tg-border-strong: #707579;
  --tg-hover: rgba(255, 255, 255, .08);
  --tg-danger: #ff595a;
  --tg-danger-soft: rgba(255, 89, 90, .14);
  --tg-success: #5cc85e;
  --tg-success-soft: rgba(92, 200, 94, .16);
  --tg-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
/* Telegram Web "tinted" theme. */
html[data-theme="tinted"] {
  --tg-bg: #151e27;
  --tg-surface: #1d2733;
  --tg-text: #ffffff;
  --tg-secondary: #7d8b99;
  --tg-accent: #3685fa;
  --tg-accent-soft: rgba(54, 133, 250, .16);
  --tg-border: #0f151b;
  --tg-border-strong: #7d8b99;
  --tg-hover: rgba(255, 255, 255, .07);
  --tg-danger: #ff595a;
  --tg-danger-soft: rgba(255, 89, 90, .14);
  --tg-success: #61d36b;
  --tg-success-soft: rgba(97, 211, 107, .16);
  --tg-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
/* Telegram Web "light" theme (the lighter variant of day). */
html[data-theme="light"] {
  --tg-bg: #ffffff;
  --tg-surface: #ffffff;
  --tg-text: #333333;
  --tg-secondary: #8c8e91;
  --tg-accent: #2d7ed5;
  --tg-accent-soft: rgba(45, 126, 213, .12);
  --tg-border: #dfe1e5;
  --tg-border-strong: #c4c9cc;
  --tg-hover: #f4f4f5;
  --tg-danger: #df3f40;
  --tg-danger-soft: rgba(223, 63, 64, .1);
  --tg-success: #04ac35;
  --tg-success-soft: rgba(4, 172, 53, .12);
  --tg-shadow: 0 4px 24px rgba(16, 35, 47, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body.auth-body,
body.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--tg-bg);
  transition: background-color .25s ease, color .25s ease;
  color: var(--tg-text);
  font-family: var(--tg-font);
  font-size: 16px;
  line-height: 1.3125;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

a { color: var(--tg-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; border-radius: 8px; }

/* ------------------------------------------------------------- card */
.auth-card {
  width: min(24.5rem, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A panel, not a pasted rectangle: the radius and inset scale with the
     viewport, and the surface only exists while it differs from the page
     (day/light themes are flat, night/tinted show the panel). */
  background: var(--tg-surface);
  border-radius: clamp(16px, 3.2vw, 24px);
  padding: clamp(20px, 4.2vw, 30px) clamp(16px, 4vw, 26px) clamp(24px, 5vw, 34px);
  transition: background-color .25s ease, border-radius .25s ease, padding .25s ease;
}

.auth-logo {
  width: 160px;
  height: 160px;
  margin-bottom: 12px;
}
.auth-logo svg { width: 100%; height: 100%; display: block; }

.auth-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .25s ease, transform .25s ease;
}

.auth-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--tg-text);
}

.auth-sub {
  font-size: 16px;
  line-height: 1.375;
  color: var(--tg-secondary);
  text-align: center;
  margin: 8px 0 24px;
  max-width: 320px;
}
.auth-sub b { font-weight: 500; color: var(--tg-text); }

.auth-link {
  display: block;
  margin-top: 10px;
  padding: 8px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--tg-accent);
  text-align: center;
}
.auth-link.muted { color: var(--tg-secondary); font-weight: 400; margin-top: 4px; }

.auth-terms {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tg-secondary);
  text-align: center;
}

/* ----------------------------------------------------------- fields */
.form-group { width: 100%; margin-bottom: 16px; }

.input-container,
.password-input-container,
.country-selector .cs-trigger {
  width: 100%;
  height: var(--tg-field-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 15px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  background: transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input-container:focus-within,
.password-input-container:focus-within,
.country-selector.open .cs-trigger,
.country-selector .cs-trigger:focus-within {
  border-color: var(--tg-accent);
  box-shadow: inset 0 0 0 1px var(--tg-accent);
}

.country-code {
  font-size: 16px;
  color: var(--tg-text);
  white-space: nowrap;
}

.input-container input,
.password-input-container input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
}
.input-container input::placeholder,
.password-input-container input::placeholder,
.cs-search input::placeholder { color: var(--tg-secondary); }

.password-input-container { position: relative; padding-right: 52px; }

.field-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-secondary);
  cursor: pointer;
}
.field-icon:hover { background: var(--tg-hover); color: var(--tg-text); }

.eye-icon .eye-slash { display: none; }
.password-input-container.revealed .eye-icon .eye-open { display: none; }
.password-input-container.revealed .eye-icon .eye-slash { display: block; }

.hint-text {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--tg-secondary);
  text-align: center;
}

/* ------------------------------------------------- country dropdown */
.country-selector { position: relative; width: 100%; }
.country-selector .cs-trigger { cursor: pointer; gap: 10px; }

.cs-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--tg-hover);
}
.cs-name { flex: 1; font-size: 16px; color: var(--tg-text); text-align: left; }
.cs-code { font-size: 16px; color: var(--tg-secondary); }
.cs-arrow { width: 22px; height: 22px; color: var(--tg-secondary); flex: none; }

.cs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  box-shadow: var(--tg-shadow);
  overflow: hidden;
}
.country-selector.open .cs-panel { display: block; }

.cs-search {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tg-surface);
  border-bottom: 1px solid var(--tg-border);
}
.cs-search-icon { width: 20px; height: 20px; color: var(--tg-secondary); flex: none; }
.cs-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
}
.cs-clear {
  border: none;
  background: transparent;
  color: var(--tg-secondary);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.cs-clear:hover { background: var(--tg-hover); color: var(--tg-text); }
.cs-clear svg { width: 18px; height: 18px; }

.cs-list { max-height: 300px; overflow-y: auto; padding: 4px 0; }
.cs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 16px;
}
.cs-item:hover, .cs-item:focus-visible { background: var(--tg-hover); }
.cs-item.active { color: var(--tg-accent); }
.cs-item .cs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-item .cs-code { color: var(--tg-secondary); }
.cs-item.active .cs-code { color: var(--tg-accent); }
.cs-empty { padding: 18px 14px; text-align: center; color: var(--tg-secondary); font-size: 15px; }

/* ---------------------------------------------------------- buttons */
.button {
  width: 100%;
  height: var(--tg-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--tg-radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
  user-select: none;
}
.button-text { display: inline-flex; align-items: center; gap: 8px; }
.button.primary {
  background: var(--tg-accent);
  color: var(--tg-accent-contrast);
}
.button.primary:hover { filter: brightness(1.06); }
.button.primary:active { filter: brightness(.94); transform: translateY(1px); }
.button.primary:disabled { opacity: .55; cursor: default; transform: none; }
.button.text {
  height: 40px;
  background: transparent;
  color: var(--tg-accent);
}
.button.text:hover { background: var(--tg-hover); }

/* -------------------------------------------------------- code input */
.code-input-container {
  position: relative;
  width: 100%;
  height: var(--tg-field-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.code-input-container:focus-within {
  border-color: var(--tg-accent);
  box-shadow: inset 0 0 0 1px var(--tg-accent);
}
.verification-code {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: transparent;
  color: transparent;
  font-size: 16px;
  caret-color: transparent;
  cursor: text;
}
.code-digits {
  display: flex;
  gap: 12px;
  pointer-events: none;
}
.code-digit {
  width: 22px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 400;
  color: var(--tg-text);
  border-bottom: 2px solid var(--tg-border);
  transition: border-color .15s ease;
}
.code-digit.filled { border-bottom-color: var(--tg-border-strong); }
.code-digit.active { border-bottom-color: var(--tg-accent); }

.code-expiration {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  color: var(--tg-secondary);
}
.code-expiration.expired { color: var(--tg-danger); }

/* ------------------------------------------------------------ errors */
.error-message {
  width: 100%;
  margin: -4px 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--tg-danger-soft);
  color: var(--tg-danger);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.error-message.success {
  background: var(--tg-success-soft);
  color: var(--tg-success);
}

/* ---------------------------------------------------------------- QR */
.qr-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 100%;
  padding: 8px;
  margin: 4px auto 18px;
  background: #ffffff;
  border-radius: var(--tg-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.qr-image { width: 100%; height: 100%; display: block; border-radius: 10px; }

.qr-expired {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--tg-radius);
  background: rgba(255, 255, 255, .94);
  color: #707579;
  font-size: 16px;
}
html[data-theme="dark"] .qr-expired { background: rgba(33, 33, 33, .94); }
html[data-theme="tinted"] .qr-expired { background: rgba(29, 39, 51, .94); }
@media (prefers-color-scheme: dark) {
  .qr-expired { background: rgba(33, 33, 33, .94); }
}

.qr-status {
  font-size: 15px;
  color: var(--tg-secondary);
  text-align: center;
  min-height: 20px;
}
.qr-status.error { color: var(--tg-danger); }

.qr-steps {
  list-style: none;
  width: 100%;
  margin: 14px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* One line per instruction: the QR panel is a little wider on desktop and the
   text is set at Telegram's 14px, so neither sentence wraps mid-way. */
.qr-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--tg-secondary);
  text-align: left;
  white-space: nowrap;
}
.qr-steps li b { font-weight: 500; color: var(--tg-text); }
@media (min-width: 601px) {
  html[data-auth-mode="qr"] .auth-card { width: min(28rem, 100%); }
}
.qr-step-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tg-hover);
  color: var(--tg-text);
  font-size: 12px;
  font-weight: 500;
}

/* Pre-paint auth step (see js/auth-boot.js): desktop opens on QR, mobile on
   phone. Higher specificity than `.hidden` so the first paint is already the
   right step instead of flashing the phone form. */
html[data-auth-mode="qr"] #phoneNumberPage { display: none; }
html[data-auth-mode="qr"] #qrPage.hidden { display: flex !important; }

.qr-loading {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff;
}
.qr-loading .spinner { width: 30px; height: 30px; }

#qrPasswordWrap { width: 100%; margin-top: 4px; }
#qrPasswordWrap .password-input-container { margin-bottom: 12px; }

/* ------------------------------------------------------------ success */
/* Same shape as the other steps: the brand mark on top, then a compact
   confirmation block (check, title, the configurable message, progress). */
#successPage { justify-content: center; }
#successPage .success-container {
  color: var(--tg-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#successPage .success-container svg { width: 44px; height: 44px; display: block; }
#successPage .auth-title { font-size: 24px; margin-top: 6px; }
#successPage .auth-sub { margin: 4px 0 0; font-size: 15px; }
#successPage .success-message { width: 100%; margin-top: 18px; }
#successPage .auth-terms { margin-top: 12px; }
.success-message { width: 100%; margin-top: 20px; }
.progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--tg-hover);
  overflow: hidden;
}
.progress-fill {
  width: 0;
  height: 100%;
  background: var(--tg-accent);
  transition: width .1s linear;
}

/* ------------------------------------------------------------ overlay */
#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(3px);
  color: var(--tg-secondary);
  font-size: 15px;
  opacity: 0;
  transition: opacity .25s ease;
}
html[data-theme="dark"] #loadingOverlay { background: rgba(24, 24, 24, .82); }
html[data-theme="tinted"] #loadingOverlay { background: rgba(21, 30, 39, .82); }
@media (prefers-color-scheme: dark) {
  #loadingOverlay { background: rgba(24, 24, 24, .82); }
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--tg-border);
  border-top-color: var(--tg-accent);
  animation: tg-spin .8s linear infinite;
}
@keyframes tg-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ panel login */
.login-card {
  width: 380px;
  max-width: 100%;
  padding: 32px 28px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow);
  text-align: center;
}
.login-logo { display: flex; justify-content: center; color: var(--tg-accent); margin-bottom: 10px; }
.login-card h1 { font-size: 26px; font-weight: 500; margin-bottom: 4px; }
.login-sub { color: var(--tg-secondary); font-size: 15px; margin-bottom: 22px; }
.login-card label { display: block; text-align: left; font-size: 14px; color: var(--tg-secondary); margin: 14px 0 6px; }
.login-card input {
  width: 100%;
  height: var(--tg-field-h);
  padding: 0 15px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  background: transparent;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
}
.login-card input:focus {
  outline: none;
  border-color: var(--tg-accent);
  box-shadow: inset 0 0 0 1px var(--tg-accent);
}
.btn-primary {
  width: 100%;
  height: var(--tg-btn-h);
  margin-top: 18px;
  border: none;
  border-radius: var(--tg-radius);
  background: var(--tg-accent);
  color: var(--tg-accent-contrast);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--tg-secondary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--tg-text); }
.login-msg { margin-top: 14px; font-size: 14px; min-height: 18px; color: var(--tg-secondary); }
.login-msg.err { color: var(--tg-danger); }

.alert {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 8px 0;
  text-align: left;
}
.alert.err { background: var(--tg-danger-soft); color: var(--tg-danger); }
.alert.info { background: var(--tg-accent-soft); color: var(--tg-accent); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 600px) {
  body.auth-body {
    align-items: flex-start;
    padding: 32px 24px calc(24px + env(safe-area-inset-bottom));
  }
  /* Full-bleed on phones: the page itself is the surface, so there is no
     floating panel around the form. */
  .auth-card {
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .auth-logo { width: 120px; height: 120px; margin-top: 8px; }
  .auth-title { font-size: 26px; }
  .auth-sub { font-size: 15px; margin-bottom: 20px; }
  .qr-wrap { width: 240px; height: 240px; }
  .qr-expired { font-size: 15px; }
  .qr-steps li { font-size: 13px; }
  .auth-link { padding: 11px 4px; }
}
@media (max-width: 360px) {
  .qr-steps li { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .spinner { animation: none; border-top-color: var(--tg-accent); }
}