.msk-unified-auth{display:grid;gap:13px;margin-bottom:16px}.msk-auth-terms-mini{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid #e3e8ee;border-radius:12px;background:#fafcfd;color:#536775;font-size:10px;line-height:1.7}.msk-auth-terms-mini input{width:16px!important;height:16px;margin-top:2px;flex:0 0 16px}.msk-auth-terms-mini a{color:#0d7f73;font-weight:800}.msk-social-auth-grid{display:grid;gap:8px}.msk-social-btn,.msk-google-button{width:100%;min-height:46px;border:1px solid #d8e1e7;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#1d3445;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;box-sizing:border-box}.msk-google-button{padding:3px;overflow:hidden}.msk-google-button>div{margin:auto!important}.msk-social-btn:hover{border-color:#b9c9d3;background:#fbfdfd}.msk-social-btn .brand,.msk-methods-status-grid .brand{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:15px}.brand.google{background:#f2f5ff;color:#3867d6}.brand.facebook{background:#1877f2;color:#fff;font-family:Arial;font-size:18px}.brand.apple{background:#111;color:#fff;font-size:18px}.brand.whatsapp{background:#dcf8e8;color:#087f4f;font-size:16px}.brand.email{background:#eef3f6;color:#355468}.msk-social-btn.is-disabled{opacity:.55;cursor:not-allowed}.msk-auth-divider{height:1px;background:#e4eaee;position:relative;margin:6px 0}.msk-auth-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:0 10px;color:#9aa7af;font-size:9px}
.msk-auth-flow{border:1px solid #dce6ea;border-radius:16px;padding:13px;background:#f9fcfc}.msk-auth-flow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.msk-auth-flow-head strong{font-size:12px}.msk-auth-flow-head button{border:0;background:#e9f0f3;width:29px;height:29px;border-radius:9px;font-size:18px;cursor:pointer}.msk-auth-flow label{display:grid;gap:5px}.msk-auth-flow label span{font-size:9px;font-weight:800;color:#355062}.msk-auth-flow input{width:100%;box-sizing:border-box;border:1px solid #d6e1e6;border-radius:11px;padding:10px 11px;font:11px inherit;outline:0;background:#fff}.msk-auth-flow input:focus{border-color:#4bb5a7;box-shadow:0 0 0 3px rgba(75,181,167,.08)}.msk-auth-flow-submit{width:100%;margin-top:8px;border:0;border-radius:11px;background:#0d8f80;color:#fff;padding:10px 12px;display:flex;align-items:center;justify-content:center;text-decoration:none;font:800 10px inherit;cursor:pointer}.msk-auth-flow-submit.is-whatsapp{background:#128c5c}.msk-auth-flow-link{display:block;margin:8px auto 0;border:0;background:transparent;color:#6f818c;font:700 8px inherit;cursor:pointer}.msk-auth-flow p{font-size:9px;color:#6f818c;line-height:1.7}.msk-wa-code{display:grid;place-items:center;padding:11px;border-radius:13px;background:#fff;border:1px dashed #bcded6}.msk-wa-code small{font-size:8px;color:#768891}.msk-wa-code strong{font:900 28px/1.2 "Alexandria",sans-serif;letter-spacing:3px;color:#143b46}.msk-wa-waiting{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;color:#71838d;font-size:9px}.msk-wa-waiting i{width:8px;height:8px;border-radius:50%;background:#18b67a;box-shadow:0 0 0 0 rgba(24,182,122,.35);animation:mskAuthPulse 1.3s infinite}@keyframes mskAuthPulse{70%{box-shadow:0 0 0 7px rgba(24,182,122,0)}100%{box-shadow:0 0 0 0 rgba(24,182,122,0)}}
.msk-methods-card{background:#fff;border:1px solid #e1e8ed;border-radius:24px;padding:22px;box-shadow:0 18px 48px rgba(18,47,64,.06)}.msk-methods-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.msk-methods-status-grid article{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;padding:11px;border:1px solid #e7edf1;border-radius:14px}.msk-methods-status-grid article>div{display:grid}.msk-methods-status-grid strong{font-size:10px}.msk-methods-status-grid small{font-size:8px;color:#83919a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msk-methods-status-grid article>b{font-size:8px;padding:5px 7px;border-radius:999px}.msk-methods-status-grid article>b.ok{background:#e9f8f3;color:#087c67}.msk-methods-status-grid article>b.pending{background:#f1f4f6;color:#75848d}.msk-methods-connect{margin-top:18px;padding-top:17px;border-top:1px solid #edf1f3}.msk-methods-connect h2{font-size:18px;margin:0 0 3px}.msk-methods-connect>p{font-size:9px;color:#74858f;margin:0 0 12px}.msk-methods-connect .msk-unified-auth{max-width:520px;margin:0}.msk-methods-connect .msk-auth-divider{display:none}
@media(max-width:640px){.msk-social-btn,.msk-google-button{min-height:44px}.msk-methods-card{padding:14px;border-radius:19px}.msk-methods-status-grid{grid-template-columns:1fr}.msk-methods-status-grid article{grid-template-columns:36px 1fr auto}.msk-wa-code strong{font-size:24px}.msk-auth-flow{padding:11px}}

/* v1.7.1 — login methods page shell fix */
.msk-login-methods-page .msk-account-wrap{width:min(1040px,100%);margin-inline:auto}
.msk-login-methods-page .msk-account-top{align-items:flex-end}
.msk-login-methods-page .msk-methods-card{width:100%;box-sizing:border-box}
.msk-login-methods-page .msk-methods-connect .msk-social-auth-grid{grid-template-columns:1fr 1fr}
.msk-login-methods-page .msk-methods-connect .msk-auth-flow{max-width:520px}
@media(max-width:760px){
  .msk-login-methods-page .msk-account-top{align-items:flex-start;flex-direction:column}
  .msk-login-methods-page .msk-methods-connect .msk-social-auth-grid{grid-template-columns:1fr}
}

/* v1.8.0 compact legal copy */
.msk-auth-legal{text-align:center;color:#8b99a1;font-size:8px;line-height:1.7;margin:1px 5px 0}
.msk-auth-legal a{color:#607680;font-weight:800}


/* ==========================================================
   Maskanak 1.8.1 — official-style SVG brand icons + clear state
   ========================================================== */
.msk-social-btn .msk-auth-brand-svg,
.msk-method-brand .msk-auth-brand-svg{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:block;
}
.msk-social-btn{
  position:relative;
}
.msk-social-btn>b{
  flex:1;
  text-align:center;
}
.msk-social-btn.is-disabled{
  opacity:.62;
  cursor:not-allowed;
  background:#f8fafb;
  border-style:dashed;
}
.msk-social-btn.is-disabled small{
  position:absolute;
  left:10px;
  font-size:7px;
  color:#8b9aa3;
  font-weight:800;
}
.msk-method-brand{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f6f8fa;
}


/* ==========================================================
   Maskanak 1.8.4 — backup password
   ========================================================== */
.msk-backup-password-box{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #edf1f3;
}
.msk-backup-password-box>div>span{
  color:#0b8a7a;
  font-size:9px;
  font-weight:900;
}
.msk-backup-password-box h2{
  margin:4px 0 4px;
  font-size:18px;
}
.msk-backup-password-box>div>p{
  margin:0 0 12px;
  color:#73858f;
  font-size:9px;
  line-height:1.8;
}
.msk-backup-password-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.msk-backup-password-fields label{
  display:grid;
  gap:5px;
}
.msk-backup-password-fields label>span{
  font-size:9px;
  font-weight:800;
  color:#3c5665;
}
.msk-backup-password-fields input{
  min-height:43px;
  box-sizing:border-box;
  width:100%;
  padding:9px 10px;
  border:1px solid #d8e3e8;
  border-radius:11px;
  outline:0;
  font:10px inherit;
}
.msk-backup-password-fields input:focus{
  border-color:#4fb6a8;
  box-shadow:0 0 0 3px rgba(79,182,168,.08);
}
.msk-backup-password-box form>button{
  margin-top:9px;
  border:0;
  border-radius:11px;
  background:#0c8e7e;
  color:#fff;
  padding:9px 13px;
  font:800 9px inherit;
  cursor:pointer;
}
#mskBackupPasswordMessage{
  display:inline-block;
  margin-inline-start:8px;
  font-size:8px;
}
#mskBackupPasswordMessage.is-success{color:#087866}
#mskBackupPasswordMessage.is-error{color:#b13c49}

.msk-setup-note{
  margin:0 0 8px;
  color:#7a8a94;
  font-size:8px;
  line-height:1.7;
}

@media(max-width:640px){
  .msk-backup-password-fields{grid-template-columns:1fr}
}

.msk-backup-password-box .msk-password-field{position:relative}
.msk-backup-password-box .msk-password-field input{padding-inline-start:46px}
.msk-backup-password-box .msk-password-toggle{
  position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);
  width:33px;height:33px;border:0;border-radius:9px;background:#eef4f6;cursor:pointer;
}

/* ==========================================================
   Maskanak 1.10.0 — Passkeys / WebAuthn
   ========================================================== */
.brand.passkey{background:#eaf8f5;color:#087c70;font-size:18px}
.msk-social-btn.is-passkey{border-color:#cce7e2;background:linear-gradient(180deg,#ffffff,#f8fdfc)}
.msk-social-btn.is-passkey .msk-auth-brand-svg{color:#0b8e7f}
.msk-social-btn.is-passkey small{font-size:7px;color:#7d8d95;font-weight:800}
.msk-passkeys-box{margin-top:18px;padding-top:18px;border-top:1px solid #edf1f3}
.msk-passkeys-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.msk-passkeys-head>div>span{color:#0b8a7a;font-size:9px;font-weight:900}
.msk-passkeys-head h2{margin:4px 0;font-size:18px}
.msk-passkeys-head p{margin:0;color:#73858f;font-size:9px;line-height:1.8;max-width:660px}
.msk-passkeys-head>button{border:0;border-radius:11px;background:#0c8e7e;color:#fff;padding:10px 14px;font:800 9px inherit;cursor:pointer;white-space:nowrap}
.msk-passkeys-head>button:disabled{opacity:.55;cursor:not-allowed}
.msk-passkeys-support{margin-top:10px;padding:10px 12px;border-radius:11px;background:#fff5e8;color:#8d5b14;font-size:9px;font-weight:800}
.msk-passkeys-list{display:grid;gap:8px;margin-top:12px}
.msk-passkeys-list article{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;border:1px solid #e4ecef;border-radius:13px;padding:10px;background:#fbfdfd}
.msk-passkey-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e8f7f4;color:#087c70;font-size:20px;font-weight:900}
.msk-passkeys-list article>div:nth-child(2){display:grid;gap:2px;min-width:0}
.msk-passkeys-list strong{font-size:10px;color:#253f4e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msk-passkeys-list small{font-size:8px;color:#84929a;line-height:1.6}
.msk-passkey-actions{display:flex;gap:6px}
.msk-passkey-actions button{border:1px solid #d9e4e8;background:#fff;color:#526a77;border-radius:9px;padding:7px 9px;font:800 8px inherit;cursor:pointer}
.msk-passkey-actions button.danger{color:#b04752;border-color:#f0d7da;background:#fffafb}
.msk-passkey-empty{padding:13px;border:1px dashed #cfdde2;border-radius:12px;background:#fafcfd;color:#71848e;font-size:9px;line-height:1.8}
.msk-passkey-message{display:block;margin-top:8px;font-size:8px}.msk-passkey-message.is-success{color:#087866}.msk-passkey-message.is-error{color:#b13c49}
@media(max-width:640px){
  .msk-passkeys-head{flex-direction:column}.msk-passkeys-head>button{width:100%}
  .msk-passkeys-list article{grid-template-columns:34px 1fr}.msk-passkey-actions{grid-column:1/-1}.msk-passkey-actions button{flex:1}
}

.msk-passkey-register-note{margin:10px 0 0;padding:9px 11px;border-radius:11px;background:#f3fbf9;color:#52716b;font-size:8px;line-height:1.8;text-align:center;border:1px solid #def0eb}
.msk-setup-passkey{border:1px solid #dcece8;background:linear-gradient(180deg,#fbfffe,#f3fbf9)}
.msk-passkey-onboarding-button{width:100%;margin-top:10px;border:0;border-radius:12px;background:#0c8e7e;color:#fff;padding:12px 14px;font:900 10px inherit;cursor:pointer}
.msk-passkey-onboarding-button:disabled{opacity:.6;cursor:not-allowed}
.msk-passkey-onboarding-done{margin-top:10px;padding:10px 12px;border-radius:11px;background:#eaf8f4;color:#087866;font-size:9px;font-weight:900}

/* ==========================================================
   Maskanak 1.10.5 — Google button visual alignment
   Keep the official Google Identity button, but remove the
   extra Maskanak shell so it matches the other auth rows.
   ========================================================== */
.msk-google-button,
.msk-auth-simple .msk-google-button{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
  border-radius:14px!important;
  min-height:50px;
  display:block;
}
.msk-google-button>div{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.msk-google-button iframe{
  display:block!important;
  margin:0!important;
  max-width:100%!important;
}
@media(max-width:640px){
  .msk-google-button,
  .msk-auth-simple .msk-google-button{min-height:50px}
}