:root {
  --ink: #17202a;
  --muted: #5c6670;
  --line: #d9e2e6;
  --paper: #ffffff;
  --wash: #f4f8f9;
  --navy: #123447;
  --teal: #177e89;
  --green: #2f7d57;
  --amber: #c27a1a;
  --red: #b84a4a;
  --shadow: 0 18px 50px rgba(18, 52, 71, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--wash);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  overflow-wrap: anywhere;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.top-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px clamp(16px, 4vw, 48px);
  background: #c62828;
  color: #ffffff;
  white-space: nowrap;
}

.main-nav {
  background: #c62828;
  color: #ffffff;
}

.top-strip a {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.top-strip a:hover,
.top-strip a.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.62);
}

.main-nav,
.dashboard-shell,
.content-band,
.admin-band,
.site-footer,
.info-band {
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

.main-nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.nav-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary-button,
.ghost-button,
.download-button,
.secondary-button,
.whatsapp-button,
.mpesa-header-button,
.cart-button,
.danger-blink-button {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 700;
  text-align: center;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  user-select: none;
}

.primary-button:hover,
.download-button:hover,
.whatsapp-button:hover,
.mpesa-header-button:hover,
.cart-button:hover,
.danger-blink-button:hover,
.ghost-button:hover,
.secondary-button:hover,
.subject-chip:hover,
.grade-toggle:hover {
  box-shadow: 0 10px 24px rgba(18, 52, 71, 0.16);
  transform: translateY(-1px);
}

.primary-button:active,
.download-button:active,
.whatsapp-button:active,
.mpesa-header-button:active,
.cart-button:active,
.danger-blink-button:active,
.ghost-button:active,
.secondary-button:active,
.subject-chip:active,
.grade-toggle:active,
.top-strip a:active {
  transform: translateY(1px);
}

.primary-button:focus-visible,
.download-button:focus-visible,
.whatsapp-button:focus-visible,
.mpesa-header-button:focus-visible,
.cart-button:focus-visible,
.danger-blink-button:focus-visible,
.ghost-button:focus-visible,
.secondary-button:focus-visible,
.subject-chip:focus-visible,
.grade-toggle:focus-visible,
.top-strip a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 126, 137, 0.34);
  outline-offset: 2px;
}

.primary-button,
.download-button {
  background: var(--green);
  color: white;
}

.whatsapp-button {
  background: #1f9d55;
  color: white;
}

.mpesa-header-button {
  background: var(--amber);
  color: white;
}

.cart-button {
  background: var(--navy);
  color: white;
}

.danger-blink-button {
  background: var(--red);
  color: white;
  animation: blinkRed 1s infinite;
}

.danger-blink-button.large {
  min-height: 48px;
  padding: 12px 18px;
}

@keyframes blinkRed {
  0%,
  100% {
    background: #b10000;
    box-shadow: 0 0 0 rgba(177, 0, 0, 0);
  }

  50% {
    background: #ff1f1f;
    box-shadow: 0 0 18px rgba(255, 31, 31, 0.46);
  }
}

.cart-button span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: white;
  color: var(--navy);
  font-size: 12px;
}

.ghost-button,
.secondary-button {
  background: #eef5f6;
  color: var(--navy);
  border: 1px solid var(--line);
}

.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.intro-panel {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 5vw, 52px);
  color: white;
  background:
    linear-gradient(180deg, rgba(18, 52, 71, 0.18), rgba(18, 52, 71, 0.9)),
    url("assets/cbe-classroom.svg");
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.intro-panel h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  letter-spacing: 0;
}

.intro-panel p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.88);
}

.hero-resource-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 780px;
  margin-top: 10px;
}

.hero-resource-buttons a,
.hero-resource-buttons button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.hero-resource-buttons .promo-button {
  background: var(--amber);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero-resource-buttons a:hover,
.hero-resource-buttons button:hover,
.hero-resource-buttons a:focus-visible,
.hero-resource-buttons button:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.72);
}

.hero-resource-buttons a:active,
.hero-resource-buttons button:active {
  transform: translateY(1px);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
}

.intro-panel .eyebrow {
  color: #dff7f8;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.summary-grid div {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-grid strong,
.summary-grid span {
  display: block;
}

.summary-grid strong {
  font-size: 25px;
}

.summary-grid span {
  color: rgba(255, 255, 255, 0.78);
}

.grade-panel,
.admin-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.grade-panel {
  padding: 22px;
}

.panel-heading h2,
.section-heading h2,
.admin-copy h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}

.grade-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-height: 558px;
  overflow: auto;
  padding-right: 4px;
}

.grade-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fbfdfd;
}

/* Grade navigation: green CBE Nexus theme. */
.grade-card {
  background: #0f7a4f;
  border-color: #0b5f3d;
}

.grade-toggle {
  background: #0f7a4f;
  color: #ffffff;
}

.grade-card.open .grade-toggle {
  background: #0b5f3d;
  color: #ffffff;
}

.grade-toggle:hover {
  background: #096b45;
  color: #ffffff;
}

.grade-toggle {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: #c62828;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}

.subject-menu {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.subject-dropdown-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.subject-dropdown {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  padding: 9px 36px 9px 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.subject-dropdown:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.grade-chevron {
  font-size: 16px;
  transition: transform 160ms ease;
}

.grade-card.open .grade-chevron {
  transform: rotate(180deg);
}

.grade-card.open .subject-menu {
  display: flex;
}

.subject-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--ink);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.content-band,
.admin-band {
  padding-top: 46px;
  padding-bottom: 46px;
}

.trust-band {
  padding: 24px clamp(16px, 4vw, 48px);
  background: white;
  border-top: 1px solid var(--line);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trust-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdfd;
}

.trust-grid strong,
.trust-grid span {
  display: block;
}

.trust-grid span {
  color: var(--muted);
  margin-top: 5px;
}

.promo-band {
  padding: 28px clamp(16px, 4vw, 48px);
  background: #fff7e8;
  border-top: 1px solid #efd5a8;
}

.seller-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #f8fbfb;
  border-top: 1px solid var(--line);
}

.hidden-section {
  display: none;
}

.hidden-section.open {
  display: block;
}

.seller-approval-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.seller-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 20px;
  align-items: start;
}

.seller-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.seller-panel h3,
.seller-panel p {
  margin-top: 0;
}

.seller-panel p {
  color: var(--muted);
}

.seller-resource-list {
  display: grid;
  gap: 10px;
}

.seller-earnings {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.seller-earnings h3 {
  margin: 0 0 8px;
}

.seller-storage {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.seller-storage h3 {
  margin: 0 0 8px;
}

.seller-storage p {
  color: var(--muted);
  margin: 0;
}

.withdraw-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.seller-resource-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.seller-resource-item strong,
.seller-resource-item span {
  display: block;
}

.seller-resource-item span {
  color: var(--muted);
  font-size: 13px;
}

.refer-band {
  background: #edf7f1;
  border-top-color: #cfe8d8;
}

.urgent-band {
  padding: 36px clamp(16px, 4vw, 48px);
  background: #fff1f1;
  border-top: 1px solid #efc1c1;
  border-bottom: 1px solid #efc1c1;
}

.feature-form {
  max-width: 980px;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.download-tile {
  display: flex;
  min-height: 74px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: white;
  color: var(--navy);
  font-weight: 800;
}

.quiz-panel {
  display: grid;
  gap: 14px;
  max-width: 860px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.quiz-panel fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.quiz-panel legend {
  color: var(--navy);
  font-weight: 800;
}

.quiz-panel label {
  display: flex;
  align-items: center;
}

.quiz-panel input[type="radio"] {
  width: auto;
}

.progress-panel,
.ai-answer {
  max-width: 860px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.progress-panel h3 {
  margin-top: 0;
}

.progress-item {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.progress-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef0;
}

.progress-meter span {
  display: block;
  height: 100%;
  background: var(--green);
}

.promo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.promo-layout h2,
.promo-layout p {
  margin-top: 0;
}

.promo-layout p {
  color: var(--muted);
}

.refer-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 10px;
}

.competitive-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.feature-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdfd;
}

.feature-grid strong,
.feature-grid span {
  display: block;
}

.feature-grid span {
  color: var(--muted);
  margin-top: 5px;
}

.quick-types,
.trending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-types button,
.trending-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
  cursor: pointer;
}

.quick-types button {
  font-weight: 800;
  color: var(--navy);
}

.trending-panel {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.trending-panel h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.trending-item {
  display: grid;
  gap: 4px;
  text-align: left;
  min-width: min(300px, 100%);
}

.trending-item strong {
  color: var(--navy);
}

.trending-item span {
  color: var(--muted);
  font-size: 13px;
}

.seo-band {
  padding: 26px clamp(16px, 4vw, 48px);
  background: #f9fbfb;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.seo-band h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.seo-band p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
}

.landing-band {
  padding: 34px clamp(16px, 4vw, 48px);
  background: white;
  border-bottom: 1px solid var(--line);
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.landing-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
  min-height: 52px;
  padding: 12px;
  text-align: left;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.price-pill,
.active-context {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
  color: var(--navy);
}

.filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: white;
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.file-upload-box {
  border: 1px dashed var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #f7fcfc;
}

.file-upload-box input {
  border: 0;
  padding: 8px 0 0;
  background: transparent;
}

.file-upload-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.active-context {
  margin-bottom: 18px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resource-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 13px;
  min-height: 300px;
}

.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  border-radius: 6px;
  padding: 5px 8px;
  background: #edf6f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.tag.free {
  background: #fff7e8;
  color: var(--amber);
}

.resource-card h3 {
  margin: 0;
  font-size: 20px;
}

.resource-card p {
  margin: 0;
  color: var(--muted);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.price-row strong {
  display: block;
  font-size: 22px;
  color: var(--navy);
}

.price-row span {
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.admin-band {
  background: #eaf3f4;
}

.admin-login-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #eef5f6;
  border-top: 1px solid var(--line);
}

.admin-login-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.6fr);
  gap: 22px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.admin-login-card h2,
.admin-login-card p {
  margin-top: 0;
}

.admin-login-card p {
  color: var(--muted);
}

.admin-login-form {
  display: grid;
  gap: 12px;
}

.admin-approval-panel,
.records-panel {
  margin: 24px clamp(16px, 4vw, 48px) 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.approval-list,
.records-list {
  display: grid;
  gap: 12px;
}

.approval-item,
.record-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 8px;
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.payment-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
}

.payment-form,
.payment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.payment-form {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.payment-card {
  padding: 22px;
}

.payment-card h3,
.payment-card p {
  margin-top: 0;
}

.payment-card p {
  color: var(--muted);
}

.payment-card code {
  color: var(--navy);
  font-weight: 800;
}

.payment-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: min(420px, 100vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 20px;
  background: white;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(18, 52, 71, 0.16);
  transform: translateX(105%);
  transition: transform 180ms ease;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-header,
.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-header h2 {
  margin: 0;
}

.cart-items {
  display: grid;
  gap: 10px;
  overflow: auto;
}

.cart-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cart-item strong,
.cart-item span {
  display: block;
}

.cart-item span {
  color: var(--muted);
  font-size: 13px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: start;
}

.admin-copy {
  padding-top: 16px;
}

.admin-copy p {
  color: var(--muted);
}

.admin-note {
  margin-top: 18px;
  border-left: 4px solid var(--amber);
  background: white;
  padding: 14px;
  border-radius: 6px;
  font-weight: 700;
}

.admin-form {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.submit-button {
  width: fit-content;
}

.form-status {
  margin: 0;
  color: var(--green);
  font-weight: 800;
}

.toast {
  position: fixed;
  right: clamp(16px, 4vw, 36px);
  bottom: 24px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--navy);
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 26px;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.info-band {
  padding-top: 38px;
  padding-bottom: 38px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.info-band-light {
  background: #f7fbfb;
}

.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 20px;
  align-items: start;
}

.info-layout h2,
.info-layout p,
.info-card h3,
.info-card p {
  margin-top: 0;
}

.info-layout p,
.info-card p {
  color: var(--muted);
}

.info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.contact-actions {
  display: grid;
  gap: 10px;
}

.contact-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: white;
  color: var(--navy);
  font-weight: 800;
}

.footer-office-image-wrap {
  flex: 0 0 220px;
  width: 220px;
  max-width: 28%;
  overflow: hidden;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.footer-office-image {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
  object-position: center;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
  background: #c62828;
  color: white;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  margin-top: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.footer-links a {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  color: white;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
  .dashboard-shell,
  .admin-layout,
  .payment-layout,
  .promo-layout,
  .seller-layout,
  .admin-login-card,
  .info-layout {
    grid-template-columns: 1fr;
  }

  .resource-grid,
  .filters,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-panel {
    min-height: 440px;
  }

  .main-nav {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nav-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .main-nav,
  .section-heading,
  .site-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .top-strip {
    gap: 6px;
    padding: 7px 12px;
  }

  .top-strip a {
    padding: 5px 8px;
    font-size: 11px;
  }

  .main-nav,
  .dashboard-shell,
  .content-band,
  .admin-band,
  .site-footer,
  .info-band {
    padding-left: 12px;
    padding-right: 12px;
  }

  .main-nav {
    gap: 10px;
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand small {
    font-size: 11px;
  }

  .nav-actions,
  .form-row,
  .refer-form,
  .resource-grid,
  .filters,
  .summary-grid,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid {
    grid-template-columns: 1fr;
  }

  .nav-actions {
    display: grid;
    gap: 7px;
    width: 100%;
  }

  .card-actions,
  .payment-actions,
  .hero-resource-buttons {
    display: grid;
  }

  .primary-button,
  .ghost-button,
  .download-button,
  .secondary-button,
  .whatsapp-button,
  .mpesa-header-button,
  .cart-button,
  .danger-blink-button,
  .contact-link {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .intro-panel {
    min-height: 360px;
    padding: 18px;
  }

  .intro-panel h1 {
    font-size: 30px;
  }

  .intro-panel p {
    font-size: 13px;
  }

  .hero-resource-buttons {
    gap: 7px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button,
  .quick-types button,
  .landing-grid button,
  .download-tile {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .dashboard-shell {
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .summary-grid {
    gap: 8px;
    margin-top: 16px;
  }

  .summary-grid div,
  .grade-panel,
  .resource-card,
  .payment-form,
  .payment-card,
  .admin-login-card,
  .admin-form,
  .info-card {
    padding: 14px;
  }

  .summary-grid strong,
  .price-row strong {
    font-size: 19px;
  }

  .panel-heading h2,
  .section-heading h2,
  .admin-copy h2,
  .info-layout h2 {
    font-size: 22px;
  }

  .grade-list {
    max-height: none;
  }

  .grade-toggle {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
  }

  .subject-menu {
    gap: 6px;
    padding: 0 10px 10px;
  }

  .subject-chip,
  .tag {
    padding: 5px 7px;
    font-size: 11px;
  }

  .trust-band,
  .promo-band,
  .urgent-band,
  .seller-band,
  .competitive-band,
  .payment-band,
  .admin-login-band,
  .landing-band,
  .info-band {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .resource-card {
    min-height: auto;
    gap: 10px;
  }

  .resource-card h3 {
    font-size: 17px;
  }

  label,
  .resource-card p,
  .payment-card p,
  .info-layout p,
  .info-card p {
    font-size: 12px;
  }

  input,
  select,
  textarea {
    padding: 9px 10px;
    font-size: 13px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-links a {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* Compact responsive layout: phone-first, including narrow desktop-mode viewports */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe {
  max-width: 100%;
}

@media (max-width: 760px) {
  .top-strip {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    gap: 5px;
    padding: 6px 10px;
  }

  .top-strip a {
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.2;
  }

  .main-nav {
    gap: 8px;
  }

  .nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-actions > a,
  .nav-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  .brand {
    min-width: 0;
  }

  .brand > span:last-child {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    overflow-wrap: anywhere;
  }

  .brand-mark {
    flex: 0 0 38px;
  }

  .dashboard-shell,
  .content-band,
  .admin-band,
  .site-footer,
  .info-band {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-resource-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-grid div {
    padding: 9px 6px;
    min-width: 0;
  }

  .summary-grid strong {
    font-size: 16px;
  }

  .summary-grid span {
    font-size: 10px;
  }

  .section-heading {
    gap: 8px;
    margin-bottom: 12px;
  }

  .filters {
    gap: 8px;
  }

  .filters label {
    gap: 4px;
  }

  input,
  select,
  textarea {
    min-width: 0;
    padding: 8px 9px;
    font-size: 12px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .resource-card {
    padding: 12px;
    gap: 8px;
    min-height: 0;
  }

  .resource-card h3 {
    font-size: 16px;
  }

  .resource-card p {
    font-size: 12px;
  }

  .resource-meta {
    gap: 5px;
  }

  .price-row {
    gap: 8px;
    padding-top: 9px;
  }

  .price-row strong {
    font-size: 17px;
  }

  .card-actions,
  .payment-actions,
  .approval-actions {
    gap: 6px;
  }

  .card-actions > *,
  .payment-actions > *,
  .approval-actions > * {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .admin-login-card,
  .admin-form,
  .payment-form,
  .payment-card,
  .info-card {
    padding: 12px;
  }

  .form-row {
    gap: 8px;
  }

  .submit-button {
    width: 100%;
  }

  .landing-grid,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .landing-grid button,
  .download-tile {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .contact-actions {
    gap: 7px;
  }

  .contact-link {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .site-footer {
    gap: 10px;
  }

  .footer-office-image-wrap {
    flex-basis: 160px;
    width: 160px;
    max-width: 35%;
  }

  .footer-office-image {
    height: 90px;
  }

  .footer-links {
    gap: 5px;
  }

  .footer-links a {
    padding: 5px 7px;
    font-size: 10px;
  }

  .cart-drawer {
    width: 100vw;
    padding: 12px;
  }
}

@media (max-width: 420px) {
  .top-strip a {
    font-size: 9px;
    padding: 3px 6px;
  }

  .nav-actions {
    gap: 5px;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 32px;
    padding: 6px 6px;
    font-size: 10px;
  }

  .brand strong {
    font-size: 13px;
  }

  .brand small {
    font-size: 10px;
  }

  .brand-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button {
    min-height: 32px;
    padding: 6px;
    font-size: 10px;
  }

  .summary-grid strong {
    font-size: 14px;
  }

  .summary-grid span {
    font-size: 9px;
  }

  .panel-heading h2,
  .section-heading h2,
  .admin-copy h2,
  .info-layout h2 {
    font-size: 19px;
  }
}

/* Professional dropdown navigation */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.nav-link,
.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-link:hover,
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  background: #eef5f6;
}

.nav-dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 50;
  display: grid;
  min-width: 210px;
  padding: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.dropdown-panel a,
.dropdown-panel button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dropdown-panel a:hover,
.dropdown-panel button:hover {
  background: #eef5f6;
}

.nav-utility,
.nav-cta {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .main-nav {
    gap: 10px;
  }

  .nav-menu {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    overflow: visible;
  }

  .nav-link,
  .nav-dropdown summary {
    width: 100%;
    min-height: 32px;
    justify-content: center;
    padding: 6px 5px;
    font-size: 10px;
    white-space: normal;
    text-align: center;
  }

  .dropdown-panel {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    min-width: 0;
    max-height: 65vh;
    overflow-y: auto;
  }

  .dropdown-panel a,
  .dropdown-panel button {
    padding: 8px;
    font-size: 11px;
  }

  .nav-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .nav-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-link,
  .nav-dropdown summary {
    font-size: 9px;
    padding: 5px 3px;
  }
}

/* CBE Nexus professional three-column portal */
.portal-dashboard {
  width: min(1440px, calc(100% - 24px));
  margin: 16px auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: start;
}

.portal-sidebar,
.portal-rightbar {
  min-width: 0;
}

.portal-sidebar,
.portal-card,
.portal-welcome,
.portal-category-grid,
.portal-announcement {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.portal-sidebar {
  background: #f7fbf8;
}

.portal-sidebar-title,
.portal-card-heading {
  background: #0d8f4f;
  color: #fff;
  padding: 10px 12px;
}

.portal-sidebar-title h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.portal-sidebar-title .eyebrow {
  color: #fff;
  margin: 0;
}

.portal-menu-group {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.portal-menu-group > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .04em;
}

.portal-menu-group > a {
  display: block;
  padding: 7px 8px;
  border-bottom: 1px solid #dce7df;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.portal-menu-group > a:hover {
  background: #eaf5ee;
}

.portal-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.portal-welcome {
  padding: 18px;
  background: linear-gradient(135deg, #ffffff, #f3faf6);
}

.portal-welcome h1 {
  margin: 4px 0 7px;
  font-size: clamp(24px, 3vw, 34px);
}

.portal-welcome p {
  max-width: 760px;
}

.portal-search-shortcut {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.portal-search-shortcut a {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
}

.portal-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.portal-category-grid a {
  min-width: 0;
  min-height: 70px;
  padding: 11px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: var(--navy);
}

.portal-category-grid a:hover {
  background: #f2faf5;
}

.portal-category-grid strong {
  font-size: 13px;
}

.portal-category-grid span {
  font-size: 10px;
  color: var(--muted);
}

.portal-announcement {
  padding: 11px 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.portal-announcement strong {
  color: var(--navy);
}

.portal-card {
  margin-bottom: 12px;
}

.portal-card-heading {
  font-size: 12px;
  font-weight: 900;
}

.portal-card > strong,
.portal-card > p,
.portal-card > .portal-side-link {
  margin-left: 12px;
  margin-right: 12px;
}

.portal-card > strong {
  display: block;
  margin-top: 11px;
}

.portal-card > p {
  font-size: 11px;
  line-height: 1.5;
}

.portal-side-link {
  display: block;
  padding: 8px 0;
  border-top: 1px solid #e1e8e3;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

.portal-help-card {
  padding-bottom: 12px;
}

.portal-help-card .primary-button {
  display: block;
  margin: 8px 12px 0;
  text-align: center;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .portal-dashboard {
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    gap: 8px;
  }

  .portal-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 14px);
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px auto;
  }

  .portal-sidebar {
    order: 1;
  }

  .portal-main {
    order: 2;
  }

  .portal-rightbar {
    order: 3;
  }

  .portal-menu-group {
    padding: 7px;
  }

  .portal-menu-group > a {
    display: inline-block;
    width: calc(50% - 4px);
    margin: 2px;
    border: 1px solid var(--line);
    padding: 7px;
    vertical-align: top;
  }

  .portal-welcome {
    padding: 13px;
  }

  .portal-welcome h1 {
    font-size: 22px;
  }

  .portal-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-category-grid a {
    min-height: 62px;
    padding: 8px;
  }

  .portal-rightbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portal-card {
    margin-bottom: 0;
  }

  .portal-help-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .portal-category-grid {
    grid-template-columns: 1fr;
  }

  .portal-menu-group > a {
    width: 100%;
    margin: 1px 0;
  }

  .portal-rightbar {
    grid-template-columns: 1fr;
  }

  .portal-help-card {
    grid-column: auto;
  }
}

/* Balanced portal layout on phones: preserves the desktop-style three-panel structure */
.portal-sidebar-title,
.portal-card-heading {
  background: linear-gradient(135deg, #087f47, #12a05a);
}

.portal-sidebar {
  border-top: 3px solid #0b8750;
}

.portal-card {
  border-top: 3px solid #0b8750;
}

.portal-category-grid a:nth-child(3n+2) {
  background: #f5f8fc;
}

.portal-category-grid a:nth-child(3n+3) {
  background: #fffaf0;
}

.portal-category-grid a:hover {
  background: #eef8f2;
}

.portal-search-shortcut .primary-button,
.portal-help-card .primary-button {
  background: #0b8750;
}

.portal-search-shortcut .ghost-button {
  border-color: #1b668f;
  color: #1b668f;
}

/* Keep the three-column portal visible on narrow phones */
@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 8px);
    grid-template-columns: minmax(0, 27%) minmax(0, 46%) minmax(0, 27%);
    gap: 4px;
    margin: 5px auto;
    align-items: stretch;
  }

  .portal-sidebar,
  .portal-main,
  .portal-rightbar {
    min-width: 0;
  }

  .portal-sidebar-title,
  .portal-card-heading {
    padding: 7px 5px;
  }

  .portal-sidebar-title h2 {
    font-size: 11px;
    line-height: 1.15;
  }

  .portal-sidebar-title .eyebrow {
    font-size: 7px;
  }

  .portal-menu-group {
    padding: 5px 3px;
  }

  .portal-menu-group > strong {
    font-size: 8px;
    margin-bottom: 3px;
  }

  .portal-menu-group > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 5px 3px;
    border: 0;
    border-bottom: 1px solid #dce7df;
    font-size: 8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .portal-main {
    order: 2;
    gap: 4px;
  }

  .portal-sidebar {
    order: 1;
  }

  .portal-rightbar {
    order: 3;
    display: block;
  }

  .portal-welcome {
    padding: 8px 6px;
  }

  .portal-welcome h1 {
    font-size: 15px;
    line-height: 1.15;
    margin: 3px 0 5px;
  }

  .portal-welcome p {
    font-size: 8px;
    line-height: 1.35;
    margin: 0;
  }

  .portal-search-shortcut {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 6px;
  }

  .portal-search-shortcut a {
    min-height: 26px;
    padding: 5px 3px;
    font-size: 8px;
    text-align: center;
  }

  .portal-category-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .portal-category-grid a {
    min-height: 48px;
    padding: 6px 5px;
  }

  .portal-category-grid strong {
    font-size: 9px;
    line-height: 1.15;
  }

  .portal-category-grid span {
    font-size: 7px;
    line-height: 1.15;
  }

  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .summary-grid div {
    padding: 5px 2px;
  }

  .summary-grid strong {
    font-size: 10px;
  }

  .summary-grid span {
    font-size: 7px;
  }

  .portal-announcement {
    padding: 6px 5px;
    display: block;
    font-size: 8px;
    line-height: 1.3;
  }

  .portal-announcement span {
    display: block;
    margin-top: 3px;
  }

  .portal-card {
    margin-bottom: 4px;
  }

  .portal-card-heading {
    font-size: 8px;
    line-height: 1.15;
  }

  .portal-card > strong,
  .portal-card > p,
  .portal-card > .portal-side-link {
    margin-left: 5px;
    margin-right: 5px;
  }

  .portal-card > strong {
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.2;
  }

  .portal-card > p {
    font-size: 7px;
    line-height: 1.3;
  }

  .portal-side-link {
    padding: 5px 0;
    font-size: 7px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .portal-help-card .primary-button {
    margin: 5px;
    min-height: 25px;
    padding: 5px 2px;
    font-size: 7px;
  }
}

@media (max-width: 420px) {
  .portal-dashboard {
    grid-template-columns: minmax(0, 27%) minmax(0, 46%) minmax(0, 27%);
    gap: 3px;
  }

  .portal-welcome h1 {
    font-size: 14px;
  }

  .portal-menu-group > a {
    font-size: 7px;
  }

  .portal-category-grid a {
    min-height: 44px;
  }

  .portal-category-grid strong {
    font-size: 8px;
  }

  .portal-card-heading,
  .portal-menu-group > strong {
    font-size: 7px;
  }
}

/* CBE Nexus colour-balanced portal: yellow dashboard with green, blue, red and white accents */
.portal-dashboard {
  grid-template-columns: 30% minmax(0, 40%) 30%;
  background: #fff4b8;
  border: 2px solid #e0b800;
  border-radius: 8px;
  padding: 6px;
}

.portal-sidebar-title {
  background: linear-gradient(135deg, #087f47, #0da85a);
}

.portal-sidebar {
  background: #fff;
  border-left: 3px solid #0b8750;
}

.portal-menu-group > strong {
  color: #087f47;
}

.portal-menu-group > a {
  color: #0645ad;
  font-size: 11px;
}

.portal-menu-group > a:hover {
  background: #eef7ff;
  color: #c62828;
}

.portal-welcome {
  border-top: 3px solid #e0b800;
  background: #fff;
}

.portal-welcome h1 {
  color: #0645ad;
}

.portal-category-grid a:nth-child(3n+1) {
  border-top: 3px solid #087f47;
}

.portal-category-grid a:nth-child(3n+2) {
  border-top: 3px solid #0645ad;
  background: #f7fbff;
}

.portal-category-grid a:nth-child(3n+3) {
  border-top: 3px solid #c62828;
  background: #fffafa;
}

.portal-rightbar .portal-card:nth-child(1) {
  border-top-color: #0645ad;
}

.portal-rightbar .portal-card:nth-child(2) {
  border-top-color: #087f47;
}

.portal-rightbar .portal-card:nth-child(3) {
  border-top-color: #c62828;
}

.portal-side-link:hover {
  color: #c62828;
}

.portal-announcement {
  border-left: 4px solid #e0b800;
}

/* Mobile: 30 / 40 / 30 while keeping the organized three-panel appearance */
@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 6px);
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
    gap: 3px;
    padding: 3px;
    margin: 4px auto;
  }

  .portal-sidebar-title h2 {
    font-size: 9px;
  }

  .portal-sidebar-title .eyebrow {
    font-size: 6px;
  }

  .portal-menu-group {
    padding: 4px 2px;
  }

  .portal-menu-group > strong {
    font-size: 7px;
  }

  .portal-menu-group > a {
    font-size: 7px;
    line-height: 1.15;
    padding: 4px 2px;
  }

  .portal-welcome {
    padding: 7px 5px;
  }

  .portal-welcome h1 {
    font-size: 14px;
  }

  .portal-welcome p {
    font-size: 7px;
  }

  .portal-search-shortcut a {
    min-height: 24px;
    font-size: 7px;
    padding: 4px 2px;
  }

  .portal-category-grid a {
    min-height: 46px;
    padding: 5px 4px;
  }

  .portal-category-grid strong {
    font-size: 8px;
  }

  .portal-category-grid span {
    font-size: 6px;
  }

  .portal-card-heading {
    font-size: 7px;
  }

  .portal-card > strong {
    font-size: 7px;
  }

  .portal-card > p,
  .portal-side-link {
    font-size: 6px;
  }

  .portal-help-card .primary-button {
    font-size: 6px;
  }
}

@media (max-width: 420px) {
  .portal-dashboard {
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
  }

  .portal-menu-group > a {
    font-size: 6.5px;
  }

  .portal-welcome h1 {
    font-size: 12px;
  }

  .portal-category-grid strong {
    font-size: 7px;
  }
}

/* Header navigation visibility: high-contrast buttons on red header */
.site-header,
.top-strip,
.main-nav {
  background: #c62828 !important;
}

.main-nav {
  color: #ffffff !important;
}

.nav-menu .nav-link,
.nav-menu .nav-dropdown summary {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35);
}

.nav-menu .nav-link:hover,
.nav-menu .nav-dropdown summary:hover,
.nav-menu .nav-dropdown[open] summary {
  color: #c62828 !important;
  background: #ffffff !important;
  border-color: #ffffff;
}

.nav-actions .nav-utility {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .nav-cta {
  background: #0b8750 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .whatsapp-button {
  background: #0b8750 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .cart-button {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .mpesa-header-button {
  background: #f2c200 !important;
  color: #111111 !important;
  border: 1px solid #ffffff;
}

.nav-actions .danger-blink-button {
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions > a:hover,
.nav-actions > button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.brand strong {
  color: #ffffff !important;
}

.dropdown-panel {
  background: #ffffff !important;
  border: 2px solid #c62828;
}

.dropdown-panel a,
.dropdown-panel button {
  color: #123447 !important;
  background: #ffffff !important;
}

.dropdown-panel a:hover,
.dropdown-panel button:hover {
  color: #ffffff !important;
  background: #0645ad !important;
}

@media (max-width: 760px) {
  .nav-menu .nav-link,
  .nav-menu .nav-dropdown summary {
    color: #ffffff !important;
    background: #c62828 !important;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-dropdown summary:hover,
  .nav-menu .nav-dropdown[open] summary {
    color: #c62828 !important;
    background: #ffffff !important;
  }
}

/* Compact blue grade buttons matching Quick Resources */
.portal-sidebar .grade-list .grade-card {
  border: 0;
  border-radius: 4px;
  background: transparent;
  margin: 1px 0;
}

.portal-sidebar .grade-list .grade-toggle {
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid #d7e4f5;
  border-radius: 4px;
  background: #f4f8ff;
  color: #0645ad;
  font-size: 11px;
  line-height: 1.1;
  text-align: left;
}

.portal-sidebar .grade-list .grade-toggle:hover,
.portal-sidebar .grade-list .grade-toggle.active,
.portal-sidebar .grade-list .grade-card.open .grade-toggle {
  background: #0645ad;
  color: #ffffff;
  border-color: #0645ad;
}

.portal-sidebar .grade-list .subject-menu {
  gap: 3px;
  padding: 3px 4px 4px;
}

.portal-sidebar .grade-list .subject-chip {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #c9d9ee;
  background: #ffffff;
  color: #0645ad;
  font-size: 10px;
  line-height: 1.1;
}

.portal-sidebar .grade-list .subject-chip:hover,
.portal-sidebar .grade-list .subject-chip:focus-visible {
  background: #eaf2ff;
  color: #c62828;
  border-color: #0645ad;
}

@media (max-width: 760px) {
  .portal-sidebar .grade-list {
    gap: 3px;
    margin-top: 7px;
  }

  .portal-sidebar .grade-list .grade-toggle {
    min-height: 24px;
    padding: 4px 4px;
    font-size: 7px;
  }

  .portal-sidebar .grade-list .subject-menu {
    gap: 2px;
    padding: 2px 2px 3px;
  }

  .portal-sidebar .grade-list .subject-chip {
    padding: 3px 4px;
    font-size: 6.5px;
  }
}

@media (max-width: 420px) {
  .portal-sidebar .grade-list .grade-toggle {
    min-height: 22px;
    padding: 3px 3px;
    font-size: 6.5px;
  }

  .portal-sidebar .grade-list .subject-chip {
    font-size: 6px;
    padding: 2px 3px;
  }
}

/* Mobile-only: tightly pack portal buttons to reduce space */
@media (max-width: 760px) {
  .portal-sidebar .grade-list {
    gap: 0;
    margin-top: 4px;
  }

  .portal-sidebar .grade-list .grade-card {
    margin: 0;
    border-radius: 0;
  }

  .portal-sidebar .grade-list .grade-toggle {
    min-height: 20px;
    padding: 2px 3px;
    border-radius: 2px;
    font-size: 6.5px;
    line-height: 1;
  }

  .portal-sidebar .grade-list .subject-menu {
    gap: 0;
    padding: 0;
  }

  .portal-sidebar .grade-list .subject-chip {
    margin: 0;
    padding: 2px 3px;
    border-radius: 2px;
    font-size: 6px;
    line-height: 1;
  }

  .portal-menu-group > a {
    margin: 0;
    border-radius: 0;
  }

  .portal-search-shortcut {
    gap: 1px;
  }

  .portal-search-shortcut a {
    min-height: 20px;
    padding: 3px 2px;
    border-radius: 2px;
  }

  .portal-category-grid {
    gap: 0;
  }

  .portal-category-grid a {
    min-height: 40px;
    padding: 4px 3px;
  }

  .portal-rightbar {
    gap: 2px;
  }

  .portal-card {
    margin-bottom: 2px;
  }

  .portal-side-link {
    padding: 3px 0;
  }

  .portal-help-card .primary-button {
    margin: 3px;
    min-height: 20px;
    padding: 3px 2px;
    border-radius: 2px;
  }
}

@media (max-width: 420px) {
  .portal-sidebar .grade-list .grade-toggle {
    min-height: 18px;
    padding: 2px;
    font-size: 6px;
  }

  .portal-sidebar .grade-list .subject-chip {
    padding: 2px;
    font-size: 5.5px;
  }
}

/* Mobile-only: compact header navigation to save screen space */
@media (max-width: 760px) {
  .top-strip {
    gap: 1px;
    padding: 3px 4px;
  }

  .top-strip a {
    padding: 3px 4px;
    font-size: 8px;
    border-radius: 2px;
  }

  .main-nav {
    min-height: 42px;
    gap: 3px;
    padding-left: 4px;
    padding-right: 4px;
    align-items: center;
  }

  .brand {
    gap: 4px;
    flex-shrink: 0;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .brand strong {
    font-size: 10px;
  }

  .brand small {
    font-size: 7px;
  }

  .nav-menu {
    gap: 1px;
  }

  .nav-link,
  .nav-dropdown summary {
    min-height: 25px;
    padding: 3px 3px;
    border-radius: 2px;
    font-size: 7px;
    line-height: 1;
  }

  .nav-actions {
    gap: 1px;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 25px;
    padding: 3px 4px;
    border-radius: 2px;
    font-size: 7px;
    line-height: 1;
  }

  .nav-actions .cart-button span {
    min-width: 14px;
    height: 14px;
    font-size: 7px;
  }

  .dropdown-panel {
    left: 4px;
    right: 4px;
    max-height: 60vh;
  }

  .dropdown-panel a,
  .dropdown-panel button {
    padding: 5px;
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .top-strip {
    gap: 0;
    padding: 2px;
  }

  .top-strip a {
    padding: 2px 3px;
    font-size: 7px;
  }

  .main-nav {
    min-height: 36px;
    gap: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .brand {
    gap: 2px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .brand strong {
    font-size: 8px;
  }

  .brand small {
    font-size: 6px;
  }

  .nav-menu {
    gap: 0;
  }

  .nav-link,
  .nav-dropdown summary {
    min-height: 22px;
    padding: 2px;
    font-size: 6px;
  }

  .nav-actions {
    gap: 0;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 22px;
    padding: 2px 3px;
    font-size: 6px;
  }
}

/* Footer resource links: blue from Notes through Study Guides */
.site-footer .footer-resource-link {
  color: #0645ad !important;
  font-weight: 800;
}

.site-footer .footer-resource-link:hover,
.site-footer .footer-resource-link:focus-visible {
  color: #ffffff !important;
  background: #0645ad;
  border-radius: 3px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Professional colour coding for the quick resource buttons in the header */
.top-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.top-strip > a {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  padding: 5px 8px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.top-strip > a:nth-child(1),
.top-strip > a:nth-child(5),
.top-strip > a:nth-child(9),
.top-strip > a:nth-child(13) {
  background: #0645ad !important;
  color: #ffffff !important;
}

.top-strip > a:nth-child(2),
.top-strip > a:nth-child(6),
.top-strip > a:nth-child(10),
.top-strip > a:nth-child(14) {
  background: #0b8750 !important;
  color: #ffffff !important;
}

.top-strip > a:nth-child(3),
.top-strip > a:nth-child(7),
.top-strip > a:nth-child(11) {
  background: #d9a900 !important;
  color: #111111 !important;
}

.top-strip > a:nth-child(4),
.top-strip > a:nth-child(8),
.top-strip > a:nth-child(12) {
  background: #c62828 !important;
  color: #ffffff !important;
}

.top-strip > a:hover,
.top-strip > a:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

@media (max-width: 760px) {
  .top-strip > a {
    padding: 3px 5px;
    font-size: 7px;
    border-radius: 3px;
  }
}

@media (max-width: 420px) {
  .top-strip > a {
    padding: 2px 4px;
    font-size: 6px;
  }
}

/* Phone quick-access header: compact two-row button grid */
@media (max-width: 760px) {
  .top-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
  }

  .top-strip > a {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 3px 2px;
    border-width: 1px;
    border-radius: 0;
    font-size: 6.5px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .top-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .top-strip > a {
    padding: 2px 1px;
    font-size: 5.5px;
    min-height: 23px;
  }
}

/* Phone quick-access buttons: touching grid with softly curved outer corners */
@media (max-width: 760px) {
  .top-strip {
    gap: 0;
    border-radius: 7px;
    overflow: hidden;
  }

  .top-strip > a {
    border-radius: 0;
    margin: 0;
    border-width: 1px;
  }

  .top-strip > a:nth-child(1) { border-top-left-radius: 7px; }
  .top-strip > a:nth-child(7) { border-top-right-radius: 7px; }
  .top-strip > a:nth-child(8) { border-bottom-left-radius: 7px; }
  .top-strip > a:nth-child(14) { border-bottom-right-radius: 7px; }
}

@media (max-width: 420px) {
  .top-strip {
    border-radius: 6px;
  }

  .top-strip > a:nth-child(1) { border-top-left-radius: 6px; }
  .top-strip > a:nth-child(7) { border-top-right-radius: 6px; }
  .top-strip > a:nth-child(8) { border-bottom-left-radius: 6px; }
  .top-strip > a:nth-child(14) { border-bottom-right-radius: 6px; }
}

/* FINAL MOBILE HEADER SHAPE: compact touching buttons with rounded individual edges */
@media (max-width: 760px) {
  .top-strip {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .top-strip > a {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 2px !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 6px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* The buttons remain touching because their boxes have zero grid gap. */
  .top-strip > a:nth-child(1),
  .top-strip > a:nth-child(2),
  .top-strip > a:nth-child(3),
  .top-strip > a:nth-child(4),
  .top-strip > a:nth-child(5),
  .top-strip > a:nth-child(6),
  .top-strip > a:nth-child(7) {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }

  .top-strip > a:nth-child(8),
  .top-strip > a:nth-child(9),
  .top-strip > a:nth-child(10),
  .top-strip > a:nth-child(11),
  .top-strip > a:nth-child(12),
  .top-strip > a:nth-child(13),
  .top-strip > a:nth-child(14) {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }
}

@media (max-width: 420px) {
  .top-strip {
    border-radius: 7px !important;
  }

  .top-strip > a {
    padding: 2px 1px !important;
    font-size: 5px !important;
    min-height: 22px !important;
    border-radius: 5px !important;
  }
}

/* Unified green header quick-access buttons */
.top-strip > a {
  background: #0b8750 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.7) !important;
}

/* Blue buttons in the CBE Nexus dashboard beneath the header */
.portal-dashboard .portal-sidebar a,
.portal-dashboard .portal-category-grid a,
.portal-dashboard .portal-search-shortcut .primary-button,
.portal-dashboard .portal-search-shortcut .ghost-button,
.portal-dashboard .portal-side-link {
  background: #0645ad !important;
  color: #ffffff !important;
  border-color: #0645ad !important;
}

.portal-dashboard .portal-sidebar a:hover,
.portal-dashboard .portal-category-grid a:hover,
.portal-dashboard .portal-search-shortcut .primary-button:hover,
.portal-dashboard .portal-search-shortcut .ghost-button:hover,
.portal-dashboard .portal-side-link:hover {
  background: #053b91 !important;
  color: #ffffff !important;
}

/* Main header navigation buttons: blue */
.main-nav .nav-menu > .nav-link,
.main-nav .nav-menu > .nav-dropdown > summary {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}

.main-nav .nav-menu > .nav-link:hover,
.main-nav .nav-menu > .nav-dropdown > summary:hover,
.main-nav .nav-menu > .nav-dropdown[open] > summary {
  background: #053b91 !important;
  color: #ffffff !important;
}

/* Upper header quick-access buttons: unified green */
.top-strip > a {
  background: #0b8750 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.7) !important;
}

.top-strip > a:hover,
.top-strip > a:focus-visible {
  background: #086b40 !important;
  color: #ffffff !important;
}

/* Footer action links moved from the main navigation */
.site-footer .footer-action-link {
  color: #0645ad !important;
  font-weight: 900;
  background: rgba(6,69,173,.08);
  border: 1px solid rgba(6,69,173,.25);
  border-radius: 6px;
  padding: 5px 8px;
  text-decoration: none;
}

.site-footer .footer-action-link:hover,
.site-footer .footer-action-link:focus-visible {
  color: #ffffff !important;
  background: #0645ad !important;
  border-color: #0645ad;
}

@media (max-width: 760px) {
  .site-footer .footer-action-link {
    padding: 4px 5px;
    font-size: 7px;
    border-radius: 4px;
  }
}

/* Automated assessment and learner progress */
.quiz-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:1rem 0}
.quiz-toolbar label{min-width:160px}
.quiz-instructions{padding:12px 14px;border:1px solid #d7e3ee;border-radius:10px;background:#f6f9fc;margin:12px 0}
.quiz-timer{font-weight:800;text-align:right;margin:8px 0 14px;color:#0645ad}
.quiz-questions{display:grid;gap:14px}
.quiz-question{border:1px solid #dbe4ec;border-radius:12px;padding:16px;background:#fff}
.quiz-question legend{font-weight:800;padding:0 6px;line-height:1.45}
.quiz-option{display:flex!important;align-items:flex-start;gap:9px;padding:10px;margin-top:8px;border:1px solid #e2e8ef;border-radius:8px;cursor:pointer;background:#fafcfe}
.quiz-option:hover{border-color:#0645ad;background:#f3f7ff}
.quiz-option input{margin-top:4px}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.quiz-result-panel{margin-top:18px;padding:18px;border:2px solid #0b8750;border-radius:14px;background:#f4fff9}
.quiz-result-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.quiz-result-summary>div{padding:12px;text-align:center;background:#fff;border-radius:10px;border:1px solid #dce9e2}
.quiz-result-summary strong{display:block;font-size:1.45rem;color:#0b8750}
.quiz-result-summary span{font-size:.8rem;opacity:.75}
.quiz-review{display:grid;gap:10px;margin-top:12px}
.quiz-review article{display:grid;gap:5px;padding:12px;border-left:4px solid #c62828;background:#fff;border-radius:8px}
.quiz-review article span{font-size:.92rem}
.quiz-review article p{margin:.25rem 0 0}
.progress-panel-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}
.learner-progress-card{padding:16px;border:1px solid #dce4ec;border-radius:12px;background:#fff;margin-bottom:12px}
.learner-progress-header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.learner-progress-header>div:first-child{display:grid;gap:4px}
.learner-progress-header span{font-size:.88rem;opacity:.75}
.progress-score{font-size:1.8rem;font-weight:900;color:#0645ad;text-align:right}
.progress-score small{display:block;font-size:.7rem;color:#333}
.progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.progress-stats div{padding:10px;text-align:center;background:#f7f9fb;border-radius:8px}
.progress-stats strong{display:block}
.progress-stats span{font-size:.78rem;opacity:.7}
.progress-subject-list{display:grid;gap:8px}
.progress-subject{display:grid;grid-template-columns:minmax(120px,1fr) 55px minmax(100px,2fr);gap:8px;align-items:center}
.progress-meter{display:block;height:9px;background:#e7edf2;border-radius:999px;overflow:hidden}
.progress-meter span,.progress-meter i{display:block;height:100%;background:#0b8750;border-radius:999px}
.progress-meter.large{height:12px;margin-top:12px}
@media(max-width:700px){
  .quiz-result-summary{grid-template-columns:repeat(2,1fr)}
  .progress-panel-heading,.learner-progress-header{align-items:flex-start;flex-direction:column}
  .progress-score{text-align:left}
  .progress-stats{grid-template-columns:1fr}
  .progress-subject{grid-template-columns:1fr 50px}
  .progress-subject .progress-meter{grid-column:1 / -1}
}

/* Targeted learning-gap and remediation panel */
.learning-gaps-panel{margin-top:24px;padding:18px;border:1px solid #d9e2ec;border-radius:14px;background:#f8fafc}
.gap-intro{display:flex;gap:10px;flex-direction:column;margin-bottom:14px}
.gap-intro strong{font-size:1.05rem}
.gap-intro span{color:#475569}
.learning-gap-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;margin:10px 0;background:#fff;border:1px solid #d9e2ec;border-radius:12px}
.learning-gap-card>div{display:flex;flex-direction:column;gap:4px}
.learning-gap-card>div span{font-size:.88rem;color:#64748b}
.remedial-button{white-space:nowrap}
.gap-success{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0}
@media(max-width:700px){
  .learning-gap-card{align-items:stretch;flex-direction:column}
  .remedial-button{width:100%}
}

/* Admin Control Centre */
.admin-control-panel{margin-top:24px;padding:22px;border:1px solid #d9e2ec;border-radius:16px;background:#f8fafc}
.admin-control-heading{align-items:center}
.admin-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}
.admin-stat-card{padding:16px;border-radius:12px;background:#fff;border:1px solid #d9e2ec;display:flex;flex-direction:column;gap:4px}
.admin-stat-card strong{font-size:1.35rem;color:#0645ad}
.admin-stat-card span{font-weight:700}
.admin-stat-card small{color:#64748b}
.admin-management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-management-card{background:#fff;border:1px solid #d9e2ec;border-radius:14px;padding:16px;min-width:0}
.admin-card-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.admin-card-heading h3{margin:0}
.admin-card-heading span{font-size:.82rem;color:#64748b}
.admin-management-list{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto}
.admin-record{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.admin-record>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-record>div span{font-size:.8rem;color:#64748b;overflow-wrap:anywhere}
.admin-record-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.admin-record-actions button{padding:7px 10px;font-size:.78rem}
.status-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:capitalize;white-space:nowrap;background:#e2e8f0;color:#334155}
.status-pill.approved,.status-pill.active,.status-pill.paid{background:#dcfce7;color:#166534}
.status-pill.pending{background:#fef3c7;color:#92400e}
.status-pill.rejected,.status-pill.blocked{background:#fee2e2;color:#991b1b}
.admin-price-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px auto;gap:7px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:10px}
.admin-price-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-price-row>div span{font-size:.78rem;color:#64748b}
.admin-price-row input{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:7px}
.admin-price-row button{padding:8px 10px}
@media(max-width:900px){.admin-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-management-grid{grid-template-columns:1fr}}
@media(max-width:600px){.admin-stats-grid{grid-template-columns:1fr 1fr}.admin-record{align-items:stretch;flex-direction:column}.admin-record-actions{justify-content:flex-start!important}.admin-price-row{grid-template-columns:1fr 1fr}.admin-price-row>div{grid-column:1/-1}.admin-price-row button{width:100%}}

/* Admin Control Centre - professional operations UI */
.admin-control-panel{
  margin-top:24px;
  padding:24px;
  border:1px solid #dbe4ee;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.admin-control-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #e2e8f0;
}
.admin-control-topbar h2{margin:3px 0 6px;font-size:1.55rem;color:#0f172a}
.admin-control-topbar p:last-child{margin:0;color:#64748b}
.admin-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-last-updated{font-size:.78rem;color:#64748b;background:#f1f5f9;padding:8px 10px;border-radius:8px}
.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.admin-stat-card{
  width:100%;
  text-align:left;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:15px;
  background:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.admin-stat-card:hover,.admin-stat-card:focus-visible{
  transform:translateY(-2px);
  border-color:#0645ad;
  box-shadow:0 8px 18px rgba(6,69,173,.12);
}
.admin-stat-card strong{display:block;font-size:1.35rem;color:#0645ad;line-height:1.2}
.admin-stat-card span{display:block;margin-top:6px;font-weight:800;color:#0f172a}
.admin-stat-card small{display:block;margin-top:3px;color:#64748b;font-size:.72rem}
.admin-command-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:12px;
  padding:12px;
  margin-bottom:14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.admin-search,.admin-filter{display:grid;gap:5px}
.admin-search span,.admin-filter span{font-size:.72rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.04em}
.admin-search input,.admin-filter select{
  width:100%;
  min-height:40px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  padding:8px 10px;
}
.admin-module-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:3px;
  margin-bottom:12px;
  scrollbar-width:thin;
}
.admin-module-tab{
  flex:0 0 auto;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#334155;
  border-radius:9px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
}
.admin-module-tab span{
  display:inline-flex;
  min-width:19px;
  height:19px;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  border-radius:999px;
  background:#e2e8f0;
  font-size:.68rem;
}
.admin-module-tab.active{
  background:#0645ad;
  border-color:#0645ad;
  color:#fff;
}
.admin-module-tab.active span{background:#fff;color:#0645ad}
.admin-module-panel{
  display:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
}
.admin-module-panel.active{display:block}
.admin-module-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.admin-module-heading h3{margin:0;color:#0f172a}
.admin-module-heading span{font-size:.8rem;color:#64748b}
.admin-module-summary{
  padding:6px 9px;
  border-radius:999px;
  background:#eef2ff;
  color:#0645ad !important;
  font-weight:800;
  white-space:nowrap;
}
.admin-module-panel .admin-management-list{
  max-height:520px;
  overflow:auto;
  display:grid;
  gap:8px;
  padding-right:2px;
}
.admin-record{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid #e5eaf0;
  border-radius:10px;
  background:#fff;
}
.admin-record:hover{background:#f8fafc;border-color:#cbd5e1}
.admin-record-main{min-width:0;display:grid;gap:3px}
.admin-record-main strong{color:#0f172a;overflow-wrap:anywhere}
.admin-record-main span{font-size:.78rem;color:#64748b;overflow-wrap:anywhere}
.admin-amount{white-space:nowrap;color:#0f172a}
.admin-record-actions{display:flex!important;flex-direction:row!important;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.admin-record-actions button{padding:7px 10px;font-size:.76rem}
.admin-price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px 120px auto;
  gap:9px;
  align-items:end;
  padding:12px;
  border:1px solid #e5eaf0;
  border-radius:10px;
}
.admin-price-row>div{min-width:0;display:grid;gap:3px}
.admin-price-row>div span{font-size:.76rem;color:#64748b}
.admin-price-row label{display:grid;gap:4px}
.admin-price-row label span{font-size:.68rem;font-weight:800;color:#64748b;text-transform:uppercase}
.admin-price-row input{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:7px}
.admin-price-row button{padding:9px 12px}
.admin-control-panel.is-loading{opacity:.72;pointer-events:none}
@media(max-width:1100px){
  .admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .admin-control-panel{padding:14px;border-radius:12px}
  .admin-control-topbar{flex-direction:column}
  .admin-toolbar-actions{width:100%;justify-content:space-between}
  .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .admin-stat-card{padding:11px}
  .admin-stat-card strong{font-size:1.05rem}
  .admin-command-bar{grid-template-columns:1fr}
  .admin-module-tabs{margin-left:-2px;margin-right:-2px}
  .admin-module-tab{padding:8px 9px;font-size:.78rem}
  .admin-record{grid-template-columns:1fr;gap:8px}
  .admin-record-actions{justify-content:flex-start}
  .admin-price-row{grid-template-columns:1fr 1fr}
  .admin-price-row>div{grid-column:1/-1}
  .admin-price-row button{width:100%}
}

.admin-popular-card{margin:0 0 14px;padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.admin-popular-list{display:grid;gap:7px;max-height:360px;overflow:auto}
.admin-popular-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #e5eaf0;border-radius:9px}
.admin-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0645ad;color:#fff;font-weight:900;font-size:.78rem}
.admin-popular-metric{font-size:.76rem;font-weight:800;color:#475569;white-space:nowrap}
@media(max-width:760px){.admin-popular-row{grid-template-columns:30px 1fr}.admin-popular-metric{grid-column:2;white-space:normal}}

.resource-preview-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.78)}
.resource-preview-modal.open{display:flex}
.resource-preview-dialog{width:min(1000px,96vw);height:min(88vh,820px);display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.resource-preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #e2e8f0}
.resource-preview-header h2{margin:2px 0 0;color:#0f172a}
.resource-preview-info{margin:0;padding:9px 18px;background:#fff8db;color:#6b5a00;font-size:.82rem;border-bottom:1px solid #eadb8b}
#resourcePreviewFrame{flex:1;width:100%;border:0;background:#e5e7eb}
@media(max-width:640px){.resource-preview-modal{padding:7px}.resource-preview-dialog{width:100%;height:94vh;border-radius:10px}.resource-preview-header{padding:10px 12px}.resource-preview-info{padding:8px 12px;font-size:.74rem}}

.resource-activity{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;color:#64748b;font-size:.76rem;font-weight:700}

/* Resource Library: compact, moderate action buttons */
.resource-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.resource-library-actions .resource-action-button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 5px;
}

.resource-library-actions .resource-download-button {
  font-weight: 700;
}

@media (max-width: 640px) {
  .resource-library-actions .resource-action-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* Performance and responsive hardening */
html { scroll-padding-top: 96px; }
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
img, svg, iframe { max-width: 100%; }
img { height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px) {
  .main-nav { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .nav-menu { order: 3; width: 100%; overflow-x: auto; }
  .nav-actions { margin-left: auto; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-grid, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-dashboard { grid-template-columns: 1fr; }
  .portal-sidebar, .portal-rightbar { position: static; }
}
@media (max-width: 640px) {
  .top-strip { scrollbar-width: thin; }
  .main-nav { min-height: 0; gap: 10px; }
  .brand { min-width: 0; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 11px; }
  .brand-mark { width: 40px; height: 40px; }
  .nav-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-actions .nav-cta { grid-column: 1 / -1; }
  .filters, .resource-grid, .download-grid, .feature-grid, .trust-grid,
  .seller-layout, .payment-layout, .admin-login-card, .promo-layout, .refer-form {
    grid-template-columns: 1fr;
  }
  .section-heading { align-items: stretch; flex-direction: column; }
  .resource-card { min-height: 0; }
  .card-actions, .payment-actions, .approval-actions { display: grid; grid-template-columns: 1fr; }
  .card-actions > *, .payment-actions > *, .approval-actions > * { width: 100%; }
  .portal-category-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile usability fix - CBE Nexus */
/* Keep header and footer unchanged. On phones, body sections stack cleanly
   in the same logical order: left panel -> centre content -> right panel. */
@media (max-width: 640px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Main body layouts */
  .dashboard-shell,
  .seller-layout,
  .payment-layout,
  .admin-login-card,
  .promo-layout,
  .refer-form,
  .portal-dashboard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }

  /* Preserve the 30/40/30 meaning on mobile through clear ordered blocks */
  .portal-dashboard > *,
  .dashboard-shell > *,
  .seller-layout > *,
  .payment-layout > *,
  .admin-login-card > *,
  .promo-layout > *,
  .refer-form > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Three main portal areas */
  .portal-sidebar { order: 1 !important; }
  .portal-main { order: 2 !important; }
  .portal-rightbar { order: 3 !important; }

  /* Make every content band use the full phone width */
  .content-band,
  .admin-band,
  .trust-band,
  .promo-band,
  .seller-band,
  .urgent-band,
  .competitive-band,
  .seo-band,
  .landing-band,
  .payment-band,
  .admin-login-band,
  .info-band {
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible;
  }

  /* Resource library */
  .filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .resource-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    min-height: 0 !important;
  }

  .resource-card h3 {
    font-size: 18px !important;
    line-height: 1.3;
  }

  .resource-activity {
    gap: 7px;
    font-size: 12px;
  }

  .resource-library-actions,
  .card-actions,
  .payment-actions,
  .approval-actions,
  .hero-resource-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .resource-library-actions > *,
  .card-actions > *,
  .payment-actions > *,
  .approval-actions > *,
  .hero-resource-buttons > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .resource-library-actions .resource-action-button {
    min-height: 40px !important;
    padding: 8px 7px !important;
    font-size: 12px !important;
  }

  /* Forms and controls */
  input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }

  button,
  .primary-button,
  .ghost-button,
  .download-button,
  .secondary-button,
  .whatsapp-button,
  .mpesa-header-button,
  .cart-button {
    min-height: 42px;
  }

  /* Grades and subject menus */
  .grade-panel,
  .seller-panel,
  .payment-form,
  .payment-card,
  .quiz-panel,
  .progress-panel,
  .ai-answer,
  .admin-form {
    width: 100%;
    min-width: 0;
  }

  .grade-panel {
    padding: 14px !important;
  }

  .grade-list {
    max-height: none;
    overflow: visible;
  }

  .subject-menu {
    display: none;
    width: 100%;
  }

  .grade-card.open .subject-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .subject-chip {
    min-height: 42px;
    padding: 9px 7px;
    font-size: 13px;
  }

  /* Smaller grids */
  .summary-grid,
  .trust-grid,
  .feature-grid,
  .download-grid,
  .landing-grid,
  .quiz-result-summary,
  .progress-stats,
  .admin-stats-grid,
  .admin-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Text and headings */
  .section-heading {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .section-heading h2,
  .panel-heading h2,
  .admin-copy h2 {
    font-size: 24px !important;
    line-height: 1.2;
  }

  .intro-panel {
    min-height: 430px;
    padding: 22px !important;
  }

  .intro-panel h1 {
    font-size: clamp(30px, 10vw, 46px);
  }

  /* Admin */
  .admin-management-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-command-bar {
    grid-template-columns: 1fr !important;
  }

  .admin-record {
    grid-template-columns: 1fr !important;
  }

  .admin-price-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Prevent long tables/cards from breaking the viewport */
  .admin-management-list,
  .admin-module-panel .admin-management-list,
  .approval-list,
  .records-list,
  .seller-resource-list,
  .cart-items {
    max-width: 100%;
    overflow-x: hidden;
  }

  .progress-subject {
    grid-template-columns: 1fr 50px !important;
  }

  .progress-subject .progress-meter {
    grid-column: 1 / -1;
  }

  .learning-gap-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .remedial-button {
    width: 100% !important;
  }

  /* Hide decorative overflow, never actual content */
  .trending-item {
    min-width: 0 !important;
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  /* Tablet: keep three logical areas visible without crushing them. */
  .portal-dashboard {
    display: grid !important;
    grid-template-columns: 30% 40% 30% !important;
    gap: 10px !important;
  }

  .portal-dashboard > * {
    min-width: 0 !important;
  }
}

/* Phone-only CBE Nexus Resource Centre layout
   Desktop/tablet layouts remain unchanged. Header and footer are untouched. */
@media (max-width: 640px) {
  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #dashboard.portal-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "resource-centre"
      "library"
      "account-tools" !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar {
    grid-area: resource-centre !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #dashboard.portal-dashboard > .portal-main {
    grid-area: library !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar {
    grid-area: account-tools !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Resource Centre: compact enough to scroll comfortably on a phone. */
  .portal-sidebar {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .portal-sidebar-title h2 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  .portal-menu-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .portal-menu-group + .portal-menu-group {
    margin-top: 12px !important;
  }

  /* Keep all twelve grades visible without creating a horizontal scroll. */
  .portal-sidebar .grade-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .portal-sidebar .grade-card {
    min-width: 0 !important;
  }

  .portal-sidebar .grade-toggle {
    min-height: 42px !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
  }

  .portal-sidebar .subject-menu {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 0 7px 8px !important;
  }

  .portal-sidebar .subject-chip {
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
    text-align: left !important;
  }

  .portal-menu-group > a {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    border-radius: 7px !important;
  }

  /* Centre library: readable text and no squeezed desktop columns. */
  .portal-main {
    padding: 0 !important;
  }

  .portal-welcome,
  .portal-announcement,
  .portal-category-grid,
  .portal-main .summary-grid {
    width: 100% !important;
  }

  .portal-welcome {
    padding: 18px !important;
    border-radius: 12px !important;
  }

  .portal-welcome h1 {
    font-size: 25px !important;
    line-height: 1.18 !important;
  }

  .portal-welcome p {
    font-size: 14px !important;
  }

  .portal-category-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .portal-category-grid > * {
    min-width: 0 !important;
    padding: 11px !important;
  }

  .portal-category-grid strong,
  .portal-category-grid span {
    overflow-wrap: anywhere !important;
  }

  .portal-main .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .portal-main .summary-grid div {
    padding: 11px 7px !important;
    text-align: center !important;
  }

  .portal-main .summary-grid strong {
    font-size: 18px !important;
  }

  .portal-main .summary-grid span {
    font-size: 11px !important;
  }

  .portal-announcement {
    padding: 13px !important;
  }

  /* Right side: account, learning tools and help remain clearly separated. */
  .portal-rightbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .portal-rightbar .portal-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px !important;
    border-radius: 12px !important;
  }

  .portal-rightbar .portal-side-link {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 11px !important;
  }
}

/* Mobile dashboard system — phone only.
   Header and footer are intentionally excluded. Desktop/tablet remain unchanged. */
.mobile-dashboard-stack {
  display: none;
}

@media (max-width: 640px) {
  /* Main CBE Nexus dashboard: keep the three areas inside the phone viewport. */
  #dashboard.portal-dashboard {
    display: grid !important;
    grid-template-columns: 30% 40% 30% !important;
    grid-template-areas: "resource-centre library account-tools" !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-rightbar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 560px !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }

  /* LEFT — BLUE */
  #dashboard.portal-dashboard > .portal-sidebar {
    grid-area: resource-centre !important;
    background: #0645ad !important;
    color: #fff !important;
    padding: 7px 4px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .portal-sidebar-title h2 {
    font-size: 13px !important;
    line-height: 1.05 !important;
    margin: 1px 0 6px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .eyebrow {
    font-size: 7px !important;
    margin-bottom: 3px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .portal-menu-group > strong {
    display: block !important;
    font-size: 7px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .grade-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    max-height: none !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .grade-toggle {
    min-height: 27px !important;
    padding: 4px 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .subject-menu {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 0 3px 4px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .subject-dropdown {
    min-height: 27px !important;
    padding: 4px 3px !important;
    font-size: 8px !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .subject-chip {
    min-height: 25px !important;
    padding: 4px 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .portal-menu-group > a {
    min-height: 27px !important;
    padding: 5px 3px !important;
    margin-top: 2px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* CENTRE — GREEN / main dashboard */
  #dashboard.portal-dashboard > .portal-main {
    grid-area: library !important;
    background: #2f7d57 !important;
    color: #fff !important;
    padding: 7px 5px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-welcome {
    min-height: 245px !important;
    padding: 10px 7px !important;
    border-radius: 6px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-welcome .eyebrow {
    font-size: 7px !important;
    margin-bottom: 4px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-welcome h1 {
    font-size: 15px !important;
    line-height: 1.05 !important;
    margin-bottom: 6px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-welcome p {
    font-size: 8px !important;
    line-height: 1.2 !important;
    margin-bottom: 7px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-search-shortcut {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-search-shortcut > * {
    min-height: 27px !important;
    padding: 4px 2px !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-category-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-category-grid > * {
    min-height: 31px !important;
    padding: 5px 4px !important;
    border-radius: 4px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-category-grid strong {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-category-grid span {
    display: block !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-main .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }

  #dashboard.portal-dashboard > .portal-main .summary-grid div {
    min-width: 0 !important;
    padding: 5px 1px !important;
  }

  #dashboard.portal-dashboard > .portal-main .summary-grid strong {
    font-size: 9px !important;
  }

  #dashboard.portal-dashboard > .portal-main .summary-grid span {
    font-size: 5.5px !important;
  }

  #dashboard.portal-dashboard > .portal-main .portal-announcement {
    padding: 5px !important;
    margin-top: 4px !important;
    font-size: 6px !important;
    line-height: 1.1 !important;
  }

  /* RIGHT — YELLOW */
  #dashboard.portal-dashboard > .portal-rightbar {
    grid-area: account-tools !important;
    background: #f4c542 !important;
    color: #2b2500 !important;
    padding: 7px 4px !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar .portal-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    margin-bottom: 4px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar .portal-card-heading span {
    font-size: 7px !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar .portal-card > strong {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar .portal-card p {
    font-size: 6px !important;
    line-height: 1.05 !important;
    margin: 3px 0 !important;
  }

  #dashboard.portal-dashboard > .portal-rightbar .portal-side-link,
  #dashboard.portal-dashboard > .portal-rightbar .primary-button {
    display: flex !important;
    width: 100% !important;
    min-height: 26px !important;
    margin-top: 3px !important;
    padding: 4px 2px !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 4px !important;
    overflow-wrap: anywhere !important;
  }

  /* Four additional mobile dashboards: each one fits the phone width exactly. */
  .mobile-dashboard-stack {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 6px 7px 12px !important;
    background: #f1f4f6 !important;
    overflow: hidden !important;
  }

  .mobile-dashboard {
    display: grid !important;
    grid-template-columns: 30% 40% 30% !important;
    grid-template-rows: 25px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid #d7dee4 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 7px rgba(18,52,71,.08) !important;
  }

  .mobile-dashboard-title {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    background: #17202a !important;
    color: #fff !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-dashboard-table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background: #e8edf3 !important;
  }

  .mobile-dashboard-table td {
    width: 33.333% !important;
    min-width: 0 !important;
    max-width: 0 !important;
    vertical-align: top !important;
    padding: 5px 2px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  .mobile-dashboard-table td strong {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-dashboard-table td a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 24px !important;
    margin: 2px 0 !important;
    padding: 3px 2px !important;
    border-radius: 3px !important;
    font-size: 6.2px !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-decoration: none !important;
    border: 1px solid #b9cbe5 !important;
    background: #f7fbff !important;
    color: #0645ad !important;
    box-shadow: none !important;
  }

  .mobile-dashboard-table .mobile-blue {
    background: #0645ad !important;
    color: #fff !important;
  }

  .mobile-dashboard-table .mobile-green {
    background: #2f7d57 !important;
    color: #fff !important;
  }

  .mobile-dashboard-table .mobile-yellow {
    background: #f4c542 !important;
    color: #2b2500 !important;
  }

  .mobile-dashboard-table .mobile-green a,
  .mobile-dashboard-table .mobile-yellow a {
    color: #0645ad !important;
    background: #f7fbff !important;
    border-color: #9eb8dc !important;
  }

  .mobile-dashboard-table .mobile-blue strong,
  .mobile-dashboard-table .mobile-green strong,
  .mobile-dashboard-table .mobile-yellow strong {
    color: inherit !important;
  }

  /* Keep long labels from expanding any dashboard column. */
  .mobile-dashboard,
  .mobile-dashboard-table,
  .mobile-dashboard-table td,
  .mobile-dashboard-table a {
    overflow-wrap: anywhere !important;
  }

  /* Other sections stay full width on phones; header and footer are untouched. */
  main > section:not(#dashboard):not(.mobile-dashboard-stack) {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    margin-left: 7px !important;
    margin-right: 7px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
}

/* Mobile dashboard columns: 30% blue, 40% green, 30% yellow. */
@media (max-width: 768px) {
  .mobile-dashboard-table {
    width: 100%;
    table-layout: fixed;
  }
  .mobile-dashboard-table td.mobile-blue { width: 30%; }
  .mobile-dashboard-table td.mobile-green { width: 40%; }
  .mobile-dashboard-table td.mobile-yellow { width: 30%; }
}

/* Administrator-only management areas. Hidden until verified admin login. */
.admin-only-section,
.admin-only-link {
  display: none !important;
}

body.admin-unlocked .admin-only-section {
  display: block !important;
}

body.admin-unlocked .admin-only-link {
  display: inline-flex !important;
}

@media (max-width: 640px) {
  body.admin-unlocked .admin-only-link {
    display: flex !important;
  }
}

/* Grade visibility: keep Grades on the left and use a clear red treatment. */
.grade-card {
  border-color: #c62828 !important;
}

.grade-toggle {
  background: #c62828 !important;
  color: #ffffff !important;
}

.grade-toggle:hover,
.grade-toggle:focus-visible {
  background: #a91f1f !important;
  color: #ffffff !important;
}

.grade-card.open .grade-toggle {
  background: #b71c1c !important;
  color: #ffffff !important;
}

.subject-menu {
  background: #fff5f5 !important;
}

.subject-dropdown {
  border-color: #c62828 !important;
}

.subject-dropdown:focus {
  border-color: #8e1616 !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .14) !important;
}

@media (max-width: 640px) {
  #dashboard.portal-dashboard > .portal-sidebar .grade-toggle {
    background: #c62828 !important;
    color: #ffffff !important;
    border-color: #a91f1f !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .grade-card.open .grade-toggle {
    background: #b71c1c !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .subject-menu {
    background: #fff5f5 !important;
  }

  #dashboard.portal-dashboard > .portal-sidebar .subject-dropdown {
    border-color: #c62828 !important;
    background: #ffffff !important;
    color: #8e1616 !important;
  }
}

/* Final grade navigation visibility fix */
#dashboard.portal-dashboard > .portal-sidebar .grade-list{display:grid!important;gap:6px!important;max-height:560px!important;overflow-y:auto!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card{display:block!important;visibility:visible!important;opacity:1!important;border:1px solid #a91f1f!important;background:#c62828!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle{display:flex!important;visibility:visible!important;opacity:1!important;width:100%!important;min-height:40px!important;padding:8px 9px!important;background:#c62828!important;color:#fff!important;font-size:12px!important;font-weight:900!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card.open .grade-toggle{background:#b71c1c!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-menu{display:none!important;background:#fff5f5!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card.open .subject-menu{display:block!important;padding:7px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown{display:block!important;width:100%!important;min-height:38px!important;padding:7px 8px!important;background:#fff!important;color:#8e1616!important;border:2px solid #c62828!important;font-size:12px!important;font-weight:800!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown-label{color:#8e1616!important;font-size:9px!important;margin-bottom:4px!important}
@media(max-width:640px){
#dashboard.portal-dashboard > .portal-sidebar .grade-list{max-height:none!important;grid-template-columns:1fr!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle{min-height:36px!important;padding:7px 6px!important;font-size:11px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown{min-height:34px!important;font-size:10px!important}
}

/* FINAL MAIN DASHBOARD 30/40/30 LAYOUT */
#dashboard.portal-dashboard {
  width: min(1440px, calc(100% - 24px));
  grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
  gap: 12px;
  align-items: start;
}

#dashboard.portal-dashboard > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1050px) {
  #dashboard.portal-dashboard {
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
    gap: 8px;
  }
}

@media (max-width: 760px) {
  #dashboard.portal-dashboard {
    width: calc(100% - 8px);
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
    gap: 4px;
    margin: 5px auto;
    align-items: stretch;
  }

  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-rightbar {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
}

/* FINAL GRADE 1-12 SUBJECT DROPDOWN FIX — CBE NEXUS */
#dashboard.portal-dashboard > .portal-sidebar .grade-list{display:grid!important;gap:8px!important;max-height:560px!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:3px!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;border:1px solid #0b5f3d!important;border-radius:8px!important;background:#0f7a4f!important;overflow:hidden!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:42px!important;padding:9px 11px!important;border:0!important;background:#0f7a4f!important;color:#fff!important;font-size:13px!important;font-weight:900!important;cursor:pointer!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle:hover,
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle:focus-visible,
#dashboard.portal-dashboard > .portal-sidebar .grade-card.open .grade-toggle{background:#0b5f3d!important;color:#fff!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-chevron{margin-left:6px!important;font-size:14px!important;transition:transform .2s ease!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card.open .grade-chevron{transform:rotate(180deg)!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-menu{display:none!important;width:100%!important;padding:8px!important;background:#f3fbf7!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-card.open .subject-menu{display:block!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown-label{display:block!important;margin:0 0 5px!important;color:#0b5f3d!important;font-size:10px!important;font-weight:900!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown{display:block!important;width:100%!important;min-height:40px!important;padding:8px 34px 8px 10px!important;border:2px solid #0f7a4f!important;border-radius:7px!important;background:#fff!important;color:#123447!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;outline:none!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown:focus{border-color:#0b5f3d!important;box-shadow:0 0 0 3px rgba(15,122,79,.14)!important}
@media(max-width:1050px){
#dashboard.portal-dashboard > .portal-sidebar .grade-list{max-height:520px!important;gap:6px!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle{min-height:39px!important;padding:8px 9px!important;font-size:12px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown{min-height:36px!important;font-size:11px!important}
}
@media(max-width:640px){
#dashboard.portal-dashboard > .portal-sidebar .grade-list{grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important;gap:4px!important}
#dashboard.portal-dashboard > .portal-sidebar .grade-toggle{min-height:32px!important;padding:6px 7px!important;font-size:10px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-menu{padding:5px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown-label{font-size:8px!important}
#dashboard.portal-dashboard > .portal-sidebar .subject-dropdown{min-height:31px!important;padding:5px 6px!important;font-size:9px!important}
}

/* Grade 1-12 dropdown reliability layer */
#gradeList.grade-list > .grade-card {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
}
#gradeList.grade-list > .grade-card .subject-menu {
  display:none!important;
}
#gradeList.grade-list > .grade-card.open .subject-menu {
  display:block!important;
}
#gradeList.grade-list > .grade-card.open .grade-toggle {
  background:#0b5f3d!important;
  color:#fff!important;
}
#gradeList.grade-list > .grade-card.open .grade-chevron {
  transform:rotate(180deg)!important;
}
#gradeList.grade-list .subject-dropdown {
  appearance:auto!important;
  -webkit-appearance:auto!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:5!important;
}

/* SHOW A SUBJECT DROPDOWN FOR EVERY GRADE */
#gradeList.grade-list > .grade-card .subject-menu,
#gradeList.grade-list > .grade-card.open .subject-menu {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#gradeList.grade-list > .grade-card .subject-dropdown {
  display:block!important;
  width:100%!important;
  min-height:40px!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#gradeList.grade-list > .grade-card {
  margin-bottom:8px!important;
}

/* TEACHING & LEARNING MATERIALS DROPDOWN */
.teaching-materials-dropdown {
  min-width: 300px;
  max-height: 75vh;
  overflow-y: auto;
}
.teaching-materials-dropdown .resource-library-link {
  font-weight: 800;
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: 4px;
.international-vacancies-band{background:#fffdf2}.vacancy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vacancy-card{background:#fff;border:1px solid rgba(24,38,61,.12);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(24,38,61,.07)}.vacancy-card.featured{border-width:2px}.vacancy-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.vacancy-region,.vacancy-featured{font-size:.76rem;font-weight:800}.vacancy-featured{padding:5px 8px;border-radius:999px;background:#fff0a8}.vacancy-card h3{margin:.25rem 0 .4rem}.vacancy-meta{font-weight:700}.vacancy-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.admin-vacancies-card{margin-top:20px;padding:20px;border:1px solid rgba(24,38,61,.12);border-radius:16px;background:#fffdf2}@media(max-width:980px){.vacancy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.vacancy-grid{grid-template-columns:1fr}}


/* ADMIN DASHBOARD — RED ACTION BUTTONS */
#admin .admin-module-tabs button,
#admin [data-admin-module],
#admin .admin-resource-moderation-actions button,
#admin .vacancy-card-actions button,
#admin .admin-vacancies-card button,
#admin button.primary-button,
#admin button.secondary-button,
#admin button.ghost-button,
#admin button.danger-button,
#admin a.primary-button {
  background:#d32f2f !important;
  border-color:#b71c1c !important;
  color:#fff !important;
}
#admin .admin-module-tabs button:hover,
#admin [data-admin-module]:hover,
#admin .admin-resource-moderation-actions button:hover,
#admin .vacancy-card-actions button:hover,
#admin .admin-vacancies-card button:hover,
#admin button.primary-button:hover,
#admin button.secondary-button:hover,
#admin button.ghost-button:hover,
#admin button.danger-button:hover,
#admin a.primary-button:hover {
  background:#b71c1c !important;
  border-color:#8f1515 !important;
  color:#fff !important;
}
#admin .admin-module-tabs button.active,
#admin [data-admin-module].active {
  background:#b71c1c !important;
  border-color:#8f1515 !important;
  color:#fff !important;
}

/* ============================================================
   CBE NEXUS — PROFESSIONAL ADMIN DASHBOARD
   Visual-only enhancement: preserves existing IDs, JS handlers,
   API endpoints, tabs, forms and dashboard structure.
   ============================================================ */

#admin.admin-band{
  background:linear-gradient(180deg,#fffdf2 0%,#fff8d9 48%,#fffdf5 100%);
  padding:32px 0 56px;
}

#admin .admin-layout{
  max-width:1480px;
  margin:0 auto;
}

#admin .admin-copy{
  margin-bottom:18px;
}

#admin .admin-copy h2{
  font-size:clamp(1.65rem,2.6vw,2.35rem);
  letter-spacing:-.025em;
  margin-bottom:8px;
}

#admin .admin-note{
  border:1px solid rgba(183,28,28,.12);
  background:rgba(255,255,255,.78);
  border-radius:12px;
  box-shadow:0 5px 18px rgba(58,47,20,.05);
}

#adminControlPanel.admin-control-panel{
  position:relative;
  overflow:hidden;
  margin-top:24px;
  padding:24px;
  border:1px solid rgba(132,104,25,.16);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 55px rgba(67,54,19,.10);
}

#adminControlPanel.admin-control-panel:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#b71c1c,#d32f2f,#f2c94c);
}

#admin .admin-control-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:4px 2px 22px;
  border-bottom:1px solid #eee7cf;
}

#admin .admin-title-block{min-width:0}
#admin .admin-title-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}
#admin .admin-title-line .eyebrow{margin:0}
#admin .admin-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#2e7d32;
  box-shadow:0 0 0 4px rgba(46,125,50,.10);
}
#admin .admin-live-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  background:#eaf6ec;
  color:#2e7d32;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.06em;
}
#admin .admin-control-topbar h2{
  margin:0 0 5px;
  font-size:clamp(1.45rem,2.2vw,2rem);
  letter-spacing:-.025em;
}
#admin .admin-control-topbar p{
  margin:0;
  color:#6c654f;
  max-width:760px;
}
#admin .admin-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
#admin .admin-session-info{
  display:grid;
  gap:1px;
  padding:8px 12px;
  min-width:145px;
  border:1px solid #eee7cf;
  border-radius:10px;
  background:#fffdf6;
}
#admin .admin-session-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#8a8064;
  font-weight:700;
}
#admin .admin-session-info strong{
  color:#2e7d32;
  font-size:.82rem;
}
#admin .admin-session-info .admin-last-updated{
  font-size:.68rem;
  color:#8a8064;
}
#admin .admin-public-link{ text-decoration:none; }

#admin .admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin:20px 0;
}
#admin .admin-kpi-grid > *{
  min-height:108px;
  padding:17px;
  border:1px solid #eee7cf;
  border-radius:15px;
  background:#fff;
  box-shadow:0 6px 20px rgba(67,54,19,.055);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#admin .admin-kpi-grid > *:hover{
  transform:translateY(-2px);
  border-color:#e1d3a4;
  box-shadow:0 10px 28px rgba(67,54,19,.09);
}

#admin .admin-analytics-card,
#admin .admin-popular-card{
  border:1px solid #eee7cf;
  border-radius:17px;
  background:#fff;
  box-shadow:0 7px 24px rgba(67,54,19,.055);
  margin-top:14px;
  padding:18px;
}

#admin .admin-module-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
#admin .admin-module-heading h3{margin:0 0 3px;font-size:1.05rem}
#admin .admin-module-heading span:not(.admin-module-summary){color:#776f5b;font-size:.84rem}
#admin .admin-module-summary{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  background:#fff7d5;
  color:#7a5d00;
  border:1px solid #f0df9d;
  font-size:.72rem;
  font-weight:800;
}

#admin .admin-command-bar{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) minmax(150px,.65fr) minmax(150px,.65fr);
  gap:10px;
  align-items:end;
  margin:18px 0 12px;
  padding:13px;
  border:1px solid #eee7cf;
  border-radius:14px;
  background:#fffaf0;
}
#admin .admin-search,
#admin .admin-filter{
  display:grid;
  gap:6px;
}
#admin .admin-search > span,
#admin .admin-filter > span{
  font-size:.69rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#776f5b;
}
#admin .admin-command-bar input,
#admin .admin-command-bar select{
  width:100%;
  min-height:42px;
  border:1px solid #ddd4b8;
  border-radius:9px;
  background:#fff;
  padding:9px 11px;
  color:#302d25;
  outline:none;
}
#admin .admin-command-bar input:focus,
#admin .admin-command-bar select:focus{
  border-color:#d32f2f;
  box-shadow:0 0 0 3px rgba(211,47,47,.09);
}

#admin .admin-module-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding:7px;
  margin:0 0 12px;
  border:1px solid #eee7cf;
  border-radius:14px;
  background:#f8f5e9;
}
#admin .admin-module-tabs .admin-module-tab{
  min-height:42px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#5d5645;
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  transition:all .16s ease;
}
#admin .admin-module-tabs .admin-module-tab:hover{
  background:#fff;
  color:#a51f1f;
}
#admin .admin-module-tabs .admin-module-tab.active,
#admin .admin-module-tabs .admin-module-tab[aria-selected="true"]{
  background:#b71c1c;
  color:#fff;
  border-color:#991818;
  box-shadow:0 5px 13px rgba(183,28,28,.18);
}
#admin .admin-module-tabs .admin-module-tab span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:20px;
  margin-left:4px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  font-size:.68rem;
}

#admin .admin-module-panel{
  border:1px solid #eee7cf;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 24px rgba(67,54,19,.045);
  padding:18px;
}
#admin .admin-management-list{
  display:grid;
  gap:11px;
}
#admin .admin-management-card{
  border:1px solid #ece5d2;
  border-radius:13px;
  background:#fffdf8;
  padding:15px;
  transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease;
}
#admin .admin-management-card:hover{
  border-color:#dfd0a5;
  box-shadow:0 8px 22px rgba(67,54,19,.07);
  transform:translateY(-1px);
}
#admin .admin-management-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
#admin .admin-management-heading h4{margin:2px 0 4px}
#admin .admin-management-heading p{margin:0;color:#756d5c;font-size:.82rem}
#admin .eyebrow{
  font-size:.68rem;
  letter-spacing:.07em;
  font-weight:800;
  text-transform:uppercase;
  color:#a51f1f;
}

#admin .admin-resource-moderation-actions,
#admin .quiz-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
#admin .admin-resource-moderation-actions button,
#admin .admin-resource-moderation-actions a,
#admin .quiz-actions button{
  min-height:38px;
  border-radius:8px;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}

#admin .admin-form{
  border:1px solid #eee7cf;
  border-radius:15px;
  padding:18px;
  background:#fff;
}
#admin .admin-form label{
  color:#403b30;
  font-weight:700;
  font-size:.82rem;
}
#admin .admin-form input,
#admin .admin-form select,
#admin .admin-form textarea{
  border-color:#ddd4b8;
  border-radius:9px;
  background:#fffdf9;
}
#admin .admin-form input:focus,
#admin .admin-form select:focus,
#admin .admin-form textarea:focus{
  border-color:#d32f2f;
  box-shadow:0 0 0 3px rgba(211,47,47,.08);
}
#admin .file-upload-box{
  border:1.5px dashed #d5c78e;
  background:#fffbea;
  border-radius:12px;
  padding:15px;
}
#admin .file-upload-box:hover{
  border-color:#b71c1c;
  background:#fff8df;
}

#admin .admin-control-panel .primary-button,
#admin .admin-control-panel .secondary-button,
#admin .admin-control-panel .danger-button,
#admin .admin-control-panel .ghost-button{
  border-radius:8px;
  font-weight:800;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
#admin .admin-control-panel .primary-button:hover,
#admin .admin-control-panel .secondary-button:hover,
#admin .admin-control-panel .danger-button:hover,
#admin .admin-control-panel .ghost-button:hover{
  transform:translateY(-1px);
}

@media (max-width:1100px){
  #admin .admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #admin .admin-control-topbar{flex-direction:column}
  #admin .admin-toolbar-actions{justify-content:flex-start}
}
@media (max-width:760px){
  #admin.admin-band{padding:18px 0 40px}
  #adminControlPanel.admin-control-panel{padding:14px;border-radius:15px}
  #admin .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #admin .admin-command-bar{grid-template-columns:1fr}
  #admin .admin-module-tabs{overflow-x:auto;flex-wrap:nowrap}
  #admin .admin-module-tabs .admin-module-tab{white-space:nowrap}
  #admin .admin-module-panel{padding:13px}
  #admin .admin-module-heading,
  #admin .admin-management-heading{align-items:flex-start;flex-direction:column}
  #admin .admin-toolbar-actions{width:100%}
  #admin .admin-toolbar-actions > *{flex:1 1 auto}
}
@media (max-width:480px){
  #admin .admin-kpi-grid{grid-template-columns:1fr}
  #admin .admin-kpi-grid > *{min-height:88px}
  #admin .admin-resource-moderation-actions > *{width:100%}
}


/* ============================================================
   CBE NEXUS ADMIN — COLORFUL RESPONSIVE CONTROL CENTRE
   Keeps existing HTML/JS/API structure and IDs intact.
   ============================================================ */
#admin.admin-band{background:linear-gradient(135deg,#fffdf2 0%,#fff6c9 42%,#f7fbff 100%)}
#adminControlPanel.admin-control-panel{background:rgba(255,255,255,.96);border:1px solid #eadfb5;box-shadow:0 20px 60px rgba(54,45,18,.12)}
#admin .admin-control-topbar{background:linear-gradient(135deg,#fff9df,#ffffff);border:1px solid #eee4bd;border-radius:18px;padding:20px;margin-bottom:18px}
#admin .admin-title-block h2{font-size:clamp(1.6rem,3vw,2.35rem)}
#admin .admin-live-badge{animation:adminPulse 2s infinite}
@keyframes adminPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,125,50,.16)}50%{box-shadow:0 0 0 5px rgba(46,125,50,.04)}}

#admin .admin-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
#admin .admin-kpi-grid>*{position:relative;overflow:hidden;border:0;border-radius:17px;background:linear-gradient(145deg,#fff,#fffdf4);box-shadow:0 9px 25px rgba(48,42,22,.09)}
#admin .admin-kpi-grid>*:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(#d32f2f,#f2c94c)}
#admin .admin-kpi-grid>*:nth-child(2):before{background:linear-gradient(#2e7d32,#8bc34a)}
#admin .admin-kpi-grid>*:nth-child(3):before{background:linear-gradient(#ef6c00,#ffb74d)}
#admin .admin-kpi-grid>*:nth-child(4):before{background:linear-gradient(#1565c0,#64b5f6)}
#admin .admin-kpi-grid>*:nth-child(5):before{background:linear-gradient(#7b1fa2,#ba68c8)}
#admin .admin-kpi-grid>*:nth-child(6):before{background:linear-gradient(#00838f,#4dd0e1)}

#admin .admin-command-bar{background:linear-gradient(135deg,#fffdf4,#f6fbff);border-color:#e8dfc0}
#admin .admin-module-tabs{background:#f4f1e7;border-color:#e6ddbf}
#admin .admin-module-tabs .admin-module-tab{position:relative;min-height:44px}
#admin .admin-module-tabs .admin-module-tab:nth-child(1).active{background:#b71c1c}
#admin .admin-module-tabs .admin-module-tab:nth-child(2).active{background:#1565c0}
#admin .admin-module-tabs .admin-module-tab:nth-child(3).active{background:#7b1fa2}
#admin .admin-module-tabs .admin-module-tab:nth-child(4).active{background:#00838f}
#admin .admin-module-tabs .admin-module-tab:nth-child(5).active{background:#ef6c00}
#admin .admin-module-tabs .admin-module-tab:nth-child(6).active{background:#2e7d32}
#admin .admin-module-tabs .admin-module-tab:nth-child(7).active{background:#6d4c41}
#admin .admin-module-tabs .admin-module-tab.active,
#admin .admin-module-tabs .admin-module-tab[aria-selected="true"]{color:#fff;box-shadow:0 7px 16px rgba(0,0,0,.15)}

#admin .admin-module-panel{background:linear-gradient(180deg,#fff,#fffefa);border-color:#e9e0c5}
#admin .admin-module-panel.active{animation:adminPanelIn .2s ease-out}
@keyframes adminPanelIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}

#admin .admin-control-panel .primary-button,
#admin .admin-control-panel .secondary-button,
#admin .admin-control-panel .danger-button,
#admin .admin-control-panel .ghost-button{
  min-height:42px;padding:10px 15px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
#admin .admin-control-panel button:not(:disabled):hover,
#admin .admin-control-panel a.primary-button:hover,
#admin .admin-control-panel a.secondary-button:hover,
#admin .admin-control-panel a.ghost-button:hover{transform:translateY(-2px);filter:brightness(.97);box-shadow:0 7px 16px rgba(40,35,20,.13)}
#admin .admin-control-panel button:not(:disabled):active,
#admin .admin-control-panel a.primary-button:active,
#admin .admin-control-panel a.secondary-button:active{transform:translateY(0);box-shadow:0 3px 7px rgba(40,35,20,.10)}
#admin .admin-control-panel button:focus-visible,
#admin .admin-control-panel a:focus-visible,
#admin .admin-control-panel input:focus-visible,
#admin .admin-control-panel select:focus-visible,
#admin .admin-control-panel textarea:focus-visible{outline:3px solid rgba(33,150,243,.22);outline-offset:2px}
#admin .admin-control-panel button:disabled{opacity:.55;cursor:not-allowed}

#admin .admin-resource-moderation-actions a,
#admin .admin-resource-moderation-actions button,
#admin .quiz-actions button{min-width:110px}
#admin .admin-management-card{background:#fff;border-left:4px solid #e0c85a}
#admin .admin-management-card:nth-child(3n+2){border-left-color:#64b5f6}
#admin .admin-management-card:nth-child(3n){border-left-color:#81c784}

#admin .admin-analytics-card{background:linear-gradient(135deg,#ffffff,#f8fbff)}
#admin .admin-popular-card{background:linear-gradient(135deg,#ffffff,#fffaf0)}
#admin .admin-seo-card{border-radius:15px;border:1px solid #e6ddbf;box-shadow:0 7px 20px rgba(50,45,25,.06)}
#admin .admin-seo-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(50,45,25,.10)}

#admin .admin-form{background:linear-gradient(180deg,#fff,#fffdf5);box-shadow:0 7px 22px rgba(55,45,15,.05)}
#admin .admin-form .submit-button{width:auto;min-width:170px}
#admin .form-status{min-height:20px}

@media(max-width:1200px){
 #admin .admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
 #admin .admin-control-topbar{padding:16px}
 #admin .admin-toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #admin .admin-session-info{grid-column:1/-1}
 #admin .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #admin .admin-command-bar{grid-template-columns:1fr}
}
@media(max-width:560px){
 #adminControlPanel.admin-control-panel{padding:10px;margin-top:14px;border-radius:13px}
 #admin .admin-control-topbar{border-radius:13px}
 #admin .admin-toolbar-actions{grid-template-columns:1fr}
 #admin .admin-kpi-grid{grid-template-columns:1fr}
 #admin .admin-module-tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
 #admin .admin-module-tabs .admin-module-tab{width:100%;min-width:0}
 #admin .admin-module-panel{padding:11px}
 #admin .admin-resource-moderation-actions,
 #admin .quiz-actions{display:grid;grid-template-columns:1fr}
 #admin .admin-resource-moderation-actions>*,
 #admin .quiz-actions>*{width:100%;min-width:0}
 #admin .admin-form .submit-button{width:100%}
}


/* ============================================================
   CBE NEXUS — AUTOMATIC GRADE COLOUR THEMES
   The active colour changes automatically with the selected grade.
   ============================================================ */
:root{
  --grade-accent:#b8860b;
  --grade-accent-2:#f2c94c;
  --grade-soft:#fff8d8;
  --grade-surface:#fffdf4;
}
html[data-grade-theme="preprimary"]{--grade-accent:#c58a00;--grade-accent-2:#f4c542;--grade-soft:#fff4c2;--grade-surface:#fffdf1}
html[data-grade-theme="lower-primary"]{--grade-accent:#2e7d32;--grade-accent-2:#81c784;--grade-soft:#eaf7eb;--grade-surface:#f8fff8}
html[data-grade-theme="upper-primary"]{--grade-accent:#1565c0;--grade-accent-2:#64b5f6;--grade-soft:#eaf4ff;--grade-surface:#f8fbff}
html[data-grade-theme="junior-secondary"]{--grade-accent:#ef6c00;--grade-accent-2:#ffb74d;--grade-soft:#fff1e4;--grade-surface:#fffaf5}
html[data-grade-theme="senior-school"]{--grade-accent:#7b1fa2;--grade-accent-2:#ba68c8;--grade-soft:#f7eefe;--grade-surface:#fdf9ff}
html[data-grade-theme="international"]{--grade-accent:#00838f;--grade-accent-2:#4dd0e1;--grade-soft:#e6f8fa;--grade-surface:#f7ffff}

#dashboard .grade-card:hover,
#dashboard .grade-card.open{
  border-color:var(--grade-accent)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--grade-accent) 18%,transparent)!important;
}
#dashboard .grade-card .grade-title,
#dashboard .grade-card .grade-heading{color:var(--grade-accent)!important}
#dashboard .grade-card .grade-toggle.active,
#dashboard .grade-card .subject-dropdown:focus{
  border-color:var(--grade-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--grade-accent) 12%,transparent)!important;
}
#dashboard .grade-card .grade-chevron{color:var(--grade-accent)!important}


/* ============================================================
   CBE NEXUS — GRADE & SUBJECT RESOURCE CENTRE COLOURS
   Visual-only styling for the centre dashboard grade cards.
   Existing HTML structure, IDs and navigation remain unchanged.
   ============================================================ */
#dashboard .portal-sidebar .grade-card{
  border-left:5px solid var(--grade-card-accent,#1565c0)!important;
  background:linear-gradient(135deg,var(--grade-card-soft,#f7fbff),#fff)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#dashboard .portal-sidebar .grade-card:hover,
#dashboard .portal-sidebar .grade-card.open{
  border-left-color:var(--grade-card-accent)!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--grade-card-accent) 18%,transparent)!important;
  transform:translateY(-1px);
}
#dashboard .portal-sidebar .grade-card .grade-toggle{
  color:var(--grade-card-accent)!important;
}
#dashboard .portal-sidebar .grade-card .grade-chevron{
  color:var(--grade-card-accent)!important;
}
#dashboard .portal-sidebar .grade-card .subject-dropdown:focus{
  border-color:var(--grade-card-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--grade-card-accent) 12%,transparent)!important;
}
/* Grade 1–12: distinct, consistent colours */
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 1"]{--grade-card-accent:#d84315;--grade-card-soft:#fff3ee}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 2"]{--grade-card-accent:#8e24aa;--grade-card-soft:#faf0fc}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 3"]{--grade-card-accent:#1565c0;--grade-card-soft:#edf5ff}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 4"]{--grade-card-accent:#00838f;--grade-card-soft:#eafafa}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 5"]{--grade-card-accent:#2e7d32;--grade-card-soft:#eef9ef}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 6"]{--grade-card-accent:#558b2f;--grade-card-soft:#f2f9eb}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 7"]{--grade-card-accent:#ef6c00;--grade-card-soft:#fff4e8}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 8"]{--grade-card-accent:#6a1b9a;--grade-card-soft:#f8effc}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 9"]{--grade-card-accent:#ad1457;--grade-card-soft:#fff0f6}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 10"]{--grade-card-accent:#283593;--grade-card-soft:#eef0ff}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 11"]{--grade-card-accent:#00695c;--grade-card-soft:#eaf8f5}
#dashboard .portal-sidebar .grade-card[data-grade-card="Grade 12"]{--grade-card-accent:#bf360c;--grade-card-soft:#fff1ec}


/* Dedicated international curriculum upload area in Admin Dashboard */
.international-admin-upload-card{margin:0 0 18px;padding:20px;border:1px solid #173b70;border-radius:16px;background:#f7f9fd;box-shadow:0 8px 22px rgba(6,26,58,.08)}
.international-admin-upload-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.international-admin-upload-heading h3{margin:4px 0 7px;color:#061a3a}
.international-admin-upload-heading p:not(.eyebrow){margin:0;color:#5d6b82;line-height:1.55}
.international-admin-badge{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#061a3a;color:#fff;font-size:11px;font-weight:900;letter-spacing:.05em}
.international-admin-help{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 14px;border-radius:10px;background:#eaf0f8;color:#10213f;line-height:1.4}
.international-admin-help strong{color:#061a3a}
@media (max-width:700px){.international-admin-upload-heading{flex-direction:column}.international-admin-badge{align-self:flex-start}}

/* =========================================================
   CBE NEXUS — DESKTOP MODE ONLY
   Phones retain the desktop layout; no responsive redesign.
   ========================================================= */
@media (max-width: 767px) {
  html, body {
    min-width: 1024px;
    width: 100%;
    overflow-x: auto;
  }
}


/* =========================================================
   CBE NEXUS — MOBILE FEATURE PARITY
   Keep the desktop-mode layout on phones, but make every
   existing desktop interaction usable with touch input.
   No feature is hidden, disabled, reordered, or replaced.
   ========================================================= */
@media (max-width: 767px) {
  /* Preserve the desktop canvas while allowing the full site to be reached. */
  html, body {
    min-width: 1024px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Touch should activate the same controls as mouse click. */
  a, button, input, select, textarea, summary,
  [role="button"], [onclick], .clickable, .nav-link,
  .nav-dropdown summary, .dropdown-panel a, .dropdown-panel button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 122, 79, .14);
  }

  /* Do not rely on hover for access to controls on phones. */
  button, a, summary, select, input, textarea {
    cursor: pointer;
  }

  /* Keep menus and dropdowns fully reachable on touch screens. */
  .nav-dropdown[open] .dropdown-panel,
  .nav-dropdown[open] > .dropdown-panel {
    pointer-events: auto;
  }

  /* Prevent fixed dialogs/viewers from becoming unusable after opening. */
  .viewer-modal.open,
  .resource-preview-modal.open,
  [role="dialog"].open,
  .modal.open {
    pointer-events: auto;
    touch-action: auto;
  }

  /* Preserve readable form controls without changing their desktop layout. */
  input, select, textarea, button {
    -webkit-appearance: auto;
  }

  /* Never disable links/buttons merely because the device is touch. */
  a, button, summary {
    pointer-events: auto;
  }
}


/* =========================================================
   CBE NEXUS — REAL PHONE MODE
   Functional desktop feature set, compact responsive layout.
   Optimized for 320–430px screens without changing desktop.
   ========================================================= */
@media (max-width: 767px) {
  html, body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  * { box-sizing: border-box; }

  .top-strip {
    font-size: 9px !important;
    padding: 4px 6px !important;
    min-height: 24px !important;
    overflow: hidden;
    white-space: nowrap;
  }

  .main-nav {
    min-height: 52px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav .nav-brand,
  .main-nav .brand,
  .main-nav .logo {
    flex: 0 0 auto !important;
  }

  .nav-menu {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  .nav-menu .nav-link,
  .nav-menu .nav-dropdown summary {
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .dropdown-panel {
    max-width: calc(100vw - 12px) !important;
  }

  #dashboard.portal-dashboard {
    width: calc(100% - 8px) !important;
    max-width: none !important;
    margin: 7px auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr) !important;
    gap: 4px !important;
    align-items: start !important;
  }

  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-rightbar {
    min-width: 0 !important;
    width: 100% !important;
  }

  .portal-card,
  .portal-panel,
  .portal-main-card,
  .resource-card,
  .grade-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .portal-card {
    padding: 6px !important;
    margin-bottom: 5px !important;
    border-radius: 7px !important;
  }

  .portal-card-heading {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .portal-side-link,
  .portal-card a {
    font-size: 8px !important;
    line-height: 1.25 !important;
    padding: 5px 3px !important;
    min-height: 28px !important;
    overflow-wrap: anywhere;
  }

  #dashboard .grade-card {
    padding: 5px !important;
    margin-bottom: 4px !important;
  }

  #dashboard .grade-card h3,
  #dashboard .grade-card .grade-title {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  #dashboard .grade-card .subject-dropdown {
    min-height: 31px !important;
    padding: 5px 6px !important;
    font-size: 8px !important;
  }

  #dashboard .grade-card .subject-dropdown-label {
    font-size: 7px !important;
    margin-bottom: 3px !important;
  }

  .portal-main h1,
  .portal-main h2,
  .portal-main h3 {
    overflow-wrap: anywhere;
  }

  .portal-main h1 { font-size: 17px !important; }
  .portal-main h2 { font-size: 14px !important; }
  .portal-main h3 { font-size: 11px !important; }

  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .resource-grid .resource-card {
    padding: 6px !important;
  }

  .resource-card h3,
  .resource-card h4 {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .resource-card p {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  .actions,
  .resource-card .actions {
    gap: 3px !important;
    margin-top: 5px !important;
  }

  .actions .btn,
  .resource-card button,
  .resource-card a.btn {
    min-height: 30px !important;
    padding: 5px 6px !important;
    font-size: 8px !important;
    white-space: normal !important;
  }

  input, select, textarea {
    max-width: 100% !important;
    font-size: 12px !important;
  }

  button {
    min-height: 32px;
    font-size: 10px;
  }

  .viewer-modal {
    padding: 4px !important;
  }

  .viewer-dialog {
    width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
  }

  .viewer-head {
    padding: 7px 9px !important;
  }

  .viewer-head h2 {
    font-size: 12px !important;
  }

  .viewer-close {
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }

  .resource-preview-modal {
    padding: 4px !important;
  }

  .resource-preview-dialog {
    width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
  }

  img, video, iframe, canvas {
    max-width: 100%;
  }

  .footer,
  footer {
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  #dashboard.portal-dashboard {
    gap: 3px !important;
    width: calc(100% - 6px) !important;
  }

  .portal-card { padding: 5px !important; }
  .portal-side-link,
  .portal-card a { font-size: 7px !important; }
  #dashboard .grade-card .subject-dropdown { font-size: 7px !important; }
}

@media (min-width: 768px) {
  /* Desktop remains completely unchanged. */
}


/* Compact main navigation buttons - keeps existing structure unchanged */
@media (min-width:768px){.main-nav{gap:10px;min-width:0}.main-nav .brand{flex:0 0 auto}.main-nav .nav-menu{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:nowrap}.main-nav .nav-menu .nav-link,.main-nav .nav-menu .nav-dropdown>summary{min-height:36px;padding:6px 8px;border-radius:6px;font-size:11px;line-height:1.15;font-weight:800;white-space:nowrap;text-align:center}.main-nav .nav-menu .nav-link{flex:0 1 auto}}
@media (min-width:768px) and (max-width:1180px){.main-nav{gap:6px;padding-left:14px;padding-right:14px}.main-nav .brand{gap:7px}.main-nav .brand-mark{width:40px;height:40px;font-size:12px}.main-nav .brand strong{font-size:13px}.main-nav .brand small{font-size:10px}.main-nav .nav-menu{gap:3px}.main-nav .nav-menu .nav-link,.main-nav .nav-menu .nav-dropdown>summary{min-height:34px;padding:5px 6px;font-size:9.5px;letter-spacing:-.1px}}/* Education Hub homepage traffic section */
.education-hub-home{margin:2.5rem 0;padding:2rem;border-radius:24px;background:linear-gradient(135deg,#fffdf5,#f7efe2);border:1px solid rgba(120,82,45,.14);box-shadow:0 12px 32px rgba(73,48,27,.08)}
.education-hub-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-bottom:1.25rem}
.education-hub-heading h2{margin:.2rem 0 .5rem}.education-hub-heading p:not(.eyebrow){max-width:760px;margin:0}.education-hub-view-all{white-space:nowrap;text-decoration:none}
.education-hub-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.education-hub-card{background:#fff;border:1px solid rgba(120,82,45,.12);border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .18s ease,box-shadow .18s ease}.education-hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.education-hub-card-body{padding:1.2rem}.education-hub-card h3{margin:.55rem 0 .65rem;font-size:1.08rem;line-height:1.35}.education-hub-card h3 a{color:inherit;text-decoration:none}.education-hub-card h3 a:hover{text-decoration:underline}.education-hub-card p{margin:0 0 .9rem;color:#5f554c;line-height:1.55}.education-hub-card .read{font-weight:800;text-decoration:none}
@media(max-width:900px){.education-hub-home-grid{grid-template-columns:1fr 1fr}.education-hub-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.education-hub-home{padding:1.25rem}.education-hub-home-grid{grid-template-columns:1fr}.education-hub-view-all{width:100%;text-align:center}}


/* Compact dashboard cards: Holiday Tuition, Automated Assessment, About CBE Nexus, Privacy Policy */
#holidayTuition,
#quizCentre,
#about,
#privacy{
  padding:18px 24px!important;
  margin:8px auto!important;
  max-width:1120px!important;
  border-radius:10px!important;
  box-shadow:0 2px 8px rgba(18,52,71,.08)!important;
}
#holidayTuition{background:#d9f1ff!important;border:1px solid #b9e4fa!important}
#quizCentre{background:#ddf5e5!important;border:1px solid #bfe7cd!important}
#about{background:#ffe6cf!important;border:1px solid #f6c99e!important}
#privacy{background:#ead8c8!important;border:1px solid #d7bda6!important}
#holidayTuition .section-heading,
#quizCentre .section-heading,
#about .info-layout,
#privacy .info-layout{margin-bottom:10px!important;gap:10px!important}
#holidayTuition h2,
#quizCentre h2,
#about h2,
#privacy h2{font-size:18px!important;line-height:1.15!important;margin:2px 0 6px!important}
#holidayTuition h3,
#quizCentre h3,
#about h3,
#privacy h3{font-size:14px!important}
#holidayTuition p,
#quizCentre p,
#about p,
#privacy p,
#holidayTuition li,
#quizCentre li,
#about li,
#privacy li{font-size:11px!important;line-height:1.35!important}
#holidayTuition .eyebrow,
#quizCentre .eyebrow,
#about .eyebrow,
#privacy .eyebrow{font-size:8px!important;letter-spacing:.06em!important;margin-bottom:3px!important}
#holidayTuition .primary-button,
#quizCentre .primary-button,
#about .primary-button,
#privacy .primary-button{min-height:30px!important;padding:6px 10px!important;font-size:10px!important}

/* Make the main dashboard smaller and cleaner on desktop and mobile. */
#dashboard.portal-dashboard{max-width:1180px!important;margin:0 auto!important;gap:12px!important}
#dashboard.portal-dashboard > .portal-sidebar,
#dashboard.portal-dashboard > .portal-main,
#dashboard.portal-dashboard > .portal-rightbar{border-radius:9px!important}
@media(max-width:640px){
  #dashboard.portal-dashboard{grid-template-columns:29% 42% 29%!important;padding:5px!important;gap:3px!important}
  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-rightbar{min-height:430px!important}
  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-rightbar{padding:5px 3px!important}
  #dashboard.portal-dashboard > .portal-sidebar .portal-sidebar-title h2{font-size:10px!important}
  #dashboard.portal-dashboard > .portal-main .portal-welcome h1{font-size:12px!important}
  #dashboard.portal-dashboard > .portal-main .portal-welcome p{font-size:7px!important}
  #dashboard.portal-dashboard > .portal-rightbar .portal-card{padding:4px 3px!important}
  #dashboard.portal-dashboard > .portal-rightbar .portal-side-link{min-height:21px!important;font-size:5.5px!important;padding:3px 2px!important}
  #holidayTuition,#quizCentre,#about,#privacy{padding:12px 10px!important;margin:5px auto!important;border-radius:7px!important}
  #holidayTuition h2,#quizCentre h2,#about h2,#privacy h2{font-size:13px!important}
  #holidayTuition p,#quizCentre p,#about p,#privacy p,#holidayTuition li,#quizCentre li,#about li,#privacy li{font-size:8px!important}
}

/* FINAL COMPACT PANEL + DASHBOARD SIZE PASS */
#holidayTuition,
#quizCentre,
#about,
#privacy{
  width:calc(100% - 24px)!important;
  max-width:1040px!important;
  margin:10px auto!important;
  padding:14px 18px!important;
  border-radius:9px!important;
  box-sizing:border-box!important;
  box-shadow:0 3px 10px rgba(18,52,71,.08)!important;
}
#holidayTuition{background:#dff3ff!important;border:1px solid #b9e4f7!important}
#quizCentre{background:#e3f7ea!important;border:1px solid #bfe8ce!important}
#about{background:#ffead7!important;border:1px solid #f3cba7!important}
#privacy{background:#eadfd5!important;border:1px solid #d3c0ae!important}

#holidayTuition h2,#quizCentre h2,#about h2,#privacy h2{
  font-size:17px!important;
  line-height:1.2!important;
  margin:2px 0 5px!important;
}
#holidayTuition h3,#quizCentre h3,#about h3,#privacy h3{font-size:13px!important}
#holidayTuition p,#quizCentre p,#about p,#privacy p,
#holidayTuition li,#quizCentre li,#about li,#privacy li{
  font-size:10px!important;
  line-height:1.35!important;
}
#holidayTuition .eyebrow,#quizCentre .eyebrow,#about .eyebrow,#privacy .eyebrow{
  font-size:7px!important;
  margin-bottom:2px!important;
}
#holidayTuition .primary-button,#quizCentre .primary-button,
#about .primary-button,#privacy .primary-button,
#holidayTuition .danger-blink-button{
  min-height:28px!important;
  padding:5px 9px!important;
  font-size:9px!important;
  border-radius:6px!important;
}

#dashboard.portal-dashboard{
  width:calc(100% - 24px)!important;
  max-width:1140px!important;
  margin:8px auto!important;
  gap:9px!important;
}
#dashboard.portal-dashboard > .portal-sidebar,
#dashboard.portal-dashboard > .portal-main,
#dashboard.portal-dashboard > .portal-rightbar{
  border-radius:8px!important;
  box-shadow:0 2px 8px rgba(18,52,71,.07)!important;
}
#dashboard.portal-dashboard .portal-welcome h1{font-size:20px!important}
#dashboard.portal-dashboard .portal-welcome p{font-size:11px!important;line-height:1.4!important}
#dashboard.portal-dashboard .portal-category-grid{gap:7px!important}
#dashboard.portal-dashboard .portal-category-grid a{padding:8px!important}
#dashboard.portal-dashboard .portal-category-grid strong{font-size:10px!important}
#dashboard.portal-dashboard .portal-category-grid span{font-size:8px!important}
#dashboard.portal-dashboard .portal-side-link{font-size:9px!important;padding:7px 8px!important}
#dashboard.portal-dashboard .portal-card{padding:9px!important}

@media(max-width:640px){
  #dashboard.portal-dashboard{
    width:calc(100% - 10px)!important;
    grid-template-columns:27% 46% 27%!important;
    gap:3px!important;
    padding:3px!important;
  }
  #dashboard.portal-dashboard > .portal-sidebar,
  #dashboard.portal-dashboard > .portal-main,
  #dashboard.portal-dashboard > .portal-rightbar{
    min-height:390px!important;
    padding:4px 3px!important;
  }
  #dashboard.portal-dashboard .portal-welcome h1{font-size:11px!important}
  #dashboard.portal-dashboard .portal-welcome p{font-size:6.5px!important}
  #dashboard.portal-dashboard .portal-category-grid{gap:3px!important}
  #dashboard.portal-dashboard .portal-category-grid a{padding:4px!important}
  #dashboard.portal-dashboard .portal-category-grid strong{font-size:7px!important}
  #dashboard.portal-dashboard .portal-category-grid span{font-size:5.5px!important}
  #dashboard.portal-dashboard .portal-side-link{font-size:5.5px!important;padding:3px 2px!important;min-height:20px!important}
  #dashboard.portal-dashboard .portal-card{padding:4px 3px!important}
  #holidayTuition,#quizCentre,#about,#privacy{
    width:calc(100% - 10px)!important;
    margin:5px auto!important;
    padding:10px 9px!important;
  }
  #holidayTuition h2,#quizCentre h2,#about h2,#privacy h2{font-size:12px!important}
  #holidayTuition p,#quizCentre p,#about p,#privacy p,
  #holidayTuition li,#quizCentre li,#about li,#privacy li{font-size:7.5px!important}
  #holidayTuition .primary-button,#quizCentre .primary-button,
  #about .primary-button,#privacy .primary-button,
  #holidayTuition .danger-blink-button{min-height:25px!important;padding:4px 7px!important;font-size:8px!important}
}

/* COMPACT EDUCATION HUB HOME DASHBOARD */
#educationHubHome{padding:10px 14px!important;margin:7px auto!important;max-width:1040px!important}
#educationHubHome .education-hub-heading{margin-bottom:7px!important}
#educationHubHome .education-hub-heading h2{font-size:16px!important;line-height:1.2!important;margin:2px 0 4px!important}
#educationHubHome .education-hub-heading p{font-size:9px!important;line-height:1.35!important;margin:2px 0!important}
#educationHubHome .education-hub-heading .eyebrow{font-size:7px!important;margin-bottom:2px!important}
#educationHubHome .education-hub-view-all{font-size:8px!important;padding:5px 8px!important;min-height:26px!important}
#educationHubHome .education-hub-home-grid{gap:7px!important}
#educationHubHome .education-hub-card{padding:8px!important;border-radius:7px!important}
#educationHubHome .education-hub-card h3{font-size:11px!important;line-height:1.25!important;margin:3px 0!important}
#educationHubHome .education-hub-card p{font-size:8px!important;line-height:1.35!important;margin:3px 0!important}
#educationHubHome .education-hub-card a{font-size:8px!important}
@media(max-width:640px){
  #educationHubHome{width:calc(100% - 10px)!important;padding:7px 8px!important;margin:5px auto!important}
  #educationHubHome .education-hub-heading h2{font-size:11px!important}
  #educationHubHome .education-hub-heading p{font-size:7px!important}
  #educationHubHome .education-hub-card{padding:5px!important}
  #educationHubHome .education-hub-card h3{font-size:8px!important}
  #educationHubHome .education-hub-card p,#educationHubHome .education-hub-card a{font-size:6.5px!important}
}

/* Compact About Us section */
#about.info-band{padding-top:24px;padding-bottom:24px}
#about .info-layout{gap:16px}
#about .info-layout h2{font-size:1.45rem;line-height:1.2;margin-bottom:8px}
#about .info-layout p{font-size:.88rem;line-height:1.55;margin-bottom:10px}
#about .info-card{padding:14px}
#about .info-card h3{font-size:1rem;margin-bottom:7px}
#about .info-card p{font-size:.84rem;line-height:1.5}
#about .why-cbe-nexus h4{font-size:.92rem;margin-bottom:5px}
#about .why-cbe-nexus ul{font-size:.84rem;line-height:1.45;margin-top:6px}
@media(max-width:650px){
  #about.info-band{padding-top:20px;padding-bottom:20px}
  #about .info-layout h2{font-size:1.3rem}
  #about .info-layout p,#about .info-card p{font-size:.84rem}
}


/* FINAL FOOTER QUALITY + COMPACTNESS PASS — 2026-10-04 */
.site-footer{
  gap:12px!important;
  padding-top:16px!important;
  padding-bottom:16px!important;
  border-top:2px solid #c62828!important;
}
.footer-office-image-wrap{
  flex:0 0 180px!important;
  width:180px!important;
  max-width:22%!important;
  border:2px solid #c62828!important;
  border-radius:8px!important;
}
.footer-office-image{
  height:96px!important;
}
.footer-quality-badges{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.footer-quality-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1.15!important;
}
.footer-quality-badge strong{
  display:inline!important;
  color:#fff!important;
  font-size:10px!important;
}
.footer-quality-badge small{
  display:inline!important;
  color:#fff!important;
  font-size:8px!important;
  margin:0!important;
}
.footer-quality-badge .quality-tick{
  display:grid!important;
  place-items:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  border:2px solid #c62828!important;
  border-radius:50%!important;
  background:#2f7d57!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}
.footer-quality-badge .quality-gold{
  display:grid!important;
  place-items:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  border:2px solid #c62828!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#d4a017!important;
  font-size:12px!important;
  line-height:1!important;
}
.site-footer .footer-links{
  gap:5px!important;
}
.site-footer .footer-links a{
  border:2px solid rgba(255,255,255,.72)!important;
  border-radius:5px!important;
  padding:5px 7px!important;
  font-size:10px!important;
}
@media(max-width:760px){
  .site-footer{
    gap:8px!important;
    padding:12px 8px!important;
  }
  .footer-office-image-wrap{
    flex-basis:120px!important;
    width:120px!important;
    max-width:30%!important;
  }
  .footer-office-image{height:70px!important}
  .footer-quality-badges{gap:4px!important}
  .footer-quality-badge,
  .footer-quality-badge strong{font-size:8px!important}
  .footer-quality-badge small{font-size:6.5px!important}
  .footer-quality-badge .quality-tick,
  .footer-quality-badge .quality-gold{
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
    font-size:10px!important;
  }
  .site-footer .footer-links a{
    border-width:2px!important;
    padding:4px 5px!important;
    font-size:8px!important;
  }
}