:root { color-scheme: dark; }
@property --border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #ecf8ff; background: #03182b; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; letter-spacing: 0; }
button { border: 0; }
.login-page { position: relative; isolation: isolate; width: 100vw; height: 100vh; min-width: 0; overflow: hidden; background: #03182b; }
.login-page::before { position: absolute; z-index: -2; top: -18%; left: 22%; width: 58%; height: 42%; content: ""; pointer-events: none; background: radial-gradient(ellipse at 50% 100%,transparent 51%,rgba(24,122,158,.18) 51.3%,transparent 51.8%),radial-gradient(ellipse at 50% 100%,transparent 61%,rgba(32,147,178,.13) 61.3%,transparent 61.8%),radial-gradient(ellipse at 50% 100%,transparent 71%,rgba(33,130,160,.1) 71.3%,transparent 71.8%); opacity: .86; }
.login-art { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #03182b url("assets/login-background-completed.svg") center / cover no-repeat; }
.login-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,rgba(1,11,26,.16),rgba(1,12,28,.02) 52%,rgba(1,11,26,.14)); }
.brand-logo { position: absolute; z-index: 1; top: 3.5vh; left: 2.4vw; width: min(445px,34vw); height: auto; filter: drop-shadow(0 3px 12px rgba(0,0,0,.24)); }
.left-art-mask { position: absolute; z-index: -1; top: 24%; left: 1.8%; width: 34%; height: 18%; background: transparent; pointer-events: none; }
.module-launcher { position: absolute; top: 24.2%; left: 2.4%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; width: min(32.5vw,650px); }
.module-card { --card-shape: polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px)); position: relative; display: flex; min-width: 0; height: 158px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 14px 8px; color: #edf8ff; background: transparent; cursor: pointer; transition: transform 220ms ease,filter 220ms ease; }
.module-card::before, .module-card::after { position: absolute; content: ""; pointer-events: none; clip-path: var(--card-shape); transition: background 320ms ease,opacity 320ms ease,filter 320ms ease; }
.module-card::before { inset: 0; background: linear-gradient(135deg,#26e6ea 0%,#45b8d2 27%,rgba(45,181,207,.62) 52%,#13d0d4 100%); filter: drop-shadow(0 0 3px rgba(35,217,229,.3)); }
.module-card::after { inset: 2px; background: linear-gradient(180deg,rgba(8,42,66,.96),rgba(5,31,52,.94)); }
.module-card > * { position: relative; z-index: 1; }
.module-card:hover, .module-card.is-selected { transform: translateY(-3px); filter: drop-shadow(0 0 12px rgba(51,220,232,.2)); }
.module-card:hover::after, .module-card.is-selected::after { background: linear-gradient(155deg,rgba(47,91,111,.98),rgba(31,72,94,.98)); }
.module-card.is-selected::before { background: linear-gradient(135deg,#8ffaff 0%,#36e8ec 28%,#63d9ee 62%,#13d0d4 100%); filter: drop-shadow(0 0 7px rgba(59,231,240,.72)); }
.module-card > span:last-child { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(12px,1vw,18px); font-weight: 600; }
.module-icon { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border: 2px solid rgba(143,229,255,.72); clip-path: polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%); color: #bcecff; }
.module-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.login-card { position: absolute; top: 50%; left: 55.1%; width: min(700px,34.2vw); max-height: calc(100vh - 64px); transform: translate(-50%,-50%); border: 1px solid rgba(194,232,252,.72); border-radius: 34px; background: linear-gradient(155deg,rgba(49,82,107,.74),rgba(4,49,72,.84) 48%,rgba(7,43,67,.9)); box-shadow: 0 0 28px rgba(176,231,255,.36),inset 0 0 50px rgba(155,230,255,.12); backdrop-filter: blur(7px) saturate(118%); }
.login-card::before { position: absolute; z-index: 3; inset: -3px; padding: 3px; border-radius: 36px; content: ""; pointer-events: none; background: conic-gradient(from var(--border-angle),transparent 0deg,transparent 224deg,rgba(71,224,239,.08) 246deg,#8df7ff 266deg,#fff 276deg,#63dcff 286deg,rgba(71,224,239,.12) 306deg,transparent 326deg); -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 7px rgba(118,232,255,.72)); animation: border-flow 5.4s linear infinite; }
.login-card::after { position: absolute; z-index: 4; bottom: -3px; left: 7%; width: 28%; height: 4px; border-radius: 999px; content: ""; pointer-events: none; background: linear-gradient(90deg,transparent,#77e8ff 28%,#fff 50%,#77e8ff 72%,transparent); box-shadow: 0 0 7px #8deaff,0 0 16px rgba(78,218,255,.88); animation: bottom-flow 5.4s ease-in-out infinite; }
.login-card-inner { position: relative; z-index: 1; display: flex; min-height: min(838px,73.3vh); align-items: stretch; flex-direction: column; padding: clamp(22px,5.7vh,66px) clamp(34px,3.2vw,64px) 24px; }
.login-heading { text-align: center; }
.login-kicker { margin: 0 0 13px; color: rgba(168,210,229,.82); font-size: 11px; letter-spacing: .2em; }
.login-heading h2 { margin: 0; color: #fff; font-size: clamp(25px,2.1vw,38px); font-weight: 700; line-height: 1.25; white-space: nowrap; }
.heading-rule { display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 18px; }
.heading-rule i, .heading-rule b { display: block; height: 2px; }
.heading-rule i { width: 40px; background: #4ccbd3; opacity: .7; }
.heading-rule b { width: 322px; max-width: 45%; background: #f1ab56; }
.login-form { margin-top: clamp(28px,5.9vh,68px); padding: clamp(24px,4.8vh,55px) 16px clamp(26px,5vh,58px); border: 1px solid rgba(36,224,235,.84); border-radius: 12px; background: rgba(0,53,70,.82); box-shadow: inset 0 0 26px rgba(0,234,249,.06); }
.form-field { display: flex; height: clamp(52px,6.1vh,70px); align-items: center; gap: 18px; padding: 0 23px; border: 1px solid rgba(151,197,224,.62); border-radius: 8px; background: rgba(6,39,62,.9); transition: border-color 160ms ease,box-shadow 160ms ease; }
.form-field + .form-field { margin-top: 22px; }
.form-field:focus-within { border-color: #47d9e2; box-shadow: 0 0 0 3px rgba(43,216,226,.11); }
.field-icon { width: 28px; height: 28px; flex: 0 0 auto; color: #9cb9c9; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.form-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: #eaf8ff; background: transparent; font-size: 20px; }
.form-field input::placeholder { color: #9aafbe; opacity: 1; }
.password-toggle { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: #9cb9c9; background: transparent; cursor: pointer; }
.password-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.login-error { margin: 14px 0 -28px; color: #ffaf9c; text-align: center; font-size: 13px; }
.login-submit { width: 100%; height: clamp(52px,6.6vh,76px); margin-top: clamp(24px,3.8vh,44px); border: 1px solid rgba(151,255,255,.78); border-radius: 8px; color: #fff; background: linear-gradient(180deg,#27b5b1,#079090); box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 7px 18px rgba(2,202,201,.2); cursor: pointer; font-size: 28px; font-weight: 600; transition: 160ms ease; }
.login-submit:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-features { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 26px; align-items: center; margin: auto 19px 8px; padding-top: 26px; border-top: 1px solid rgba(154,198,218,.16); }
.feature-item { display: flex; min-width: 0; align-items: center; gap: 14px; }
.feature-icon { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; border: 2px solid #27ccd0; border-radius: 18px; color: #8ceef2; background: rgba(7,111,123,.43); }
.feature-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.feature-item strong { display: block; color: #f1f7fb; font-size: 16px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.feature-item small { display: block; margin-top: 4px; color: #9cb1bf; font-size: 12px; white-space: nowrap; }
.feature-divider { width: 1px; height: 58px; background: rgba(170,209,224,.16); }
.bottom-nav { position: absolute; bottom: 36px; left: 55%; display: flex; gap: 22px; transform: translateX(-50%); }
.bottom-nav a { display: inline-flex; align-items: center; gap: 7px; color: #a7dce3; text-decoration: none; font-size: 16px; transition: color 160ms ease; }
.bottom-nav a:hover { color: #fff; }
.nav-icon { color: #3be3e7; font-size: 24px; line-height: 1; }
.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; }
@keyframes border-flow { to { --border-angle: 360deg; } }
@keyframes bottom-flow { 0%,100% { left: 6%; opacity: .32; } 50% { left: 66%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .login-card::before, .login-card::after { animation: none; }
  .module-card { transition: none; }
}
@media (min-width: 1101px) {
  .brand-logo { top: 3.5vh; left: 2.4vw; width: 21.7vw; }
  .module-launcher { top: 24.2%; left: 2.4%; width: 32.5vw; gap: .78vw; }
  .module-card { --card-shape: polygon(0 .68vw,.68vw 0,calc(100% - .68vw) 0,100% .68vw,100% calc(100% - .68vw),calc(100% - .68vw) 100%,.68vw 100%,0 calc(100% - .68vw)); height: 7.71vw; gap: .59vw; padding: .68vw .4vw; }
  .module-card::after { inset: .1vw; }
  .module-card > span:last-child { font-size: .88vw; }
  .module-icon { width: 3.03vw; height: 3.03vw; border-width: .1vw; }
  .module-icon svg { width: 1.76vw; height: 1.76vw; stroke-width: 2; }
  .login-card { width: 34.2vw; max-height: 94.4vh; border-width: .05vw; border-radius: 1.66vw; }
  .login-card::before { inset: -.15vw; padding: .15vw; border-radius: 1.76vw; }
  .login-card::after { bottom: -.15vw; height: .2vw; }
  .login-card-inner { min-height: 73.3vh; padding: 5.72vh 3.12vw 2.08vh; }
  .login-kicker { margin-bottom: 1.13vh; font-size: .54vw; }
  .login-heading h2 { font-size: 1.85vw; }
  .heading-rule { gap: .83vw; margin-top: 1.56vh; }
  .heading-rule i, .heading-rule b { height: .17vh; }
  .heading-rule i { width: 1.95vw; }
  .heading-rule b { width: 15.72vw; }
  .login-form { margin-top: 5.9vh; padding: 4.78vh .78vw 5.03vh; border-width: .05vw; border-radius: 1.04vh; }
  .form-field { height: 6.08vh; gap: 1.56vh; padding: 0 1.12vw; border-width: .05vw; border-radius: .69vh; }
  .form-field + .form-field { margin-top: 1.91vh; }
  .field-icon { width: 1.37vw; height: 1.37vw; }
  .form-field input { font-size: .98vw; }
  .password-toggle { width: 1.66vw; height: 1.66vw; }
  .password-toggle svg { width: 1.22vw; height: 1.22vw; }
  .login-error { margin: 1.22vh 0 -2.43vh; font-size: .63vw; }
  .login-submit { height: 6.6vh; margin-top: 3.82vh; border-width: .05vw; border-radius: .69vh; font-size: 1.37vw; }
  .login-features { gap: 1.27vw; margin: auto .93vw .69vh; padding-top: 2.26vh; }
  .feature-item { gap: 1.22vh; }
  .feature-icon { width: 2.73vw; height: 2.73vw; border-width: .1vw; border-radius: .88vw; }
  .feature-icon svg { width: 1.42vw; height: 1.42vw; }
  .feature-item strong { font-size: .78vw; }
  .feature-item small { margin-top: .35vh; font-size: .59vw; }
  .feature-divider { width: .05vw; height: 5.03vh; }
  .bottom-nav { bottom: 3.12vh; gap: 1.07vw; }
  .bottom-nav a { gap: .34vw; font-size: .78vw; }
  .nav-icon { font-size: 1.17vw; }
}
@media (max-width: 1100px) {
  .module-launcher { width: 42vw; gap: 10px; }
  .module-card { height: 126px; }
  .login-card { left: 58%; width: min(640px,40vw); }
  .login-form { margin-top: 42px; padding-top: 34px; padding-bottom: 38px; }
  .login-submit { height: 64px; font-size: 24px; }
  .login-features { gap: 14px; margin-left: 8px; margin-right: 8px; }
  .feature-item { gap: 9px; }
  .feature-item strong { font-size: 13px; }
  .feature-item small { font-size: 10px; }
}
@media (max-width: 820px) {
  .login-page::before { display: none; }
  .login-art { background-position: center; }
  .left-art-mask, .module-launcher, .bottom-nav { display: none; }
  .brand-logo { top: 18px; left: 50%; width: min(260px,70vw); transform: translateX(-50%); }
  .login-card { top: 50%; left: 50%; width: min(560px,calc(100vw - 28px)); max-height: calc(100vh - 28px); border-radius: 24px; }
  .login-card-inner { min-height: 0; padding: 32px 22px 22px; }
  .login-heading h2 { font-size: clamp(22px,5vw,30px); white-space: normal; }
  .login-kicker { font-size: 9px; }
  .login-form { margin-top: 30px; padding: 26px 14px 28px; }
  .form-field { height: 58px; gap: 12px; padding: 0 16px; }
  .form-field input { font-size: 16px; }
  .login-submit { height: 58px; margin-top: 28px; font-size: 21px; }
  .login-features { gap: 10px; margin: 28px 0 0; padding-top: 18px; }
  .feature-icon { width: 42px; height: 42px; border-radius: 13px; }
  .feature-icon svg { width: 22px; height: 22px; }
  .feature-item { gap: 7px; }
  .feature-item strong { font-size: 11px; }
  .feature-item small { font-size: 9px; }
}