*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green-deep:#1a4a2e;--green-mid:#2d7a4f;--green-light:#e8f5ee;
  --gold:#c9902a;--cream:#faf8f3;--white:#ffffff;
  --text-dark:#1c2b1f;--text-mid:#4a6352;--text-muted:#8a9e90;
  --border:#d4e6da;
  --error-bg:#fff3f3;--error-text:#8b1a1a;--error-border:#f5b8b8;
  --warning-bg:#fffbf0;--warning-text:#7a5a10;--warning-border:#e8d08a;
  --success-bg:#f0f9f4;--success-text:#1a4a2e;--success-border:#b8ddc6;
}
html,body{min-height:100%;font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text-dark)}

/* PAGE */
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px 80px}

/* TENANT BRANDING BLOCK (shown when tenant context exists) */
.tenant-block{
  display:none;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:24px;animation:fadeUp .5s ease both;
}
.tenant-block.show{display:flex}
.tenant-logo-img{width:80px;height:80px;object-fit:contain;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,0.14)}
.tenant-logo-letter{
  width:80px;height:80px;border-radius:16px;flex-shrink:0;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,0.14);
}
.tenant-name{
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;
  color:var(--green-deep);text-align:center;line-height:1.2;
}
.tenant-tagline{font-size:13px;color:var(--text-muted);text-align:center;line-height:1.6}

/* CARD */
.card{
  background:var(--white);border-radius:18px;padding:36px 32px;
  box-shadow:0 2px 20px rgba(0,0,0,0.07);
  width:100%;max-width:420px;
  animation:fadeUp .5s .05s ease both;
}
.card-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:var(--green-deep);margin-bottom:4px}
.card-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:26px;line-height:1.5}

/* FIELDS */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:500;color:var(--text-mid);text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px}
.field input{
  width:100%;height:50px;padding:0 16px;
  border:1.5px solid var(--border);border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:16px;
  color:var(--text-dark);background:var(--cream);
  outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus{border-color:var(--green-mid);background:var(--white);box-shadow:0 0 0 3px rgba(45,122,79,0.1)}
.field input.error{border-color:#e87b7b;background:#fff8f8}

/* PASSWORD */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:52px}
.pw-wrap input[type="password"]::-ms-reveal,
.pw-wrap input[type="password"]::-ms-clear{display:none}
.pw-wrap input::-webkit-credentials-auto-fill-button{display:none}
.toggle-pw{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:flex-end;padding:0;
}
.toggle-pw:hover{color:var(--green-mid)}

/* FORGOT */
.field-meta{display:flex;justify-content:flex-end;margin-top:5px}
.forgot-link{font-size:13px;color:var(--green-mid);text-decoration:none;font-weight:500;padding:4px 0}
.forgot-link:hover{color:var(--gold)}

/* ALERTS */
.alert{display:none;padding:11px 14px;border-radius:10px;font-size:14px;line-height:1.5;margin-bottom:16px;border:1px solid transparent}
.alert.show{display:flex;align-items:flex-start;gap:9px}
.alert-icon{font-size:14px;flex-shrink:0;margin-top:2px}
.alert-error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}
.alert-warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}
.alert-info{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}

/* BUTTON */
.btn-submit{
  width:100%;height:52px;background:var(--green-deep);color:var(--white);
  border:none;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;
  cursor:pointer;letter-spacing:.3px;
  transition:background .2s,box-shadow .2s;
  position:relative;overflow:hidden;margin-top:6px;
  touch-action:manipulation;
}
@media(hover:hover){.btn-submit:hover:not(:disabled){background:#1f5c37;box-shadow:0 4px 16px rgba(26,74,46,0.28)}}
.btn-submit:active:not(:disabled){background:#163d26}
.btn-submit:disabled{opacity:.7;cursor:not-allowed}
.btn-submit .btn-text{transition:opacity .2s}
.btn-submit .btn-spinner{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
.btn-submit.loading .btn-text{opacity:0}
.btn-submit.loading .btn-spinner{display:flex}
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

/* BOTTOM LINKS */
.form-links{margin-top:22px;display:flex;flex-direction:column;gap:10px;align-items:center}
.separator{font-size:13px;color:var(--text-muted)}
.action-btns{display:flex;gap:10px;width:100%;flex-wrap:wrap;justify-content:center}
.btn-outline{
  flex:1;min-width:140px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border);border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--green-deep);text-decoration:none;
  transition:border-color .2s,background .2s;text-align:center;
  touch-action:manipulation;
}
.btn-outline:hover{border-color:var(--green-mid);background:var(--green-light)}
.link-row{font-size:13px;color:var(--text-muted);text-align:center}
.link-row a{color:var(--green-mid);font-weight:500;text-decoration:none}
.link-row a:hover{color:var(--gold)}

/* WATERMARK */
#ax-watermark{
  position:fixed;bottom:14px;right:14px;z-index:990;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:400;
  color:rgba(0,0,0,0.28);cursor:pointer;
  background:rgba(255,255,255,0.82);
  padding:5px 11px;border-radius:20px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,0.06);
  transition:color .2s,background .2s,box-shadow .2s;
  user-select:none;line-height:1.4;
}
#ax-watermark:hover{color:var(--green-deep);background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
#ax-watermark strong{font-weight:600;color:var(--green-mid)}

/* POPUP */
#ax-popup-overlay{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:16px;
}
#ax-popup-overlay.show{display:flex}
#ax-popup{
  background:#fff;border-radius:20px;padding:32px 28px;
  max-width:380px;width:100%;text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,0.18);
  animation:axPopIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
.ax-popup-icon{font-size:44px;margin-bottom:14px}
.ax-popup-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--green-deep);margin-bottom:10px;line-height:1.3}
.ax-popup-body{font-size:14px;color:#6b7280;line-height:1.75;margin-bottom:24px}
.ax-popup-btns{display:flex;gap:10px}
.ax-popup-learn{flex:1;height:46px;background:var(--green-deep);color:#fff;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
.ax-popup-learn:hover{background:#1f5c37}
.ax-popup-close{height:46px;padding:0 20px;background:#f3f4f6;color:#374151;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;transition:background .2s}
.ax-popup-close:hover{background:#e5e7eb}

@keyframes axPopIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* Utility */
.hidden{display:none}
.ax-honeypot{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.login-footer{text-align:center;padding:18px 16px 14px;font-size:12px;color:rgba(0,0,0,0.3)}

/* Role preview card (step 2) */
.role-card{
  display:flex;align-items:center;gap:12px;
  background:var(--success-bg);border:1.5px solid var(--success-border);
  border-radius:12px;padding:12px 14px;margin-bottom:18px;
}
.role-avatar{
  width:42px;height:42px;border-radius:10px;
  background:var(--green-deep);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.role-info{flex:1;min-width:0}
.role-info-name{font-weight:600;font-size:14px;color:var(--green-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-info-sub{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-change{background:none;border:none;font-size:12px;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:6px;flex-shrink:0;font-family:'DM Sans',sans-serif}
.btn-change:hover{color:var(--green-deep);background:rgba(0,0,0,0.05)}

@media(max-width:480px){
  .page{padding:24px 12px 72px}
  .card{padding:26px 18px;border-radius:14px}
  .card-title{font-size:24px}
  .action-btns{flex-direction:column}
  .btn-outline{min-width:unset;width:100%}
  #ax-watermark{bottom:10px;right:10px;font-size:10px;padding:4px 9px}
  #ax-popup{padding:24px 20px;border-radius:16px}
  .ax-popup-title{font-size:20px}
  .ax-popup-btns{flex-direction:column}
  .ax-popup-close{height:42px}
}