/* ============================================================
   appbar.css — نوار بالای مینیمال و مطمئن (Navy)
   ============================================================
   ⚠️ نکته معماری: backdrop-filter حفظ می‌شود (شفافیت شیشه‌ای).
   پنل اعلان باید بیرون از این header بماند.
   ============================================================ */

.appbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(226,232,240,.85);
}

.appbar-row{
  height:68px;display:flex;align-items:center;
  padding:0 22px;gap:12px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:16px;letter-spacing:-.3px;
  color:var(--p);
}
.brandmark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, var(--p) 0%, #1E4A6E 60%, var(--teal-600) 100%);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:var(--sh-brand);
  position:relative;overflow:hidden;
}
.brandmark::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.28), transparent 45%);
  pointer-events:none;
}
.brandmark .material-symbols-rounded{
  font-size:22px;
  font-variation-settings:'FILL' 1,'wght' 500;
}

.userarea{
  margin-inline-start:auto;
  display:flex;align-items:center;gap:10px;
}

/* نشان اتصال امن — کوچک، کنار userarea */
.wallet{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg, var(--tealc), #E6FFFB);
  color:var(--teal-700);
  font-size:11px;font-weight:700;
  border:1px solid #99F6E4;
  white-space:nowrap;
}
.wallet::before{
  content:'🔒';
  font-size:11px;
  filter:grayscale(.1);
}

.avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg, var(--s2), var(--s3));
  color:var(--p);
  display:grid;place-items:center;
  font-weight:800;font-size:17px;
  border:0;padding:0;font-family:inherit;cursor:pointer;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  position:relative;
}
.avatar:hover{
  transform:scale(1.05);
  box-shadow:inset 0 0 0 1px var(--teal), 0 6px 16px -8px rgba(20,184,166,.5);
}
.avatar:active{transform:scale(.94)}

/* کارگزار: نیلی، تأییدشده: حلقه طلایی */
.avatar.avatar-broker{
  background:linear-gradient(135deg, var(--p), #1E4A6E);
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(10,37,64,.65), inset 0 0 0 2px var(--gold);
}
.avatar.avatar-broker:hover{
  box-shadow:0 10px 22px -8px rgba(10,37,64,.75), inset 0 0 0 2px var(--gold);
}

@media(max-width:700px){
  .appbar-row{height:62px;padding:0 13px;gap:8px}
  .wallet{display:none}
  .avatar{width:40px;height:40px;font-size:16px}
  .brandmark{width:38px;height:38px;border-radius:12px}
  .brandmark .material-symbols-rounded{font-size:20px}
  .brand{font-size:14.5px}
}