/* page-experience-v67.css */
/* V66 — Compact navy page headings + refined visual experience across all portals. */
:root{
  --jx-page-navy:#0b2754;
  --jx-page-navy-2:#123b73;
  --jx-page-ink:#122951;
  --jx-page-muted:#72829a;
  --jx-page-line:#dfe7f3;
  --jx-page-soft:#f5f8fd;
  --jx-page-shadow:0 10px 26px rgba(11,39,84,.10);
}

/* ---------- One compact page-title language across student / teacher / admin / responsible / accountant ---------- */
:where(.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,.readiness-page-head){
  position:relative!important;
  min-height:64px!important;
  height:auto!important;
  margin-bottom:16px!important;
  padding:10px 14px!important;
  border:1px solid #244d82!important;
  border-radius:14px!important;
  background:linear-gradient(112deg,var(--jx-page-navy),var(--jx-page-navy-2))!important;
  color:#fff!important;
  box-shadow:var(--jx-page-shadow)!important;
  overflow:hidden;
}
:where(.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,.readiness-page-head)::after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  inset-inline-end:-72px;top:-100px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.025);
  pointer-events:none;
}
:where(.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,.readiness-page-head)
:is(h1,h2,h3,.qb-hero-title){
  position:relative;z-index:1;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(1rem,1.55vw,1.22rem)!important;
  line-height:1.55!important;
  font-weight:900!important;
}
:where(.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.jawda-page-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,.readiness-page-head)
:is(p,small,.qb-hero-sub){
  position:relative;z-index:1;
  margin:2px 0 0!important;
  color:#d7e6f8!important;
  font-size:.74rem!important;
  line-height:1.65!important;
  font-weight:500!important;
}

/* Remove marketing eyebrow/kicker lines from page titles: title + short description only. */
.student-account-portal .bill-hero>span:not(.jx-page-icon),
.student-account-portal .care-eyebrow,
.accountant-portal-page .acc-hero>span,
.exam-eyebrow{display:none!important}

/* Compact 3D icon used in the title strip. */
.jx-page-icon,.academic-hero>.academic-art,.jawda-page-heading-icon{
  position:relative;z-index:1;
  display:grid!important;place-items:center!important;
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 7px 13px rgba(0,10,35,.2)!important;
  transform:none!important;
}
.jx-page-icon svg,.academic-hero>.academic-art svg,.jawda-page-heading-icon :is(svg,.tw-icon){
  width:35px!important;height:35px!important;display:block;
  filter:drop-shadow(0 6px 5px rgba(0,12,40,.2))!important;
}
.academic-hero>.academic-art i{font-size:1.15rem!important}

/* Header layout: icon, then title/description. */
.academic-hero,.bill-hero,.care-heading,.jawda-page-heading{display:flex!important;align-items:center!important;gap:11px!important}
.academic-hero>div,.bill-hero>div,.care-heading>div,.jawda-page-heading-copy{position:relative;z-index:1;min-width:0;flex:1}
.jawda-page-heading-links{display:none!important}
body.staff-visual-v21 .jawda-page-heading{display:flex!important}

/* Compact action buttons that still live in legacy page headers. */
:where(.project-hero,.sa-hero,.care-heading,.events-page-heading,.leqs-head)>.btn,
:where(.project-hero,.sa-hero,.care-heading,.events-page-heading,.leqs-head)>a:not(.jx-page-icon){
  position:relative;z-index:2;
  min-height:34px!important;
  padding:6px 10px!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  font-size:.7rem!important;
  box-shadow:none!important;
}

/* ---------- Academic tools: plans / exams / library ---------- */
.academic-page{background:linear-gradient(180deg,#f4f7fc 0,#f8fafd 48%,#fff 100%)}
.academic-main{padding-block:18px 40px}
.academic-main-in-shell{padding-bottom:34px!important}
.academic-hero{margin-bottom:14px!important}
.academic-hero .academic-art{background:rgba(255,255,255,.08)!important}
.academic-icon-3d{width:35px!important;height:35px!important}
.academic-layout{gap:18px}
.academic-card{border:1px solid var(--jx-page-line);border-radius:17px;box-shadow:0 10px 26px rgba(18,41,81,.055)}
.academic-card:hover{border-color:#cfdbed}
.academic-side{top:82px;padding:15px}
.academic-side h2{margin-bottom:11px;color:#173a6b;font-size:.96rem}
.academic-menu-item{position:relative;padding:11px 12px;border:1px solid transparent;border-radius:12px;background:#f5f8fd}
.academic-menu-item:hover{border-color:#d5e1f3;background:#eef4fd;transform:translateY(-1px)}
.academic-menu-item.active{border-color:#c7d7ef;background:#eaf1fc;box-shadow:inset 4px 0 #315eaa}
html[dir="rtl"] .academic-menu-item.active{box-shadow:inset -4px 0 #315eaa}

/* Study plan visual refresh. */
.academic-plan-image{padding:12px;background:linear-gradient(145deg,#fff,#f7faff)}
.academic-plan-image img{border-radius:12px;filter:drop-shadow(0 12px 18px rgba(28,61,115,.08))}
.academic-plan-image figcaption{color:#60738f;font-size:.75rem}
.academic-metrics{gap:10px}
.academic-metrics div{position:relative;overflow:hidden;min-height:105px;padding:13px 12px;border:1px solid #dce6f4;border-radius:15px;background:linear-gradient(145deg,#fbfdff,#edf4ff);box-shadow:0 8px 18px rgba(20,52,103,.055)}
.academic-metrics div:after{content:"";position:absolute;width:70px;height:70px;inset-inline-end:-28px;top:-26px;border-radius:50%;background:#d9e8ff80}
.academic-metrics .plan-metric-icon{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin:0 auto 5px}
.academic-metrics .plan-metric-icon svg{width:34px;height:34px;filter:drop-shadow(0 6px 6px rgba(31,69,140,.17))}
.academic-metrics span:not(.plan-metric-icon){position:relative;z-index:1;color:#71819a;font-size:.72rem}
.academic-metrics strong{position:relative;z-index:1;color:#133767;font-size:1.35rem}
.academic-card progress{height:9px;border-radius:999px;overflow:hidden}
.academic-table{border-collapse:separate;border-spacing:0 6px}
.academic-table thead th{border:0!important;background:transparent!important;color:#617693;font-size:.72rem}
.academic-table tbody tr{background:#f8faff!important;box-shadow:0 3px 10px rgba(18,41,81,.025)}
.academic-table tbody td{border-top:1px solid #e6ecf5!important;border-bottom:1px solid #e6ecf5!important}
.academic-table tbody td:first-child{border-inline-start:1px solid #e6ecf5!important;border-radius:0 11px 11px 0}
.academic-table tbody td:last-child{border-inline-end:1px solid #e6ecf5!important;border-radius:11px 0 0 11px}
html[dir="ltr"] .academic-table tbody td:first-child{border-radius:11px 0 0 11px}
html[dir="ltr"] .academic-table tbody td:last-child{border-radius:0 11px 11px 0}

/* Exam schedule: denser, clearer, premium cards. */
.exam-hero:after{display:block!important}
.exam-category-tabs{margin-bottom:14px;gap:9px!important}
.academic-tabs .exam-category-tab{min-width:190px;padding:9px 11px;border-radius:13px!important}
.exam-tab-art{width:38px;height:38px;border-radius:11px!important}
.exam-schedule-shell{padding:18px!important;border-radius:18px!important}
.exam-section-head{padding-bottom:13px;border-bottom:1px solid #e4eaf3}
.exam-section-kicker{margin-bottom:1px!important;color:#607795!important;font-size:.69rem!important}
.exam-summary{gap:9px;margin:14px 0}
.exam-summary-card{padding:11px 12px;border-radius:14px!important;background:#f8faff!important;box-shadow:none!important}
.exam-summary-card:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(28,65,133,.08)!important}
.exam-summary-art{width:40px;height:40px;border-radius:12px!important}
.exam-summary-card strong{font-size:1.12rem}
.exam-tools{margin-bottom:14px}
.exam-search .form-control{min-height:42px;border-radius:12px;background:#fff}
.exam-days{gap:12px}
.exam-day-card{border-radius:16px!important;box-shadow:0 8px 20px rgba(18,41,81,.055)!important}
.exam-day-head{padding:11px 13px;background:#f5f8fd}
.exam-day-art{width:41px;height:41px;border-radius:12px!important}
.exam-slots{padding:5px 12px 9px}
.exam-slot{padding:10px 2px;gap:10px}
.exam-course-chip{padding:6px 9px;border-radius:9px;font-size:.74rem}
.exam-time-art{width:33px;height:33px;border-radius:10px!important}

/* ---------- Student subscriptions ---------- */
.student-account-portal .bill-hero{margin-bottom:14px!important}
.student-account-portal .bill-hero::after{display:block!important}
.student-account-portal .bill-hero .jx-page-icon{background:rgba(255,255,255,.09)!important}
.student-account-portal .bill-stats{gap:10px;margin:0 0 14px}
.student-account-portal .bill-stats article{position:relative;overflow:hidden;min-height:92px;padding:13px;border:1px solid #dce5f2;border-radius:15px;background:linear-gradient(145deg,#fff,#f5f8fd);box-shadow:0 8px 19px rgba(11,39,84,.055)}
.student-account-portal .bill-stat-icon{width:39px;height:39px;border-radius:11px!important;box-shadow:inset 0 1px #fff,0 4px 0 #ccd9ec,0 8px 13px rgba(27,61,121,.09)}
.student-account-portal .bill-stats strong{color:#123768;font-size:1.2rem}
.student-account-portal .bill-card{border-radius:16px!important;border-color:#dde5f1!important;box-shadow:0 9px 22px rgba(18,41,81,.05)!important}
.student-account-portal .care-payment-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 17px;background:linear-gradient(120deg,#f7faff,#eef4fd)}
.student-account-portal .care-payment-next h2{font-size:.95rem;color:#173a6b}
.student-account-portal .care-payment-next p{font-size:.76rem;margin-bottom:0}
.student-account-portal .care-portal-links{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.student-account-portal .care-portal-links .btn{min-height:35px;padding:6px 10px;font-size:.7rem;border-radius:10px}
.student-account-portal .bill-table{border:1px solid #e2e8f2;border-radius:13px;overflow:auto}
.student-account-portal .bill-table thead th{background:#f1f5fb;color:#496481;font-size:.71rem}
.student-account-portal .bill-table tbody tr:hover{background:#f8faff}

/* ---------- Requests / care center ---------- */
.student-account-portal .care-heading{margin-bottom:10px!important}
.care-page-tools{display:flex;justify-content:flex-end;margin:-3px 0 12px}
.care-page-tools .btn{min-height:34px;padding:6px 10px;border-radius:9px;font-size:.7rem}
.student-account-portal .care-stats{gap:10px;margin-bottom:12px}
.student-account-portal .care-stats article{min-height:84px;padding:12px;border:1px solid #dde6f3;border-radius:15px;background:linear-gradient(145deg,#fff,#f5f8fd);box-shadow:0 8px 18px rgba(18,41,81,.05)}
.student-account-portal .care-stat-icon{width:39px;height:39px;border-radius:11px!important;box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 0 #ccd9ec,0 8px 13px rgba(27,61,121,.09)}
.student-account-portal .care-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}
.student-account-portal .care-shortcuts a{min-height:72px;padding:10px;border:1px solid #dce5f2;border-radius:14px;background:#fff;box-shadow:0 7px 17px rgba(18,41,81,.045)}
.student-account-portal .care-shortcuts a:hover{transform:translateY(-2px);border-color:#c8d7ee;box-shadow:0 11px 22px rgba(18,41,81,.08)}
.student-account-portal .care-shortcuts a>span{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#eaf1ff,#d5e2f7);box-shadow:0 4px 0 #c6d6ef}
.student-account-portal .care-filters{padding:3px 0 11px;gap:9px}
.student-account-portal .care-item{margin-bottom:8px;padding:13px 14px;border:1px solid #e1e7f1;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(18,41,81,.035)}
.student-account-portal .care-item:hover{border-color:#cdd9ec;background:#fbfdff;transform:translateY(-1px)}
.student-account-portal .care-item h2{margin:5px 0 4px;color:#173a6b;font-size:.91rem}
.student-account-portal .care-tag{font-size:.66rem;border-radius:999px}

/* ---------- Staff/accounting visual consistency ---------- */
.accountant-portal-page .acc-hero{padding:10px 14px!important}
.accountant-portal-page .acc-hero:after{display:block!important}
.teacher-page-shell .jawda-page-heading,.responsible-page-shell .jawda-page-heading{margin-bottom:14px!important}
.teacher-page-shell .teacher-tool-stage>header{
  min-height:64px!important;padding:10px 14px!important;border-radius:14px!important;
  background:linear-gradient(112deg,var(--jx-page-navy),var(--jx-page-navy-2))!important;
  border:1px solid #244d82!important;color:#fff!important;box-shadow:var(--jx-page-shadow)!important;
}
.teacher-page-shell .teacher-tool-stage>header h1{font-size:1.05rem!important;color:#fff!important}
.teacher-page-shell .teacher-tool-stage>header p{font-size:.74rem!important;color:#d7e6f8!important}

/* Make cards/actions feel more deliberate, without changing page logic. */
:where(.teacher-portal-page,.responsible-portal-page,.accountant-portal-page,.jawda-unified-ui-v25)
:is(.card,.soft-card,.acc-card,.project-panel,.project-card){border-color:#dfe6f1;box-shadow:0 8px 22px rgba(18,41,81,.045)}
:where(.teacher-portal-page,.responsible-portal-page,.accountant-portal-page,.jawda-unified-ui-v25)
:is(.card,.soft-card,.acc-card,.project-card):hover{border-color:#ced9eb}

@media(max-width:767.98px){
  :where(.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,.readiness-page-head){
    min-height:58px!important;padding:9px 11px!important;border-radius:12px!important;gap:9px!important;
  }
  .jx-page-icon,.academic-hero>.academic-art,.jawda-page-heading-icon{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:10px!important}
  .jx-page-icon svg,.academic-hero>.academic-art svg,.jawda-page-heading-icon :is(svg,.tw-icon){width:31px!important;height:31px!important}
  .academic-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .academic-metrics div{min-height:92px}
  .student-account-portal .care-payment-next{grid-template-columns:1fr}
  .student-account-portal .care-portal-links{grid-column:1;grid-row:auto;justify-content:flex-start}
  .student-account-portal .care-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .care-page-tools{justify-content:stretch}.care-page-tools .btn{width:100%}
}
@media(max-width:575.98px){
  .academic-main{padding-block:12px 28px}
  .academic-card{border-radius:14px!important}
  .exam-schedule-shell{padding:12px!important}
  .exam-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .exam-summary-card{display:grid;text-align:center;justify-items:center;gap:5px;padding:9px 5px}
  .exam-summary-card small{font-size:.62rem}
  .exam-summary-art{width:35px;height:35px}
  .student-account-portal .bill-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .student-account-portal .bill-stats article{display:grid;justify-items:center;text-align:center;gap:4px;min-height:96px;padding:9px 5px}
  .student-account-portal .bill-stats small{font-size:.62rem}
}

/* Workspace headings that do not use the standard hero partial yet. */
.billing-workspace-card>.billing-workspace-head{
  min-height:64px!important;margin:0!important;padding:10px 14px!important;
  border:0!important;border-radius:14px 14px 0 0!important;
  background:linear-gradient(112deg,var(--jx-page-navy),var(--jx-page-navy-2))!important;
  color:#fff!important;box-shadow:var(--jx-page-shadow)!important;
}
.billing-workspace-title{gap:10px!important}.billing-workspace-title .jawda-icon-3d{width:39px!important;height:39px!important;border-radius:11px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 6px 12px rgba(0,10,35,.18)!important}
.billing-workspace-title h1{margin:0!important;color:#fff!important;font-size:1.08rem!important}.billing-workspace-title small{display:block;margin-top:2px;color:#d7e6f8!important;font-size:.72rem!important}.billing-workspace-head>.btn{min-height:34px;padding:6px 10px;border-color:rgba(255,255,255,.42)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:.7rem}

.responsible-page-shell .responsible-welcome{
  min-height:64px!important;margin-bottom:14px!important;padding:10px 14px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border:1px solid #244d82!important;border-radius:14px!important;
  background:linear-gradient(112deg,var(--jx-page-navy),var(--jx-page-navy-2))!important;
  color:#fff!important;box-shadow:var(--jx-page-shadow)!important;
}
.responsible-page-shell .responsible-welcome .welcome-kicker{display:none!important}
.responsible-page-shell .responsible-welcome h1{margin:0!important;color:#fff!important;font-size:1.08rem!important;font-weight:900!important}
.responsible-page-shell .responsible-welcome p{margin:2px 0 0!important;color:#d7e6f8!important;font-size:.72rem!important}
.responsible-page-shell .responsible-welcome .welcome-mark{width:40px!important;height:40px!important;order:-1;display:grid;place-items:center;padding:3px!important;border-radius:11px!important;background:rgba(255,255,255,.1)!important}
.responsible-page-shell .responsible-welcome .welcome-mark .tw-icon{width:35px!important;height:35px!important}

/* Secondary greetings should not compete with the page title. */
.teacher-page-shell .ov-hero{min-height:0!important;margin-bottom:14px!important;padding:10px 13px!important;border:1px solid #dbe5f2!important;border-radius:13px!important;background:#f7faff!important;color:var(--jx-page-ink)!important;box-shadow:none!important}
.teacher-page-shell .ov-hero h3{margin:0!important;color:#173a6b!important;font-size:.92rem!important}.teacher-page-shell .ov-hero .text-muted{margin-top:2px;color:#77869a!important;font-size:.71rem!important}
.teacher-page-shell .ov-hero:after{display:none!important}

/* Legacy title icons get a compact 3D treatment without increasing header height. */
:where(.project-hero,.teacher-messages-heading,.events-page-heading,.leqs-head) h1>i,
.teacher-messages-heading>i{
  display:inline-grid!important;place-items:center!important;
  width:31px!important;height:31px!important;margin-inline-end:6px!important;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06))!important;
  color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.26),0 5px 10px rgba(0,12,38,.18)!important;
  vertical-align:middle!important;font-size:.9rem!important;
}
.page-actions-below{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:-5px 0 14px}
.page-actions-below :is(a,button){min-height:35px;padding:6px 10px;border-radius:9px;font-size:.72rem}
@media(max-width:575.98px){.page-actions-below>*{flex:1;justify-content:center}}

/* ==========================================================
   V67 — One-line navy title strip + unified dashboard headers
   Mirrors the compact teacher reports / quiz visual language.
   ========================================================== */
:root{
  --jx-v67-navy:#0b2754;
  --jx-v67-navy-2:#123b73;
  --jx-v67-navy-3:#1b4b89;
}

/* Every portal page title is now one compact navy row. */
:where(
  .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
  .jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero
){
  min-height:52px!important;
  padding:8px 12px!important;
  margin-bottom:14px!important;
  border:1px solid #284f83!important;
  border-radius:13px!important;
  background:linear-gradient(110deg,var(--jx-v67-navy),var(--jx-v67-navy-2) 68%,var(--jx-v67-navy-3))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(11,39,84,.10)!important;
}

/* Title + description share the SAME line, like teacher reports. */
:where(
  .academic-hero>div,.bill-hero>div,.care-heading>div,.project-hero>div,.sa-hero>div,
  .jawda-page-heading-copy,.responsible-welcome>div,.billing-workspace-title>div
){
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  flex-wrap:nowrap!important;
}

/* Accounting legacy headers have h1 + p directly in the hero. */
.acc-hero{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
}
.acc-hero>span{display:none!important}

:where(
  .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
  .jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero
) :is(h1,h2,h3,.qb-hero-title){
  flex:0 0 auto!important;
  margin:0!important;
  color:#fff!important;
  font-size:1rem!important;
  line-height:1.45!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

:where(
  .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
  .jawda-page-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,
  .readiness-page-head,.responsible-welcome,.billing-workspace-head,
  .lectures-hero-box,.chgcat-hero,.teacher-pay-hero
) :is(p,small,.qb-hero-sub,.text-muted){
  min-width:0!important;
  margin:0!important;
  color:#dbe8fa!important;
  font-size:.72rem!important;
  line-height:1.5!important;
  font-weight:500!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Legacy project/account headers: keep the optional action on the same compact row. */
:where(.project-hero,.sa-hero,.events-page-heading,.leqs-head){
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
}
:where(.project-hero,.sa-hero,.events-page-heading,.leqs-head)>:is(a,.btn){
  margin-inline-start:auto!important;
  flex:0 0 auto!important;
}

/* Compact title artwork to avoid making the strip taller than the teacher version. */
:where(.jx-page-icon,.academic-hero>.academic-art,.jawda-page-heading-icon){
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  padding:2px!important;
  border-radius:9px!important;
}
:where(.jx-page-icon svg,.academic-hero>.academic-art svg,.jawda-page-heading-icon :is(svg,.tw-icon)){
  width:29px!important;
  height:29px!important;
}

/* Hide marketing/kicker lines from legacy title blocks — page title remains the focus. */
:where(.sa-hero,.teacher-pay-hero,.lectures-hero-box,.chgcat-hero) :is(.kicker,.eyebrow,span:first-child:not(.jx-page-icon)){
  display:none!important;
}

/* ==========================================================
   Sidebar dashboard identity — navy everywhere.
   Desktop teacher/admin/responsible + mobile drawers + accountant.
   ========================================================== */
body.staff-visual-v21 .rw-dashboard-link,
body.staff-visual-v21 .rw-dashboard-entry,
.responsible-mobile-offcanvas .rw-dashboard-entry,
.teacher-mobile-offcanvas .rw-dashboard-entry,
.accountant-portal-page .acc-sidebar-head{
  color:#fff!important;
  background:linear-gradient(110deg,var(--jx-v67-navy),var(--jx-v67-navy-2) 72%,var(--jx-v67-navy-3))!important;
  border-color:#244d82!important;
  box-shadow:0 9px 20px rgba(7,24,63,.16)!important;
}
body.staff-visual-v21 .rw-dashboard-link span,
body.staff-visual-v21 .rw-dashboard-entry span,
.responsible-mobile-offcanvas .rw-dashboard-entry span,
.teacher-mobile-offcanvas .rw-dashboard-entry span,
.accountant-portal-page .acc-sidebar-head :is(strong,small){color:#fff!important}
body.staff-visual-v21 .rw-dashboard-entry{
  min-height:52px!important;
  margin:0 0 9px!important;
  border-radius:13px!important;
  border:1px solid #244d82!important;
}
body.staff-visual-v21 .rw-dashboard-entry>.tw-icon{
  width:36px!important;height:36px!important;flex:0 0 36px!important;
  filter:drop-shadow(0 6px 6px rgba(0,12,42,.24))!important;
}
.accountant-portal-page .acc-sidebar-head{border-radius:15px!important}
.accountant-portal-page .acc-sidebar-head-icon{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.2)!important;
}

/* Keep sidebar title consistent in mobile drawers as well. */
.responsible-mobile-offcanvas .offcanvas-header,
.teacher-mobile-offcanvas .offcanvas-header{
  border-bottom:1px solid #dce5f2;
  background:#f8faff;
}

/* Some management pages use a plain H1 lead row instead of the shared partial. */
body.staff-visual-v21 main>.d-flex.align-items-center.gap-3.mb-3:has(>div>h1),
body.staff-visual-v21 main>.d-flex.align-items-center.gap-3.mb-3:has(>h1){
  min-height:52px!important;
  padding:8px 12px!important;
  border:1px solid #284f83!important;
  border-radius:13px!important;
  background:linear-gradient(110deg,var(--jx-v67-navy),var(--jx-v67-navy-2) 68%,var(--jx-v67-navy-3))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(11,39,84,.10)!important;
}
body.staff-visual-v21 main>.d-flex.align-items-center.gap-3.mb-3:has(>div>h1) h1,
body.staff-visual-v21 main>.d-flex.align-items-center.gap-3.mb-3:has(>h1){color:#fff!important;font-size:1rem!important;margin:0!important;white-space:nowrap}
body.staff-visual-v21 main>.d-flex.align-items-center.gap-3.mb-3:has(>div>h1) p{color:#dbe8fa!important;font-size:.72rem!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:767.98px){
  :where(
    .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
    .jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,
    .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
    .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero
  ){
    min-height:48px!important;
    padding:7px 9px!important;
    border-radius:11px!important;
    gap:7px!important;
  }
  :where(
    .academic-hero>div,.bill-hero>div,.care-heading>div,.project-hero>div,.sa-hero>div,
    .jawda-page-heading-copy,.responsible-welcome>div,.billing-workspace-title>div
  ){gap:7px!important}
  :where(
    .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
    .jawda-page-heading,.teacher-messages-heading,.leq-hero,.qb-hero,
    .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
    .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero
  ) :is(h1,h2,h3,.qb-hero-title){font-size:.88rem!important}
  :where(
    .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
    .jawda-page-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,
    .readiness-page-head,.responsible-welcome,.billing-workspace-head
  ) :is(p,small,.qb-hero-sub,.text-muted){font-size:.64rem!important}
  :where(.jx-page-icon,.academic-hero>.academic-art,.jawda-page-heading-icon){width:31px!important;height:31px!important;flex-basis:31px!important}
  :where(.jx-page-icon svg,.academic-hero>.academic-art svg,.jawda-page-heading-icon :is(svg,.tw-icon)){width:27px!important;height:27px!important}
  /* On narrow phones the action button is icon-sized; title row stays one line. */
  :where(.project-hero,.sa-hero,.events-page-heading,.leqs-head)>:is(a,.btn){
    min-height:31px!important;padding:5px 8px!important;font-size:.64rem!important;
  }
}

@media(max-width:430px){
  /* Preserve the one-line identity; description gracefully disappears before the title wraps. */
  :where(
    .academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,
    .jawda-page-heading,.leq-hero,.qb-hero,.events-page-heading,.leqs-head,
    .readiness-page-head,.responsible-welcome,.billing-workspace-head
  ) :is(p,small,.qb-hero-sub,.text-muted){display:none!important}
}


/* page-experience-v68.css */
/* ==========================================================
   Jawda V68 — hard navy unification
   Final override loaded after all legacy/page CSS.
   Goal: every portal page title strip + every sidebar dashboard
   identity uses the same teacher-dashboard navy language.
   ========================================================== */
:root{
  --jx-v68-navy:#0b2754;
  --jx-v68-navy-2:#123b73;
  --jx-v68-navy-3:#1b4b89;
  --jx-v68-border:#284f83;
  --jx-v68-sub:#dbe8fa;
  --jx-v68-shadow:0 8px 18px rgba(11,39,84,.12);
}

/* One authoritative navy background for every page-title component in the portals. */
html body :is(
  .jawda-page-heading,
  .academic-hero,
  .bill-hero,
  .care-heading,
  .project-hero,
  .sa-hero,
  .acc-hero,
  .teacher-messages-heading,
  .leq-hero,
  .qb-hero,
  .events-page-heading,
  .leqs-head,
  .readiness-page-head,
  .responsible-welcome,
  .billing-workspace-head,
  .lectures-hero-box,
  .chgcat-hero,
  .teacher-pay-hero,
  .ov-hero
){
  background:linear-gradient(110deg,var(--jx-v68-navy),var(--jx-v68-navy-2) 68%,var(--jx-v68-navy-3))!important;
  background-color:var(--jx-v68-navy)!important;
  border-color:var(--jx-v68-border)!important;
  color:#fff!important;
  box-shadow:var(--jx-v68-shadow)!important;
}

/* Dashboard greeting in the teacher portal was explicitly made light in V67; V68 keeps it navy too. */
html body.teacher-page-shell .ov-hero,
html body.teacher-portal-page .ov-hero{
  min-height:52px!important;
  padding:8px 12px!important;
  margin-bottom:14px!important;
  border:1px solid var(--jx-v68-border)!important;
  border-radius:13px!important;
  background:linear-gradient(110deg,var(--jx-v68-navy),var(--jx-v68-navy-2) 68%,var(--jx-v68-navy-3))!important;
  color:#fff!important;
  box-shadow:var(--jx-v68-shadow)!important;
}
html body.teacher-page-shell .ov-hero :is(h1,h2,h3,strong),
html body.teacher-portal-page .ov-hero :is(h1,h2,h3,strong){color:#fff!important}
html body.teacher-page-shell .ov-hero :is(p,small,.text-muted),
html body.teacher-portal-page .ov-hero :is(p,small,.text-muted){color:var(--jx-v68-sub)!important}

/* Text inside every title strip is forced to the same white / soft-white palette,
   including legacy .fw-bold/.text-muted blocks that are not semantic h1/p elements. */
html body :is(
  .jawda-page-heading,
  .academic-hero,
  .bill-hero,
  .care-heading,
  .project-hero,
  .sa-hero,
  .acc-hero,
  .teacher-messages-heading,
  .leq-hero,
  .qb-hero,
  .events-page-heading,
  .leqs-head,
  .readiness-page-head,
  .responsible-welcome,
  .billing-workspace-head,
  .lectures-hero-box,
  .chgcat-hero,
  .teacher-pay-hero,
  .ov-hero
) :is(h1,h2,h3,h4,.fw-bold,.qb-hero-title,.section-title,strong){
  color:#fff!important;
}
html body :is(
  .jawda-page-heading,
  .academic-hero,
  .bill-hero,
  .care-heading,
  .project-hero,
  .sa-hero,
  .acc-hero,
  .teacher-messages-heading,
  .leq-hero,
  .qb-hero,
  .events-page-heading,
  .leqs-head,
  .readiness-page-head,
  .responsible-welcome,
  .billing-workspace-head,
  .lectures-hero-box,
  .chgcat-hero,
  .teacher-pay-hero,
  .ov-hero
) :is(p,small,.text-muted,.qb-hero-sub){
  color:var(--jx-v68-sub)!important;
}

/* Legacy student tools whose page heading is the first card head rather than a named hero. */
html body.student-learning-page .previous-exams-page > .student-tool-page-content > .row > .col-12 > .soft-card > .card-head,
html body.student-learning-page.readiness-page .readiness-page-head{
  min-height:52px!important;
  padding:8px 12px!important;
  margin-bottom:0!important;
  border:1px solid var(--jx-v68-border)!important;
  border-radius:13px 13px 0 0!important;
  background:linear-gradient(110deg,var(--jx-v68-navy),var(--jx-v68-navy-2) 68%,var(--jx-v68-navy-3))!important;
  background-color:var(--jx-v68-navy)!important;
  color:#fff!important;
  box-shadow:var(--jx-v68-shadow)!important;
}
html body.student-learning-page .previous-exams-page > .student-tool-page-content > .row > .col-12 > .soft-card > .card-head :is(.fw-bold,strong,h1,h2,h3){color:#fff!important}
html body.student-learning-page .previous-exams-page > .student-tool-page-content > .row > .col-12 > .soft-card > .card-head :is(.text-muted,small){color:var(--jx-v68-sub)!important}

/* Buttons that sit inside a navy title strip must stay readable and visually consistent. */
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero
) :is(.btn,a.btn){
  border-color:rgba(255,255,255,.38)!important;
  color:#fff!important;
}
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero
) :is(.btn-light,a.btn-light){
  background:rgba(255,255,255,.95)!important;
  border-color:rgba(255,255,255,.95)!important;
  color:var(--jx-v68-navy)!important;
}

/* ==========================================================
   Sidebar dashboard identity — direct selectors, no body-class dependency.
   This fixes staff pages embedded in billing/care shells too.
   ========================================================== */
html body .rw-actions > .rw-dashboard-link,
html body .staff-role-menu > .rw-dashboard-entry,
html body .responsible-mobile-offcanvas .rw-dashboard-entry,
html body .teacher-mobile-offcanvas .rw-dashboard-entry,
html body .acc-sidebar .acc-sidebar-head{
  background:linear-gradient(110deg,var(--jx-v68-navy),var(--jx-v68-navy-2) 68%,var(--jx-v68-navy-3))!important;
  background-color:var(--jx-v68-navy)!important;
  border-color:#244d82!important;
  color:#fff!important;
  box-shadow:0 9px 20px rgba(7,24,63,.16)!important;
}
html body .rw-actions > .rw-dashboard-link :is(span,strong,small,i),
html body .staff-role-menu > .rw-dashboard-entry :is(span,strong,small,i),
html body .responsible-mobile-offcanvas .rw-dashboard-entry :is(span,strong,small,i),
html body .teacher-mobile-offcanvas .rw-dashboard-entry :is(span,strong,small,i),
html body .acc-sidebar .acc-sidebar-head :is(strong,small,i){
  color:#fff!important;
}
html body .acc-sidebar .acc-sidebar-head-icon{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.20)!important;
  color:#fff!important;
}

/* The dashboard label itself must never inherit blue/gray text from legacy menu CSS. */
html body :is(.rw-dashboard-link,.rw-dashboard-entry,.acc-sidebar-head) > span,
html body .acc-sidebar-head > div > strong,
html body .acc-sidebar-head > div > small{
  color:#fff!important;
}

/* Generic staff lead rows recognized by V67 keep the exact same navy, not a page-specific tint. */
html body.staff-visual-v21 main > .d-flex.align-items-center.gap-3.mb-3:has(>div>h1),
html body.staff-visual-v21 main > .d-flex.align-items-center.gap-3.mb-3:has(>h1){
  background:linear-gradient(110deg,var(--jx-v68-navy),var(--jx-v68-navy-2) 68%,var(--jx-v68-navy-3))!important;
  background-color:var(--jx-v68-navy)!important;
  border-color:var(--jx-v68-border)!important;
  color:#fff!important;
}
html body.staff-visual-v21 main > .d-flex.align-items-center.gap-3.mb-3:has(>div>h1) :is(h1,h2,h3,strong){color:#fff!important}
html body.staff-visual-v21 main > .d-flex.align-items-center.gap-3.mb-3:has(>div>h1) :is(p,small,.text-muted){color:var(--jx-v68-sub)!important}

@media(max-width:767.98px){
  html body.teacher-page-shell .ov-hero,
  html body.teacher-portal-page .ov-hero,
  html body.student-learning-page .previous-exams-page > .student-tool-page-content > .row > .col-12 > .soft-card > .card-head{
    min-height:48px!important;
    padding:7px 9px!important;
    border-radius:11px!important;
  }
}


/* page-experience-v69.css */
/* ==========================================================
   Jawda V69 — ONE page-header experience everywhere
   Compact, solid navy, one visual language for all portals.
   Loaded last so legacy hero/card styles cannot override it.
   ========================================================== */
:root{
  --jx-v69-navy:#0b2754;
  --jx-v69-navy-hover:#123b73;
  --jx-v69-border:#244d82;
  --jx-v69-copy:#ffffff;
  --jx-v69-sub:#dbe8fa;
  --jx-v69-radius:13px;
  --jx-v69-shadow:0 8px 18px rgba(11,39,84,.12);
}

/* Every known page-level heading, old and new, uses the same visual shell. */
html body :is(
  .jawda-page-heading,
  .academic-hero,
  .bill-hero,
  .care-heading,
  .project-hero,
  .sa-hero,
  .acc-hero,
  .teacher-messages-heading,
  .leq-hero,
  .qb-hero,
  .events-page-heading,
  .leqs-head,
  .readiness-page-head,
  .responsible-welcome,
  .billing-workspace-head,
  .lectures-hero-box,
  .chgcat-hero,
  .teacher-pay-hero,
  .ov-hero,
  .guest-preview-heading,
  .plan-hero-card,
  .resource-intro,
  .info-hero,
  .ai-public-hero
){
  position:relative!important;
  box-sizing:border-box!important;
  min-height:58px!important;
  height:auto!important;
  margin-top:0!important;
  margin-bottom:14px!important;
  padding:8px 12px!important;
  border:1px solid var(--jx-v69-border)!important;
  border-radius:var(--jx-v69-radius)!important;
  background:var(--jx-v69-navy)!important;
  background-image:none!important;
  color:var(--jx-v69-copy)!important;
  box-shadow:var(--jx-v69-shadow)!important;
}

/* Remove decorative oversized circles/gradients from previous versions. */
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,
  .ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero
)::after{
  display:none!important;
  content:none!important;
}

/* Titles and descriptions: compact and identical across roles. */
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,
  .ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero
) :is(h1,h2,h3,h4,.qb-hero-title,.section-title,.fw-bold,strong){
  margin-top:0!important;
  margin-bottom:0!important;
  color:#fff!important;
  font-size:1.02rem!important;
  line-height:1.45!important;
  font-weight:900!important;
}
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,
  .ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero
) :is(p,small,.text-muted,.qb-hero-sub){
  margin-top:2px!important;
  margin-bottom:0!important;
  color:var(--jx-v69-sub)!important;
  font-size:.70rem!important;
  line-height:1.55!important;
  font-weight:650!important;
}

/* Kicker lines are redundant in the unified compact header. */
html body .info-hero .info-kicker,
html body .plan-hero-card>div>span:first-child,
html body .resource-intro>div>span:first-child,
html body .acc-hero>span:first-child,
html body .ov-hero .welcome-kicker,
html body .responsible-welcome .welcome-kicker{
  display:none!important;
}

/* Same compact 3D/icon footprint everywhere. */
html body :is(
  .jawda-page-heading-icon,.academic-art,.jx-page-icon,.info-icon,.plan-hero-icon,
  .guest-preview-art,.resource-icon,.welcome-mark,.billing-workspace-title .jawda-icon-3d
){
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 4px 9px rgba(0,12,36,.18)!important;
}
html body :is(
  .jawda-page-heading-icon,.academic-art,.jx-page-icon,.info-icon,.plan-hero-icon,
  .guest-preview-art,.resource-icon,.welcome-mark,.billing-workspace-title .jawda-icon-3d
) :is(svg,.tw-icon,i){
  max-width:30px!important;
  max-height:30px!important;
  color:#fff!important;
  font-size:1.05rem!important;
}


/* Flat legacy Bootstrap icons inside titles are rendered as compact 3D badges too. */
html body :is(.project-hero h1,.teacher-messages-heading,.leq-hero h1,.acc-hero h1,.events-page-heading h1)>i,
html body .teacher-messages-heading>i{
  display:inline-grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  margin-inline-end:6px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 4px 8px rgba(0,10,34,.18)!important;
  vertical-align:middle!important;
  font-size:.90rem!important;
}

/* Teacher selector/tools had their own header definition: force the same shell. */
html body .teacher-tool-stage>header{
  min-height:58px!important;
  padding:8px 12px!important;
  margin-bottom:14px!important;
  border:1px solid var(--jx-v69-border)!important;
  border-radius:var(--jx-v69-radius)!important;
  background:var(--jx-v69-navy)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:var(--jx-v69-shadow)!important;
}
html body .teacher-tool-stage>header h1{margin:0!important;color:#fff!important;font-size:1.02rem!important;line-height:1.45!important;font-weight:900!important}
html body .teacher-tool-stage>header p{margin:2px 0 0!important;color:var(--jx-v69-sub)!important;font-size:.70rem!important;line-height:1.55!important}

/* Enrollment pages previously put their title inside a large white card. */
html body .enrollment-workspace>.p-3>.jawda-page-heading,
html body .enrollment-workspace>.p-md-4>.jawda-page-heading{
  margin-inline:0!important;
}

/* Billing staff header is a card-head; make it visually identical, not a separate style. */
html body .billing-workspace-card>.billing-workspace-head{
  border-radius:var(--jx-v69-radius)!important;
  margin-bottom:14px!important;
  background:var(--jx-v69-navy)!important;
  background-image:none!important;
}
html body .billing-workspace-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body .billing-workspace-card>.billing-workspace-body{
  border:1px solid #e0e7f1!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(18,41,81,.045)!important;
}

/* Action buttons inside title strips remain clean and readable. */
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero
) :is(.btn,a.btn){
  min-height:32px!important;
  padding:5px 9px!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  font-size:.69rem!important;
  border-radius:9px!important;
}
html body :is(
  .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
  .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
  .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
  .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero
) :is(.btn-light,a.btn-light){
  background:#fff!important;
  border-color:#fff!important;
  color:var(--jx-v69-navy)!important;
}

/* Dashboard label in ALL sidebars: one exact navy, including mobile/offcanvas. */
html body :is(
  .rw-actions>.rw-dashboard-link,
  .staff-role-menu>.rw-dashboard-entry,
  .responsible-mobile-offcanvas .rw-dashboard-entry,
  .teacher-mobile-offcanvas .rw-dashboard-entry,
  .acc-sidebar .acc-sidebar-head
){
  background:var(--jx-v69-navy)!important;
  background-image:none!important;
  border-color:var(--jx-v69-border)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(11,39,84,.14)!important;
}
html body :is(
  .rw-actions>.rw-dashboard-link,
  .staff-role-menu>.rw-dashboard-entry,
  .responsible-mobile-offcanvas .rw-dashboard-entry,
  .teacher-mobile-offcanvas .rw-dashboard-entry,
  .acc-sidebar .acc-sidebar-head
) :is(span,strong,small,i){color:#fff!important}

/* Older staff pages with a raw title row now inherit the same exact strip. */
html body.staff-visual-v21 main>.jx-legacy-page-title,
html body.teacher-portal-page main>.jx-legacy-page-title,
html body.responsible-workspace-v23 main>.jx-legacy-page-title{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:58px!important;
  margin:0 0 14px!important;
  padding:8px 12px!important;
  border:1px solid var(--jx-v69-border)!important;
  border-radius:var(--jx-v69-radius)!important;
  background:var(--jx-v69-navy)!important;
  color:#fff!important;
  box-shadow:var(--jx-v69-shadow)!important;
}
html body .jx-legacy-page-title h1{margin:0!important;color:#fff!important;font-size:1.02rem!important;font-weight:900!important}
html body .jx-legacy-page-title p{margin:2px 0 0!important;color:var(--jx-v69-sub)!important;font-size:.70rem!important}
html body .jx-legacy-page-title .jawda-icon-3d{width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important;background:rgba(255,255,255,.1)!important;color:#fff!important}

/* Public study plan/info pages previously used oversized hero cards. Keep their content, use the same compact language. */
html body .plan-hero-card,
html body .info-hero,
html body .resource-intro,
html body .guest-preview-heading{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
html body .info-hero h1,
html body .plan-hero-card h1,
html body .resource-intro h1,
html body .guest-preview-heading h1{font-size:1.02rem!important}

@media(max-width:767.98px){
  html body :is(
    .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
    .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
    .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
    .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,
    .ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero,
    .teacher-tool-stage>header,.jx-legacy-page-title
  ){
    min-height:52px!important;
    padding:7px 9px!important;
    margin-bottom:11px!important;
    border-radius:11px!important;
  }
  html body :is(
    .jawda-page-heading-icon,.academic-art,.jx-page-icon,.info-icon,.plan-hero-icon,
    .guest-preview-art,.resource-icon,.welcome-mark,.billing-workspace-title .jawda-icon-3d
  ){
    flex-basis:34px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:9px!important;
  }
  html body :is(
    .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
    .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
    .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
    .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero,
    .guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero
  ) :is(h1,h2,h3,h4,.qb-hero-title,.section-title,.fw-bold,strong){font-size:.94rem!important}
  html body :is(
    .jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,
    .sa-hero,.acc-hero,.teacher-messages-heading,.leq-hero,.qb-hero,
    .events-page-heading,.leqs-head,.readiness-page-head,.responsible-welcome,
    .billing-workspace-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero,
    .guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero
  ) :is(p,small,.text-muted,.qb-hero-sub){font-size:.65rem!important}
}

@media(max-width:575.98px){
  /* Keep the title readable; secondary description may wrap but never creates a giant hero. */
  html body :is(.jawda-page-heading,.academic-hero,.bill-hero,.care-heading,.project-hero,.sa-hero,.acc-hero,.responsible-welcome,.plan-hero-card,.info-hero){gap:8px!important}
  html body :is(.project-hero,.billing-workspace-head){flex-wrap:wrap!important}
}

/* Course catalog also follows the same page-heading language instead of a separate oversized marketing hero. */
html body .catalog-hero{
  overflow:visible!important;
  padding:14px 0 0!important;
  background:transparent!important;
  background-image:none!important;
  color:inherit!important;
}
html body .catalog-hero::before{display:none!important;content:none!important}
html body .catalog-hero-inner{
  min-height:58px!important;
  padding:8px 12px!important;
  border:1px solid var(--jx-v69-border)!important;
  border-radius:var(--jx-v69-radius)!important;
  background:var(--jx-v69-navy)!important;
  background-image:none!important;
  box-shadow:var(--jx-v69-shadow)!important;
  color:#fff!important;
}
html body .catalog-hero-copy{max-width:none!important}
html body .catalog-kicker{display:none!important}
html body .catalog-hero h1{margin:0!important;color:#fff!important;font-size:1.02rem!important;line-height:1.45!important;font-weight:900!important}
html body .catalog-hero p{margin:2px 0 0!important;max-width:none!important;color:var(--jx-v69-sub)!important;font-size:.70rem!important;line-height:1.55!important;font-weight:650!important}
html body .catalog-hero-art{display:none!important}
@media(max-width:767.98px){
  html body .catalog-hero{padding-top:10px!important}
  html body .catalog-hero-inner{min-height:52px!important;padding:7px 9px!important;border-radius:11px!important}
  html body .catalog-hero h1{font-size:.94rem!important}
  html body .catalog-hero p{font-size:.65rem!important}
}

/* Header children must stay readable even where a legacy page sets its own color or width. */
html body :is(.jawda-page-heading,.project-hero,.academic-hero,.bill-hero,.events-page-heading,.responsible-welcome,.billing-workspace-head,.teacher-messages-heading,.acc-hero,.sa-hero,.care-heading,.leq-hero,.qb-hero,.leqs-head,.readiness-page-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero){overflow:visible!important;flex-wrap:wrap!important;gap:8px!important}
html body :is(.jawda-page-heading,.project-hero,.academic-hero,.bill-hero,.events-page-heading,.responsible-welcome,.billing-workspace-head,.teacher-messages-heading,.acc-hero,.sa-hero,.care-heading,.leq-hero,.qb-hero,.leqs-head,.readiness-page-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero) :is(h1,h2,h3,h4){max-width:100%!important;min-width:0!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;color:#fff!important}
html body :is(.jawda-page-heading,.project-hero,.academic-hero,.bill-hero,.events-page-heading,.responsible-welcome,.billing-workspace-head,.teacher-messages-heading,.acc-hero,.sa-hero,.care-heading,.leq-hero,.qb-hero,.leqs-head,.readiness-page-head,.lectures-hero-box,.chgcat-hero,.teacher-pay-hero,.ov-hero,.guest-preview-heading,.plan-hero-card,.resource-intro,.info-hero,.ai-public-hero) :is(.bi,i){color:#fff!important}

/* The title itself and its inline icon/text retain white ink on navy service headers. */
html body .project-hero h1,html body .project-hero h1 *,html body .project-hero .project-hero-title,html body .project-hero .project-hero-title *{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}