:root { color-scheme: light; --text: #16344e; --muted: #71889a; --line: #dce8ef; --accent: #139ec9; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; min-height: 100%; }
body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: #f7fbfd; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #62cadd; outline-offset: 4px; }
.portal-wrap { min-height: 100vh; min-height: 100svh; }
.portal-shell { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(360px, 1fr); min-height: 100vh; min-height: 100svh; }
.portal-brand { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: clamp(28px, 3.1vw, 60px) clamp(30px, 4.4vw, 86px) 30px; background: radial-gradient(ellipse at 13% 5%, #c9f7f0 0%, transparent 44%), radial-gradient(ellipse at 92% 65%, #d3e6ff 0%, transparent 50%), linear-gradient(145deg, #ebfafb, #edf5ff); }
.portal-brand:after { content: ""; position: absolute; z-index: 0; width: 510px; height: 510px; left: -260px; bottom: -300px; border: 1px solid #bbdde880; border-radius: 50%; box-shadow: 0 0 0 46px #d6eef340, 0 0 0 96px #d6eef330; pointer-events: none; }
.portal-brand-header, .portal-hero-main, .portal-brand-foot { position: relative; z-index: 1; }
.portal-brand-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; }
.portal-brand-identity { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.portal-brand-logo { display: block; width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 16px #1698b71a; }
.portal-brand-identity strong { display: block; font-size: 23px; letter-spacing: 2px; line-height: 1.35; }
.portal-brand-identity small { display: block; color: #648797; font-size: 10px; letter-spacing: 1.7px; margin-top: 3px; }
.portal-brand-edition { font-size: 9px; font-weight: 600; letter-spacing: 2px; color: #6892a5; white-space: nowrap; }
.portal-brand-generic { color: #598d9e; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.7; max-width: 230px; }
.portal-brand-generic + .portal-brand-edition { display: none; }
.portal-hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; max-width: 720px; margin: 0 auto; padding-top: clamp(32px, 5vh, 68px); }
.portal-kicker { display: inline-flex; align-items: center; gap: 8px; color: #527f94; font-size: 11px; letter-spacing: 2px; }
.portal-kicker span { width: 6px; height: 6px; border-radius: 50%; background: #18b9b9; box-shadow: 0 0 0 4px #1bbeb91a; }
.portal-title { font-size: clamp(34px, 3.75vw, 62px); line-height: 1.32; letter-spacing: -.045em; font-weight: 650; margin: 22px 0 18px; color: #173d58; }
.portal-title em { font-style: normal; background: linear-gradient(100deg, #08aaa8 0%, #2686d9 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-copy { margin: 0; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.9; letter-spacing: .4px; color: #628698; }
.portal-hero-art { width: min(114%, 780px); max-width: calc(100% + 70px); margin: -6px -35px 0; align-self: center; }
.portal-hero-image { display: block; width: 100%; height: auto; max-height: min(43vh, 470px); object-fit: contain; }
.portal-brand-foot { display: flex; justify-content: flex-start; gap: clamp(20px, 3.1vw, 54px); margin-top: 12px; color: #628799; font-size: 11px; letter-spacing: 1px; }
.portal-brand-foot span { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.portal-brand-foot svg { width: 15px; height: 15px; stroke-width: 1.5; }
.portal-panel { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 90px clamp(30px, 5vw, 92px); background: #fff; }
.portal-card { width: 100%; max-width: 390px; min-width: 0; }
.portal-card-eyebrow { margin-bottom: 16px; color: #61a2b6; font-size: 10px; font-weight: 600; letter-spacing: 2.8px; }
.portal-card-head { margin-bottom: 34px; }
.portal-card-head h2 { font-size: clamp(27px, 2.5vw, 34px); font-weight: 600; letter-spacing: -1px; line-height: 1.35; color: #18384f; margin: 0 0 10px; }
.portal-card-head p { margin: 0; color: #8797a3; font-size: 13px; line-height: 1.8; }
.portal-form { display: grid; gap: 22px; }
.portal-field { min-width: 0; }
.portal-field label { display: block; color: #4c687c; font-size: 12px; font-weight: 500; margin-bottom: 9px; }
.portal-input-wrap { position: relative; }
.portal-field input { width: 100%; min-width: 0; height: 52px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; background: #fbfdfe; color: #23465e; font-size: 15px; outline: none; transition: border-color .18s, box-shadow .18s; }
.portal-field input::placeholder { color: #a6b4be; font-size: 13px; }
.portal-field input:focus { border-color: #39b7ce; background: white; box-shadow: 0 0 0 4px #1daec00d; }
.portal-input-wrap input { padding-right: 64px; }
.portal-password-toggle { position: absolute; right: 6px; top: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 6px; color: #8199a8; background: transparent; font-size: 11px; cursor: pointer; }
.portal-password-toggle:hover { background: #edf7fa; color: #148fab; }
.portal-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #82939f; font-size: 12px; line-height: 1.6; }
.portal-check label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.portal-check input[type="checkbox"] { margin: 0; width: 15px; height: 15px; accent-color: #17a7c0; flex-shrink: 0; }
.portal-check-hint { font-size: 10px; color: #9aabb7; }
.portal-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 14px 18px; border: 0; border-radius: 10px; background: linear-gradient(110deg, #15b5bc, #298ada); box-shadow: 0 8px 20px #199dc526; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: filter .18s, box-shadow .18s; }
.portal-submit:hover { filter: brightness(1.04); box-shadow: 0 10px 24px #199dc533; }
.portal-submit svg { width: 17px; height: 17px; stroke-width: 1.6; }
.portal-submit[disabled] { opacity: .75; cursor: wait; }
.portal-links, .portal-footnote { color: #9eacb5; font-size: 11px; line-height: 1.9; }
.portal-links { margin-top: 23px; }
.portal-links a { color: #668d9f; white-space: nowrap; }
.portal-links a:hover, .portal-inline-link:hover { color: #159cbd; }
.portal-agreement-intro { display: inline-flex; align-items: center; gap: 5px; }
.portal-agreement-intro input { margin: 0; width: 12px; height: 12px; accent-color: #23aebf; }
.portal-panel-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; color: #9aacb7; font-size: 10px; letter-spacing: 1px; }
.portal-panel-foot svg { width: 12px; height: 12px; stroke-width: 1.5; }
.portal-alert, .portal-hint { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.portal-alert { color: #b34e4e; background: #fff6f6; border: 1px solid #f3dddd; }
.portal-hint { color: #517f93; background: #f3fbfe; border: 1px solid #d9edf5; }
.portal-floating { position: absolute; z-index: 3; right: 28px; top: 25px; }
.portal-locale { max-width: 180px; padding: 7px 10px; color: #668698; background: #ffffffd9; border: 1px solid #e0ecf2; border-radius: 8px; font-size: 11px; }
.portal-back-home { display: block; text-align: center; margin-top: 24px; font-size: 12px; color: #8da1af; }
.initial-admin-hint { position: relative; }
.initial-admin-hint h3 { margin: 0 24px 6px 0; font-size: 13px; }
.initial-admin-hint p { margin: 6px 0; }
.initial-admin-hint code { color: #284f68; padding: 2px 6px; background: white; border-radius: 5px; }
.initial-admin-dismiss { position: absolute; top: 9px; right: 9px; border: 0; background: transparent; color: #7298aa; padding: 4px; cursor: pointer; }
.initial-admin-dismiss svg { width: 16px; height: 16px; }
.initial-admin-security { color: #b86354; }
.hidden { display: none !important; }
.portal-shell-agreement { grid-template-columns: minmax(0, 1fr); }
.portal-shell-agreement .portal-panel { padding: 48px max(24px, 5vw); }
.agreement-card { max-width: 980px; }
.agreement-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; color: #8d96a1; font-size: 13px; }
.agreement-prose { color: #3d4650; font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; }
.agreement-prose h3 { margin: 26px 0 12px; font-size: 18px; line-height: 1.5; color: #2e3136; }
.agreement-prose p, .agreement-prose li { margin: 0 0 12px; }
.agreement-prose ul, .agreement-prose ol { margin: 0 0 14px 20px; padding: 0; }
.agreement-divider { margin: 22px 0; height: 1px; background: linear-gradient(90deg, #d9e3ee, transparent); }
@media (min-width: 1600px) { .portal-hero-main { max-width: 740px; } .portal-card { max-width: 420px; } }
@media (max-width: 1100px) and (min-width: 761px) { .portal-shell { grid-template-columns: minmax(0, 1.08fr) minmax(340px, 1fr); } .portal-brand { padding: 32px 30px 26px; } .portal-panel { padding: 80px 32px; } .portal-brand-edition { display: none; } .portal-hero-art { width: calc(100% + 34px); margin-left: -17px; margin-right: -17px; } .portal-brand-foot { gap: 18px; font-size: 10px; } }
@media (max-height: 760px) and (min-width: 761px) { .portal-brand { padding-top: 26px; padding-bottom: 24px; } .portal-hero-main { padding-top: 26px; } .portal-title { margin-top: 15px; margin-bottom: 12px; font-size: clamp(33px, 3.4vw, 48px); } .portal-hero-image { max-height: 34vh; min-height: 180px; } .portal-panel { padding-top: 74px; padding-bottom: 50px; } }
@media (max-width: 760px) {
    .portal-shell { grid-template-columns: minmax(0, 1fr); }
    .portal-brand { padding: 22px 25px 12px; }
    .portal-brand-header { min-height: 39px; }
    .portal-brand-logo { width: 38px; height: 38px; border-radius: 10px; }
    .portal-brand-identity { gap: 9px; }
    .portal-brand-identity strong { font-size: 18px; }
    .portal-brand-identity small { font-size: 8px; letter-spacing: 1.3px; }
    .portal-brand-edition { font-size: 8px; letter-spacing: 1.5px; }
    .portal-brand-generic { font-size: 8px; letter-spacing: 1.5px; max-width: 210px; }
    .portal-hero-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding-top: 23px; column-gap: 8px; max-width: 600px; }
    .portal-kicker { grid-column: 1 / -1; font-size: 9px; letter-spacing: 1.3px; }
    .portal-title { grid-column: 1; font-size: clamp(20px, 6.15vw, 36px); line-height: 1.4; letter-spacing: -.04em; margin: 17px 0 8px; white-space: nowrap; }
    .portal-copy { grid-column: 1; font-size: 10px; letter-spacing: 0; line-height: 1.8; margin-bottom: 10px; }
    .portal-hero-art { grid-column: 2; grid-row: 2 / 4; width: calc(100% + 28px); max-width: none; margin: 0 -14px; align-self: center; }
    .portal-hero-image { width: 100%; max-height: 210px; height: auto; }
    .portal-brand-foot { justify-content: center; gap: 28px; font-size: 9px; letter-spacing: .4px; margin-top: 14px; padding-bottom: 10px; }
    .portal-brand-foot svg { width: 12px; height: 12px; }
    .portal-panel { padding: 32px 28px 30px; border-radius: 24px 24px 0 0; margin-top: -1px; }
    .portal-card { max-width: 430px; }
    .portal-card-eyebrow { font-size: 9px; margin-bottom: 10px; }
    .portal-card-head { margin-bottom: 24px; }
    .portal-card-head h2 { font-size: 27px; margin-bottom: 7px; }
    .portal-card-head p { font-size: 12px; }
    .portal-form { gap: 18px; }
    .portal-field input { height: 50px; font-size: 16px; }
    .portal-panel-foot { margin-top: 27px; }
    .portal-floating { right: 18px; top: 24px; }
    body:has(.portal-floating) .portal-brand-edition { display: none; }
    body:has(.portal-floating) .portal-brand-header { padding-right: 88px; }
}
@media (max-width: 360px) { .portal-brand { padding-left: 20px; padding-right: 20px; } .portal-brand-edition { font-size: 7px; letter-spacing: 1px; } .portal-hero-main { column-gap: 0; } .portal-copy { font-size: 9px; } .portal-panel { padding-left: 22px; padding-right: 22px; } .portal-brand-foot { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }