@charset "UTF-8";
    
:root {
    color-scheme:light;
    --blue:#2465e8;
    --blue-dark:#154cca;
    --ink:#142d52;
    --muted:#738299;
    --line:#e5ebf4;
    --font:Inter,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}

* {
    box-sizing:border-box}
body {
    margin:0;
    font-family:var(--font);
    font-size:1rem;
    color:var(--ink);
    background:#f7faff;
    -webkit-font-smoothing:antialiased}
button,input {
    font:inherit}
button,a,input {
    -webkit-tap-highlight-color:transparent}
button {
    cursor:pointer}
button:disabled {
    cursor:wait}
button:focus-visible,a:focus-visible {
    outline:3px solid #6799fa;
    outline-offset:4px}
button svg {
    pointer-events:none}
a {
    color:inherit;
    text-decoration:none}
a:hover {
    color:var(--blue)}

.page {
    min-height:100svh;
    display:flex;
    flex-direction:column;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:radial-gradient(ellipse at 30% 50%,#e8f2ff 0%,#f1f7ff 43%,#f8fbff 73%)}
.page:before {
    content:"";
    position:absolute;
    z-index:-1;
    width:min(1100px,80vw);
    height:680px;
    right:-160px;
    top:-180px;
    background:
        radial-gradient(ellipse 48% 8% at 60% 44%,rgba(255,255,255,.85),rgba(177,222,255,.24) 42%,transparent 76%),
        radial-gradient(ellipse 40% 26% at 68% 37%,rgba(117,205,250,.25),transparent 75%),
        radial-gradient(ellipse 44% 35% at 48% 54%,rgba(104,157,246,.16),transparent 78%);
    filter:blur(26px);
    transform:rotate(-24deg);
    pointer-events:none}
.header {
    width:min(1280px,calc(100% - 112px));
    margin:0 auto;
    min-height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    z-index:1}
.brand {
    display:flex;
    align-items:center;
    gap:25px}
.brand img {
    width:66px;
    height:66px;
    object-fit:contain}
.brand-divider {
    width:1px;
    height:29px;
    background:#d4dfef}
.brand-name {
    font-size:1.125rem;
    font-weight:600;
    letter-spacing:.09em;
    color:#30476a}

.main {
    flex:1;
    width:min(1160px,calc(100% - 112px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 438px;
    gap:70px;
    align-items:center;
    padding:14px 0 28px;
    position:relative;
    z-index:1}
.hero {
    min-width:0;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding-top:12px}
.hero-copy {
    position:relative;
    z-index:2;
    padding-left:3px}
.eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    color:#4f709c;
    font-size:.875rem;
    letter-spacing:.2em;
    margin-bottom:22px}
.eyebrow>span {
    display:inline-block;
    width:24px;
    height:2px;
    background:#367bee}
.hero h1 {
    -webkit-user-select:none;
    user-select:none;
    font-size:clamp(2.5rem,4.1vw,3.5rem);
    font-weight:650;
    line-height:1.38;
    letter-spacing:.03em;
    margin:0;
    white-space:nowrap}
.hero h1>span,.hero h1 strong {
    display:block}
.hero h1 strong {
    font-weight:650;
    color:var(--blue);
    margin-top:1px}
.slogan-period {
    color:var(--blue);
    padding-left:4px}
.slogan-rule {
    width:122px;
    height:4px;
    margin-top:25px;
    background:#d4e6fc;
    border-radius:4px;
    overflow:hidden}
.slogan-rule span {
    display:block;
    width:100%;
    height:100%;
    background:#2b70ee;
    border-radius:4px;
    transform-origin:left center;
    animation:slogan-rule-fill 5s linear infinite}
@keyframes slogan-rule-fill {
    0% { transform:scaleX(0); opacity:1; }
    78%, 88% { transform:scaleX(1); opacity:1; }
    98%, 100% { transform:scaleX(1); opacity:0; }
}
.hero-art {
    position:relative;
    width:calc(100% + 50px);
    margin:2px 0 -16px -38px;
    max-width:580px;
    aspect-ratio:3/2;
    mix-blend-mode:multiply;
    pointer-events:none}
.hero-art img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:saturate(.9);
    mask-image:linear-gradient(to bottom,transparent,black 9%,black 90%,transparent)}
.hero-caption {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    color:#6c8bb2;
    letter-spacing:.25em;
    font-size:.75rem;
    margin:0 52px 0 0}
.hero-caption i {
    height:1px;
    width:35px;
    background:#c8dcf5}

.login-card {
    background:#fff;
    border:1px solid #edf2f8;
    border-radius:22px;
    padding:32px 39px 0;
    box-shadow:0 22px 65px -18px #31599026,0 2px 8px #446da304;
    position:relative;
    min-width:0}
.login-card:before {
    content:"";
    position:absolute;
    top:0;
    left:39px;
    right:39px;
    height:3px;
    background:linear-gradient(90deg,#276bea,#69aaf8);
    border-radius:0 0 8px 8px}
.card-heading h2 {
    font-size:1.5rem;
    letter-spacing:0;
    white-space:nowrap;
    line-height:1.4;
    font-weight:650;
    margin:0}
.tabs {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    padding:4px;
    background:#f3f6fb;
    border-radius:9px;
    gap:2px;
    margin:24px 0 22px}
.tab {
    border:0;
    border-radius:6px;
    background:transparent;
    min-height:43px;
    font-size:.9375rem;
    font-weight:500;
    color:#72819a;
    padding:8px 5px;
    white-space:nowrap;
    transition:background .18s,color .18s,box-shadow .18s}
.tab.active {
    color:var(--blue);
    background:#fff;
    box-shadow:0 2px 7px #19385a0d;
    font-weight:600}
.tab:hover {
    color:var(--blue)}
.field-group {
    margin-bottom:17px}
.field-group>label {
    display:block;
    font-size:.875rem;
    font-weight:550;
    color:#34496a;
    margin-bottom:8px}
.input-wrap {
    height:48px;
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 15px;
    border:1px solid #dfe6f0;
    border-radius:8px;
    background:#fbfcfe;
    transition:box-shadow .2s,border-color .2s,background .2s;
    min-width:0}
.input-wrap:focus-within {
    border-color:#5286ed;
    box-shadow:0 0 0 3px #276be810;
    background:#fff}
.input-wrap.invalid {
    border-color:#d45b67;
    background:#fffafb}
.input-wrap>svg {
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:none;
    stroke:#8a9bb4;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round}
.input-wrap:focus-within>svg {
    stroke:var(--blue)}
.input-wrap input {
    /* 留白由外层承担，避免自动填充底色覆盖图标右侧间距。 */
    flex:1 1 0%;
    width:100%;
    min-width:0;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    border-radius:8px;
    padding:0;
    color:#243c60;
    font-size:.875rem}
.input-wrap input::placeholder {
    color:#99a5b7;
    opacity:1}
.icon-button {
    display:flex;
    align-items:center;
    justify-content:center;
    height:42px;
    width:42px;
    flex:0 0 42px;
    background:transparent;
    border:0;
    color:#8b9cb5;
    border-radius:6px;
    margin:0 -11.5px;
    padding:0}
.icon-button:hover {
    color:var(--blue);
    background:#f0f5fd}
.icon-button svg {
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round}
.eye-closed {
    display:none}
.icon-button[aria-pressed="true"] .eye-open {
    display:none}
.icon-button[aria-pressed="true"] .eye-closed {
    display:block}
.field-error {
    display:none;
    font-size:.75rem;
    line-height:1.5;
    color:#bf4155;
    margin-top:5px}
.field-error:not(:empty) {
    display:block}
.captcha-group {
    margin-bottom:20px}
.captcha-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) 115px;
    gap:10px}
.captcha-image {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:0;
    border:1px solid #dce7f8;
    border-radius:8px;
    background-color:#fff;
    color:#2a5da9;
    height:48px}
.captcha-image>span {
    font:italic 650 1.4rem Georgia,serif;
    letter-spacing:.13em}
.captcha-image>svg {
    width:14px;
    height:14px;
    fill:none;
    stroke:#7093c7;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0}
.captcha-image:hover {
    border-color:#8eafea}
.captcha-help {
    display:block;
    margin-top:8px;
    text-align:right;
    color:#8996aa;
    font-size:.75rem;
    line-height:1.5}
.login-button {
    width:100%;
    height:51px;
    border:0;
    background:var(--blue);
    color:white;
    border-radius:8px;
    font-size:1rem;
    font-weight:550;
    box-shadow:0 8px 18px #2465e829;
    transition:background .2s,transform .2s,box-shadow .2s}
.login-button:hover {
    background:var(--blue-dark);
    box-shadow:0 9px 22px #2465e83b;
    transform:translateY(-1px)}
.login-button:active {
    transform:translateY(0)}
.login-button:disabled {
    opacity:.75;
    transform:none}
.card-bottom {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:24px;
    border-top:1px solid #edf1f7;
    min-height:56px;
    font-size:.75rem;
    color:#8c9aae;
    line-height:1.5}
.card-bottom svg {
    height:15px;
    width:15px;
    fill:none;
    stroke:#8ba3c3;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
    animation:none!important;
    transition:none!important}
}

@media(min-width:1500px) {
    .main {
    gap:106px;
    grid-template-columns:minmax(0,1fr) 456px;
    width:min(1240px,calc(100% - 140px));
    padding-top:28px;
    padding-bottom:50px}
.login-card {
    padding-left:43px;
    padding-right:43px}
.hero h1 {
    font-size:3.75rem}
.hero-art {
    width:calc(100% + 80px);
    margin-left:-45px;
    max-width:680px}
.hero-caption {
    margin-right:25px}
}

@media(max-width:1100px) {
    .header {
    width:calc(100% - 64px);
    min-height:102px}
.main {
    width:calc(100% - 72px);
    gap:35px;
    grid-template-columns:minmax(0,1fr) 400px;
    padding-top:24px}
.hero h1 {
    font-size:2.6rem;
    letter-spacing:0}
.login-card {
    padding:34px 30px 0}
.hero-art {
    width:calc(100% + 45px);
    margin-left:-25px}
.hero-caption {
    margin-right:0;
    gap:12px}
.card-heading h2 {
    font-size:1.5rem}
}

@media(max-width:880px) {
    .header {
    width:calc(100% - 48px);
    min-height:90px}
.brand {
    gap:17px}
.brand img {
    width:58px;
    height:58px}
.brand-name {
    font-size:1rem;
    letter-spacing:.03em}
.main {
    width:min(460px,calc(100% - 40px));
    display:flex;
    flex-direction:column;
    gap:27px;
    padding:15px 0 34px}
.hero {
    padding:0;
    width:100%;
    align-self:auto}
.hero-copy {
    text-align:center;
    padding:0}
.eyebrow,.slogan-rule,.hero-art,.hero-caption {
    display:none}
.hero h1 {
    font-size:2rem;
    line-height:1.4;
    letter-spacing:.05em}
.hero h1>span,.hero h1 strong {
    display:block}
.slogan-period {
    display:none}
.login-card {
    width:100%;
    padding:32px 34px 0;
    border-radius:18px}
.login-card:before {
    left:34px;
    right:34px}
.card-heading h2 {
    font-size:1.5rem}
.tabs {
    margin-top:24px;
    margin-bottom:24px}
.footer {
    padding:19px 16px 22px}
.friend-links {
    gap:14px}
.page:before {
    width:650px;
    height:480px;
    right:-240px;
    top:-180px;
    opacity:.65}
}

@media(max-width:480px) {
    .header {
    width:calc(100% - 40px);
    min-height:84px;
    gap:12px}
.brand {
    gap:12px}
.brand img {
    width:51px;
    height:51px}
.brand-divider {
    height:25px}
.brand-name {
    font-size:.875rem;
    letter-spacing:0}
.main {
    width:calc(100% - 32px);
    gap:25px;
    padding-top:13px}
.hero h1 {
    font-size:1.875rem;
    line-height:1.45;
    letter-spacing:.04em}
.login-card {
    padding:28px 23px 0;
    border-radius:16px}
.card-heading h2 {
    font-size:1.25rem}
.tabs {
    margin:22px 0 23px}
.tab {
    font-size:.875rem;
    min-height:42px}
.input-wrap,.captcha-image,.login-button {
    height:50px}
.field-group {
    margin-bottom:19px}
.captcha-group {
    margin-bottom:20px}
.captcha-row {
    grid-template-columns:minmax(0,1fr) 103px;
    gap:8px}
.input-wrap {
    padding:0 12px;
    gap:12px}
.captcha-image {
    gap:5px}
.captcha-image>span {
    font-size:1.25rem;
    letter-spacing:.1em}
.card-bottom {
    margin-top:25px;
    min-height:60px}
.friend-links {
    gap:11px}
.copyright {
    max-width:320px;
    margin:auto;
    gap:2px}
.registration {
    gap:9px}
.toast {
    bottom:16px}
}

@media(max-width:350px) {
    .brand-name {
    font-size:.8125rem}
.brand {
    gap:9px}
.login-card {
    padding-left:18px;
    padding-right:18px}
.hero h1 {
    font-size:1.625rem}
.captcha-row {
    grid-template-columns:minmax(0,1fr) 91px}
.captcha-image>svg {
    display:none}
.friend-links {
    gap:8px}
}


/* Shared footer remains configuration driven, with the login page's light palette. */
.page .foot-container {
    position:static;
    flex-shrink:0;
    padding:20px;
    border-top:1px solid #e4edf8;
    background:#f8fbffb0;
    color:#8b97a9;
    line-height:1.8}

.page .foot-container a {
    color:#657994}
.page .foot-container a:hover {
    color:var(--blue)}

.page .foot-container .sp-vline {
    background:#cdd9e9}

.required,.red {
    color:#d34f5f}
.required {
    margin-left:4px}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0}

.captcha-image {
    padding:0 8px;
    gap:5px}
.verify-img {
    visibility:hidden;
    width:80px;
    max-width:calc(100% - 19px);
    height:30px;
    object-fit:contain}
.verify-img.is-ready { visibility:visible; }
.captcha-refresh.is-loading { cursor:wait; }

.input-wrap select {
    width:100%;
    height:100%;
    border:0;
    background:transparent;
    padding:0;
    color:#243c60;
    font:inherit}

.guest-login-form {
    display:none;
    min-height:250px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    align-content:center;
    line-height:1.9;
    color:#738299}

.customer-service {
    text-align:center;
    margin-top:20px;
    color:#738299;
    font-size:14px}
.customer-service img {
    display:block;
    width:150px;
    height:150px;
    margin:10px auto}

@media(max-width:880px) {
.brand-name {
    overflow-wrap:anywhere}
.tab {
    white-space:normal}
.page .foot-container {
    padding:18px 16px}
}

/* 登录品牌图按自身比例显示，兼容横版字标；旧站点方形 logo 保持原样。 */
.brand .brand-logo-custom {
    width:auto;
    height:60px;
    max-width:210px;
    object-fit:contain;
    flex-shrink:0;
}
@media(max-width:880px) {
    .brand .brand-logo-custom { height:44px; max-width:154px; }
    .brand { min-width:0; }
    .brand-divider { flex-shrink:0; }
    .brand-name { line-height:1.5; }
}
@media(max-width:480px) {
    .brand .brand-logo-custom { height:36px; max-width:126px; }
}