/* ═══════════════════════════════════════════════════════════════
   MR. MOAMEN ELSHENNAWY — حساب الطالب (هوية بريطانية)
   يُحمَّل بعد account.css فيعيد صياغة الشكل بالكامل.
   ═══════════════════════════════════════════════════════════════ */

body.student-no-header,
body.uk-platform.student-no-header {
  padding-top: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  font-weight: 600;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, var(--page-glow-1), transparent 58%),
    var(--page-bg) !important;
}

/* The previous theme washed every surface with a diagonal overlay. */
.acc-hero::before,
.acc-card::before,
.acc-stat::before,
.acc-course::before,
.acc-topbar__bar::before {
  background: none !important;
  content: none !important;
}

/* ══════════════════ Top bar ══════════════════ */

.acc-topbar__bar {
  position: relative;
  background: var(--uk-navy-900) !important;
  border: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 10px 30px rgba(0, 21, 67, .28) !important;
  color: #fff !important;
  overflow: visible !important;
}

.acc-topbar__bar::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    90deg,
    var(--uk-navy-800) 0 26%,
    #fff 26% 33%,
    var(--uk-red-700) 33% 67%,
    #fff 67% 74%,
    var(--uk-navy-800) 74% 100%
  );
}

.acc-brand__logo,
.acc-brand__logoFallback {
  width: 50px !important;
  height: 50px !important;
  padding: 3px !important;
  background: #fff !important;
  border: 2px solid var(--uk-red-700) !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  color: var(--uk-navy-800) !important;
}

.acc-brand__name {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.acc-brand__sub {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--uk-gold-400) !important;
}

.acc-student,
.acc-pill {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}

.acc-student__name,
.acc-pill span { color: #fff !important; }

.acc-pill:hover { background: var(--uk-red-700) !important; border-color: var(--uk-red-700) !important; }

.acc-student__ico,
.acc-pill__ico { color: var(--uk-gold-400) !important; }

.acc-bell,
.acc-burger {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

.acc-bell:hover,
.acc-burger:hover { background: rgba(255, 255, 255, .20) !important; }

.acc-bell__ico { color: #fff !important; }
.acc-bell__badge { background: var(--uk-red-700) !important; color: #fff !important; }
.acc-burger span { background: #fff !important; }

/* Theme switch on the navy bar */
.acc-topbar__bar .theme-switch,
.acc-topbar__bar .acc-theme {
  flex: 0 0 auto;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  background: rgba(0, 0, 0, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.acc-topbar__bar .theme-switch__btn,
.acc-topbar__bar .acc-theme__btn {
  width: 32px;
  height: 28px;
  color: rgba(255, 255, 255, .55) !important;
}

.acc-topbar__bar .theme-switch__knob,
.acc-topbar__bar .acc-theme__knob {
  inset-block: 3px;
  width: 32px;
  background: #E8C96A !important;
  color: #001543 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .acc-topbar__bar .theme-switch__knob,
html[data-theme="dark"] .acc-topbar__bar .acc-theme__knob {
  color: #001543 !important;
}

/* Notifications dropdown */
.acc-notifs {
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-strong) !important;
  color: var(--text) !important;
  overflow: hidden;
}

.acc-notifs__head {
  background: var(--uk-navy-900) !important;
  border-block-end: 3px solid var(--uk-red-700) !important;
  color: #fff !important;
}

.acc-notifs__title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.acc-notifs__close { color: #fff !important; }

/* ══════════════════ Sidebar ══════════════════ */

.acc-sidebar {
  position: relative;
  padding: 8px !important;
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text) !important;
  overflow: hidden;
}

@media (min-width: 981px) {
  .acc-sidebar {
    top: 12px !important;
    height: calc(100vh - 24px) !important;
  }
}

.acc-sidebar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 4px;
  margin: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--uk-navy-800) 0 33.3%,
    var(--uk-red-700) 33.3% 66.6%,
    var(--uk-gold-500) 66.6% 100%
  ) !important;
}

.acc-nav {
  margin: 0 !important;
  padding: 6px 0 0 !important;
}

.acc-nav__item {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}

.acc-nav__lbl { color: inherit !important; font-size: 15.5px !important; }
.acc-nav__ico { color: var(--muted-strong) !important; }

.acc-nav__item:hover {
  background: var(--uk-navy-100) !important;
  color: var(--uk-navy-800) !important;
}
.acc-nav__item:hover .acc-nav__ico { color: var(--uk-navy-800) !important; }

.acc-nav__item.is-active {
  background: var(--uk-navy-100) !important;
  border-color: transparent !important;
  color: var(--uk-navy-800) !important;
  box-shadow: inset 4px 0 0 var(--uk-red-700) !important;
}
.acc-nav__item.is-active .acc-nav__ico { color: var(--uk-red-700) !important; }

.acc-nav__item.is-danger {
  background: var(--danger-soft-bg) !important;
  border-color: var(--danger-soft-border) !important;
  color: var(--danger) !important;
}
.acc-nav__item.is-danger .acc-nav__ico { color: var(--danger) !important; }

.acc-nav__soon { color: var(--muted) !important; }

html[data-theme="dark"] .acc-nav__item,
html[data-theme="dark"] .acc-nav__item .acc-nav__lbl,
html[data-theme="dark"] .acc-nav__item .acc-nav__ico {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF;
}

html[data-theme="dark"] .acc-nav__item:hover,
html[data-theme="dark"] .acc-nav__item:hover .acc-nav__lbl,
html[data-theme="dark"] .acc-nav__item:hover .acc-nav__ico,
html[data-theme="dark"] .acc-nav__item.is-active,
html[data-theme="dark"] .acc-nav__item.is-active .acc-nav__lbl,
html[data-theme="dark"] .acc-nav__item.is-active .acc-nav__ico {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF;
}

html[data-theme="dark"] .acc-nav__item.is-active {
  background: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] .acc-nav__item.is-danger,
html[data-theme="dark"] .acc-nav__item.is-danger .acc-nav__lbl,
html[data-theme="dark"] .acc-nav__item.is-danger .acc-nav__ico {
  color: #FFC4C8 !important;
  -webkit-text-fill-color: #FFC4C8;
}

html[data-theme="dark"] .acc-nav__item.is-danger {
  background: rgba(255, 138, 152, .16) !important;
  border-color: rgba(255, 180, 186, .45) !important;
}

/* ══════════════════ Home hero ══════════════════ */

.acc-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 28px !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  background: var(--grad-navy) !important;
  box-shadow: var(--shadow-strong) !important;
  color: #fff !important;
}

.acc-hero__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--uk-red-700) 0 33.3%,
    #fff 33.3% 66.6%,
    var(--uk-gold-500) 66.6% 100%
  );
}

.acc-hero::after {
  content: "";
  position: absolute;
  inset-block: -60%;
  inset-inline-end: -10%;
  width: 46%;
  pointer-events: none;
  opacity: .14;
  background:
    linear-gradient(48deg, transparent 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(-48deg, transparent 45%, var(--uk-red-700) 45% 55%, transparent 55%);
}

.acc-hero > * { position: relative; z-index: 1; }

.acc-hero__kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin: 6px 0 12px !important;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .10);
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: #fff !important;
}

.acc-hero__kickerFlag {
  display: inline-block;
  width: 24px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  background:
    linear-gradient(to bottom, transparent 40%, #C8102C 40% 60%, transparent 60%),
    linear-gradient(to right, transparent 40%, #C8102C 40% 60%, transparent 60%),
    linear-gradient(45deg, transparent 44%, #fff 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 44% 56%, transparent 56%),
    #012169;
}

.acc-hero h1 {
  margin: 0 0 4px !important;
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  font-weight: 900 !important;
  color: #fff !important;
}

.acc-hero__script {
  margin: 0 0 10px;
  font-family: var(--font-script);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  color: var(--uk-gold-400);
}

.acc-hero__sub {
  margin: 0 !important;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--uk-navy-300) !important;
}

/* ══════════════════ Stats ══════════════════ */

.acc-stat {
  position: relative;
  overflow: hidden;
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

a.acc-stat {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

a.acc-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow) !important;
  border-color: var(--uk-navy-800) !important;
}

.acc-stat::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  height: 4px;
  background: var(--uk-navy-800);
}

.acc-stat:nth-child(2n)::after { background: var(--uk-red-700); }
.acc-stat:nth-child(3n)::after { background: var(--uk-gold-500); }

.acc-stat__ico { color: var(--uk-navy-800) !important; }

.acc-stat__val {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: var(--text-strong) !important;
}

.acc-stat__lbl {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  color: var(--muted-strong) !important;
}

/* ══════════════════ Cards, courses, buttons ══════════════════ */

.acc-card {
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

.acc-card__head h2 {
  position: relative;
  padding-block-end: 12px;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--text-strong) !important;
}

.acc-card__head h2::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 82px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--uk-navy-800) 0 50%, var(--uk-red-700) 50% 100%);
}

.acc-course {
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  border-inline-start: 5px solid var(--uk-navy-800) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.acc-course:hover {
  transform: translateY(-4px);
  border-inline-start-color: var(--uk-red-700) !important;
  box-shadow: var(--shadow) !important;
}

.acc-course__title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--text-strong) !important;
}

.acc-course__grade {
  background: var(--uk-navy-100) !important;
  border-color: transparent !important;
  color: var(--uk-navy-800) !important;
  font-weight: 800 !important;
}

.acc-course__imgFallback {
  background: var(--grad-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: var(--uk-gold-400) !important;
}

.acc-course__progress,
.acc-progress {
  height: 6px;
  margin-block-start: 10px;
  border-radius: var(--radius-pill);
  background: var(--uk-navy-100);
  overflow: hidden;
}

.acc-course__progress > span,
.acc-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--uk-red-700) !important;
}

.acc-btn,
a.acc-btn {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  box-shadow: var(--shadow-navy) !important;
}

.acc-btn--primary,
a.acc-btn.acc-btn--primary {
  background: var(--btn-red-bg) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
}

.acc-btn--ghost,
a.acc-btn.acc-btn--ghost {
  background: transparent !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--uk-navy-800) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .acc-btn--ghost { color: var(--text) !important; }

.acc-btnx--solid {
  background: var(--btn-solid-bg) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
}

/* Badges & chips */

.acc-badge--free {
  background: var(--success-soft-bg) !important;
  border-color: var(--success-soft-border) !important;
  color: var(--success) !important;
}

.acc-badge--buy {
  background: var(--uk-red-soft) !important;
  border-color: var(--red-border) !important;
  color: var(--uk-red-700) !important;
}

.acc-chip,
.acc-onlinePill {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}

.acc-chip { background: var(--uk-navy-100) !important; color: var(--uk-navy-800) !important; }
html[data-theme="dark"] .acc-chip { color: var(--text) !important; }

/* Alerts */

.acc-alert {
  border-radius: var(--radius) !important;
  border-inline-start: 5px solid transparent !important;
  font-weight: 700 !important;
}

.acc-alert--success {
  background: var(--success-soft-bg) !important;
  border-inline-start-color: var(--success) !important;
  color: var(--success) !important;
}

.acc-alert--error {
  background: var(--danger-soft-bg) !important;
  border-inline-start-color: var(--uk-red-700) !important;
  color: var(--danger) !important;
}

/* Course / lecture sub-page heroes */

.acc-courseHero,
.acc-lectureHero,
.acc-viewerHero {
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--grad-navy) !important;
  color: #fff !important;
  box-shadow: var(--shadow) !important;
}

.acc-courseHero h1,
.acc-lectureHero h1,
.acc-viewerHero h1,
.acc-courseHero h2,
.acc-lectureHero h2 {
  font-family: var(--font-display) !important;
  color: #fff !important;
}

/* Mobile drawer keeps the light card look */

body:has(#accSideNavToggle:checked) .acc-sidebar,
.acc-sidebar.is-open {
  background: var(--card-bg-strong) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body:has(#accSideNavToggle:checked) .acc-sidebar .acc-nav__item,
.acc-sidebar.is-open .acc-nav__item { color: var(--text) !important; }

/* Dark mode */

html[data-theme="dark"] body.student-no-header {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(1, 33, 105, .55), transparent 58%),
    var(--page-bg) !important;
}

html[data-theme="dark"] .acc-topbar__bar { background: var(--uk-navy-950) !important; }
html[data-theme="dark"] .acc-sidebar,
html[data-theme="dark"] .acc-card,
html[data-theme="dark"] .acc-stat,
html[data-theme="dark"] .acc-course { background: var(--card-bg) !important; }
html[data-theme="dark"] .acc-course__grade,
html[data-theme="dark"] .acc-progress,
html[data-theme="dark"] .acc-course__progress { background: rgba(255, 255, 255, .10) !important; }
html[data-theme="dark"] .acc-course__grade { color: var(--muted-strong) !important; }

/* ══════════════════ Type scale ══════════════════ */

.acc-student__name,
.acc-pill { font-size: 15px !important; font-weight: 700 !important; }
.acc-stat__val { font-size: clamp(28px, 4vw, 36px) !important; }
.acc-stat__lbl,
.acc-label { font-size: 15px !important; }
.acc-card__head h2,
.acc-course__title { font-size: 17px !important; }
.acc-course__meta,
.acc-alert,
.acc-btn,
.acc-btnx { font-size: 15px !important; }