/* Shared first-level navigation and page shell for module hubs and detail pages. */
:root {
  --ce-page-max: 1180px;
  --ce-page-gutter: 32px;
  --ce-page-gutter-mobile: 16px;
}

/*
 * Every primary and secondary page uses the same outer grid.
 * Older pages mixed 1080 / 1100 / 1120 / 1180 / 1240px containers and
 * sometimes counted the 32px padding inside the max-width, which caused the
 * whole page to jump horizontally during navigation.
 */
.module-topbar-inner,
.module-nav-wrap,
.hub-wrap,
.wrap,
.topbar-inner,
.course-layout,
.enroll-bar-inner,
.foot,
header.top,
.layout,
.modnav .in,
.modfoot .in,
.info-below {
  width: min(var(--ce-page-max), calc(100% - var(--ce-page-gutter) - var(--ce-page-gutter)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.module-topbar {
  position: sticky; top: 0; z-index: 220;
  color: #0b0b0d; background: rgba(247,247,248,.94);
  border-bottom: 1px dashed #d7d7dc;
  backdrop-filter: blur(12px);
}
.module-topbar,
.module-topbar * { font-family: 'PingFang SC', 'Noto Sans SC', sans-serif !important; }
.module-topbar-inner {
  position: relative; min-height: 64px;
  display: flex; align-items: center;
}
.module-nav-wrap {
  margin: 0 auto;
}
.module-brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: #0b0b0d; font: 600 14px "JetBrains Mono", monospace;
  text-decoration: none;
}
.module-brand img { width: 30px; height: 30px; border-radius: 50%; }
.student-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; margin-left: auto; padding: 7px 14px;
  color: #fff; background: #3A34FF; border: 1px solid #3A34FF;
  border-radius: 3px; font: 600 12px/1.4 "JetBrains Mono", "Noto Sans SC", sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, background .18s ease;
}
.student-login:hover { transform: translateY(-1px); background: #2d27e6; border-color: #2d27e6; }
.module-primary-nav {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.module-primary-nav a {
  padding: 6px 13px; border: 1px solid transparent; border-radius: 100px;
  color: #626269; font: 13px/1.5 "JetBrains Mono", monospace;
  text-decoration: none; transition: color .18s, background .18s, border-color .18s;
}
.module-primary-nav a:hover { color: #0b0b0d; background: #e9e9ec; }
.module-primary-nav a.active {
  color: #fff; background: #3A34FF; border-color: #3A34FF;
}
.module-menu {
  display: none; width: 36px; height: 36px; margin-left: 8px; padding: 0;
  place-items: center; color: #0b0b0d; background: #fff;
  border: 1px solid #d7d7dc; border-radius: 50%; cursor: pointer;
}
@media (max-width: 900px) {
  .module-topbar-inner,
  .module-nav-wrap,
  .hub-wrap,
  .wrap,
  .topbar-inner,
  .course-layout,
  .enroll-bar-inner,
  .foot,
  header.top,
  .layout,
  .modnav .in,
  .modfoot .in,
  .info-below {
    width: min(var(--ce-page-max), calc(100% - var(--ce-page-gutter-mobile) - var(--ce-page-gutter-mobile)));
  }
  .module-primary-nav {
    display: none; left: auto; top: calc(100% + 1px); right: 0;
    width: min(280px,calc(100vw - 32px)); padding: 10px;
    transform: none; border: 1px solid #d7d7dc; border-radius: 0 0 3px 3px;
    background: #fff; box-shadow: 0 18px 44px rgba(11,11,13,.12);
  }
  .module-primary-nav.open { display: grid; }
  .module-primary-nav a { padding: 9px 11px; border-radius: 3px; }
  .module-menu { display: grid; }
}