/* ================================================================
   BVOX · Login / Register / Find-password — shared dark theme
   ================================================================ */
:root {
  --lm-bg:         #080b0f;
  --lm-panel:      #0f1318;
  --lm-card:       #141820;
  --lm-card-2:     #1b2030;
  --lm-border:     rgba(255,255,255,.09);
  --lm-border-act: rgba(252,213,53,.50);
  --lm-text:       #f0f4fb;
  --lm-soft:       #d5dde8;
  --lm-muted:      #8b98a9;
  --lm-yellow:     #fcd535;
  --lm-yellow-dk:  #f0b90b;
  --lm-radius:     20px;
  --lm-shadow:     0 28px 64px rgba(0,0,0,.50);
}

/* ---- base ---- */
*,*::before,*::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18%  0%, rgba(252,213,53,.07) 0%, transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(14,203,129,.05) 0%, transparent 28%),
    linear-gradient(180deg, #080b0f 0%, #0c1018 100%);
  color: var(--lm-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* starfield reset — keep animation but muted */
.starfield .static,
.starfield .moving-1,
.starfield .moving-2,
.starfield .moving-3 { opacity: .35; }

/* ---- layout shell ---- */
.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

/* ---- card ---- */
.card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, var(--lm-card) 0%, var(--lm-panel) 100%);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: var(--lm-shadow);
  overflow: visible;
}
.card-form { padding: 36px 32px 8px; }

/* ---- title ---- */
.margin-topbox-px-10 { margin-bottom: 18px; }

/* logo */
.login-logo-link {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  text-decoration: none;
}
.login-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.40);
  object-fit: cover;
}
.f36 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--lm-text) !important;
  line-height: 1.3 !important;
}
.floginbr { color: var(--lm-yellow) !important; }
.f16 { font-size: 14px; color: var(--lm-muted); }

/* ---- input group ---- */
.input {
  position: relative;
  margin: 20px 0;
}
.input-field {
  width: 100%;
  padding: 14px 14px !important;
  font-size: 15px !important;
  color: var(--lm-text) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1.5px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.input-field:focus {
  border-color: var(--lm-yellow) !important;
  box-shadow: 0 0 0 3px rgba(252,213,53,.18), 0 2px 12px rgba(252,213,53,.10) !important;
  background: rgba(252,213,53,.04) !important;
}
.input-field:focus + .input-label,
.input:focus-within .input-label {
  color: var(--lm-yellow) !important;
}
.input-field::placeholder { color: var(--lm-muted) !important; }
.input-field:disabled,
.input-field[readonly] {
  opacity: .55;
  cursor: not-allowed;
}

/* floating label */
.input-label {
  position: absolute;
  left: 12px;
  top: -5px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lm-muted);
  background: linear-gradient(180deg, var(--lm-card) 55%, transparent);
  border-radius: 6px;
  pointer-events: none;
}

/* captcha row */
.input:has(img) .input-field,
.input:has(.login-send-button) .input-field {
  width: 58% !important;
}
.login-send-button {
  position: absolute;
  right: 0;
  top: 23px;
  width: 40%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lm-border);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s;
}
.login-send-button:hover { border-color: var(--lm-border-act); }
.login-send-button img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.login-send-button button,
.login-send-button .action-button {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--lm-yellow) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---- E-mail / Mobile type toggle buttons ---- */
.btn-hover {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px !important;
  padding: 0 18px !important;
  border: 1px solid var(--lm-border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--lm-muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-hover.color-1,
.btn-hover.color-6 { background-image: none !important; }
.btn-hover:hover {
  border-color: var(--lm-border-act) !important;
  color: var(--lm-yellow) !important;
}

/* active/selected type button */
.btn-hover.active-type {
  border-color: var(--lm-yellow) !important;
  color: var(--lm-yellow) !important;
  background: rgba(252,213,53,.08) !important;
}
.btnl, .btnr { display: none !important; }

/* ---- submit button ---- */
.action { margin-top: 22px; margin-bottom: 4px; }
.action > .action-button,
.action > button.action-button {
  width: 100% !important;
  padding: 14px 18px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--lm-yellow), var(--lm-yellow-dk)) !important;
  color: #181a20 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 32px rgba(240,185,11,.22) !important;
  transition: filter .15s, transform .1s;
}
.action > .action-button:hover,
.action > button.action-button:hover { filter: brightness(1.06) !important; }
.action > .action-button:active,
.action > button.action-button:active { transform: translateY(1px) !important; }

/* ---- bottom links ---- */
.login-reg {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 32px 24px !important;
  font-size: 14px;
}
.fbaseblue,
a.fbaseblue {
  color: var(--lm-yellow) !important;
  text-decoration: none;
  transition: opacity .2s;
}
.fbaseblue:hover { opacity: .75 !important; }

/* css-s84t59 / css-utqtyo overrides */
.css-s84t59,
.css-utqtyo {
  color: var(--lm-yellow) !important;
}

/* ---- divider ---- */
.lm-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--lm-muted);
  font-size: 12px;
}
.lm-divider::before,
.lm-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lm-border);
}

/* ---- image verification (图形验证码) section ---- */
.css-15651n7 { margin: 20px 0 0; }
.css-xjlny9 {
  margin-bottom: 8px;
  color: var(--lm-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.css-hiy16i {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: auto !important;
}
.css-13xytqh {
  float: none !important;
  width: auto !important;
}
.css-13xytqh:first-child { flex: 1; }
.css-13xytqh:last-child { flex: 0 0 120px; }
.css-13xytqh img {
  width: 100% !important;
  height: 50px !important;
  border-radius: 12px !important;
  cursor: pointer;
  border: 1px solid var(--lm-border);
}

/* ---- responsive ---- */
@media (max-width: 520px) {
  .card-form { padding: 28px 20px 8px; }
  .login-reg { padding: 12px 20px 20px !important; }
  .f36 { font-size: 22px !important; }
}