/* ===== Rayna portal-pro: چیدمان هدر، لوگو، عکس‌ها و منو (کامپیوتر و موبایل) ===== */
html body header{
  background:linear-gradient(120deg,#22c55e 0%,#84cc16 55%,#facc15 100%)!important;
  padding:14px 16px 16px!important; gap:12px!important;
  box-shadow:0 8px 24px rgba(34,197,94,.25)!important; border-bottom:0!important;
}
html body header .hbrand{flex-direction:row!important;gap:14px!important;justify-content:center!important;flex-wrap:wrap}
html body header .brand{
  font-size:1.35rem!important;font-weight:900!important;color:#0f5132!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;
  letter-spacing:.2px;white-space:nowrap;
}
html body header .rlogo{
  width:72px!important;height:72px!important;padding:3px;background:linear-gradient(135deg,#fff,#fef9c3)!important;
  box-shadow:0 0 0 3px #fff,0 6px 16px rgba(15,81,50,.3)!important;
}
html body header .rlogo img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover}
html body header .hwrap{flex:0 0 auto}
html body header .hphoto{width:72px!important;height:72px!important;border:3px solid #fff;box-shadow:0 6px 16px rgba(15,81,50,.3)}

/* منو: کپسول شیشه‌ای مرتب */
html body header .nav{
  gap:8px!important;padding:10px 12px!important;border-radius:26px!important;
  background:rgba(255,255,255,.88)!important;border:0!important;
  box-shadow:0 10px 28px rgba(15,81,50,.22),inset 0 1px 0 #fff!important;
}
html body header .nav a{
  font-size:.92rem!important;padding:8px 14px!important;border-radius:16px!important;
  color:#7a1f4d!important;
}
html body header .nav a.on{background:linear-gradient(135deg,#22c55e,#84cc16)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(34,197,94,.45)!important}
html body header .nav a[href="/"]{color:#0a7d6a!important}
html body header .nav a[href*="logout"]{color:#d6285f!important}

/* کارت خوش‌آمد و عکس مدرس */
.hero{
  position:relative;overflow:hidden;text-align:center;border-radius:28px!important;
  padding:28px 20px 26px!important;margin:18px auto 16px!important;max-width:880px;
  background:linear-gradient(120deg,#22c55e,#84cc16,#facc15,#38bdf8,#a78bfa)!important;background-size:300% 300%!important;
  box-shadow:0 14px 34px rgba(79,70,229,.25)!important;color:#fff!important;
}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.hero h1{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.2);font-size:1.7rem!important;margin:6px 0 8px!important;font-weight:900}
.hero p{color:#f8fafc!important;font-size:1.02rem;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.hero .avwrap{margin:0 auto 6px!important;transform:scale(1.15)}
.hero .avatar,.hero img.avatar{width:110px!important;height:110px!important;border:5px solid #fff!important;margin:0!important;box-shadow:0 8px 20px rgba(0,0,0,.25)!important}
.hero .avwrap::before{inset:-6px!important}
.hero .avwrap::after{inset:-1px!important}

/* عکس‌های هدر و کارت‌ها */
.avatar,.teacher-photo{border-radius:50%;object-fit:cover}

/* موبایل */
@media (max-width:900px){
  html body header{padding:10px 10px 12px!important;gap:10px!important}
  html body header .hbrand{gap:10px!important}
  html body header .brand{font-size:1.1rem!important}
  html body header .rlogo{width:56px!important;height:56px!important}
  html body header .hphoto{width:56px!important;height:56px!important}
  html body header .np-burger{border-radius:18px!important;background:linear-gradient(135deg,#166534,#22c55e)!important;border-color:#fff!important}
  html body header .nav{gap:8px!important;padding:10px!important;border-radius:20px!important}
  html body header .nav a{font-size:.85rem!important;min-height:46px!important;border-radius:14px!important;padding:6px 8px!important}
  .hero{padding:22px 14px 20px!important;border-radius:22px!important;margin:12px 8px 12px!important}
  .hero h1{font-size:1.35rem!important}
  .hero .avwrap{transform:scale(1.05)}
  .hero .avatar,.hero img.avatar{width:92px!important;height:92px!important}
}

/* ===== موبایل: بدون دکمه‌ی سبز «منو»؛ هدر یک‌ردیفه و مرتب، منو به‌صورت دکمه‌های جمع‌وجور ===== */
@media (max-width:900px){
  html body header .np-burger,.np-burger{display:none!important}

  html body header{padding:6px 10px 10px!important;gap:8px!important}
  /* ردیف بالا: لوگو + عنوان وسط‌چین؛ عکس مدرس (۴۴px) گوشه‌ی راست بالا ثابت است، پس دو طرف جا باز می‌کنیم */
  html body header .hbrand{
    width:100%!important;box-sizing:border-box;min-height:44px;padding:0 52px!important;
    justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important;gap:0!important;
  }
  html body header .brand{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
    font-size:1.02rem!important;line-height:1.35!important;white-space:normal!important;text-align:center;
  }
  html body header .rlogo{width:44px!important;height:44px!important;padding:2px!important;flex:0 0 44px!important}

  /* منو: همیشه باز، دکمه‌های کوچک و مرتب */
  html body header .nav,html body header .nav.ncol,
  html body header.np-open .nav,html body header.np-open .nav.ncol{
    display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;
    gap:6px!important;padding:8px!important;border-radius:18px!important;
  }
  html body header .nav a,html body header .nav.ncol a,html body header .nav.ncol a:not(.on),
  html body header .nav .sbwrap>a{
    width:auto!important;flex:0 0 auto!important;min-height:36px!important;padding:5px 12px!important;
    font-size:.8rem!important;white-space:nowrap!important;border-radius:12px!important;
  }
  html body header .sbwrap{display:inline-flex!important;grid-column:auto!important}
  html body header .sbpanel{
    position:absolute!important;top:calc(100% + 6px)!important;right:0!important;left:auto!important;
    box-shadow:0 14px 34px rgba(192,132,252,.4)!important;margin-top:0!important;min-width:210px!important;
  }
  html body header .sbpanel::before{display:block}
}

/* ===== موبایل: لوگو چپ، عکس مدرس راست، نوشته وسط؛ لوگو کاملاً دایره‌ای ===== */
@media (max-width:900px){
  html body header .hbrand{position:relative!important;padding:0 56px!important}
  html body header .brand{position:static!important;width:100%!important;justify-content:center!important;text-align:center!important}
  html body header .rlogo{
    position:absolute!important;left:0!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;
    box-sizing:border-box!important;width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;
    aspect-ratio:1/1!important;border-radius:50%!important;padding:2px!important;overflow:visible!important;
  }
  html body header .rlogo img{
    width:100%!important;height:100%!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;display:block!important;
  }
}

/* ===== موبایل: لوگو دقیقاً مثل صفحه‌ی اصلی (۵۶px، زمینه‌ی سفید، درخشش زرد، دو ستاره‌ی چشمک‌زن) ===== */
@media (max-width:900px){
  html body header{padding-top:4px!important}
  html body header .hbrand{min-height:56px!important;padding:0 64px!important}
  html body header .rlogo{
    width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;flex:0 0 56px!important;
    padding:0!important;background:#fff!important;border:0!important;
    box-shadow:0 0 12px rgba(255,224,0,.6)!important;
  }
  html body header .rlogo i{opacity:0}
  html body header .rlogo .s1{top:-8px!important;right:-6px!important;left:auto!important;bottom:auto!important}
  html body header .rlogo .s2{bottom:-4px!important;left:-8px!important;top:auto!important;right:auto!important;width:12px!important;height:12px!important;animation-delay:.9s}
  html body header .rlogo .s3,html body header .rlogo .s4{display:none!important}
}