body.bg {
  /* Latin + CJK in one stack so toggling zh/en does not swap entire font metrics */
  font-family:
    "Segoe UI",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "PingFang SC",
    "Hiragino Sans GB",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
  background: url("/images/count_bg.png") center/cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
}

/* #root: relax flex min-size; column width lock lives in src/styles/login-surface-lock.css (imported last in main.jsx) */
body.bg #root {
  min-width: 0;
  box-sizing: border-box;
}

html:has(body.bg) {
  scrollbar-gutter: stable;
}

body.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.sc-login-shell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  animation: sc-login-fade-in 0.6s ease-out;
}

/* Wrap + ios26 language switch (git e0f450c8 — glass track, blue gradient thumb, glow/shimmer) */
.sc-login-lang-switch-wrap,
.sc-login-lang-ios-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.sc-login-lang-switch,
.sc-login-lang-ios {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 156px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(242, 248, 255, 0.85)),
    linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.08));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: 4px;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(59, 130, 246, 0.1);
  isolation: isolate;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease;
}

.sc-login-lang-switch::before,
.sc-login-lang-ios::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 6px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.sc-login-lang-switch::after,
.sc-login-lang-ios::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 8px);
  height: calc(100% - 12px);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  filter: blur(10px);
  opacity: 0.8;
  transform: translateX(var(--sc-lang-glow-x, 0));
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.45), rgba(56, 189, 248, 0));
  transition: transform 0.8s cubic-bezier(0.16, 0.92, 0.24, 1.12), opacity 0.3s ease;
  animation: sc-login-lang-glow-breathe 1.9s ease-in-out infinite;
}

.sc-login-lang-switch:hover,
.sc-login-lang-ios:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(59, 130, 246, 0.14);
}

.sc-login-lang-option,
.sc-login-lang-ios .sc-login-lang-seg,
button.sc-login-lang-seg {
  position: relative;
  z-index: 2;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #0f172a;
  border-radius: 999px;
  transition: color 0.2s ease, transform 0.18s ease, text-shadow 0.2s ease;
}

.sc-login-lang-option:hover,
.sc-login-lang-ios .sc-login-lang-seg:hover,
button.sc-login-lang-seg:hover {
  transform: translateY(-0.5px);
}

.sc-login-lang-option.active,
.sc-login-lang-ios .sc-login-lang-seg.active,
button.sc-login-lang-seg.active {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(30, 64, 175, 0.28);
  animation: sc-login-lang-text-breathe 1.8s ease-in-out infinite;
}

.sc-login-lang-thumb,
.sc-login-lang-ios-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) 0 0 / 100% 55% no-repeat,
    linear-gradient(135deg, #1d4ed8, #38bdf8);
  box-shadow:
    0 6px 16px rgba(30, 64, 175, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(2, 6, 23, 0.15);
  transform: translateX(var(--sc-lang-thumb-x, 0));
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  will-change: transform;
  overflow: hidden;
  pointer-events: none;
}

.sc-login-lang-thumb::before,
.sc-login-lang-ios-thumb::before {
  content: "";
  position: absolute;
  top: -38%;
  left: -30%;
  width: 42%;
  height: 176%;
  pointer-events: none;
  transform: rotate(20deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  animation: sc-login-lang-shimmer 2.1s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.sc-login-lang-switch:active .sc-login-lang-thumb,
.sc-login-lang-ios:active .sc-login-lang-thumb,
.sc-login-lang-ios:active .sc-login-lang-ios-thumb {
  box-shadow:
    0 4px 10px rgba(30, 64, 175, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.sc-login-lang-switch.is-en,
.sc-login-lang-ios.is-en {
  --sc-lang-thumb-x: 0;
  --sc-lang-glow-x: 0;
}

.sc-login-lang-switch.is-zh,
.sc-login-lang-ios.is-zh {
  --sc-lang-thumb-x: 100%;
  --sc-lang-glow-x: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .sc-login-lang-switch,
  .sc-login-lang-ios,
  .sc-login-lang-option,
  .sc-login-lang-ios .sc-login-lang-seg,
  button.sc-login-lang-seg,
  .sc-login-lang-thumb,
  .sc-login-lang-ios-thumb,
  .sc-login-lang-thumb::before,
  .sc-login-lang-ios-thumb::before,
  .sc-login-lang-switch::after,
  .sc-login-lang-ios::after,
  .sc-login-lang-option.active,
  .sc-login-lang-ios .sc-login-lang-seg.active,
  button.sc-login-lang-seg.active {
    transition: none;
    animation: none;
  }
}

.sc-login-card {
  background: var(--login-surface);
  border-radius: var(--login-radius-xl) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  backdrop-filter: blur(10px);
  min-width: 0;
  max-width: 100%;
  min-height: var(--login-card-min-height);
}

.sc-login-role-tabs {
  display: flex;
  background: linear-gradient(135deg, var(--login-bg-start), var(--login-bg-end));
  border-radius: var(--login-radius-xl) var(--login-radius-xl) 0 0 !important;
  overflow: hidden;
}

.sc-login-role-tab {
  flex: 1;
  min-width: 0;
  min-height: 57.5px;
  box-sizing: border-box;
  padding: 15px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  cursor: pointer;
  font-family: Arial, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sc-login-role-tab.active {
  background: linear-gradient(135deg, var(--login-bg-start), var(--login-bg-end));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sc-login-card-content {
  padding: 30px 20px;
  min-width: 0;
  font-size: 16px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #000000;
}

.sc-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sc-login-input-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.sc-login-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--login-bg-end);
  font-size: 15px;
  z-index: 2;
}

.sc-login-input {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 46.5px;
  padding: 12px 25px 12px 46px;
  border: 1px solid var(--login-bg-end);
  border-radius: var(--login-radius-pill);
  font-size: var(--text-base);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  color: var(--login-text);
}

.sc-login-input:focus {
  outline: none;
  border-color: var(--login-bg-start);
  box-shadow: 0 0 0 3px rgba(0, 79, 249, 0.1);
  animation: sc-login-pulse 0.3s ease-out;
}

.sc-login-input::placeholder {
  color: var(--login-bg-end);
  font-weight: 400;
}

.sc-login-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.sc-login-remember {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.sc-login-remember-check {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 40px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  z-index: 2;
}

.sc-login-remember-slider {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 20px;
  border-radius: var(--login-radius-pill);
  background: #dddddd;
  transition: background 0.2s ease;
  pointer-events: none;
}

.sc-login-remember-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.sc-login-remember-check:checked + .sc-login-remember-slider {
  background: linear-gradient(90deg, var(--login-bg-start), var(--login-bg-end));
}

.sc-login-remember-check:checked + .sc-login-remember-slider::after {
  transform: translateX(20px);
}

.sc-login-remember-check:focus-visible + .sc-login-remember-slider {
  outline: 2px solid var(--login-bg-start);
  outline-offset: 2px;
}

.sc-login-remember-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #656565;
  font-size: var(--text-base);
  font-weight: 400;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.sc-login-forgot-link {
  justify-self: end;
  max-width: 100%;
  color: #56ccf2;
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 400;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.sc-login-forgot-link:hover {
  color: var(--login-bg-start);
  text-decoration: underline;
}

.sc-login-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.sc-login-btn:active {
  transform: scale(0.98);
}

.sc-login-submit-btn {
  box-sizing: border-box;
  height: var(--login-submit-height);
  min-height: var(--login-submit-height);
  max-height: var(--login-submit-height);
  background: linear-gradient(135deg, var(--login-bg-start), var(--login-bg-end));
  color: #ffffff;
  padding: 0 var(--login-submit-pad-x);
  border-radius: var(--login-radius-pill);
  font-family: Arial, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 79, 249, 0.3);
  width: 100%;
  white-space: nowrap;
}

.sc-login-submit-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-login-submit-btn:hover {
  background: linear-gradient(135deg, var(--login-bg-end), var(--login-bg-start));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 79, 249, 0.4);
}

.sc-login-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px rgba(0, 79, 249, 0.2);
}

.sc-login-maintenance-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: var(--login-radius-xl);
  background: linear-gradient(135deg, var(--login-bg-start), var(--login-bg-end));
  position: relative;
  margin-bottom: 20px;
}

.sc-login-maintenance-track {
  display: flex;
  width: max-content;
  animation: sc-login-maintenance-scroll 18s linear infinite;
}

.sc-login-maintenance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  white-space: nowrap;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.sc-login-maintenance-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.sc-login-maintenance-label {
  opacity: 0.9;
  margin-right: 8px;
}

/* Temporarily hide Telegram floating shortcut on login page. */
.sc-login-telegram-icon {
  display: none !important;
}

.sc-login-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sc-login-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sc-login-modal-box {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 100%;
  padding: 36px 32px;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.sc-login-modal-overlay.is-open .sc-login-modal-box {
  transform: scale(1);
}

.sc-login-modal-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: rgba(220, 53, 69, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-login-modal-icon {
  font-size: 42px;
  color: var(--login-danger);
}

.sc-login-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.3;
}

.sc-login-modal-message {
  font-size: 16px;
  color: #444444;
  line-height: 1.55;
  margin-bottom: 28px;
  white-space: pre-line;
}

.sc-login-modal-actions {
  display: flex;
  justify-content: center;
}

.sc-login-btn-primary {
  min-width: 120px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--login-bg-end), var(--login-bg-start));
  color: #ffffff;
}

.sc-login-btn-primary:hover {
  background: linear-gradient(135deg, #45b8e0, #003dd4);
}

@media (max-width: 480px) {
  .sc-login-card {
    min-height: var(--login-card-min-height-narrow);
  }

  .sc-login-role-tab {
    min-height: 52px;
    padding: 12px 10px;
  }

  .sc-login-card-content {
    padding: 24px 16px;
  }

}

@keyframes sc-login-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sc-login-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 79, 249, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 79, 249, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 79, 249, 0);
  }
}

@keyframes sc-login-maintenance-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes sc-login-lang-shimmer {
  0% {
    transform: translateX(-115%) rotate(20deg);
    opacity: 0;
  }
  16% {
    opacity: 0.95;
  }
  42% {
    transform: translateX(260%) rotate(20deg);
    opacity: 0;
  }
  100% {
    transform: translateX(260%) rotate(20deg);
    opacity: 0;
  }
}

@keyframes sc-login-lang-glow-breathe {
  0%,
  100% {
    opacity: 0.62;
    filter: blur(9px);
  }
  50% {
    opacity: 0.98;
    filter: blur(12px);
  }
}

@keyframes sc-login-lang-text-breathe {
  0%,
  100% {
    text-shadow: 0 1px 4px rgba(30, 64, 175, 0.28);
  }
  50% {
    text-shadow: 0 1px 10px rgba(147, 197, 253, 0.85);
  }
}