:root { color-scheme:dark; --gold:#eac994; --gold-bright:#f6dfb1; --text:#f0f0f4; --muted:#abb5c9; --dim:#8794ae; --base:#0c1423; --field:#0c1628; --border:#38465d; }
*,*::before,*::after { box-sizing:border-box }
body { margin:0; color:var(--text); font:15px/1.55 "Microsoft YaHei UI","Microsoft YaHei",sans-serif; background:var(--base) }
button,input,select { font:inherit }
button { cursor:pointer }
.site { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 560px; min-height:100svh; isolation:isolate }
.hero { position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; min-width:0; overflow:hidden; padding:48px 0 65px clamp(32px,5vw,82px) }
.hero img.art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:26% center; z-index:-3 }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,transparent 61%,rgba(12,20,35,.24) 81%,#0c1423),linear-gradient(180deg,rgba(9,18,33,.51),transparent 32%,transparent 59%,rgba(10,18,33,.86)) }
.hero::after { content:""; position:absolute; top:32px; bottom:32px; left:25px; border-left:1px solid rgba(244,219,172,.34); pointer-events:none }
.logo { width:263px; height:auto; filter:drop-shadow(0 3px 10px #111b2ab3) }
.hero-copy { position:relative; margin:0; padding-bottom:16px; text-shadow:0 2px 20px #071121 }
.hero-copy::before { content:""; display:block; width:58px; height:1px; background:var(--gold); margin-bottom:22px }
.hero-title { margin:0; color:#fff0d4; font:700 clamp(42px,4.4vw,68px)/1.12 "STZhongsong","SimSun",serif; letter-spacing:.13em }
.hero-caption { margin:16px 0 0; font-size:15px; letter-spacing:.25em; color:#e8edf7 }
.panel-area { position:relative; display:flex; align-items:center; justify-content:center; padding:36px 45px 36px 19px; background:radial-gradient(ellipse at 24% 26%,#17263a,transparent 76%); }
.panel { width:100%; max-width:465px; position:relative; padding:29px 31px 27px; border:1px solid #596071; border-radius:15px; background:linear-gradient(155deg,#1d2b42 0%,#162237 46%,#121c2d 100%); box-shadow:0 20px 50px #080c15a0; }
.panel::before { content:""; position:absolute; top:-1px; left:26px; right:26px; height:1px; background:linear-gradient(90deg,transparent,#e7c68a 50%,transparent); pointer-events:none }
.eyebrow { margin:0 0 5px; display:flex; align-items:center; gap:9px; color:var(--gold); font-size:12px; letter-spacing:.25em; }
.eyebrow::before { content:""; width:7px; height:7px; transform:rotate(45deg); border:1px solid var(--gold) }
h1 { margin:0; color:#fff3df; font:700 33px/1.26 "STZhongsong","SimSun",serif; letter-spacing:.055em }
.intro { margin:8px 0 19px; color:var(--muted); font-size:13px }
.tabs { display:flex; padding:3px; gap:3px; background:#0c1626; border:1px solid #354359; border-radius:9px; margin-bottom:19px; }
.tabs button { width:50%; padding:8px 4px; color:#b2bed2; background:transparent; border:1px solid transparent; border-radius:6px; }
.tabs button[aria-pressed=true] { color:#f9deb1; font-weight:600; background:linear-gradient(#2d3547,#243146); border-color:#65606a }
.fields { display:grid; gap:13px }
.field { display:block; min-width:0; }
.field-name { display:block; margin:0 0 5px; color:#e1e5f0; font-size:13px; font-weight:600; }
.combo,.account-row,.entry { border:1px solid var(--border); border-radius:8px; background:var(--field); min-width:0 }
select.combo,.entry { display:block; width:100%; height:42px; color:var(--text); padding:0 12px; }
select.combo { appearance:none; background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='m4 4 4 4 4-4' fill='none' stroke='%23aab5c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center; color:var(--muted); padding-right:35px; }
input::placeholder { color:#9aa7bf; opacity:1 }
.account-row { display:flex; height:44px; position:relative }
.account-row input { width:100%; min-width:0; border:0; border-radius:8px 0 0 8px; background:transparent; color:var(--text); padding:0 12px; }
.suffix { flex:0 0 auto; min-width:150px; position:relative; color:var(--gold-bright) }
.suffix summary { display:flex; align-items:center; justify-content:space-between; gap:8px; height:42px; padding:0 11px; list-style:none; cursor:pointer; border-left:1px solid #615641; border-radius:0 7px 7px 0; background:#312b29; font-size:13px; font-weight:600; }
.suffix summary::-webkit-details-marker { display:none }
.chev { width:7px; height:7px; margin:0 3px 4px 4px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) }
.suffix[open] summary { background:#40342b; }
.suffix[open] .chev { margin-top:8px; transform:rotate(225deg) }
.suffix-list { z-index:3; position:absolute; right:-1px; top:49px; width:214px; padding:5px; border:1px solid #646476; border-radius:10px; background:#182438; box-shadow:0 12px 32px #050912bb; }
.suffix-list button { display:flex; justify-content:space-between; width:100%; text-align:left; padding:6px 9px; border:0; border-radius:5px; background:none; color:#dfe5f0; font-size:13px; min-height:31px; }
.suffix-list button:hover,.suffix-list button:focus-visible { background:#283b56 }
.suffix-list button[aria-current=true] { background:#372f29; color:#f8d9a5 }
.suffix-list button[aria-current=true]::after { content:"✓" }
.divider { border-top:1px solid #3a485e; margin:5px 4px }
.hint { display:block; margin:5px 0 0; color:var(--muted); font-size:12px; min-height:19px; }
#custom { margin-top:7px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.captcha-row { display:grid; grid-template-columns:minmax(0,1fr) 111px; gap:9px; align-items:stretch; }
.captcha { display:block; padding:0; overflow:hidden; border-radius:8px; border:1px solid #9aabc8; background:#ebeff8; }
.captcha svg { display:block; width:100%; height:40px; }
.action { width:100%; height:46px; color:#272014; background:linear-gradient(180deg,#f6dfad,#dfb477); font-weight:700; letter-spacing:.12em; border:1px solid #f8dca6; border-radius:8px; margin-top:19px; box-shadow:0 3px 14px #eec08424; }
.action:hover { filter:brightness(1.06) }
.note { display:block; min-height:16px; text-align:center; margin:8px 0 0; color:#b2bed3; font-size:12px; }
[hidden] { display:none!important }
:focus-visible { outline:2px solid #eccb8d; outline-offset:2px }
@media (min-width:1400px) { .site {grid-template-columns:minmax(0,1fr) 560px} }
@media (max-width:950px) { .site {grid-template-columns:minmax(0,1fr) 480px} .panel-area{padding-right:23px} .hero{padding-left:37px} .hero-title{font-size:41px} .hero img.art{object-position:23% center} .logo{width:min(92%,246px)} }
@media (max-width:680px) { .site {display:block} .hero { height:225px; padding:18px 22px 18px; } .hero img.art{object-position:48% 36%} .hero::before {background:linear-gradient(180deg,#0b142458,transparent 38%,#0c1423)} .hero::after {display:none} .logo{width:184px} .hero-title{font-size:32px} .hero-caption,.hero-copy::before{display:none} .hero-copy{padding:0} .panel-area{padding:0 14px 20px; margin-top:-4px} .panel{padding:22px 19px 15px} h1{font-size:29px} .intro{margin-bottom:14px} .tabs{margin-bottom:15px} .suffix{min-width:135px} }

.hint { overflow-wrap:anywhere }
.captcha img { display:block; width:100%; height:40px; object-fit:cover }
.action:disabled { opacity:.63; cursor:wait }
.note[data-state="error"] { color:#ffb6a7 }
.note[data-state="success"] { color:#b6efcc }