:root {
  color: #132338;
  background: #eaf1f7;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --navy-950: #091d33;
  --navy-900: #0c2948;
  --blue-700: #1f6098;
  --blue-600: #317cba;
  --blue-100: #eaf4fc;
  --line: #d9e4ee;
  --muted: #6e8094;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; padding: 20px; display: grid; place-items: center; background: radial-gradient(circle at 8% 4%, rgba(85,157,216,.2), transparent 28%), radial-gradient(circle at 94% 92%, rgba(50,123,183,.13), transparent 27%), linear-gradient(145deg,#edf4f9,#e8eff5); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(49,124,186,.2); outline-offset: 2px; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hidden { display: none !important; }

.auth-shell { width: min(1180px, calc(100vw - 40px)); height: min(760px, calc(100vh - 40px)); min-height: 640px; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(430px,.96fr); overflow: hidden; border: 1px solid rgba(193,209,223,.9); border-radius: 30px; background: #fff; box-shadow: 0 36px 100px rgba(13,41,72,.16); }
.auth-intro { min-width: 0; padding: 40px 46px 32px; position: relative; display: flex; flex-direction: column; overflow: hidden; color: #fff; background: linear-gradient(145deg,#081b30 0%,#0d3155 54%,#1e6194 100%); isolation: isolate; }
.auth-intro::before { content: ""; width: 520px; height: 520px; position: absolute; right: -280px; top: -260px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 75px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.018); }
.auth-intro::after { content: ""; width: 270px; height: 270px; position: absolute; left: -155px; bottom: -145px; border-radius: 50%; background: rgba(75,164,222,.13); filter: blur(2px); }
.intro-grid { position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(135deg,#000,transparent 72%); }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--navy-900); border-radius: 15px; background: linear-gradient(145deg,#fff,#dceeff); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.brand-mark svg { width: 23px; height: 23px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: .4px; }
.brand small { margin-top: 3px; color: #a9c9df; font-size: 10px; font-weight: 650; letter-spacing: 1.15px; }
.brand em { margin-left: auto; padding: 6px 9px; color: #c6dceb; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.06); font-size: 11px; font-style: normal; }
.intro-copy { position: relative; z-index: 1; margin: auto 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #cde8fa; border: 1px solid rgba(153,210,247,.22); border-radius: 18px; background: rgba(101,177,225,.1); font-size: 11px; font-weight: 650; }
.eyebrow svg { width: 14px; height: 14px; color: #88cef7; }
.intro-copy h1 { margin: 19px 0 14px; font-size: clamp(34px,3.45vw,48px); line-height: 1.24; letter-spacing: -1.6px; }
.intro-copy h1 em { color: #8ed1fb; font-style: normal; }
.intro-copy > p { max-width: 520px; margin: 0; color: #b8d0e1; font-size: 13px; line-height: 1.85; }
.service-flow { margin-top: 28px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
.service-flow > span { min-width: 0; min-height: 84px; padding: 12px; display: grid; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 8px; align-content: center; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.065); backdrop-filter: blur(5px); }
.service-flow > span > svg { width: 20px; height: 20px; grid-row: 1 / 3; align-self: center; color: #8bd0fa; }
.service-flow small { color: #8fb1c9; font-size: 9px; }
.service-flow strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.service-flow > svg { width: 14px; height: 14px; color: #6d9cbd; }
.trust-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.trust-list span { min-width: 0; padding: 9px 10px; display: flex; align-items: center; gap: 7px; color: #bcd4e5; border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; }
.trust-list svg { width: 14px; height: 14px; color: #79d2ad; }
.trust-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth-panel { min-width: 0; padding: 28px 38px 22px; position: relative; display: flex; flex-direction: column; overflow-y: auto; background: radial-gradient(circle at 100% 0,rgba(211,232,248,.48),transparent 32%), linear-gradient(180deg,#fbfdff,#f5f9fc); }
.panel-status { width: 100%; max-width: 440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: #8493a3; font-size: 10px; letter-spacing: .2px; }
.panel-status strong { display: inline-flex; align-items: center; gap: 6px; color: #3c7560; font-size: 10px; font-weight: 650; }
.panel-status strong i { width: 7px; height: 7px; border-radius: 50%; background: #43b981; box-shadow: 0 0 0 4px rgba(67,185,129,.11); }
.auth-card-wrap { min-height: 0; display: flex; align-items: center; justify-content: center; flex: 1; }
.auth-card { width: 100%; max-width: 440px; padding: 30px; border: 1px solid rgba(207,220,232,.96); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 18px 48px rgba(20,55,89,.09); }
.auth-card-head { margin-bottom: 25px; display: flex; align-items: center; gap: 13px; }
.head-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue-700); border: 1px solid #d7e8f5; border-radius: 15px; background: linear-gradient(145deg,#f3f9fe,#e4f1fb); }
.head-icon svg { width: 22px; height: 22px; }
.auth-card-head small { display: block; margin-bottom: 3px; color: #7890a5; font-size: 9px; font-weight: 750; letter-spacing: 1.4px; }
.auth-card-head h2 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.5px; }
.auth-card-head p { margin: 0; color: var(--muted); font-size: 11px; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; color: #3e5269; font-size: 11px; font-weight: 750; }
.input-shell { min-height: 50px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #cbd9e5; border-radius: 12px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.input-shell:hover { border-color: #afc3d5; }
.input-shell:focus-within { border-color: var(--blue-600); background: #fcfeff; box-shadow: 0 0 0 4px rgba(49,124,186,.09); }
.input-shell > svg { width: 16px; height: 16px; color: #7b91a5; }
.input-shell input { width: 100%; min-width: 0; padding: 0; color: #132338; border: 0; outline: 0; background: transparent; font-size: 13px; }
.input-shell input::placeholder { color: #9aa8b6; }
.password-toggle { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; color: #688096; border: 0; border-radius: 9px; background: transparent; }
.password-toggle:hover { color: var(--blue-700); background: var(--blue-100); }
.password-toggle svg { width: 15px; height: 15px; }
.submit-button { min-height: 50px; margin-top: 3px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(135deg,#103b65,#2d78b5); box-shadow: 0 12px 24px rgba(29,91,146,.2); font-size: 13px; font-weight: 750; transition: transform .16s ease, box-shadow .16s ease; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(29,91,146,.26); }
.submit-button:disabled { opacity: .62; cursor: wait; transform: none; box-shadow: none; }
.submit-button svg { width: 16px; height: 16px; }
.setup-notice { padding: 10px 11px; display: flex; align-items: flex-start; gap: 8px; color: #315e87; border: 1px solid #cfe2f3; border-radius: 11px; background: #eff7fe; font-size: 11px; line-height: 1.6; }
.setup-notice svg { width: 15px; height: 15px; margin-top: 1px; }
.auth-message { margin-top: 14px; padding: 10px 12px; color: #9e2820; border: 1px solid #efc1bc; border-radius: 10px; background: #fff1ef; font-size: 11px; line-height: 1.5; }
.auth-message.success { color: #146a49; border-color: #bfe3d2; background: #eefaf4; }
.security-note { margin-top: 19px; padding-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #e5edf3; }
.security-note span { min-width: 0; display: flex; align-items: center; gap: 6px; color: #8392a2; font-size: 9px; line-height: 1.45; }
.security-note svg { width: 12px; height: 12px; color: #5c8daf; }
.auth-panel footer { width: 100%; max-width: 440px; margin: 14px auto 0; display: flex; justify-content: space-between; color: #94a3b2; font-size: 9px; letter-spacing: .2px; }
.auth-panel footer strong { font-weight: 700; }

@media (max-width: 960px) {
  body { padding: 0; display: block; }
  .auth-shell { width: 100%; height: auto; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: 290px minmax(0,1fr); border: 0; border-radius: 0; }
  .auth-intro { padding: 24px 28px 22px; }
  .intro-copy { margin: auto 0 0; }
  .intro-copy h1 { margin: 14px 0 8px; font-size: 31px; line-height: 1.2; }
  .intro-copy > p { max-width: 650px; line-height: 1.65; }
  .service-flow, .trust-list { display: none; }
  .auth-panel { min-height: calc(100vh - 290px); padding: 22px 24px 18px; }
  .auth-card-wrap { padding: 18px 0; }
}

@media (max-width: 560px) {
  .auth-shell { display: block; }
  .auth-intro { min-height: 224px; padding: 20px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 9px; }
  .brand em { display: none; }
  .intro-copy { margin-top: 29px; }
  .eyebrow { padding: 6px 9px; font-size: 10px; }
  .intro-copy h1 { margin: 12px 0 8px; font-size: 27px; letter-spacing: -.8px; }
  .intro-copy > p { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .auth-panel { min-height: calc(100vh - 224px); padding: 17px 15px calc(16px + env(safe-area-inset-bottom)); overflow: visible; }
  .panel-status { padding: 0 3px; }
  .auth-card-wrap { padding: 15px 0 10px; align-items: flex-start; }
  .auth-card { padding: 22px 19px; border-radius: 19px; box-shadow: 0 13px 36px rgba(20,55,89,.08); }
  .auth-card-head { margin-bottom: 21px; }
  .head-icon { width: 44px; height: 44px; }
  .auth-card-head h2 { font-size: 21px; }
  .input-shell, .submit-button { min-height: 48px; }
  .security-note { grid-template-columns: 1fr; }
  .auth-panel footer { margin-top: 6px; padding: 0 3px; }
}