/* XChat Login V7 — compact retro-glam production login.
   Scoped to html.xc-login-v7-page so it cannot leak into the chat room. */
html.xc-login-v7-page,
html.xc-login-v7-page body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
html.xc-login-v7-page body { min-height: 100dvh; overflow-x: hidden; }
html.xc-login-v7-page #app {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
html.xc-login-v7-page {
  --page: #020307;
  --panel: #06113a;
  --panel-deep: #030923;
  --ink: #f4f8ff;
  --muted: #8fa6c7;
  --ice: #dff7ff;
  --blue: #65c8ff;
  --blue-2: #205bd6;
  --line: rgba(158, 220, 255, .88);
  --line-soft: rgba(105, 170, 255, .38);
  --gold: #c6a66c;
  --red: #d31b2a;
}

html.xc-login-v7-page * { box-sizing: border-box; }

html.xc-login-v7-page, html.xc-login-v7-page body { min-height: 100%; }
html.xc-login-v7-page { overflow-x: clip; }

html.xc-login-v7-page body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 45%, rgba(11, 25, 70, .30), transparent 28%),
    radial-gradient(circle at 40% 46%, rgba(19, 74, 133, .08), transparent 36%),
    #000;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.xc-login-v7-page button, html.xc-login-v7-page input { font: inherit; }

html.xc-login-v7-page a { color: inherit; }

html.xc-login-v7-page .page-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 34px 18px;
}

html.xc-login-v7-page .login-stage {
  position: relative;
  width: min(760px, 96vw);
  height: 590px;
  isolation: isolate;
}

html.xc-login-v7-page .ambient {
  position: absolute;
  pointer-events: none;
  filter: blur(34px);
  opacity: .22;
  border-radius: 50%;
  z-index: -2;
}

html.xc-login-v7-page .ambient--blue {
  width: 420px;
  height: 250px;
  left: 105px;
  top: 145px;
  background: #0d5cff;
}

html.xc-login-v7-page .ambient--gold {
  width: 280px;
  height: 180px;
  right: 72px;
  top: 250px;
  background: #9b6e2c;
  opacity: .10;
}

html.xc-login-v7-page .login-panel {
  position: absolute;
  z-index: 3;
  top: 112px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 452px;
  min-height: 416px;
  padding: 58px 48px 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 24%),
    linear-gradient(180deg, rgba(8, 22, 77, .98), rgba(2, 8, 36, .98));
  border: 1px solid rgba(178, 228, 255, .92);
  border-radius: 4px;
  box-shadow:
    0 0 0 5px rgba(3, 11, 40, .96),
    0 0 0 6px rgba(85, 160, 233, .80),
    0 20px 60px rgba(0,0,0,.58),
    0 0 38px rgba(36, 119, 255, .12) inset;
}

html.xc-login-v7-page .login-panel::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(135, 201, 255, .62);
  pointer-events: none;
}

html.xc-login-v7-page .login-panel::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 23px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 196, 255, .6) 12%, rgba(210, 242, 255, .95) 50%, rgba(111, 196, 255, .6) 88%, transparent);
  opacity: .8;
}

html.xc-login-v7-page .corner {
  position: absolute;
  width: 19px;
  height: 19px;
  opacity: .85;
  pointer-events: none;
}
html.xc-login-v7-page .corner::before, html.xc-login-v7-page .corner::after { content: ""; position: absolute; background: var(--gold); }
html.xc-login-v7-page .corner::before { width: 12px; height: 1px; }
html.xc-login-v7-page .corner::after { width: 1px; height: 12px; }
html.xc-login-v7-page .corner--tl { left: 17px; top: 17px; }
html.xc-login-v7-page .corner--tr { right: 17px; top: 17px; transform: rotate(90deg); }
html.xc-login-v7-page .corner--bl { left: 17px; bottom: 17px; transform: rotate(-90deg); }
html.xc-login-v7-page .corner--br { right: 17px; bottom: 17px; transform: rotate(180deg); }

html.xc-login-v7-page .panel-header { text-align: center; position: relative; z-index: 1; }

html.xc-login-v7-page .brand-logo {
  position: absolute;
  width: 236px;
  height: auto;
  left: 50%;
  top: -152px;
  transform: translateX(-50%);
  object-fit: contain;
  filter:
    drop-shadow(0 0 4px rgba(223, 246, 255, .28))
    drop-shadow(0 0 10px rgba(66, 179, 255, .34))
    drop-shadow(0 0 22px rgba(35, 94, 255, .18));
}

html.xc-login-v7-page h1 {
  margin: 9px 0 21px;
  font-family: "Bahnschrift SemiCondensed", Bahnschrift, "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: 23px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .115em;
  color: #fbfdff;
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 0 9px rgba(150, 211, 255, .16),
    0 0 18px rgba(40, 102, 255, .08);
}

html.xc-login-v7-page .login-form { position: relative; z-index: 1; }

html.xc-login-v7-page .field-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 0;
  width: 320px;
  max-width: 100%;
  margin: 9px auto;
}

html.xc-login-v7-page .field-row label {
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 234, 255, .92);
  border-right: 0;
  border-radius: 17px 0 0 17px;
  font-family: Bahnschrift, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .115em;
  color: #eef9ff;
  background: linear-gradient(180deg, rgba(10, 29, 85, .92), rgba(4, 13, 48, .88));
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

html.xc-login-v7-page .field-shell {
  position: relative;
  height: 34px;
  background: linear-gradient(180deg, #f3f8fd 0%, #dfeaf5 55%, #ceddea 100%);
  border-top: 1px solid #e4f4ff;
  border-bottom: 1px solid #d8ebf8;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(45,77,108,.12);
}

html.xc-login-v7-page .field-shell input {
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  outline: 0;
  padding: 0 11px;
  background: transparent;
  color: #0a55a6;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 680;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  line-height: 1;
  letter-spacing: .018em;
  caret-color: #0d64d8;
}

html.xc-login-v7-page .field-shell input::selection {
  background: rgba(60, 135, 232, .24);
}

html.xc-login-v7-page .field-shell input[type="password"] {
  font-size: 17px;
  letter-spacing: .10em;
}

html.xc-login-v7-page .field-shell input:-webkit-autofill, html.xc-login-v7-page .field-shell input:-webkit-autofill:hover, html.xc-login-v7-page .field-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0a55a6 !important;
  caret-color: #0d64d8 !important;
  -webkit-box-shadow: 0 0 0 1000px #e9f3fb inset !important;
  box-shadow: 0 0 0 1000px #e9f3fb inset !important;
  transition: background-color 9999s ease-out 0s;
}

html.xc-login-v7-page .field-shell:focus-within {
  background: linear-gradient(180deg, #fbfdff, #eaf4ff);
  box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 1px rgba(75, 177, 255, .30),
    0 0 14px rgba(55, 157, 255, .34);
}

html.xc-login-v7-page .field-cap {
  position: relative;
  height: 34px;
  border: 1px solid rgba(208, 239, 255, .92);
  border-left: 0;
  border-radius: 0 17px 17px 0;
  background:
    linear-gradient(180deg, rgba(33, 92, 153, .98), rgba(8, 32, 78, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 8px rgba(83, 178, 255, .10);
  overflow: hidden;
}

html.xc-login-v7-page .field-cap::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(224, 247, 255, .92);
  background: linear-gradient(135deg, #80dbff, #2c75ce 58%, #163f8d);
  box-shadow:
    inset 0 0 3px rgba(255,255,255,.75),
    0 0 6px rgba(77, 191, 255, .55);
}

html.xc-login-v7-page .field-cap::after {
  content: "";
  position: absolute;
  inset: 5px 7px;
  border-radius: 999px;
  border-top: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
}

html.xc-login-v7-page .submit-wrap {
  display: flex;
  justify-content: center;
  margin: 22px 0 11px;
}

html.xc-login-v7-page .login-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 210px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px;
  color: #fff;
  border: 1px solid rgba(247, 252, 255, .98);
  border-radius: 21px;
  background:
    linear-gradient(
      110deg,
      #168fe8 0%,
      #58c9ff 22%,
      #a98cff 43%,
      #ff70c7 62%,
      #ff9cda 74%,
      #61d4ff 100%
    );
  background-size: 230% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    inset 0 -2px 4px rgba(28, 19, 83, .30),
    0 3px 7px rgba(0, 0, 0, .30),
    0 0 8px rgba(105, 218, 255, .38),
    0 0 19px rgba(65, 162, 255, .38),
    0 0 31px rgba(255, 92, 199, .25);
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .075em;
  text-indent: .075em;
  text-shadow:
    0 1px 2px rgba(7, 10, 39, .72),
    0 0 6px rgba(255,255,255,.28);
  cursor: pointer;
  transition:
    transform .14s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
  animation: xchat-login-shimmer 4.6s ease-in-out infinite;
}

html.xc-login-v7-page .login-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .32) 0%,
      rgba(255, 255, 255, .08) 43%,
      rgba(16, 23, 74, .20) 100%
    );
  pointer-events: none;
}

html.xc-login-v7-page .login-button::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -42%;
  width: 32%;
  z-index: 0;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .58),
    transparent
  );
  filter: blur(.2px);
  animation: xchat-login-glint 3.3s ease-in-out infinite;
  pointer-events: none;
}

html.xc-login-v7-page .login-button > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateY(.4px);
}

html.xc-login-v7-page .login-button:hover, html.xc-login-v7-page .login-button:focus-visible {
  border-color: #fff;
  filter: saturate(1.14) brightness(1.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    inset 0 -1px 0 rgba(25, 23, 74, .28),
    0 3px 8px rgba(0,0,0,.28),
    0 0 12px rgba(91, 213, 255, .50),
    0 0 27px rgba(70, 171, 255, .48),
    0 0 40px rgba(255, 97, 203, .34);
  outline: none;
}

html.xc-login-v7-page .login-button:active {
  transform: translateY(1px) scale(.99);
  filter: saturate(1.05) brightness(.96);
}

@keyframes xchat-login-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes xchat-login-glint {
  0%, 58% {
    left: -42%;
    opacity: 0;
  }
  67% {
    opacity: .9;
  }
  82% {
    left: 115%;
    opacity: 0;
  }
  100% {
    left: 115%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.xc-login-v7-page .login-button, html.xc-login-v7-page .login-button::after {
    animation: none;
  }
}

html.xc-login-v7-page .account-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 19px;
  margin: 0 auto;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1;
}

html.xc-login-v7-page .account-links a {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-shadow .15s ease, opacity .15s ease;
}

html.xc-login-v7-page .register-link {
  color: #ffd84f;
  font-weight: 720;
  text-decoration-color: rgba(255, 216, 79, .64);
  text-shadow: 0 0 7px rgba(255, 194, 38, .18);
}

html.xc-login-v7-page .register-link:hover, html.xc-login-v7-page .register-link:focus-visible {
  color: #fff19a;
  text-shadow: 0 0 9px rgba(255, 210, 57, .48);
  outline: none;
}

html.xc-login-v7-page .account-separator {
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(152, 175, 206, .62), transparent);
  box-shadow: 0 0 4px rgba(117, 168, 226, .12);
}

html.xc-login-v7-page .forgot-link {
  color: #91a0b7;
  font-weight: 560;
  text-decoration-color: rgba(145, 160, 183, .38);
}

html.xc-login-v7-page .forgot-link:hover, html.xc-login-v7-page .forgot-link:focus-visible {
  color: #b9ddff;
  text-shadow: 0 0 9px rgba(96, 185, 255, .34);
  outline: none;
}

html.xc-login-v7-page .provider-divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px 0 9px;
  color: #9aafca;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
}

html.xc-login-v7-page .provider-divider::before, html.xc-login-v7-page .provider-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(142, 185, 230, .5));
}
html.xc-login-v7-page .provider-divider::after { transform: scaleX(-1); }

html.xc-login-v7-page .providers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

html.xc-login-v7-page .provider {
  position: relative;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(177, 213, 255, .55);
  border-radius: 4px;
  text-decoration: none;
  color: #eef7ff;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 3px 7px rgba(0,0,0,.24);
  transition: transform .14s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

html.xc-login-v7-page .provider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 48%, rgba(0,0,0,.07));
}

html.xc-login-v7-page .provider:hover, html.xc-login-v7-page .provider:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(235, 248, 255, .92);
  filter: brightness(1.08) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 5px 10px rgba(0,0,0,.30),
    0 0 10px rgba(88, 177, 255, .12);
  outline: none;
}

html.xc-login-v7-page .provider:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.34);
}

html.xc-login-v7-page .provider-mark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 2px;
  border-radius: 3px;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.26);
}

html.xc-login-v7-page .provider > span:last-child {
  position: relative;
  z-index: 1;
}

html.xc-login-v7-page .provider--google {
  color: #182137;
  border-color: rgba(226, 234, 246, .86);
  background: linear-gradient(180deg, #ffffff 0%, #e8eef7 58%, #cbd5e5 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.78);
}

html.xc-login-v7-page .provider--google .provider-mark {
  background: #fff;
  color: #3467d6;
  border: 1px solid rgba(69, 108, 190, .18);
}

html.xc-login-v7-page .provider--yandex {
  color: #fff;
  border-color: rgba(255, 139, 139, .72);
  background: linear-gradient(180deg, #f44a4a 0%, #d91e2f 55%, #9f0e1d 100%);
  text-shadow: 0 1px 1px rgba(82,0,0,.42);
}

html.xc-login-v7-page .provider--yandex .provider-mark {
  background: #fff;
  color: #e2212e;
}

html.xc-login-v7-page .provider--vk {
  color: #fff;
  border-color: rgba(132, 199, 255, .72);
  background: linear-gradient(180deg, #5caaff 0%, #287bd9 55%, #1453a7 100%);
  text-shadow: 0 1px 1px rgba(0,45,100,.54);
}

html.xc-login-v7-page .provider--vk .provider-mark {
  background: rgba(255,255,255,.96);
  color: #287bd9;
  font-size: 6px;
}

html.xc-login-v7-page .panel-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 31px;
}

html.xc-login-v7-page .welcome {
  color: #9fb4cf;
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .01em;
}

html.xc-login-v7-page .welcome strong { color: #d7eaff; font-weight: 400; }

html.xc-login-v7-page .copyright {
  margin-top: 11px;
  color: #64809f;
  font-family: Bahnschrift, "Segoe UI", Arial, sans-serif;
  font-size: 6.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
}

html.xc-login-v7-page .character-wrap {
  position: absolute;
  z-index: 4;
  isolation: isolate;
  left: calc(50% - 520px);
  top: 28px;
  width: 405px;
  height: 555px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(22px 22px 20px rgba(0,0,0,.36));
}

html.xc-login-v7-page .character-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 34px;
  top: 42px;
  width: 300px;
  height: 440px;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 58% 42%, rgba(43, 134, 255, .30) 0%, rgba(26, 75, 255, .17) 34%, rgba(8, 39, 132, .08) 55%, transparent 73%);
  filter: blur(18px);
  opacity: .95;
}

html.xc-login-v7-page .character-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 165px;
  bottom: 7px;
  width: 185px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 33, 52, .52) 0%, rgba(213, 14, 37, .24) 38%, rgba(134, 0, 20, .08) 59%, transparent 76%);
  filter: blur(9px);
  transform: rotate(-4deg);
  opacity: .95;
}

html.xc-login-v7-page .character {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 0 10px rgba(25, 116, 255, .10));
}



@media (max-width: 820px) {
  html.xc-login-v7-page .ambient { display: none; }
  html.xc-login-v7-page .page-shell { align-items: start; padding-top: 22px; }
  html.xc-login-v7-page .login-stage { width: min(520px, 100%); height: auto; padding-top: 145px; }
  html.xc-login-v7-page .login-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(452px, calc(100vw - 30px));
    margin: 0 auto;
    padding-left: 34px;
    padding-right: 34px;
  }
  html.xc-login-v7-page .character-wrap {
    z-index: 2;
    width: 225px;
    height: 340px;
    left: calc(50% - 228px);
    top: -2px;
    opacity: .96;
  }
  html.xc-login-v7-page .character-wrap::before {
    left: 18px;
    top: 22px;
    width: 176px;
    height: 270px;
    filter: blur(14px);
  }
  html.xc-login-v7-page .character-wrap::after {
    left: 85px;
    bottom: 8px;
    width: 112px;
    height: 25px;
    filter: blur(7px);
  }
  html.xc-login-v7-page .brand-logo { width: 206px; height: auto; top: -133px; }
}

@media (max-width: 520px) {
  html.xc-login-v7-page .page-shell { padding: 16px 9px 24px; }
  html.xc-login-v7-page .login-stage { padding-top: 105px; }
  html.xc-login-v7-page .login-panel {
    width: calc(100vw - 24px);
    min-height: 0;
    padding: 50px 24px 22px;
  }
  html.xc-login-v7-page .brand-logo { width: 184px; height: auto; top: -115px; }
  html.xc-login-v7-page .character-wrap {
    width: 158px;
    height: 248px;
    left: -18px;
    top: -6px;
    opacity: .73;
  }
  html.xc-login-v7-page .character-wrap::before {
    left: 10px;
    top: 20px;
    width: 122px;
    height: 190px;
    filter: blur(12px);
  }
  html.xc-login-v7-page .character-wrap::after {
    left: 60px;
    bottom: 7px;
    width: 82px;
    height: 20px;
    filter: blur(6px);
  }
  html.xc-login-v7-page h1 { font-size: 18px; margin-bottom: 16px; }
  html.xc-login-v7-page .field-row { width: min(320px, 100%); grid-template-columns: 66px minmax(0, 1fr) 32px; }
  html.xc-login-v7-page .providers { gap: 4px; }
  html.xc-login-v7-page .provider { gap: 4px; font-size: 9px; }
  html.xc-login-v7-page .panel-footer { margin-top: 24px; }
}

@media (max-height: 720px) and (min-width: 821px) {
  html.xc-login-v7-page .page-shell { padding-block: 14px; }
  html.xc-login-v7-page .login-stage { transform: scale(.88); transform-origin: center; }
}

@media (prefers-reduced-motion: reduce) {
  html.xc-login-v7-page *, html.xc-login-v7-page *::before, html.xc-login-v7-page *::after { transition: none !important; }
}


/* --- XChat counters --------------------------------------------------- */
html.xc-login-v7-page .counter-row {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 588px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  isolation: isolate;
}

html.xc-login-v7-page .counter-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -12px;
  width: 228px;
  height: 33px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .36) 44%, transparent 76%);
  filter: blur(7px);
  pointer-events: none;
}

html.xc-login-v7-page .counter-badge {
  position: relative;
  display: block;
  width: 88px;
  height: 31px;
  padding: 0;
  border: 0;
  line-height: 0;
  opacity: .84;
  filter: saturate(.86) brightness(.92);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

html.xc-login-v7-page .counter-badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(107, 170, 227, .10);
  pointer-events: none;
}

html.xc-login-v7-page .counter-badge img {
  display: block;
  width: 88px;
  height: 31px;
  border: 0;
}

html.xc-login-v7-page a.counter-badge:hover, html.xc-login-v7-page a.counter-badge:focus-visible {
  opacity: 1;
  filter: saturate(1) brightness(1.05);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 820px) {
  html.xc-login-v7-page .counter-row {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 15px auto 0;
  }
}

@media (max-width: 420px) {
  html.xc-login-v7-page .counter-row {
    gap: 6px;
    transform: scale(.92);
    transform-origin: center top;
    margin-bottom: -2px;
  }
}

/* ==========================================================================
   XChat Login V7 — FINAL POLISH
   Behaviour only: focus, validation, loading, autofill, keyboard, tablet/short
   viewport refinement. The approved composition itself stays intact.
   ========================================================================== */

html.xc-login-v7-page .field-row {
  transition: filter .16s ease, transform .16s ease;
}

html.xc-login-v7-page .field-row:focus-within label {
  color: #fff;
  border-color: rgba(221, 246, 255, .98);
  background: linear-gradient(180deg, rgba(18, 58, 124, .96), rgba(5, 22, 67, .94));
  text-shadow: 0 0 8px rgba(115, 203, 255, .32);
}

html.xc-login-v7-page .field-row:focus-within .field-cap {
  border-color: rgba(223, 246, 255, .98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 0 11px rgba(83, 190, 255, .26);
}

html.xc-login-v7-page .field-row:focus-within .field-cap::before {
  box-shadow:
    inset 0 0 3px rgba(255,255,255,.82),
    0 0 8px rgba(87, 204, 255, .72);
}

/* Chrome/Edge autofill already keeps our blue text; Firefox gets the same treatment. */
html.xc-login-v7-page .field-shell input:-moz-autofill {
  color: #0a55a6 !important;
  caret-color: #0d64d8 !important;
  box-shadow: 0 0 0 1000px #e9f3fb inset !important;
}

/* Server-side login errors appear in the reserved gap and never push the layout. */
html.xc-login-v7-page .login-error {
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 82px;
  transform: translateX(-50%);
  width: min(306px, calc(100% - 12px));
  min-height: 18px;
  margin: 0;
  padding: 3px 9px 4px;
  border: 1px solid rgba(255, 103, 126, .34);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(98, 10, 32, .86), rgba(55, 5, 22, .88));
  color: #ffe0e6;
  box-shadow:
    0 2px 10px rgba(0,0,0,.22),
    0 0 12px rgba(255, 64, 103, .08);
  font: 650 9.5px/1.18 "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.36);
  pointer-events: none;
}

/* A single restrained validation nudge; no cartoon bounce. */
html.xc-login-v7-page .field-row.is-invalid {
  animation: xchat-v7-invalid-nudge .24s ease-out 1;
  filter: drop-shadow(0 0 5px rgba(255, 74, 104, .18));
}

@keyframes xchat-v7-invalid-nudge {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-3px); }
  58% { transform: translateX(2px); }
  82% { transform: translateX(-1px); }
}

/* Loading state: prevents double submit and makes network wait feel intentional. */
html.xc-login-v7-page .login-button:disabled,
html.xc-login-v7-page .login-button.is-loading {
  cursor: wait;
  opacity: .84;
  filter: saturate(.82) brightness(.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(28,19,83,.25),
    0 2px 6px rgba(0,0,0,.26),
    0 0 12px rgba(90, 199, 255, .32),
    0 0 24px rgba(255, 93, 196, .16);
}

html.xc-login-v7-page .login-button.is-loading {
  animation: xchat-v7-loading 1.15s ease-in-out infinite;
}

html.xc-login-v7-page .login-button.is-loading::after {
  animation-duration: 1.45s;
}

@keyframes xchat-v7-loading {
  0%, 100% { background-position: 12% 50%; }
  50% { background-position: 88% 50%; }
}

/* Keep keyboard focus unmistakable without adding a generic browser outline. */
html.xc-login-v7-page .account-links a:focus-visible,
html.xc-login-v7-page .provider:focus-visible,
html.xc-login-v7-page .login-button:focus-visible {
  outline: 1px solid rgba(176, 230, 255, .92);
  outline-offset: 2px;
}

/* Slight optical correction for the three provider marks. */
html.xc-login-v7-page .provider-mark {
  min-width: 18px;
  height: 18px;
}
html.xc-login-v7-page .provider--google .provider-mark { font-size: 8.5px; }
html.xc-login-v7-page .provider--yandex .provider-mark { font-size: 9px; }
html.xc-login-v7-page .provider--vk .provider-mark { font-size: 6.2px; }

/* 768px tablets now deliberately use the compact composition; give it a little air. */
@media (min-width: 521px) and (max-width: 820px) {
  html.xc-login-v7-page .page-shell { padding-top: 26px; padding-bottom: 30px; }
  html.xc-login-v7-page .login-stage { padding-top: 150px; }
  html.xc-login-v7-page .counter-row { margin-top: 20px; }
}

/* Very short desktop/notebook viewports: scale the whole stage, not individual pieces. */
@media (max-height: 800px) and (min-width: 821px) {
  html.xc-login-v7-page .page-shell { padding-block: 12px; }
  html.xc-login-v7-page .login-stage {
    transform: scale(.95);
    transform-origin: center center;
  }
}

@media (max-height: 700px) and (min-width: 821px) {
  html.xc-login-v7-page .login-stage { transform: scale(.87); }
}

/* Touch devices do not need fake hover movement. */
@media (hover: none) {
  html.xc-login-v7-page .provider:hover,
  html.xc-login-v7-page .login-button:hover {
    transform: none;
  }
}

/* Respect OS motion settings across every polish animation. */
@media (prefers-reduced-motion: reduce) {
  html.xc-login-v7-page .login-button,
  html.xc-login-v7-page .login-button::after,
  html.xc-login-v7-page .field-row {
    animation: none !important;
  }
}

/* ==========================================================================
   XCHAT_MOBILE_PERF_V1
   Mobile/touch GPU optimization.
   Desktop composition is deliberately untouched.
   ========================================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  /*
   * Pinch zoom makes mobile browsers continuously re-rasterize large blurred
   * surfaces. Keep the composition, but remove the expensive raster filters.
   */

  html.xc-login-v7-page body {
    background:
      linear-gradient(
        180deg,
        #000 0%,
        #020713 46%,
        #000 100%
      );
  }

  html.xc-login-v7-page .ambient {
    display: none !important;
    filter: none !important;
  }

  html.xc-login-v7-page .login-panel {
    box-shadow:
      0 0 0 5px rgba(3, 11, 40, .96),
      0 0 0 6px rgba(85, 160, 233, .72),
      0 15px 34px rgba(0, 0, 0, .46);
  }

  html.xc-login-v7-page .brand-logo {
    filter:
      drop-shadow(0 0 7px rgba(66, 179, 255, .26));
  }

  html.xc-login-v7-page .character-wrap {
    filter: none;
  }

  html.xc-login-v7-page .character-wrap::before {
    filter: none;
    opacity: .54;
    background:
      radial-gradient(
        ellipse at 58% 42%,
        rgba(43, 134, 255, .25) 0%,
        rgba(26, 75, 255, .10) 38%,
        transparent 72%
      );
  }

  html.xc-login-v7-page .character-wrap::after {
    filter: none;
    opacity: .60;
    background:
      radial-gradient(
        ellipse,
        rgba(255, 33, 52, .34) 0%,
        rgba(176, 10, 32, .13) 45%,
        transparent 74%
      );
  }

  html.xc-login-v7-page .character {
    filter: none;
  }

  /*
   * No perpetual animation on touch devices.
   * The gradient itself stays exactly visible.
   */
  html.xc-login-v7-page .login-button,
  html.xc-login-v7-page .login-button.is-loading {
    animation: none !important;
  }

  html.xc-login-v7-page .login-button::after {
    display: none !important;
    animation: none !important;
    filter: none !important;
  }

  html.xc-login-v7-page .login-button {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .60),
      inset 0 -2px 3px rgba(28, 19, 83, .24),
      0 3px 7px rgba(0, 0, 0, .27),
      0 0 14px rgba(75, 177, 255, .29);
  }

  html.xc-login-v7-page .login-button.is-loading,
  html.xc-login-v7-page .login-button:disabled {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      0 2px 6px rgba(0,0,0,.25),
      0 0 10px rgba(90,199,255,.22);
  }

  html.xc-login-v7-page .counter-row::before {
    display: none;
    filter: none;
  }

  html.xc-login-v7-page .counter-badge,
  html.xc-login-v7-page a.counter-badge:hover,
  html.xc-login-v7-page a.counter-badge:focus-visible {
    filter: none;
    transition: none;
  }

  html.xc-login-v7-page .provider,
  html.xc-login-v7-page .account-links a,
  html.xc-login-v7-page .field-row,
  html.xc-login-v7-page .field-cap {
    transition-duration: 0s;
  }

  html.xc-login-v7-page .field-row.is-invalid {
    filter: none;
  }
}

/*
 * Coarse pointer is the important signal on large phones/tablets too,
 * including devices whose CSS viewport can exceed the width breakpoint.
 */
@media (hover: none) and (pointer: coarse) {
  html.xc-login-v7-page .login-button,
  html.xc-login-v7-page .login-button::after {
    animation: none !important;
  }
}

/* ==========================================================================
   XCHAT_EARRING_SPARKLE_V1
   Tiny desktop-only sparkle aligned to the real earring in character.webp.
   Source gem center ~= x385 / y133 on the 820x1230 source asset.
   ========================================================================== */

html.xc-login-v7-page .earring-sparkle {
  display: none;
}

/*
 * Desktop/fine pointer only.
 * Mobile and touch devices never render or animate this layer.
 */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  html.xc-login-v7-page .earring-sparkle {
    display: block;
    position: absolute;
    z-index: 6;

    /*
     * Real earring gem position inside the current character container.
     */
    left: 47.2%;
    top: 10.82%;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: rgba(255,255,255,.98);

    box-shadow:
      0 0 3px rgba(255,255,255,.95),
      0 0 7px rgba(151,236,255,.92),
      0 0 12px rgba(83,192,255,.58),
      0 0 18px rgba(255,121,185,.20);

    opacity: 0;
    pointer-events: none;

    transform:
      translate(-50%, -50%)
      scale(.18)
      rotate(0deg);

    transform-origin: center;

    animation:
      xchat-earring-twinkle
      4.8s
      ease-in-out
      1.1s
      infinite;
  }

  html.xc-login-v7-page .earring-sparkle::before,
  html.xc-login-v7-page .earring-sparkle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.98),
        transparent
      );

    transform: translate(-50%, -50%);
  }

  html.xc-login-v7-page .earring-sparkle::before {
    width: 17px;
    height: 1px;
  }

  html.xc-login-v7-page .earring-sparkle::after {
    width: 1px;
    height: 17px;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(214,248,255,.98),
        transparent
      );
  }
}

@keyframes xchat-earring-twinkle {
  0%,
  61%,
  79%,
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(.16)
      rotate(0deg);
  }

  65% {
    opacity: .95;
    transform:
      translate(-50%, -50%)
      scale(1.08)
      rotate(16deg);
  }

  68% {
    opacity: .34;
    transform:
      translate(-50%, -50%)
      scale(.54)
      rotate(27deg);
  }

  71% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(.86)
      rotate(38deg);
  }

  75% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(.18)
      rotate(45deg);
  }
}

/* Explicitly no sparkle on mobile/touch. */
@media (max-width: 820px),
       (hover: none),
       (pointer: coarse) {
  html.xc-login-v7-page .earring-sparkle {
    display: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.xc-login-v7-page .earring-sparkle {
    display: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   XCHAT_EARRING_SPARKLE_V3
   Same sparkle, more frequent.
   ========================================================================== */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  html.xc-login-v7-page .earring-sparkle {
    animation-duration: 2.5s !important;
    animation-delay: .25s !important;
  }
}


/* ==========================================================================
   XCHAT_V7_MOBILE_SCROLL_V3
   Restore true native finger scrolling and pinch-pan.
   ========================================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  html.xc-login-v7-page {
    position: static !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    touch-action: pan-x pan-y pinch-zoom !important;
    overscroll-behavior-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  html.xc-login-v7-page body {
    position: static !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    touch-action: pan-x pan-y pinch-zoom !important;
    overscroll-behavior-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  html.xc-login-v7-page #app {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;

    overflow: visible !important;

    touch-action: pan-x pan-y pinch-zoom !important;
  }

  html.xc-login-v7-page #app > * {
    height: auto !important;
    min-height: 100svh !important;

    overflow: visible !important;

    touch-action: pan-x pan-y pinch-zoom !important;
  }

  /*
   * Decorative graphics never capture finger gestures.
   */
  html.xc-login-v7-page .character-wrap,
  html.xc-login-v7-page .character,
  html.xc-login-v7-page .ambient,
  html.xc-login-v7-page .earring-sparkle {
    pointer-events: none !important;
    touch-action: none !important;
  }

  /*
   * Interactive elements remain interactive, while vertical page
   * movement is still handed to the browser.
   */
  html.xc-login-v7-page input,
  html.xc-login-v7-page button,
  html.xc-login-v7-page a {
    touch-action: manipulation;
  }
}

/* ==========================================================================
   XCHAT_EARRING_BREATHE_V1
   Constant soft jewel glow — no periodic flash.
   Desktop only.
   ========================================================================== */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  html.xc-login-v7-page .earring-sparkle {
    width: 5px;
    height: 5px;

    opacity: .72;

    background: rgba(255,255,255,.98);

    box-shadow:
      0 0 3px rgba(255,255,255,.98),
      0 0 7px rgba(210,248,255,.92),
      0 0 12px rgba(105,211,255,.72),
      0 0 20px rgba(70,151,255,.38),
      0 0 27px rgba(255,121,185,.16);

    animation:
      xchat-earring-breathe
      3.8s
      ease-in-out
      infinite !important;
  }

  html.xc-login-v7-page .earring-sparkle::before {
    width: 14px;
    height: 1px;
    opacity: .72;
  }

  html.xc-login-v7-page .earring-sparkle::after {
    width: 1px;
    height: 14px;
    opacity: .72;
  }
}

@keyframes xchat-earring-breathe {
  0%,
  100% {
    opacity: .52;
    transform:
      translate(-50%, -50%)
      scale(.72)
      rotate(0deg);

    box-shadow:
      0 0 2px rgba(255,255,255,.90),
      0 0 5px rgba(200,244,255,.72),
      0 0 9px rgba(84,190,255,.46),
      0 0 15px rgba(65,130,255,.22),
      0 0 20px rgba(255,121,185,.10);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.18)
      rotate(10deg);

    box-shadow:
      0 0 4px rgba(255,255,255,1),
      0 0 9px rgba(224,252,255,.98),
      0 0 16px rgba(112,222,255,.86),
      0 0 25px rgba(67,151,255,.48),
      0 0 34px rgba(255,121,185,.20);
  }
}

/* Mobile stays completely free of the decorative animation. */
@media (max-width: 820px),
       (hover: none),
       (pointer: coarse) {
  html.xc-login-v7-page .earring-sparkle {
    display: none !important;
    animation: none !important;
  }
}


/* ==========================================================================
   XCHAT_V7_NATIVE_TOUCH_PAN_V8

   Touch devices — including Chrome/Android "Desktop site" mode — must
   allow the browser to own pinch zoom and visual viewport movement.

   Earlier V7 mobile rules intentionally kept overflow-x:hidden. That fixed
   vertical finger scrolling but could prevent horizontal movement after
   magnification.

   These rules override clipping only on touch/coarse-pointer devices.
   Desktop mouse layout remains unchanged.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {

  html.xc-login-v7-page,
  html.xc-login-v7-page body {
    position: static !important;

    width: auto !important;
    min-width: 100% !important;

    height: auto !important;
    min-height: 100% !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    overscroll-behavior: auto !important;

    touch-action:
      pan-x pan-y pinch-zoom !important;

    -webkit-overflow-scrolling: touch;
  }


  html.xc-login-v7-page body {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }


  html.xc-login-v7-page #app {
    position: relative !important;

    width: auto !important;
    min-width: 100% !important;

    height: auto !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;

    overflow: visible !important;

    touch-action:
      pan-x pan-y pinch-zoom !important;
  }


  html.xc-login-v7-page #app > *,
  html.xc-login-v7-page .page-shell,
  html.xc-login-v7-page .login-stage {
    overflow: visible !important;

    touch-action:
      pan-x pan-y pinch-zoom !important;
  }


  html.xc-login-v7-page .page-shell {
    width: auto !important;
    min-width: 100% !important;
  }


  /*
   * Structural layers must hand touch gestures to the browser.
   */
  html.xc-login-v7-page .login-panel,
  html.xc-login-v7-page .login-form,
  html.xc-login-v7-page .field-row,
  html.xc-login-v7-page .field-shell,
  html.xc-login-v7-page .submit-wrap,
  html.xc-login-v7-page .providers,
  html.xc-login-v7-page .provider-divider,
  html.xc-login-v7-page .panel-footer,
  html.xc-login-v7-page .counter-row {
    touch-action:
      pan-x pan-y pinch-zoom !important;
  }


  /*
   * Artwork can never capture finger gestures.
   */
  html.xc-login-v7-page .ambient,
  html.xc-login-v7-page .character-wrap,
  html.xc-login-v7-page .character,
  html.xc-login-v7-page .earring-sparkle {
    pointer-events: none !important;
  }


  /*
   * Real controls remain clickable/editable.
   * manipulation includes native pan/pinch behaviour.
   */
  html.xc-login-v7-page input,
  html.xc-login-v7-page button,
  html.xc-login-v7-page a {
    touch-action:
      manipulation !important;
  }
}