*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--brand:#0F059E;
--bg:#0F059E;
--bg-card:#ffffff;
--bg-input:#f8f9fb;
--border:#e2e5ea;
--text:#1a1a2e;
--text-mid:#5c5e6e;
--text-dim:#9396a5;
--danger:#dc2626;
--font:'Inter',system-ui,-apple-system,sans-serif;
--radius:8px;
--transition:.2s ease
}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;display:flex;flex-direction:column}

header{padding:20px 40px;background:#fff;border-bottom:1px solid var(--border)}
.header-logo{width:59px;height:auto}

.login-page{flex:1;display:flex;align-items:center;justify-content:center;padding:0 24px 60px}

.login-wrap{width:100%;max-width:420px}

.login-card{background:var(--bg-card);border-radius:12px;padding:40px 36px;box-shadow:0 8px 40px rgba(0,0,0,.15)}

.login-header{margin-bottom:28px;text-align:center}
.login-header h1{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:4px}
.login-header p{font-size:.84rem;color:var(--text-mid)}

.login-error{display:flex;align-items:center;gap:8px;background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.15);border-radius:var(--radius);padding:12px 14px;margin-bottom:20px;font-size:.8rem;color:var(--danger);line-height:1.4}

.field{margin-bottom:20px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;font-family:var(--font);font-size:.88rem;color:var(--text);transition:border-color var(--transition),box-shadow var(--transition)}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,5,158,.08)}
.field input::placeholder{color:var(--text-dim)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-dim);padding:2px;transition:color var(--transition)}
.pw-toggle:hover{color:var(--text-mid)}

.field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.remember{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-mid);cursor:pointer}
.remember input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.forgot{font-size:.78rem;color:var(--brand);text-decoration:none;transition:opacity var(--transition)}
.forgot:hover{opacity:.7}

.login-btn{display:block;width:100%;padding:13px;background:var(--brand);color:#fff;border:none;border-radius:6px;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.login-btn:hover{background:#0a0370}
.login-btn:disabled{opacity:.5;cursor:not-allowed}

.login-footer{text-align:center;margin-top:22px;font-size:.72rem;color:var(--text-dim);line-height:1.6}

.login-notice-text{text-align:center;font-size:.72rem;color:rgba(255,255,255,.45);margin-top:20px;line-height:1.5}

footer{padding:18px 24px;font-size:.68rem;color:var(--text-dim);text-align:center;line-height:1.7;background:#fff;border-top:1px solid var(--border)}

@media(max-width:480px){
header{padding:20px 20px}
.header-logo{width:43px}
.login-card{padding:28px 22px}
.login-page{padding:0 16px 40px}
}