/*
 * Monvshe auth skin: standalone /login /register /lostpwd page and the login popup.
 * Everything is scoped to .mv-auth (tokens and elements) plus two popup-shell rules that match only
 * when the popup content contains .mv-auth. Nothing here targets body, :root or element selectors,
 * so the user center, membership screens and unskinned pages are unaffected.
 * Popup width is fixed at 320px by the original JS: the form is single column and fits without overflow.
 */

.mv-auth {
  --mv-primary: #a078ff;
  --mv-primary-strong: #8b5cf6;
  --mv-primary-text: #d0bcff;
  --mv-primary-soft: rgba(139, 92, 246, .18);
  --mv-secondary: #4edea3;
  --mv-accent: #e7c356;
  --mv-bg: #0d0b14;
  --mv-surface-1: #1c1a24;
  --mv-surface-2: #211e28;
  --mv-surface-3: #2b2933;
  --mv-border: rgba(255, 255, 255, .12);
  --mv-border-strong: rgba(160, 120, 255, .55);
  --mv-text: #e6e0ee;
  --mv-text-muted: #cbc3d7;
  --mv-text-dim: #a49cb3;
  --mv-danger: #ffb4ab;
  --mv-radius: 12px;
  --mv-radius-lg: 18px;
  --mv-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  color: var(--mv-text);
  font-family: var(--mv-font);
  font-size: 1rem;
  line-height: 1.6;
  text-align: start;
}
.mv-auth, .mv-auth *, .mv-auth *::before, .mv-auth *::after { box-sizing: border-box; }

/* ---------- Popup shell (original ri.popup box, fixed 320px wide) ---------- */
.ri-popup-content:has(.mv-auth) { padding: 1rem; color: var(--mv-text, #e6e0ee); background: #1c1a24; border: 1px solid rgba(160, 120, 255, .4); border-radius: 18px; }
.ri-popup-body:has(.mv-auth) { max-width: 100%; }

/* ---------- Standalone page ---------- */
body.mv-auth-body { margin: 0; background: #0d0b14; }
.mv-auth-skip { position: fixed; inset-inline-start: 12px; top: -4rem; z-index: 10; padding: .5rem 1rem; color: #fff; background: #8b5cf6; border-radius: 6px; text-decoration: none; }
.mv-auth-skip:focus { top: 12px; }
.mv-auth-page.login-and-register { display: grid; place-items: center; width: 100%; height: auto; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 1rem; background: radial-gradient(720px 420px at 50% -80px, rgba(139, 92, 246, .28), transparent 70%), radial-gradient(520px 320px at 100% 100%, rgba(78, 222, 163, .08), transparent 70%), linear-gradient(180deg, #0f0d16, var(--mv-bg)); }
.mv-auth-page__card { width: 100%; max-width: 420px; padding: 1.75rem 1.25rem; background: var(--mv-surface-1); border: 1px solid var(--mv-border-strong); border-radius: var(--mv-radius-lg); box-shadow: 0 20px 48px -12px rgba(5, 3, 10, .85); }
@media (min-width: 480px) {
  .mv-auth-page__card { padding: 2.25rem 2rem; }
}
.mv-auth__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Logo (approved transparent logo, natural ratio) ---------- */
.mv-auth__logo { display: flex; justify-content: center; margin: 0 0 .75rem; }
.mv-auth__logo-link { display: inline-flex; line-height: 0; border-radius: 6px; }
.mv-auth__logo-link img { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; }
.mv-auth-page .mv-auth__logo-link img { height: 72px; }

/* ---------- Form ---------- */
.mv-auth__form { display: block; width: 100%; margin: 0; }
/* the form keeps the original .account-from class (parity); cancel main.css ".login-and-register .account-from { max-width: 300px }" */
.login-and-register .account-from.mv-auth__form { max-width: none; }
.mv-auth__title { margin: 0 0 1rem; color: var(--mv-text); font-size: 1.375rem; font-weight: 700; line-height: 1.3; text-align: center; }
.mv-auth__field { margin: 0 0 1rem; min-width: 0; }
.mv-auth__label { display: block; margin: 0 0 .35rem; color: var(--mv-text-muted); font-size: .875rem; font-weight: 600; }
.mv-auth__label--hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mv-auth__label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .35rem; }
.mv-auth__label-row .mv-auth__label { margin: 0; }
.mv-auth__input { display: block; width: 100%; min-width: 0; height: 48px; padding: 0 .9rem; color: var(--mv-text); background: var(--mv-surface-2); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); font: inherit; font-size: 1rem; box-shadow: none; color-scheme: dark; }
.mv-auth__input::placeholder { color: var(--mv-text-dim); }
.mv-auth__input:focus { border-color: var(--mv-primary); outline: 2px solid var(--mv-accent); outline-offset: 1px; background: #14121b; }
.mv-auth__input:disabled { opacity: .6; cursor: not-allowed; }

.mv-auth__captcha { display: flex; align-items: center; gap: .5rem; }
.mv-auth__captcha .mv-auth__input { flex: 1 1 auto; }
.mv-auth__captcha-img { flex: 0 1 auto; width: auto; min-width: 72px; max-width: 42%; height: 48px; object-fit: contain; background: var(--mv-surface-3); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); cursor: pointer; }
.mv-auth__captcha-img:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.mv-auth__ghost { flex: 0 0 auto; min-width: 44px; min-height: 48px; padding: 0 .85rem; color: var(--mv-primary-text); background: transparent; border: 1px solid var(--mv-border-strong); border-radius: var(--mv-radius); font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mv-auth__ghost:hover:not(:disabled) { color: var(--mv-accent); border-color: var(--mv-accent); }
.mv-auth__ghost:disabled { opacity: .6; cursor: not-allowed; }
.mv-auth__ghost:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }

.mv-auth__check { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0 0 .5rem; color: var(--mv-text-muted); font-size: .875rem; }
.mv-auth__checkbox { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--mv-primary-strong); }
.mv-auth__checkbox:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.mv-auth__check label { cursor: pointer; }

.mv-auth__submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: .25rem 0 .5rem; padding: 0 1rem; color: #fff; background: linear-gradient(110deg, var(--mv-primary-strong), #7447e0); border: 0; border-radius: var(--mv-radius); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: filter .2s ease; }
.mv-auth__submit:hover:not(:disabled) { filter: brightness(1.12); }
.mv-auth__submit:disabled { opacity: .6; cursor: not-allowed; }
.mv-auth__submit:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.mv-auth__submit--danger { background: linear-gradient(110deg, #c0415a, #a3304a); }

.mv-auth__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem; color: var(--mv-primary-text); text-decoration: none; border-radius: 6px; }
.mv-auth__link:hover { color: var(--mv-accent); text-decoration: underline; }
.mv-auth__link:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 0; }
.mv-auth__link--small { font-size: .8125rem; }
.mv-auth__link--danger { color: var(--mv-danger); }

.mv-auth__switch { margin: 0; color: var(--mv-text-dim); font-size: .875rem; text-align: center; }
.mv-auth__hint { margin: 0 0 .75rem; color: var(--mv-danger); font-size: .8125rem; }
.mv-auth__notice { margin: 0 0 1rem; padding: .85rem 1rem; color: var(--mv-text); background: var(--mv-primary-soft); border: 1px solid var(--mv-border-strong); border-radius: var(--mv-radius); font-size: .9375rem; text-align: center; }
.mv-auth__notice--warn { color: var(--mv-danger); border-color: rgba(255, 180, 171, .5); background: rgba(255, 180, 171, .08); font-size: .875rem; }

.mv-auth__oauth { margin-top: .75rem; }
.mv-auth__divider { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; color: var(--mv-text-dim); font-size: .8125rem; }
.mv-auth__divider::before, .mv-auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mv-border); }
.mv-auth__oauth-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.mv-auth__oauth-btn { flex: 1 1 8rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 .85rem; color: #fff; border-radius: var(--mv-radius); font-size: .875rem; font-weight: 600; text-decoration: none; }
.mv-auth__oauth-btn:hover { color: #fff; filter: brightness(1.12); }
.mv-auth__oauth-btn:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.mv-auth__oauth-btn--qq { background: #1678b5; }
.mv-auth__oauth-btn--weixin { background: #0f7a56; }

.mv-auth__legal { margin: 1rem 0 0; color: var(--mv-text-dim); font-size: .75rem; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.mv-auth__legal a { color: var(--mv-primary-text); text-decoration: underline; }
.mv-auth__legal a:hover { color: var(--mv-accent); }

@media (prefers-reduced-motion: reduce) {
  .mv-auth__submit { transition: none; }
}