/* Chrysalides login — brand teal. Scoped to .login-page so dashboards are untouched. */
.login-page{
  --c-teal:#1cc4bc;--c-teal-d:#0e8f8a;--c-teal-dd:#0b7a76;--c-cream:#fdfbf4;
  --c-ink:#1f2a2e;--c-muted:#667479;--c-line:#d6e2e3;
  box-sizing:border-box;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:96px 16px 40px;
  font-family:'Inter',system-ui,sans-serif;color:var(--c-ink);
  background:radial-gradient(circle at 12% 8%,#d9f4f5,transparent 45%),radial-gradient(circle at 92% 92%,#fdeccf,transparent 42%),var(--c-cream);
}
.login-page *{box-sizing:border-box}
.login-page .login-card{width:min(440px,100%);max-width:440px;margin:0;background:#fff;border-radius:24px;padding:0 36px 34px;border:0;border-top:5px solid var(--c-teal);box-shadow:0 24px 70px #0e8f8a22}
.login-page .login-card .logo-header{text-align:center;margin-bottom:0}
.login-page .login-card .logo-header .logo-img{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 24px #0e8f8a33;margin:-64px auto 14px}
.login-page .login-card .logo-header h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--c-ink)}
.login-page .login-card .logo-header p{color:var(--c-muted);margin:6px 0 26px;font-size:15px}
.login-page .field{margin-bottom:16px}
.login-page .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--c-ink)}
.login-page .input-wrap{position:relative}
.login-page .input-wrap input{display:block;width:100%;margin:0;padding:13px 14px 13px 42px;border:1.5px solid var(--c-line);border-radius:12px;font:400 15px 'Inter',system-ui,sans-serif;background:#fff;color:var(--c-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.login-page .input-wrap input:focus{border-color:var(--c-teal);box-shadow:0 0 0 4px #1cc4bc26}
.login-page .input-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#8a979b;fill:none;stroke-width:1.8;pointer-events:none}
.login-page .input-wrap:focus-within svg{stroke:var(--c-teal-d)}
.login-page .toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;padding:4px;font:600 12px 'Inter',system-ui,sans-serif;color:var(--c-teal-d);cursor:pointer}
.login-page .input-wrap #loginPassword{padding-right:56px}
.login-page .form-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:2px 0 22px;color:var(--c-muted)}
.login-page .form-row a{color:var(--c-teal-d);font-weight:600;text-decoration:none}
.login-page .form-row a:hover{text-decoration:underline}
.login-page .remember{display:flex;gap:7px;align-items:center;cursor:pointer}
.login-page .remember input{margin:0;accent-color:var(--c-teal-d)}
.login-page .btn-primary{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:var(--c-teal-d);color:#fff;font:600 15px 'Inter',system-ui,sans-serif;cursor:pointer;transition:.15s;box-shadow:0 6px 16px #0e8f8a40}
.login-page .btn-primary:hover{background:var(--c-teal-dd);transform:translateY(-1px)}
.login-page .back-link{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--c-muted);text-decoration:none}
.login-page .back-link:hover{color:var(--c-ink)}
.login-page .error-message{display:none;background:#fdecef;color:#b3234f;border:1px solid #f6c3d1;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.login-page .error-message.show{display:block}
.login-page .brand-dots{display:flex;gap:6px;justify-content:center;margin-top:24px}
.login-page .brand-dots i{width:7px;height:7px;border-radius:50%}
@media(max-width:480px){.login-page .login-card{padding:0 22px 28px}.login-page .login-card .logo-header h1{font-size:24px}}

/* Beat the older .login-form rules in styles.css so the card matches the approved design */
.login-page .login-card .login-form{display:block}
.login-page .login-card .login-form .field label{display:block;font-weight:600;font-size:13px;color:var(--c-ink)}
.login-page .login-card .login-form .remember{display:flex;align-items:center;gap:7px;font-weight:400;font-size:13px;color:var(--c-muted);white-space:nowrap}
.login-page .login-card .login-form .remember input{width:auto;padding:0;border:0;box-shadow:none}
.login-page .login-card .login-form .input-wrap input{padding:13px 14px 13px 42px;border:1.5px solid var(--c-line);border-radius:12px;font-size:15px}
.login-page .login-card .login-form .input-wrap #loginPassword{padding-right:56px}
.login-page .login-card .login-form .input-wrap input:focus{border-color:var(--c-teal);box-shadow:0 0 0 4px #1cc4bc26}
.login-page .login-card .login-form input::placeholder{color:#8a979b}