/* ═══════════════════════════════════════════════════════════════════════════
   ONTASK LOGIN SKIN — standalone pages (login.php / forgot.php)
   Ported from the Claude Design bundle. Self-contained: carries its own tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#080a0d; --bg-panel:#0b0e12; --surface:#0d1116; --surface-2:#0a0e12;
  --surface-hov:#101620; --track:#12181f; --on-tint:#0b1014;
  --border:#1a212b; --border-soft:#161d26; --border-2:#1c2733; --border-3:#232c38;
  --text:#e9e7e2; --text-1:#dfe3e9; --text-2:#cdd3db;
  --muted:#98a2b3; --muted-2:#8d97a7; --muted-3:#848d9c; --muted-4:#7b8391;
  --tint-green:#0f2a20; --edge-green:#16412f; --tint-blue:#0a1120; --edge-blue:#23395e;
  --green:#34d399; --amber:#f5b544; --red:#f4643f; --blue:#5b9dff; --blue-2:#7aa7ff; --blue-3:#a9c5ff;
  --font-ui:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html[data-theme="light"]{
  --bg:#eef0f4; --bg-panel:#ffffff; --surface:#ffffff; --surface-2:#f6f7fa;
  --surface-hov:#eff2f6; --track:#e9ecf1; --on-tint:#ffffff;
  --border:#dfe3ea; --border-soft:#e9ecf1; --border-2:#d8dde5; --border-3:#c6ccd6;
  --text:#12161b; --text-1:#1a1f26; --text-2:#2a313a;
  --muted:#4d5563; --muted-2:#58606d; --muted-3:#616976; --muted-4:#646b78;
  --tint-green:#e8f6ef; --edge-green:#bfe3d1; --tint-blue:#eef4fd; --edge-blue:#bcd2f2;
  --green:#08663f; --amber:#7a5304; --red:#a52f15; --blue:#2563c9; --blue-2:#1d4ed8; --blue-3:#1740b8;
}

body.my-login-page{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
.my-login-page a{color:var(--blue-2)}
.my-login-page a:hover{color:var(--blue-3);text-decoration:none}

.my-login-page .card-wrapper{width:380px;max-width:94vw}
.my-login-page .brand{
  width:56px;height:56px;margin:0 auto;border-radius:12px;
  background:linear-gradient(140deg,var(--green),var(--blue));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:none;
}
.my-login-page .brand img{width:100%;height:100%;object-fit:contain}
.my-login-page h1 h3, .my-login-page h3{
  color:var(--text) !important;
  font:600 20px/1.25 var(--font-ui);
  letter-spacing:-.01em;
}
.my-login-page .card,
.my-login-page .card.fat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.my-login-page .card-body{padding:26px 26px 24px}
.my-login-page .card-title{
  color:var(--text);font:600 15px var(--font-ui);margin-bottom:22px;
}
.my-login-page .form-group label,
.my-login-page label{
  font:500 9.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-3);display:block;
}
.my-login-page label a{
  text-transform:none;letter-spacing:0;font:400 10.5px var(--font-ui);
}
.my-login-page .form-control{
  background:var(--surface-2);
  border:1px solid var(--border-3);
  border-radius:6px;
  color:var(--text);
  font:400 12px var(--font-mono);
  height:auto;padding:9px 12px;
  box-shadow:none;
}
.my-login-page .form-control:focus{
  background:var(--surface-2);color:var(--text);
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent);
}
.my-login-page .form-control::placeholder{color:var(--muted-4)}
.my-login-page .btn-primary{
  background:var(--green);border:1px solid var(--green);color:var(--on-tint);
  font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  border-radius:6px;padding:10px 15px;
}
.my-login-page .btn-primary:hover,.my-login-page .btn-primary:focus,
.my-login-page .btn-primary:not(:disabled):active{
  background:var(--green);border-color:var(--green);color:var(--on-tint);
  filter:brightness(1.1);box-shadow:none;
}
.my-login-page .invalid-feedback{color:var(--red);font:400 10px var(--font-mono)}
.my-login-page .form-control.is-invalid{border-color:var(--red)}
.my-login-page .footer{
  color:var(--muted-4);font:400 9.5px var(--font-mono);letter-spacing:.05em;
  text-align:center;margin-top:18px;
}
.my-login-page .alert{
  border-radius:8px;font:400 12px var(--font-ui);border-width:1px;
}
.my-login-page .alert-success{background:var(--tint-green);border-color:var(--edge-green);color:var(--green)}
.my-login-page .alert-info{background:var(--tint-blue);border-color:var(--edge-blue);color:var(--blue-2)}
.my-login-page .alert-danger{
  background:color-mix(in srgb,var(--red) 8%,transparent);
  border-color:color-mix(in srgb,var(--red) 32%,transparent);color:var(--red);
}
/* sweetalert on the login flow */
.my-login-page .sweet-alert{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:12px;font-family:var(--font-ui);
}
.my-login-page .sweet-alert h2{color:var(--text);font:600 18px var(--font-ui)}
.my-login-page .sweet-alert p{color:var(--muted-2);font-size:12.5px}
.my-login-page .sweet-alert button.confirm{
  background:var(--green)!important;color:var(--on-tint);border-radius:6px;
  font:600 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:none!important;
}
.my-login-page .sweet-alert button.cancel{
  background:transparent!important;border:1px solid var(--border-2);color:var(--muted);border-radius:6px;
  font:600 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
}
/* the success icon's animation masks are hardcoded white in sweetalert.css;
   they must match the panel background or they show as a disc + diagonal bars */
.my-login-page .sweet-alert .sa-icon.sa-success::before,
.my-login-page .sweet-alert .sa-icon.sa-success::after{background:var(--bg-panel)}
.my-login-page .sweet-alert .sa-icon.sa-success .sa-fix{background-color:var(--bg-panel)}