:root{
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#293238;
  background:#fafbfb;
  font-synthesis:none;
}

*{box-sizing:border-box;letter-spacing:0}
body{margin:0}
button,input{font:inherit}
[hidden]{display:none!important}

.loginPage{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
}

.loginShell{
  width:min(352px,100%);
  margin:0 auto;
  align-self:center;
  padding:32px 0;
}

.brandLockup{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:38px}
.brandLockup img{display:block;width:32px;height:32px;border-radius:7px}
.brandLockup h1{margin:0;font-size:24px;line-height:1.25;font-weight:650}

.loginField+.loginField{margin-top:22px}
label{display:block;margin-bottom:8px;font-size:13px;line-height:1.5;font-weight:550;color:#424c52}
input{
  display:block;
  width:100%;
  min-width:0;
  height:48px;
  padding:0 13px;
  border:1px solid #d5dbde;
  border-radius:6px;
  background:#fff;
  color:#293238;
  font-size:16px;
  line-height:1.4;
  transition:border-color .15s,box-shadow .15s;
}
input:hover{border-color:#aebcbb}
input:focus{outline:none;border-color:#167568;box-shadow:0 0 0 3px #0f766e14}
input:autofill{box-shadow:inset 0 0 0 100px #f4f8f7}
.passwordField{position:relative}
.passwordField input{padding-right:48px}

button{cursor:pointer;touch-action:manipulation}
.loginButton{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:1px solid #16695f;
  border-radius:6px;
  background:#16695f;
  color:#fff;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  transition:background .15s;
}
#btnLogin{margin-top:26px}
.loginButton:hover{background:#10564d;border-color:#10564d}
.loginButton:disabled{cursor:wait;opacity:.65}
.passwordToggle{
  position:absolute;
  top:4px;
  right:4px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#6a757b;
}
.passwordToggle:hover{background:#f1f5f4;color:#16695f}
.passwordToggle svg{grid-area:1/1;width:18px;height:18px;stroke-width:1.7}
.passwordToggle[aria-pressed="false"] .lucide-eye-off,
.passwordToggle[aria-pressed="true"] .lucide-eye{display:none}
button:focus-visible{outline:2px solid #167568;outline-offset:3px}

.status{margin-top:18px;color:#59676e;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.status:empty{display:none}
.status.err{padding:10px 12px;border-left:2px solid #bb4a48;border-radius:0 4px 4px 0;background:#fcf1f1;color:#923734}

.sessionBox{display:none}
.sessionBox.show{display:block}
.sessionTop{display:flex;align-items:center;gap:12px;margin-bottom:24px;min-width:0}
.avatar{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:1px solid #dce5e2;border-radius:50%;background:#edf3f1;color:#24665b;font-size:12px;font-weight:600}
.sessionText{min-width:0}
.sessionText strong{display:block;font-size:15px;line-height:1.5;font-weight:550;overflow-wrap:anywhere}
.sessionText span{display:block;margin-top:2px;color:#69757b;font-size:12px;line-height:1.5}
.sessionActions{display:grid;gap:8px}
.sessionSwitch{min-height:42px;padding:10px;border:0;border-radius:6px;background:transparent;color:#637079;font-size:13px}
.sessionSwitch:hover{color:#16695f;background:#f0f4f3}
.sessionSwitch:disabled{cursor:wait;opacity:.6}

@media(max-width:480px){
  .loginShell{padding:24px 0}
}
@media(max-height:540px){
  .loginPage{padding-top:16px}
  .loginShell{padding:16px 0 24px}
  .brandLockup{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  input,.loginButton{transition:none}
}

/* R06 (approved mockup, 13/11/2026): the same form inside a card, with a one-line description,
   a way to recover the password and the legal links. */
:root{background:#f3f5f4}
.loginPage{background:#f3f5f4;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.loginShell{width:min(400px,100%);padding:36px 32px 28px;background:#fff;border:1px solid #e1e8e5;border-radius:16px}
.brandLockup{margin-bottom:6px}
.brandLockup img{width:36px;height:36px;border-radius:9px}
.brandLockup h1{font-size:26px;font-weight:700;letter-spacing:-.015em;color:#15231f}
.loginTagline{margin:0 0 30px;text-align:center;font-size:14px;line-height:1.45;color:#5c6f69}
label{font-weight:500;color:#3d4f4a}
input{border-color:#cfdcd7;border-radius:8px}
.loginButton{border-radius:8px;border-color:#0f766e;background:#0f766e;font-size:15px}
/* The link follows the password field in the markup (Tab order: login, password, link) and sits in the label row. */
.loginFieldWithLink{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
.loginFieldWithLink>label{grid-column:1;grid-row:1}
.loginFieldWithLink>.loginForgot{grid-column:2;grid-row:1}
.loginFieldWithLink>.passwordField{grid-column:1/-1;grid-row:2}
.loginForgot{margin-bottom:8px;font-size:13px;line-height:1.5;font-weight:500;color:#0b5a53;text-decoration:none;border-radius:4px}
.loginForgot:hover{text-decoration:underline;text-underline-offset:2px}
.loginLegal{margin:22px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:#6b7b76}
.loginLegal a{color:inherit;text-decoration:underline;text-underline-offset:2px;border-radius:4px}
.loginLegal a:hover{color:#0b5a53}
:is(.loginForgot,.loginLegal a):focus-visible{outline:2px solid #167568;outline-offset:2px}
@media(max-width:480px){
  .loginPage{padding:16px}
  .loginShell{padding:32px 16px 24px}
}
@media(max-height:540px){
  .loginPage{padding-top:16px;padding-bottom:16px}
  .loginShell{padding:16px 24px}
  .brandLockup{margin-bottom:12px}
  .loginTagline{display:none}
  .loginField+.loginField{margin-top:14px}
  #btnLogin{margin-top:18px}
  .loginLegal{margin-top:10px}
}