:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #111522;
  background: #c9edff;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: #c9edff; }
button, input { font: inherit; }
.login-shell { position: relative; min-height: 100svh; overflow: hidden; padding: 114px clamp(34px,5.8vw,90px) 150px; background: url("./assets/digital-self-portal-bg-v1.png?v=57") center / cover no-repeat; }
.login-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(248,252,255,.92) 0%,rgba(247,252,255,.7) 39%,rgba(244,250,255,.04) 69%),linear-gradient(0deg,rgba(235,246,252,.62),transparent 35%); }
.login-header { position: absolute; z-index: 3; left: clamp(24px,3.2vw,52px); right: clamp(24px,3.2vw,52px); top: 22px; min-height: 64px; display: grid; grid-template-columns: minmax(230px,1fr) auto minmax(160px,1fr); align-items: center; gap: 24px; }
.login-brand { display: inline-flex; align-items: center; justify-self: start; gap: 10px; color: #080a11; text-decoration: none; font-size: 21px; font-weight: 950; line-height: .98; letter-spacing: -.035em; }
.login-brand-orbit { position: relative; width: 50px; height: 42px; display: block; transform: rotate(-12deg); }
.login-brand-orbit::before { content: ""; position: absolute; inset: 3px 7px; border-radius: 50%; background: linear-gradient(145deg,#5ebcff,#6d35ec 62%,#a240ee); box-shadow: inset 8px -7px 16px rgba(29,19,148,.2),0 7px 18px rgba(83,54,225,.25); }
.login-brand-orbit::after { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 13px; border: 3px solid #7651f0; border-top-color: rgba(137,228,255,.85); border-radius: 50%; }
.login-brand-orbit i { position: absolute; z-index: 2; width: 8px; height: 8px; right: 3px; top: 10px; border-radius: 50%; background: #9df5ff; box-shadow: 0 0 12px #5fefff; }
.login-header nav { display: flex; align-items: center; gap: clamp(30px,4vw,66px); }.login-header nav a { color: #11182b; text-decoration: none; font-size: 15px; font-weight: 700; white-space: nowrap; }
.register-link { justify-self: end; min-width: 134px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; color: white; background: linear-gradient(135deg,#7050f7,#8e2ee7); box-shadow: 0 14px 34px rgba(103,47,225,.25); text-decoration: none; font-weight: 850; }
.login-card { position: relative; z-index: 2; width: min(570px,44vw); min-height: 665px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 42px clamp(34px,4vw,55px) 30px; border: 1px solid rgba(255,255,255,.84); border-radius: 30px; background: rgba(250,252,255,.82); box-shadow: 0 28px 72px rgba(55,91,134,.2); backdrop-filter: blur(24px); }
.login-copy { text-align: center; }.eyebrow { margin: 0 0 8px; color: #7542e7; font-size: 10px; font-weight: 900; letter-spacing: .16em; }.login-card h1 { margin: 0; font-size: clamp(34px,3vw,44px); letter-spacing: -.04em; }.intro { margin: 10px 0 0; color: #647087; font-size: 15px; }
.login-card form { display: grid; gap: 18px; margin-top: 34px; }.input-row { min-height: 64px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; padding: 0 18px; border: 1px solid rgba(127,151,187,.25); border-radius: 15px; background: rgba(250,252,255,.56); transition: border-color .18s,box-shadow .18s; }.input-row:focus-within { border-color: #7950e8; box-shadow: 0 0 0 3px rgba(118,74,226,.1); }.input-icon { color: #647189; font-size: 22px; }.input-row input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #171b26; font-size: 15px; }.input-row input::placeholder { color: #79869e; }.password-toggle { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #6c7890; cursor: pointer; }
.login-options { display: flex; justify-content: space-between; align-items: center; margin-top: -3px; color: #69758a; font-size: 13px; }.login-options label { display: flex; align-items: center; gap: 8px; }.login-options input { width: 18px; height: 18px; accent-color: #7542e7; }.login-options a,.register-prompt a { color: #7040e7; text-decoration: none; font-weight: 750; }
.login-submit { min-height: 62px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg,#7139ed,#8e3bea); box-shadow: 0 15px 32px rgba(104,50,222,.23); font-size: 17px; font-weight: 900; cursor: pointer; }.login-submit:disabled { opacity: .62; cursor: wait; }
.login-error { display: none; padding: 10px 13px; border: 1px solid rgba(226,65,95,.22); border-radius: 11px; background: rgba(255,232,237,.78); color: #bd2443; font-size: 12px; line-height: 1.5; }.login-error.show { display: block; }
.login-divider { position: relative; display: grid; place-items: center; margin: 28px 0 20px; color: #788399; font-size: 12px; }.login-divider::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(106,128,161,.18); }.login-divider span { position: relative; padding: 0 18px; background: rgba(250,252,255,.84); }
.social-login { display: flex; justify-content: center; gap: 28px; }.social-login button { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid rgba(122,147,184,.22); border-radius: 50%; background: rgba(255,255,255,.72); color: #222833; font-size: 22px; font-weight: 900; opacity: .72; }
.register-prompt { margin: 28px 0 0; color: #69758a; text-align: center; font-size: 13px; }.security-note { display: block; margin-top: 14px; color: #8490a3; font-size: 10px; line-height: 1.55; text-align: center; }
.login-promises { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; min-height: 116px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; padding: 18px clamp(34px,6vw,100px); border-top: 1px solid rgba(255,255,255,.82); background: rgba(249,252,255,.88); box-shadow: 0 -12px 34px rgba(65,95,132,.08); backdrop-filter: blur(20px); }.login-promises article { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 5px 25px; border-right: 1px solid rgba(92,113,145,.16); }.login-promises article:last-child { border-right: 0; }.login-promises article > span { color: #7041e4; font-size: 28px; }.login-promises strong,.login-promises small { display: block; }.login-promises strong { font-size: 16px; }.login-promises small { margin-top: 5px; color: #6c778a; font-size: 11px; }
@media(max-width:1000px){.login-header{grid-template-columns:1fr auto}.login-header nav{display:none}.login-card{width:min(570px,58vw)}.login-promises{grid-template-columns:repeat(2,1fr)}.login-promises article:nth-child(2){border-right:0}}
@media(max-width:720px){.login-shell{overflow:auto;padding:95px 16px 185px;background-position:61% center}.login-shell::before{background:linear-gradient(180deg,rgba(248,252,255,.76),rgba(240,249,255,.35))}.login-header{left:18px;right:18px;top:14px;min-height:56px}.login-brand{font-size:16px}.login-brand-orbit{width:42px;height:36px}.register-link{min-width:92px;min-height:42px;font-size:12px}.login-card{width:100%;min-height:620px;padding:34px 22px 26px;border-radius:25px}.login-promises{position:absolute;min-height:166px;padding:12px 10px}.login-promises article{padding:6px 8px;gap:9px}.login-promises article>span{font-size:22px}.login-promises strong{font-size:13px}.login-promises small{font-size:9px}}
@media(max-width:420px){.login-card{min-height:590px}.input-row{min-height:58px}.social-login{gap:18px}.social-login button{width:54px;height:54px}.login-promises article>span{display:none}}