/* Login-only visual layer. Authentication and OAuth live in the original template. */
body.login-page {
    --dy-topbar-h: 68px;
    --dy-bg: transparent;
    --dy-text: #242428;
    --dy-text-secondary: #686872;
    --dy-text-muted: #7b7b85;
    --dy-border: rgba(35, 35, 48, .1);
    --dy-border-strong: rgba(35, 35, 48, .16);
    --dy-card: #fcfcfd;
    --dy-card-hover: #f1f1f5;
    --dy-surface: #f1f2f5;
    --dy-shadow: 0 12px 36px rgba(46, 46, 68, .12);
    --dy-accent: #0071e3;
    --dy-accent-hover: #0071e3;
    --dy-accent-soft: rgba(0, 113, 227, .12);
    --login-ink: #242428;
    --login-muted: #686872;
    color-scheme: light;
    background: #f4f5f8;
    color: var(--login-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}
.login-page #frontWrap {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: clip;
    font-family: inherit;
    background:
        radial-gradient(ellipse at 16% 22%, rgba(216, 227, 247, .8), transparent 48%),
        radial-gradient(ellipse at 84% 64%, rgba(0, 113, 227, .08), transparent 46%),
        radial-gradient(ellipse at 50% 110%, rgba(0, 113, 227, .035), transparent 56%),
        #f7f7f9;
}
.login-page #frontWrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: min(66vw, 52rem);
    aspect-ratio: 1;
    top: 13%;
    left: -23%;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgba(255, 255, 255, .12), 0 0 0 10rem rgba(255, 255, 255, .1);
}
.login-page #frontTopbar {
    background: rgba(250, 250, 252, .66);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 1px 0 rgba(31, 40, 60, .035);
}
.login-page #frontWrap.no-sidebar .topbar-inner {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 44px);
}
.login-page .login-brand-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.login-page .topbar-logo-img {
    height: 30px;
    max-width: 152px;
    /* Keep the original lettering; mask its dark background and apply exact blue. */
    filter: url("#loginBrandBlue");
    mix-blend-mode: normal;
}
.login-page .topbar-left { gap: 18px; }
.login-page .topbar-divider { height: 16px; background: rgba(36, 36, 40, .14); }
.login-page .topbar-page { font-size: 13px; letter-spacing: .015em; color: #6c6c76; }
.login-page .topbar-login-btn { display: none; }
.login-page .topbar-dropdown-logout:hover { background: rgba(0, 113, 227, .08); }
.login-page #frontWrap.no-sidebar #frontMain {
    display: block;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: #c9c9d0 transparent;
}
.login-page #frontMain::-webkit-scrollbar { display: block; width: 6px; }
.login-page #frontMain::-webkit-scrollbar-thumb { background: #c9c9d0; border-radius: 6px; }
.login-page #frontWrap.no-sidebar .mainBox {
    min-height: 100%;
    flex-direction: column;
}
.login-page #frontWrap.no-sidebar .dy-login-wrap {
    min-height: min-content;
    flex-direction: column;
    padding: 40px 24px;
}
.login-page .dy-login-card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 448px;
    padding: 36px 40px 30px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 30px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(32px) saturate(135%);
    backdrop-filter: blur(32px) saturate(135%);
    box-shadow: 0 24px 70px -28px rgba(64, 65, 91, .23), 0 4px 18px rgba(46, 46, 68, .035), inset 0 1px 0 #fff;
    overflow: visible;
    opacity: 1;
    transform: none;
}
.login-page .login-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, rgba(0, 113, 227, .055));
    color: var(--dy-accent);
    box-shadow: 0 7px 18px -10px rgba(0, 113, 227, .48), inset 0 -1px 2px rgba(0, 113, 227, .06);
}
.login-page .dy-login-card .login-logo { margin: 0 0 10px; text-align: center; }
.login-page .dy-login-card .login-logo h2 {
    margin: 0;
    font-size: 30px;
    font-size: clamp(1.625rem, 2.5vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.25;
    color: var(--login-ink);
}
.login-page .dy-login-card .login-hint {
    margin: 0 0 30px;
    color: var(--login-muted);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .005em;
    line-height: 1.7;
    text-wrap: pretty;
}
.login-page #user_login .form-row { margin: 0; }
.login-page #user_login .form-row + .form-row { margin-top: 20px; }
.login-page #user_login .form-row label {
    margin: 0 0 8px 2px;
    color: #4b4b55;
    font-size: .8125rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .015em;
}
.login-page .login-input { position: relative; }
.login-page .login-field-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    text-align: center;
    pointer-events: none;
    color: #81818b;
    font-size: 14px;
}
.login-page #user_login input.form-control {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 13px 16px 13px 44px;
    border: 1px solid rgba(43, 45, 67, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .88);
    color: #26262c;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(33, 33, 50, .015);
    transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.login-page #user_login input.form-control::placeholder { color: #70707b; font-weight: 400; }
.login-page #user_login input.form-control:hover { border-color: rgba(43, 45, 67, .23); }
.login-page #user_login input.form-control:focus {
    outline: none;
    border-color: var(--dy-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .1);
}
.login-page #user_login input.form-control:-webkit-autofill {
    -webkit-text-fill-color: #26262c;
    -webkit-box-shadow: 0 0 0 1000px #f0f4fb inset;
    caret-color: #26262c;
}
.login-page #user_login .login-submit-row { margin-top: 28px; }
.login-page #frontWrap .login-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 42px;
    border: 1px solid rgba(0, 113, 227, .1);
    border-radius: 13px;
    background: var(--dy-accent);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .035em;
    box-shadow: 0 5px 14px -7px rgba(0, 113, 227, .46), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: background-color .15s, box-shadow .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.login-page #frontWrap .login-submit .fa {
    position: absolute;
    right: 18px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
}
.login-page #frontWrap .login-submit:hover { background: var(--dy-accent); box-shadow: 0 7px 18px -8px rgba(0, 113, 227, .5); }
.login-page #frontWrap .login-submit:active,
.login-page #frontWrap .login-submit[data-motion-pressed="true"] { background: var(--dy-accent); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .13); transition: none; }
.login-page .login-mode-toggle:focus-visible,
.login-page #frontWrap .login-submit:focus-visible,
.login-page .topbar-logo:focus-visible { outline: 3px solid var(--dy-accent); outline-offset: 4px; }
.login-page .dy-login-card .login-msg {
    min-height: 20px;
    margin: 14px 0 0;
    color: var(--dy-accent);
    font-size: .8125rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.login-page #user_login .login-captcha[hidden] { display: none; }
.login-page .login-captcha-controls { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; align-items: center; }
.login-page #user_login .login-captcha input.form-control { min-width: 0; padding-left: 14px; }
.login-page .login-captcha-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(43, 45, 67, .12);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    touch-action: manipulation;
}
.login-page .login-captcha-refresh img { display: block; width: 132px; height: 48px; max-width: 100%; object-fit: contain; }
.login-page .login-captcha-refresh:focus-visible { outline: 3px solid var(--dy-accent); outline-offset: 3px; }
.login-page .login-captcha-help { margin: 7px 2px 0; font-size: .75rem; line-height: 1.5; color: var(--login-muted); }
.login-page #frontWrap .login-submit:disabled { cursor: wait; opacity: .65; box-shadow: none; }
.login-page .login-captcha-refresh:disabled { cursor: wait; opacity: .6; }
.login-page #frontWrap .login-submit[aria-busy="true"] .fa { display: none; }
.login-page #frontWrap .login-submit[aria-busy="true"]::after,
.login-page .login-captcha-refresh[aria-busy="true"]::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: login-auth-spin .8s linear infinite;
}
.login-page #frontWrap .login-submit[aria-busy="true"]::after { position: absolute; right: 18px; }
.login-page .login-captcha-refresh[aria-busy="true"] img { display: none; }
@keyframes login-auth-spin { to { transform: rotate(360deg); } }
.login-page .login-panel[hidden] { display: none; }
.login-page .login-mode-toggle {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(43, 45, 67, .09);
    border-radius: 13px;
    background: rgba(255, 255, 255, .84);
    transition: background-color .15s;
    touch-action: manipulation;
}
.login-page .login-mode-toggle::before { display: none; }
.login-page .login-mode-toggle__icon { top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #656570; }
.login-page .login-mode-toggle:hover,
.login-page .login-mode-toggle[data-motion-pressed="true"] { background: #eff4fa; }
.login-page .login-wecom-title { color: #454550; }
.login-page .login-wecom-tip { color: var(--login-muted); font-size: .8125rem; }
.login-page .login-divider { color: #757580; }
.login-page .login-divider::before,
.login-page .login-divider::after { background: rgba(43, 45, 67, .1); }
.login-page .login-wechat-qr img { max-width: 100%; }
.login-page .ww-login-panel { max-width: 100%; overflow: auto; border-radius: 12px; }
.login-page #wechatQrStatus { max-width: 400px; margin: -20px auto 28px; padding: 0 24px; text-align: center; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-page .dy-login-card { background: #fcfcfd; }
    .login-page #frontTopbar { background: #f8f8fa; }
}
@media (max-width: 520px) {
    body.login-page { --dy-topbar-h: 62px; }
    .login-page .topbar-logo-img { height: 28px; max-width: 138px; }
    .login-page #frontWrap.no-sidebar .dy-login-wrap { padding: 28px 20px; }
    .login-page .dy-login-card { padding: 32px 26px 24px; border-radius: 26px; }
    .login-page .dy-login-card .login-hint { font-size: .8125rem; }
    .login-page .login-symbol { width: 52px; height: 52px; border-radius: 16px; }
    .login-page .login-mode-toggle { top: 14px; right: 14px; }
}
@media (max-height: 620px) and (min-width: 521px) {
    .login-page #frontWrap.no-sidebar .dy-login-wrap { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before, .login-page *::after { transition: none !important; }
    .login-page #loginCard { transform: none !important; opacity: 1 !important; }
    .login-page .login-submit, .login-page .login-mode-toggle { transform: none !important; }
    .login-page .login-submit[aria-busy="true"]::after,
    .login-page .login-captcha-refresh[aria-busy="true"]::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .login-page .dy-login-card, .login-page #frontTopbar { background: #fcfcfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .login-page .dy-login-card, .login-page #frontTopbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #686872; }
    .login-page #user_login input.form-control { border-color: #686872; }
    .login-page .dy-login-card .login-hint, .login-page #user_login input.form-control::placeholder { color: #4b4b55; }
}
@media (forced-colors: active) {
    .login-page #frontWrap { background: Canvas; }
    .login-page .dy-login-card, .login-page #frontTopbar { background: Canvas; border: 1px solid CanvasText; }
    .login-page #frontWrap .login-submit { border: 1px solid ButtonText; }
}