@font-face {
  font-family: "Ranking Honghulu Brand";
  src: url("/ranking?asset=loginFont") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Match the clock login; scope every rule to keep the workbench unchanged. */
#ranking-login {
  --canvas: #090909;
  --surface: #171717;
  --ink: #f5f5f5;
  --muted: #aaa6a6;
  --accent: #df1728;
  --accent-hover: #c81323;
  --line: #323030;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(72px + env(safe-area-inset-top, 0px)) calc(48px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(48px + env(safe-area-inset-left, 0px));
  background: var(--canvas);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#ranking-login .auth-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; max-width: 1040px; margin: auto; }
#ranking-login .brand-art { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 24px 72px 24px 16px; border-right: 1px solid var(--line); }
#ranking-login .brand-symbol { position: relative; display: block; flex: 0 0 auto; width: 236px; aspect-ratio: 508 / 864; overflow: hidden; mix-blend-mode: screen; }
/* Same close crop of the original brand image as the clock login. */
#ranking-login .brand-symbol img { position: absolute; width: 246.8504%; height: auto; max-width: none; left: -73.4252%; top: -19.4444%; }
/* Reserve the clock login's 14px gap and 44px help row for aligned centering. */
#ranking-login .auth-card { width: 100%; min-width: 0; max-width: 400px; margin-left: auto; padding-bottom: 58px; }
#ranking-login .brand-hero { margin-bottom: 42px; }
#ranking-login .brand-title { margin: 0 0 14px; font-family: "Ranking Honghulu Brand", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; font-synthesis: none; font-size: 68px; line-height: 1.16; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
#ranking-login .brand-intro { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.6; letter-spacing: .04em; }
#ranking-login .brand-mobile { display: none; }
#ranking-login .system-switch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 24px 0 0; padding: 14px 18px; border: 1px solid #f5f5f5; border-radius: 6px; background: #f5f5f5; color: #171717; font-size: 18px; font-weight: 650; line-height: 1.5; transition: background 180ms ease, border-color 180ms ease; }
#ranking-login .system-switch:hover { background: #fff; border-color: #fff; }
#ranking-login .system-switch svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#ranking-login .system-switch-icon { width: 24px; height: 24px; color: var(--accent); }
#ranking-login .system-switch-arrow { width: 22px; height: 22px; margin-left: auto; transition: transform 180ms ease; }
#ranking-login .system-switch:hover .system-switch-arrow { transform: translateX(3px); }
#ranking-login .auth-fields { display: flex; flex-direction: column; gap: 18px; }
#ranking-login label { display: block; margin: 0 0 11px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #d8d5d5; }
#ranking-login .password-input-group { display: flex; align-items: stretch; gap: 0; border: 1px solid #656060; border-radius: 6px; background: var(--surface); transition: border-color 180ms ease; }
#ranking-login .password-input-group:hover { border-color: #8d8585; }
#ranking-login .password-input-group:focus-within { border-color: #ff7882; outline: 2px solid #ff7882; outline-offset: 3px; }
#ranking-login .password-input-group input { width: 100%; min-width: 0; height: 56px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
#ranking-login .password-input-group input::placeholder { color: var(--muted); font-size: 14px; }
#ranking-login .password-input-group button { min-width: 64px; padding: 0 16px; border: 0; border-radius: 4px; background: transparent; color: #c6c1c1; font-size: 13px; font-weight: 400; }
#ranking-login .password-input-group button:hover { color: #fff; }
#ranking-login .remember-device-row { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: -10px 0; color: var(--muted); font-size: 12px; line-height: 1.6; cursor: pointer; }
#ranking-login .remember-device-row input { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
#ranking-login .remember-device-row input:focus-visible { outline: 2px solid #ff7882; outline-offset: 3px; }
#ranking-login button, #ranking-login a, #ranking-login input { -webkit-tap-highlight-color: transparent; }
#ranking-login button, #ranking-login a { touch-action: manipulation; }
#ranking-login button:focus-visible, #ranking-login a:focus-visible { outline: 2px solid #ff7882; outline-offset: 5px; }
#ranking-login button.primary { min-height: 56px; width: 100%; margin-top: 4px; padding: 12px 20px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 650; letter-spacing: .12em; transition: background 180ms ease, transform 180ms ease; }
#ranking-login button.primary:hover { background: var(--accent-hover); }
#ranking-login button.primary:disabled { cursor: wait; background: #8d252f; color: #f4dfe1; opacity: 1; }
#ranking-login .trial-button { min-height: 44px; border: 1px solid #656060; border-radius: 6px; background: transparent; color: var(--ink); }
#ranking-login .trial-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#ranking-login .status-message { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
#ranking-login .status-message:empty { display: none; }
#ranking-login .status-message[data-tone="error"] { color: #ff9da6; }
#ranking-login .status-message[data-tone="success"] { color: #f5f5f5; }
#ranking-login a { color: inherit; text-decoration: none; }
#ranking-login .auth-download { display: flex; align-items: center; gap: 14px; min-height: 80px; margin-top: 27px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color 180ms ease; }
#ranking-login .download-tv { width: 25px; height: 25px; flex: 0 0 auto; color: #c6c1c1; }
#ranking-login .download-copy { display: flex; flex-direction: column; gap: 5px; }
#ranking-login .download-copy strong { font-size: 18px; line-height: 1.5; font-weight: 550; }
#ranking-login .download-copy small { font-size: 11px; line-height: 1.4; color: var(--muted); }
#ranking-login .download-arrow { width: 20px; height: 20px; flex: 0 0 auto; margin-left: auto; color: #c6c1c1; transition: transform 180ms ease; }
#ranking-login .auth-download:hover { color: #ff919b; }
#ranking-login .auth-download:hover .download-arrow { transform: translateY(2px); color: #ff919b; }
#ranking-login .auth-download svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
#ranking-login .auth-footer { margin-top: 48px; text-align: center; color: #9d9797; font-size: 11px; line-height: 1.5; }
#ranking-login .auth-footer a { display: inline-flex; align-items: center; min-height: 44px; }
#ranking-login .auth-footer a:hover { color: var(--ink); }

@media (max-width: 1050px) {
  #ranking-login .auth-main { column-gap: 48px; }
  #ranking-login .brand-art { padding-right: 48px; }
  #ranking-login .brand-symbol { width: 190px; }
  #ranking-login .brand-title { font-size: 60px; }
}
@media (max-width: 760px) {
  #ranking-login { padding: calc(48px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(28px + env(safe-area-inset-left, 0px)); }
  #ranking-login .auth-main { display: block; max-width: 400px; }
  #ranking-login .brand-art { display: none; }
  #ranking-login .auth-card { max-width: none; }
  #ranking-login .brand-hero { display: flex; align-items: center; gap: 25px; margin-bottom: 38px; }
  #ranking-login .brand-mobile { display: block; width: 49px; }
  #ranking-login .brand-title { font-size: 53px; margin-bottom: 8px; letter-spacing: .015em; }
  #ranking-login .brand-intro { font-size: 18px; letter-spacing: .02em; }
  #ranking-login .auth-footer { margin-top: 42px; }
}
@media (max-width: 359px) {
  #ranking-login { padding: calc(32px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(22px + env(safe-area-inset-left, 0px)); }
  #ranking-login .brand-hero { gap: 20px; margin-bottom: 32px; }
  #ranking-login .brand-mobile { width: 42px; }
  #ranking-login .brand-title { font-size: 45px; }
  #ranking-login .brand-intro { font-size: 18px; letter-spacing: 0; }
  #ranking-login .remember-device-row { gap: 7px; font-size: 11px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  #ranking-login { padding-top: calc(36px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  #ranking-login .brand-hero { margin-bottom: 24px; }
  #ranking-login .auth-footer { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #ranking-login *, #ranking-login *::before, #ranking-login *::after { transition: none !important; }
}