/* The Quran Tuition — Premium UI & Responsive Repair v18.4
   Final cascade layer: typography, colour contrast, frontend menus,
   admin/portal left navigation, responsive tables and mobile polish. */

:root {
  --premium-font: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --premium-heading-font: Georgia, "Times New Roman", ui-serif, serif;
  --premium-radius: clamp(14px, 1.5vw, 22px);
  --premium-radius-sm: 12px;
  --premium-shadow-soft: 0 12px 34px rgba(5, 30, 34, .08);
  --premium-shadow: 0 24px 62px rgba(5, 30, 34, .14);
  --premium-header-height: 78px;
}

html {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.public-body,
body.admin-body,
body.portal-body {
  min-width: 0;
  color: var(--ink);
  background: var(--theme-body-bg);
  font-family: var(--premium-font);
  font-size: clamp(14px, .18vw + 13.5px, 16px);
  line-height: 1.65;
  letter-spacing: -.006em;
}

body :is(button, input, select, textarea, table) {
  font-family: var(--premium-font);
}

body[data-theme-font="classic"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--premium-heading-font);
}

body[data-theme-font="modern"] :is(h1, h2, h3, h4, h5, h6),
body[data-theme-font="soft"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--premium-font);
}

:is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-heading);
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}

p,
li,
td,
th,
label,
small,
span {
  overflow-wrap: anywhere;
}

img,
svg,
video,
canvas,
iframe {
  height: auto;
}

.shell {
  width: min(1220px, calc(100% - clamp(28px, 5vw, 64px)));
}

/* ---------- Unified premium surfaces ---------- */
.public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .content-card, .form-card, .auth-card, .contact-panel),
.admin-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form, .settings-nav),
.portal-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form) {
  color: var(--ink);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 98%, var(--gold)), var(--theme-surface));
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--gold));
  border-radius: var(--premium-radius);
  box-shadow: var(--premium-shadow-soft);
}

.public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card),
.admin-body :is(.admin-panel, .detail-card, .admin-stat-card),
.portal-body :is(.admin-panel, .detail-card, .admin-stat-card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {
  .public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card):hover,
  .admin-body :is(.admin-panel, .detail-card, .admin-stat-card):hover,
  .portal-body :is(.admin-panel, .detail-card, .admin-stat-card):hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
    box-shadow: var(--premium-shadow);
  }
}

:is(.muted, .form-hint, .field-help, .card-body p, .section-heading p, .admin-page-head p, .panel-head p) {
  color: var(--muted) !important;
}

.btn,
button.btn,
input[type="submit"] {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .005em;
}

.btn-gold {
  color: var(--theme-on-accent);
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 72%, #fff));
  border-color: color-mix(in srgb, var(--gold) 78%, #6d5411);
}

.btn-navy {
  color: var(--theme-on-primary);
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-color: color-mix(in srgb, var(--navy) 78%, #000);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 46px;
  padding: 11px 13px;
  color: var(--theme-input-text);
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-input-border);
  border-radius: 12px;
}

textarea { min-height: 120px; resize: vertical; }

/* ---------- Public header and working 3-dot menus ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--theme-header-text);
  background: color-mix(in srgb, var(--theme-header-bg) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-header-border) 82%, var(--gold));
  box-shadow: 0 12px 36px rgba(4, 27, 31, .08);
  backdrop-filter: blur(18px) saturate(125%);
}

.nav-wrap {
  position: relative;
  min-width: 0;
  height: var(--premium-header-height);
  gap: clamp(13px, 2vw, 28px);
}

.site-header .brand {
  min-width: 0;
  flex: 0 1 230px;
}

.site-header .brand > span { min-width: 0; }
.site-header .brand strong {
  color: var(--theme-header-text);
  font-size: clamp(.9rem, .25vw + .85rem, 1.04rem);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header .brand small {
  color: var(--theme-header-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  min-width: 0;
  gap: clamp(10px, 1.2vw, 20px);
}

.site-nav > .nav-item > a,
.site-header .text-link,
.site-header .nav-logout {
  color: var(--theme-header-text);
  font-size: .84rem;
  font-weight: 760;
}

.nav-actions {
  flex: 0 0 auto;
  gap: 10px;
}

.nav-logout {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle,
.header-more-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  color: var(--theme-header-text);
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--gold));
  border: 1px solid color-mix(in srgb, var(--theme-header-border) 82%, var(--gold));
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(5, 30, 34, .08);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.nav-toggle span,
.header-more-toggle span {
  display: block;
  transform: translateY(-2px);
}

.header-more {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.header-more-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1250;
  width: min(360px, calc(100vw - 28px));
  max-height: min(72vh, 610px);
  overflow-y: auto;
  padding: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--theme-surface) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--gold));
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(4, 27, 31, .23);
  backdrop-filter: blur(18px) saturate(125%);
}

.header-more-menu[hidden] { display: none !important; }

.header-more-heading {
  display: grid;
  gap: 1px;
  margin: -2px -2px 12px;
  padding: 12px 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-radius: 13px;
}
.header-more-heading span { font-weight: 900; }
.header-more-heading small { color: color-mix(in srgb, #fff 78%, var(--gold)); }

.header-more-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.header-more-links a {
  min-width: 0;
  padding: 9px 10px;
  color: var(--theme-heading);
  background: color-mix(in srgb, var(--ivory) 48%, var(--theme-surface));
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 760;
}
.header-more-links a:hover,
.header-more-links a:focus-visible {
  color: var(--theme-on-accent);
  background: color-mix(in srgb, var(--gold) 74%, #fff);
  border-color: var(--gold);
}
.header-more-links .header-more-child {
  padding-left: 18px;
  color: var(--muted);
  font-size: .74rem;
}
.header-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.header-more-actions form { margin: 0; }

.public-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(3, 22, 25, .5);
  border: 0;
  backdrop-filter: blur(3px);
}
.public-menu-backdrop[hidden] { display: none !important; }
.header-more,
.site-nav,
.nav-toggle { z-index: 1200; }

/* Premium frontend hero and section readability */
:is(.hero, .page-hero, .course-hero, .article-hero, .trial-page-hero, .premium-page-hero) {
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 31%),
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--navy-2) 72%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--navy) 94%, #000), var(--navy-2));
}

:is(.hero, .page-hero, .course-hero, .article-hero, .trial-page-hero, .premium-page-hero) :is(h1, h2, h3) {
  color: #fff;
}

:is(.hero, .page-hero, .course-hero, .article-hero, .trial-page-hero, .premium-page-hero) p:not(.eyebrow) {
  color: rgba(255,255,255,.84);
}

.hero-copy h1,
.page-hero h1,
.course-hero h1,
.article-hero h1 {
  font-size: clamp(2.15rem, 5.1vw, 4.9rem);
  letter-spacing: -.055em;
}

.section-heading h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }

/* ---------- Admin and portal left menu repair ---------- */
.admin-shell,
.portal-shell {
  --sidebar-current-width: var(--tqt-sidebar-width, 268px);
  display: grid !important;
  grid-template-columns: var(--sidebar-current-width) minmax(0, 1fr) !important;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--theme-body-bg);
}

.admin-shell.sidebar-collapsed,
.portal-shell.sidebar-collapsed {
  --sidebar-current-width: var(--tqt-sidebar-collapsed, 82px);
}

.admin-sidebar,
.portal-sidebar {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  min-width: 0;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--theme-sidebar-text);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--gold) 17%, transparent), transparent 290px),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-sidebar-bg) 94%, #000), var(--theme-sidebar-bg));
  border-right: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  box-shadow: 16px 0 42px rgba(4, 26, 30, .08);
}

.admin-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.admin-brand {
  min-height: 77px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.admin-brand > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.admin-brand > a :is(b, small) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-brand > a b { color: #fff; }
.admin-brand > a small { color: color-mix(in srgb, var(--theme-sidebar-text) 78%, transparent); }

.admin-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 42%, transparent) transparent;
}

.nav-group {
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 13px;
}
.nav-group.has-active,
.nav-group.is-open {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.07);
}

.nav-group-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  color: color-mix(in srgb, var(--theme-sidebar-text) 78%, var(--gold));
  background: transparent;
  border: 0;
  border-radius: 9px;
  text-align: left;
}
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible { background: rgba(255,255,255,.07); }
.nav-group-label {
  margin: 0;
  color: inherit;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav-group-chevron {
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.nav-group.is-open .nav-group-chevron { transform: rotate(180deg); }
.nav-group-links { display: grid; gap: 4px; }
.nav-group-links[hidden] { display: none !important; }

.admin-nav a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 39px;
  padding: 8px 10px;
  color: var(--theme-sidebar-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .79rem;
  font-weight: 680;
  line-height: 1.25;
}
.admin-nav a:hover,
.admin-nav a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.08);
}
.admin-nav a.active {
  color: var(--theme-sidebar-active-text) !important;
  background: linear-gradient(135deg, var(--theme-sidebar-active-bg), color-mix(in srgb, var(--theme-sidebar-active-bg) 72%, #fff)) !important;
  border-color: color-mix(in srgb, var(--theme-sidebar-active-bg) 80%, #fff) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.2) !important;
  font-weight: 850;
}

.sidebar-user {
  flex: 0 0 auto;
  margin: 10px 12px 13px;
  padding: 11px 12px;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}

.admin-topbar,
.portal-topbar {
  min-width: 0;
  min-height: 72px;
  padding: 10px var(--tqt-content-x);
  color: var(--ink);
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, var(--gold));
  box-shadow: 0 10px 30px rgba(5,30,34,.06);
  backdrop-filter: blur(16px) saturate(120%);
}

.sidebar-collapse,
.sidebar-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  padding: 0;
  color: var(--theme-heading);
  background: var(--theme-surface);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--gold));
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(5,30,34,.07);
}

.topbar-title { min-width: 0; }
.topbar-title span { color: var(--muted); }
.topbar-title strong {
  color: var(--theme-heading);
  font-size: clamp(.9rem, .35vw + .82rem, 1.1rem);
}
.topbar-actions { min-width: 0; }
.topbar-actions a,
.topbar-signout { color: var(--theme-heading); font-weight: 760; }

.admin-content,
.portal-content {
  min-width: 0;
  max-width: 100%;
  padding: clamp(18px, 3vw, 38px) var(--tqt-content-x) clamp(34px, 5vw, 64px) !important;
  overflow-x: clip;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--ivory) 34%, var(--theme-body-bg)), var(--theme-body-bg));
}

.admin-page-head {
  align-items: center;
  gap: 18px;
  color: var(--ink);
}
.admin-page-head h1 { margin-bottom: 7px; font-size: clamp(1.65rem, 3vw, 2.5rem); }

.admin-table-wrap,
.portal-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--premium-radius);
  box-shadow: var(--premium-shadow-soft);
  -webkit-overflow-scrolling: touch;
}

.admin-table,
.portal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-table th,
.portal-table th {
  color: var(--theme-heading);
  background: color-mix(in srgb, var(--ivory) 72%, var(--theme-surface));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.admin-table td,
.portal-table td {
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--line) 82%, transparent);
}

/* Collapsed desktop menu remains fully usable. */
.admin-shell.sidebar-collapsed .nav-group-toggle,
.portal-shell.sidebar-collapsed .nav-group-toggle { display: none; }
.admin-shell.sidebar-collapsed .nav-group-links[hidden],
.portal-shell.sidebar-collapsed .nav-group-links[hidden] { display: grid !important; }
.admin-shell.sidebar-collapsed .nav-group,
.portal-shell.sidebar-collapsed .nav-group {
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.admin-shell.sidebar-collapsed .admin-nav a,
.portal-shell.sidebar-collapsed .admin-nav a {
  min-height: 44px;
  padding: 8px;
  justify-content: center;
  font-size: 0;
}
.admin-shell.sidebar-collapsed .admin-nav a::before,
.portal-shell.sidebar-collapsed .admin-nav a::before {
  content: attr(data-short);
  font-size: .82rem;
  font-weight: 900;
}

/* ---------- Responsive repair ---------- */
@media (max-width: 1220px) and (min-width: 1081px) {
  .site-nav { gap: 9px; }
  .site-nav > .nav-item > a { font-size: .76rem; }
  .nav-actions .btn { padding-inline: 11px; }
}

@media (max-width: 1080px) {
  html.public-menu-open,
  html.public-menu-open body,
  html.public-nav-open,
  html.public-nav-open body { overflow: hidden; }

  .header-more { display: none; }
  .nav-toggle { display: grid !important; margin-left: auto; }
  .nav-actions { display: none !important; }

  .site-nav {
    position: fixed !important;
    inset: var(--public-header-offset, 78px) 0 0 auto !important;
    z-index: 1210 !important;
    width: min(390px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    height: calc(100dvh - var(--public-header-offset, 78px));
    max-height: none;
    display: block !important;
    padding: 18px;
    overflow-y: auto;
    color: var(--ink);
    background: color-mix(in srgb, var(--theme-surface) 98%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--line) 78%, var(--gold));
    box-shadow: -22px 0 70px rgba(4,27,31,.24);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(104%,0,0);
    transition: transform .23s ease, opacity .18s ease, visibility .18s ease;
  }
  .site-nav.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0,0,0);
  }
  .site-nav::before {
    content: "Navigation";
    display: block;
    margin: 0 6px 11px;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .site-nav .nav-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) 44px;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  }
  .site-nav .nav-item > a { padding: 13px 8px; color: var(--theme-heading); font-size: .9rem; }
  .nav-sub-toggle {
    width: 42px;
    height: 42px;
    color: var(--theme-heading);
    background: color-mix(in srgb, var(--ivory) 54%, var(--theme-surface));
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .nav-submenu {
    position: static !important;
    grid-column: 1 / -1;
    display: none;
    min-width: 0;
    margin: 0 0 10px;
    padding: 7px;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: color-mix(in srgb, var(--ivory) 62%, var(--theme-surface));
    border: 0;
    border-radius: 11px;
    box-shadow: none;
  }
  .nav-item:hover .nav-submenu { display: none; }
  .nav-item.submenu-open .nav-submenu { display: grid; }
  .mobile-nav-actions { display: grid; gap: 9px; margin-top: 16px; }
  .mobile-nav-actions :is(.btn, form) { width: 100%; }

  .hero-grid,
  .premium-hero-grid { grid-template-columns: 1fr !important; }
  .hero-showcase,
  .hero-card { max-width: 650px; }
}

@media (max-width: 920px) {
  html.admin-drawer-open,
  html.admin-drawer-open body { overflow: hidden; }

  .admin-shell,
  .portal-shell,
  .admin-shell.sidebar-collapsed,
  .portal-shell.sidebar-collapsed {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .admin-main,
  .admin-shell.sidebar-collapsed .admin-main,
  .portal-shell.sidebar-collapsed .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .admin-sidebar,
  .portal-sidebar,
  .admin-shell.sidebar-collapsed .admin-sidebar,
  .portal-shell.sidebar-collapsed .portal-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1400 !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translate3d(-105%,0,0) !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform .23s ease, opacity .18s ease, visibility .18s ease;
  }
  .admin-sidebar.open,
  .portal-sidebar.open {
    transform: translate3d(0,0,0) !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-backdrop { z-index: 1390 !important; }
  .sidebar-toggle { display: grid !important; }
  .sidebar-collapse { display: none !important; }
  .admin-brand button { display: grid !important; }

  .admin-shell.sidebar-collapsed :is(.admin-brand b, .admin-brand small, .nav-group-label, .admin-nav a span, .sidebar-user),
  .portal-shell.sidebar-collapsed :is(.admin-brand b, .admin-brand small, .nav-group-label, .admin-nav a span, .sidebar-user) { display: initial; }
  .admin-shell.sidebar-collapsed .nav-group-toggle,
  .portal-shell.sidebar-collapsed .nav-group-toggle { display: flex; }
  .admin-shell.sidebar-collapsed .nav-group-links[hidden],
  .portal-shell.sidebar-collapsed .nav-group-links[hidden] { display: none !important; }
  .admin-shell.sidebar-collapsed .admin-nav a,
  .portal-shell.sidebar-collapsed .admin-nav a {
    display: flex;
    justify-content: flex-start;
    min-height: 39px;
    padding: 8px 10px;
    font-size: .79rem;
  }
  .admin-shell.sidebar-collapsed .admin-nav a::before,
  .portal-shell.sidebar-collapsed .admin-nav a::before { content: none; }

  .admin-content,
  .portal-content { padding: 20px 15px 36px !important; }
  .admin-grid-2,
  .detail-grid,
  .permission-grid,
  .invoice-grid,
  .form-layout,
  .trial-layout,
  .faq-layout,
  .two-column,
  .split-callout { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  :root { --premium-header-height: 68px; }
  .shell { width: min(100% - 26px, 1220px); }
  .topbar { display: none; }
  .site-header .brand { flex-basis: auto; }
  .site-header .brand small { display: none; }
  .site-header .brand-logo { max-width: 132px; max-height: 40px; }

  .section { padding-block: clamp(44px, 11vw, 68px); }
  .hero-grid,
  .premium-hero-grid { min-height: auto !important; padding-block: 48px !important; }

  .card-grid,
  .feature-grid,
  .premium-feature-grid,
  .courses-grid,
  .teacher-grid,
  .testimonial-grid,
  .blog-grid,
  .pricing-grid,
  .method-grid,
  .stats-grid,
  .quick-actions,
  .admin-stats,
  .form-grid,
  .admin-form-grid,
  .slot-grid { grid-template-columns: 1fr !important; }

  .admin-topbar,
  .portal-topbar {
    min-height: 66px;
    padding: 9px 12px;
    gap: 8px;
  }
  .topbar-actions > a,
  .topbar-signout-label { display: none !important; }
  .topbar-title span { display: none; }
  .admin-page-head,
  .panel-head { display: grid !important; align-items: start; }
  .head-actions,
  .form-actions,
  .button-row { width: 100%; }
  .head-actions .btn,
  .form-actions .btn { flex: 1 1 145px; }

  /* Card-style mobile tables use JS-generated data-label attributes. */
  .admin-table-wrap,
  .portal-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  table.responsive-table {
    display: block;
    min-width: 0 !important;
    background: transparent;
  }
  table.responsive-table thead { display: none; }
  table.responsive-table tbody { display: grid; gap: 13px; }
  table.responsive-table tr {
    display: block;
    padding: 8px 13px;
    background: var(--theme-surface);
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--gold));
    border-radius: 15px;
    box-shadow: var(--premium-shadow-soft);
  }
  table.responsive-table td {
    display: grid;
    grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    min-height: 0;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    text-align: right;
  }
  table.responsive-table td:last-child { border-bottom: 0; }
  table.responsive-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
  }
  table.responsive-table td[colspan] {
    display: block;
    text-align: center;
  }
  table.responsive-table td[colspan]::before { content: none; }
  table.responsive-table .table-actions,
  table.responsive-table td .button-row { justify-content: flex-end; }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 22px, 1220px); }
  .nav-toggle,
  .header-more-toggle,
  .sidebar-toggle { width: 41px; height: 41px; flex-basis: 41px; }
  .site-nav { width: calc(100vw - 10px); max-width: calc(100vw - 10px); padding: 15px; }
  .hero-copy h1,
  .page-hero h1,
  .course-hero h1,
  .article-hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
  .hero-actions,
  .button-row,
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn,
  .button-row .btn,
  .form-actions .btn { width: 100%; }
  .admin-content,
  .portal-content { padding: 16px 11px 30px !important; }
  table.responsive-table td { grid-template-columns: 1fr; text-align: left; gap: 3px; }
  table.responsive-table .table-actions,
  table.responsive-table td .button-row { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The explicit backdrop replaces the legacy pseudo-element overlay. */
html.public-nav-open::after { content: none !important; display: none !important; }

@media (max-width: 920px) {
  .admin-sidebar.open,
  .portal-sidebar.open {
    opacity: 1 !important;
    background-color: var(--theme-sidebar-bg) !important;
  }
}