/* Guardian and employee account-security dialog. Kept separate so no other
   page or component styling is affected by this corrective release. */
.qcm-security-layer{
  position:fixed;
  z-index:2147483000;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,24px);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  pointer-events:none;
}
.qcm-security-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.58);
  opacity:0;
  transition:opacity .16s ease;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.qcm-security-dialog{
  position:relative;
  width:min(100%,430px);
  max-height:min(92dvh,720px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(148,163,184,.28);
  border-radius:22px;
  background:var(--surface,#fff);
  color:var(--text,#172033);
  box-shadow:0 24px 70px rgba(15,23,42,.3);
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .16s ease,transform .16s ease;
}
.qcm-security-layer.open{pointer-events:auto}
.qcm-security-layer.open .qcm-security-backdrop{opacity:1}
.qcm-security-layer.open .qcm-security-dialog{opacity:1;transform:none}
.qcm-security-dialog>header{
  min-height:74px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border,#e2e8f0);
  background:linear-gradient(135deg,#f8fbff,#f4f1ff);
}
.qcm-security-dialog>header>div{grid-column:2;min-width:0;text-align:center}
.qcm-security-dialog>header small{
  display:block;
  color:var(--accent,#6d28d9);
  font-size:.62rem;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.12em;
}
.qcm-security-dialog>header h3{
  margin:3px 0 0;
  color:var(--text,#172033);
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.02em;
}
.qcm-security-close,.qcm-security-back{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface,#fff);
  color:var(--text,#172033);
  font-size:.92rem;
  cursor:pointer;
}
.qcm-security-back{grid-column:1;grid-row:1;justify-self:start}
.qcm-security-close{grid-column:3;grid-row:1;justify-self:end}
.qcm-security-dialog>header:not(:has(.qcm-security-back))>div{grid-column:1/3;text-align:left}
.qcm-security-body{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:20px;
  scrollbar-gutter:stable;
}
.qcm-security-body form{display:grid;gap:14px;margin:0}
.qcm-security-copy{
  margin:0 0 2px;
  color:var(--text-soft,#64748b);
  font-size:.78rem;
  line-height:1.55;
}
.qcm-security-field{display:grid;gap:7px;margin:0;color:var(--text,#172033)}
.qcm-security-field>span{font-size:.72rem;font-weight:750}
.qcm-security-field>div{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border,#cbd5e1);
  border-radius:12px;
  background:var(--surface,#fff);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.qcm-security-field>div:focus-within{
  border-color:var(--accent,#6d28d9);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#6d28d9) 14%,transparent);
}
.qcm-security-field input{
  width:100%;
  min-width:0;
  height:46px;
  padding:0 13px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text,#172033);
  font:inherit;
  font-size:.82rem;
}
.qcm-security-field>div>button{
  width:44px;
  min-width:44px;
  height:46px;
  padding:0;
  border:0;
  border-left:1px solid var(--border,#e2e8f0);
  background:var(--surface-2,#f8fafc);
  color:var(--text-soft,#64748b);
  cursor:pointer;
}
.qcm-security-primary,.qcm-security-link{
  min-height:46px;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  font:inherit;
  font-size:.79rem;
  font-weight:800;
  cursor:pointer;
}
.qcm-security-primary{
  border:0;
  background:linear-gradient(135deg,var(--accent,#6d28d9),#2563eb);
  color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent,#6d28d9) 24%,transparent);
}
.qcm-security-link{min-height:38px;border:0;background:transparent;color:var(--accent,#6d28d9)}
.qcm-security-primary:disabled,.qcm-security-link:disabled,.qcm-security-field input:disabled,.qcm-security-field button:disabled{opacity:.6;cursor:wait}
.qcm-password-rule,.qcm-security-safe{
  margin:0;
  padding:10px 11px;
  border-radius:11px;
  background:#f1f5ff;
  color:#52617a;
  font-size:.68rem;
  line-height:1.45;
}
.qcm-password-rule i,.qcm-security-safe i{margin-right:5px;color:var(--accent,#6d28d9)}
.qcm-security-error{
  margin:14px 0 0;
  padding:10px 12px;
  border:1px solid #fecaca;
  border-radius:11px;
  background:#fef2f2;
  color:#b91c1c;
  font-size:.72rem;
  line-height:1.4;
}
.qcm-security-error[hidden]{display:none!important}
.qcm-security-otp input{text-align:center;font-size:1.1rem;font-weight:850;letter-spacing:.25em}
.qcm-security-dialog button:focus-visible,.qcm-security-dialog input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent,#6d28d9) 28%,transparent);outline-offset:2px}

@media(max-width:480px){
  .qcm-security-layer{padding:12px}
  .qcm-security-dialog{width:100%;max-height:calc(100dvh - 24px);border-radius:20px}
  .qcm-security-dialog>header{min-height:68px;padding:10px 12px}
  .qcm-security-body{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .qcm-security-backdrop,.qcm-security-dialog{transition-duration:.01ms!important}
}