body.taif-auth-locked .shell{
  pointer-events:none;
  user-select:none;
  filter:blur(1px) saturate(.94);
}

.taif-auth-gate{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:18px;
  background:
    radial-gradient(760px 420px at 78% 10%, rgba(88,135,251,.24), transparent 66%),
    radial-gradient(640px 480px at 10% 100%, rgba(34,80,212,.20), transparent 62%),
    linear-gradient(180deg, rgba(229,237,255,.96), rgba(210,223,255,.98));
  direction:rtl;
}
body.taif-auth-ready .taif-auth-gate:empty,
body.taif-auth-ready .taif-auth-gate[aria-hidden="true"]{display:none}

.taif-auth-card{
  width:min(420px, 100%);
  display:grid;
  gap:12px;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(47,103,243,.18);
  background:rgba(255,255,255,.96);
  box-shadow:0 28px 80px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.taif-auth-card--loading{justify-items:center;text-align:center}
.taif-auth-logo{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:22px;
  background:var(--topbar-chrome, linear-gradient(135deg, #5887fb, #2250d4));
  color:#fff;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.04em;
  box-shadow:0 16px 34px rgba(34,80,212,.22);
}
.taif-auth-title{font-size:24px;font-weight:1000;color:#0f172a;text-align:center;line-height:1.25}
.taif-auth-subtitle{font-size:14px;font-weight:800;color:rgba(15,23,42,.68);text-align:center;line-height:1.5}
.taif-auth-field{display:grid;gap:6px;font-weight:900;color:#172554;font-size:13px}
.taif-auth-field input{
  width:100%;
  height:42px;
  border:1px solid rgba(47,103,243,.20);
  border-radius:12px;
  padding:0 12px;
  background:#fff;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}
.taif-auth-field input:focus{border-color:rgba(34,80,212,.62);box-shadow:0 0 0 3px rgba(47,103,243,.13)}
.taif-auth-primary,
.taif-auth-secondary,
.taif-topbar-logout{
  border:0;
  border-radius:12px;
  min-height:40px;
  padding:0 16px;
  font-weight:1000;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.taif-auth-primary{background:var(--topbar-chrome, linear-gradient(135deg, #5887fb, #2250d4));color:#fff;box-shadow:0 14px 28px rgba(34,80,212,.20)}
.taif-auth-secondary{background:#eff4ff;color:#1d4ed8;border:1px solid rgba(47,103,243,.18)}
.taif-auth-primary:active,
.taif-auth-secondary:active,
.taif-topbar-logout:active{transform:scale(.99)}
.taif-auth-primary:disabled{opacity:.55;cursor:progress}
.taif-auth-note{font-size:12px;font-weight:800;color:rgba(15,23,42,.58);text-align:center;line-height:1.5}
.taif-auth-message{border-radius:12px;padding:10px 12px;font-size:13px;font-weight:900;line-height:1.45;text-align:center}
.taif-auth-message--error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.taif-auth-message--success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.taif-auth-spinner{width:34px;height:34px;border-radius:50%;border:4px solid rgba(47,103,243,.18);border-top-color:#2f67f3;animation:taif-auth-spin .85s linear infinite}
@keyframes taif-auth-spin{to{transform:rotate(360deg)}}

.taif-topbar-actions{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.taif-topbar-name-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  max-width:360px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:13px;
  font-weight:1000;
  min-width:0;
}
.taif-topbar-name-chip__dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.taif-topbar-name-chip__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taif-topbar-name-chip__role{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.18)}
.taif-topbar-logout{min-height:30px;background:rgba(255,255,255,.92);color:#1d4ed8;font-size:12px;box-shadow:0 8px 18px rgba(15,23,42,.10)}

@media (max-width:520px){
  .taif-auth-card{padding:18px;border-radius:18px}
  .taif-auth-logo{width:62px;height:62px;border-radius:18px;font-size:19px}
  .taif-auth-title{font-size:21px}
  .taif-topbar-name-chip__role{display:none}
  .taif-topbar-name-chip{max-width:calc(100vw - 126px)}
  .taif-topbar-logout{padding:0 10px}
}