:root {
  --site-header-bg: rgba(11, 16, 24, .94);
  --site-header-line: rgba(160, 176, 196, .2);
  --site-header-muted: #9aa7b8;
  --site-header-ink: #f5f7fb;
  --site-header-accent: #00d8ee;
}

.site-header,
.site-header *,
.site-header *::before,
.site-header *::after { box-sizing: border-box; }

.site-header {
  position: relative;
  z-index: 10;
  width: min(1480px, calc(100vw - 32px));
  max-width: 100%;
  min-height: 72px;
  margin: 0 auto 20px;
  padding: 0 max(20px, calc((100% - 3180px) / 2));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--site-header-line);
  border-radius: 0;
  background: #0b121c;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  /* clip prevents horizontal bleed without turning the header into a scroll container. */
  overflow-x: clip;
  overflow-y: visible;
}

.app-shell > .site-header {
  width: 100%;
}

.admin-shell > .site-header {
  width: min(1480px, calc(100vw - 32px));
  margin-left: 50%;
  transform: translateX(-50%);
}

.site-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.site-brand-logo { width: 58px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.site-brand-copy { min-width: 0; display: grid; gap: 3px; }
.site-brand-eyebrow { color: #6e839b; font-size: 10px; font-weight: 800; letter-spacing: .18em; white-space: nowrap; }
.site-brand-title { color: var(--site-header-ink); font-size: 15px; font-weight: 700; white-space: nowrap; }

.site-nav, .site-utilities { display: flex; align-items: center; gap: 4px; }
.site-nav { justify-content: flex-end; min-width: 0; }
.site-utilities { padding-left: 18px; border-left: 1px solid rgba(160, 176, 196, .34); }
.site-nav-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 14px;
  color: var(--site-header-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.site-nav-link:hover { color: var(--site-header-ink); background: rgba(0, 216, 238, .08); border-color: #204e5b; }
.site-nav-link.active { color: var(--site-header-accent); border-color: #204e5b; background: rgba(0, 216, 238, .08); }
.site-nav-link.site-workspace-tab {
  background: linear-gradient(180deg, var(--site-header-accent) 0%, #00a9c2 100%);
  border-color: rgba(255, 255, 255, .2);
  color: #031411;
  font-weight: 800;
}
.site-nav-link.site-workspace-tab:hover, .site-nav-link.site-workspace-tab.active {
  background: linear-gradient(180deg, #2ae0f2 0%, #00a9c2 100%);
  border-color: rgba(255, 255, 255, .28);
  color: #031411;
}
.site-settings-tab { margin-left: 0; border-color: #203341; border-radius: 999px; color: #d7e9f4; }
.site-settings-tab.active { color: var(--site-header-accent); background: rgba(0, 216, 238, .1); }
.site-user-icon { display: inline-grid; width: 19px; height: 19px; place-items: center; margin-right: 7px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 1; }
.site-notification-button {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 0;
  color: #c8d8e6;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.site-notification-button:hover { color: var(--site-header-ink); border-color: #204e5b; background: rgba(0, 216, 238, .08); }
.site-notification-button:focus-visible,
.site-notification-panel button:focus-visible { outline: 2px solid var(--site-header-accent); outline-offset: 2px; }
.site-notification-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-notification-badge {
  position: absolute;
  top: -3px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  color: #07141a;
  background: rgba(0, 216, 238, .72);
  box-shadow: 0 3px 10px rgba(0, 216, 238, .2);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.site-notification-badge[hidden] { display: none !important; }
.site-notification-panel {
  box-sizing: border-box;
  position: fixed;
  z-index: 1000;
  top: 78px;
  right: max(16px, calc((100vw - 1480px) / 2));
  width: min(390px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid rgba(153, 169, 187, .26);
  border-radius: 12px;
  color: var(--site-header-ink);
  background: #202327;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .48);
}
.site-notification-panel[hidden] { display: none; }
.site-notification-panel-head,
.site-notification-item-head { display: flex; align-items: center; }
.site-notification-panel-head { justify-content: space-between; gap: 12px; padding: 14px 16px 13px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-notification-panel-title h2 { margin: 0; color: #f2f5f7; font-size: 14px; font-weight: 800; }
.site-notification-panel-title p { margin: 4px 0 0; color: #aab1b8; font-size: 11px; }
.site-notification-panel button { font: inherit; cursor: pointer; }
.site-notification-close-button { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(197, 209, 220, .24); border-radius: 50%; padding: 0; color: #d5dce3; background: rgba(255, 255, 255, .03); font-size: 21px; font-weight: 300; line-height: 1; }
.site-notification-close-button:hover { border-color: rgba(0, 216, 238, .7); color: #fff; background: rgba(0, 216, 238, .12); }
.site-notification-list { max-height: calc(min(560px, 100vh - 96px) - 76px); overflow: auto; overscroll-behavior: contain; }
.site-notification-item { position: relative; padding: 15px 16px 15px 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-notification-item:last-child { border-bottom: 0; }
.site-notification-item::before { position: absolute; top: 21px; left: 16px; width: 8px; height: 8px; border-radius: 50%; content: ""; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.site-notification-item.is-unread::before { background: #ff6674; box-shadow: 0 0 0 3px rgba(255, 102, 116, .12); }
.site-notification-item.is-read::before { background: #16c592; box-shadow: 0 0 0 3px rgba(22, 197, 146, .12); }
.site-notification-item-head { gap: 10px; }
.site-notification-item h3 { min-width: 0; margin: 0; color: #f2f4f6; font-size: 14px; font-weight: 650; line-height: 1.5; }
.site-notification-item p { margin: 5px 0 7px; color: #c2c8ce; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.site-notification-item time { display: block; color: #a4aeb7; font-size: 11px; line-height: 1.45; }
.site-notification-empty { margin: 0; padding: 32px 16px; color: #aab2ba; text-align: center; font-size: 13px; }
.site-utility-button { display: none; }
.site-header .course-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.site-header .course-progress span { display: block; width: 0; height: 100%; background: var(--site-header-accent); transition: width .24s ease; }

@media (max-width: 980px) {
  .site-header { width: min(calc(100% - 20px), 1480px); min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand utilities" "nav nav"; gap: 8px 14px; padding: 12px 16px; }
  .admin-shell > .site-header { width: min(100%, calc(100vw - 20px)); }
  .site-brand { grid-area: brand; max-width: none; overflow: hidden; }
  .site-brand-copy { overflow: hidden; }
  .site-nav { grid-area: nav; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .site-nav { grid-column: 1 / -1; }
  .site-utilities { grid-area: utilities; padding-left: 0; border-left: 0; }
  .site-utilities { margin-left: auto; }
}

@media (max-width: 560px) {
  .site-header { min-height: 66px; margin-bottom: 14px; padding: 9px 10px; }
  .site-notification-panel { left: 16px; right: 16px; width: auto; }
  .site-brand-logo { width: 52px; height: 38px; }
  .site-brand-eyebrow { display: none; }
  .site-brand-title { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
  .site-header .site-brand { max-width: none; }
  .site-header .site-utilities { min-width: 0; }
  .site-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .site-nav-link { min-height: 40px; min-width: 0; overflow: hidden; padding: 0 4px; font-size: 11px; text-overflow: ellipsis; }
  .site-settings-tab { padding: 0 9px; }
  .site-notification-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .site-notification-badge { top: -4px; right: -7px; }
  .site-user-icon { margin-right: 5px; }
  .site-utility-button { width: 25px; height: 25px; min-height: 25px; }
}

@supports not (grid-template-columns: repeat(4, minmax(0, 1fr))) {
  .site-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .site-header { padding: 8px; gap: 6px 10px; }
  .site-brand { gap: 8px; }
  .site-brand-logo { width: 44px; height: 34px; }
  .site-brand-title { max-width: 104px; font-size: 11px; }
  .site-nav { gap: 4px; }
  .site-nav-link { min-height: 36px; padding: 0 2px; font-size: 10px; }
  .site-settings-tab { padding: 0 7px; font-size: 11px; }
  .site-notification-button { width: 31px; min-width: 31px; height: 31px; min-height: 31px; }
  .site-user-icon { width: 17px; height: 17px; margin-right: 4px; font-size: 10px; }
}