:root{color-scheme:dark;--bg:#0b1118;--panel:#111a24;--line:#263443;--text:#eef4fa;--muted:#9aaaba;--green:#45d6a0;--red:#ff7b83;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{min-width:320px;min-height:100vh;margin:0;color:var(--text);background:radial-gradient(ellipse at 50% 0,#192b3e 0,transparent 42%),var(--bg)}
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px}
.login-card{width:min(100%,430px);padding:38px 38px 30px;background:linear-gradient(145deg,#121c27,#101821);border:1px solid #2b3b4b;border-radius:20px;box-shadow:0 24px 80px #0005;animation:appear .45s ease-out both}
.brand-mark{position:relative;width:54px;height:54px;display:grid;place-items:center;margin:0 auto 19px;border:1px solid #28614b;border-radius:17px;background:#11251d;color:#8ce8bd;font-size:13px;font-weight:800;letter-spacing:.3px}
.brand-mark i{position:absolute;right:8px;bottom:8px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #45d6a077}
.eyebrow{margin:0;text-align:center;color:#8ce8bd;font-size:10px;font-weight:700;letter-spacing:1.8px}
h1{margin:8px 0 2px;text-align:center;font-size:25px;letter-spacing:-.5px}
.subtitle{margin:0 0 27px;text-align:center;color:var(--muted);font-size:13px}
label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
.password-wrap{position:relative}
.password-wrap input{width:100%;height:48px;padding:0 90px 0 13px;border:1px solid #344658;border-radius:10px;outline:none;background:#0c141d;color:var(--text);font:inherit;transition:border-color .18s,box-shadow .18s}
.password-wrap input:focus{border-color:#45d6a0;box-shadow:0 0 0 3px #45d6a01c}
.toggle-password{position:absolute;top:50%;right:9px;transform:translateY(-50%);padding:7px;border:0;background:transparent;color:#a9bac9;font:inherit;font-size:11px;cursor:pointer}
.toggle-password:hover{color:var(--green)}
.hint{margin:8px 0 20px;color:#8495a5;font-size:11px}
.submit{width:100%;height:47px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #3bb586;border-radius:10px;background:linear-gradient(180deg,#2eaf7d,#228e66);color:#f4fff9;font:inherit;font-weight:700;cursor:pointer;transition:filter .18s,transform .18s}
.submit:hover{filter:brightness(1.08)}.submit:active{transform:translateY(1px)}.submit:disabled{cursor:wait;opacity:.8}
.spinner{display:none;width:15px;height:15px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.submit.loading .spinner{display:block}.submit.loading .button-label{opacity:.8}
.secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;color:#8293a2;font-size:11px}
.secure-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.error-message{margin:-8px 0 18px;padding:10px 12px;border:1px solid #6d343b;border-radius:9px;background:#28171b;color:#ffb1b5;font-size:12px}
footer{margin-top:20px;color:#728393;font-size:11px}footer span{padding:0 5px;color:#405162}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:520px){.page{padding:18px 15px}.login-card{padding:31px 23px 25px;border-radius:16px}h1{font-size:23px}.subtitle{font-size:12px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}