/* Шапка всех страниц хаба — в стиле «Git: командная работа»: тёмная полоса 56 px, слева «в хаб» и логотип раздела,
   затем вкладки-разделы, справа значки (мессенджер, звук, уведомления) и меню под именем.
   Логотип и прогресс квеста остаются в стиле самого квеста (их правила — в app.css квеста), остальное — здесь.
   Классы: header.kh, .kh-home, .kh-tabs (кнопки/ссылки, .active), .kh-count, .kh-spacer, .kh-icon, .kh-btn, .kh-me. */
.kh {
  --kh-bg: #010409; --kh-panel: #161b22; --kh-hover: #21262d; --kh-line: #30363d; --kh-line2: #3d444d;
  --kh-text: #e6edf3; --kh-dim: #8b949e; --kh-accent: #f78166; --kh-blue: #1f6feb;
  display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: nowrap;
  min-height: 56px !important; padding: 6px 20px !important; box-sizing: border-box;
  background: var(--kh-bg) !important; border: 0 !important; border-bottom: 1px solid var(--kh-line) !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; color: var(--kh-text) !important;
  font: 14px/1.5 Inter, system-ui, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal; text-transform: none;
  position: sticky; top: 0; z-index: 40;
}
.kh > * { flex-shrink: 0; }
.kh-spacer { flex: 1 1 auto !important; min-width: 0; }

/* «в хаб» */
.kh .kh-home { display: inline-grid !important; place-items: center; width: 30px; height: 30px; min-width: 0; padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--kh-line2) !important; border-radius: 7px !important; background: var(--kh-hover) !important; color: var(--kh-text) !important;
  font-size: 16px; line-height: 1; text-decoration: none; box-shadow: none !important; }
.kh .kh-home:hover { border-color: var(--kh-dim) !important; background: var(--kh-line) !important; }
.kh .kh-home .ic-home { display: block; }

/* вкладки-разделы */
.kh-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.kh-tabs > button, .kh-tabs > a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 7px;
  background: none; color: var(--kh-dim); font: 600 14px/1.2 Inter, system-ui, "Segoe UI", sans-serif; letter-spacing: normal; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.kh-tabs > button:hover, .kh-tabs > a:hover { background: var(--kh-panel); color: var(--kh-text); }
.kh-tabs > .active { background: var(--kh-hover); color: var(--kh-text); box-shadow: inset 0 -2px 0 var(--kh-accent); }
.kh-tabs > .new::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--kh-accent); }
.kh-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: rgba(110, 118, 129, .4); color: var(--kh-text); font-size: 12px; font-weight: 600; text-align: center; }
.kh-count:empty { display: none; }

/* значки справа и простые кнопки */
.kh .kh-icon { position: relative; display: inline-grid !important; place-items: center; width: 34px; height: 34px; padding: 0 !important; margin: 0;
  border: 0 !important; border-radius: 6px !important; background: none !important; color: var(--kh-text) !important; font-size: 18px; line-height: 1;
  text-decoration: none; cursor: pointer; box-shadow: none !important; }
.kh .kh-icon:hover { background: var(--kh-hover) !important; }
.kh .kc-badge { top: -2px; right: -4px; }
.kh .kh-btn { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; border: 1px solid var(--kh-line2) !important;
  border-radius: 7px !important; background: var(--kh-hover) !important; color: var(--kh-text) !important; font: 600 13px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: normal !important; text-transform: none !important; text-decoration: none; white-space: nowrap; box-shadow: none !important; }
.kh .kh-btn:hover { border-color: var(--kh-dim) !important; background: var(--kh-line) !important; }
.kh .kh-dim { color: var(--kh-dim); font-size: 13px; white-space: nowrap; }
.kh .kh-dim b { color: var(--kh-text); }

/* меню под именем (details): кнопка-имя и выпадающий список */
.kh .kh-me { position: relative; flex: none; }
.kh .kh-me > summary { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 8px 4px 10px !important; border: 1px solid transparent !important;
  border-radius: 8px !important; background: none !important; color: var(--kh-text) !important; font: 600 14px/1.5 Inter, system-ui, sans-serif !important;
  letter-spacing: normal; text-transform: none; list-style: none; cursor: pointer; white-space: nowrap; box-shadow: none !important; max-width: 260px; }
.kh .kh-me > summary::-webkit-details-marker { display: none; }
.kh .kh-me > summary:hover, .kh .kh-me[open] > summary { border-color: var(--kh-line2) !important; background: var(--kh-hover) !important; }
.kh .kh-me > summary .pts, .kh .kh-me > summary .my-progress { color: #e3b341; font-weight: 700; }
.kh .kh-me-list, .kh .kh-me > .me-list, .kh .kh-me > .hb-menu-list { position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column;
  min-width: 260px; padding: 6px; border: 1px solid var(--kh-line) !important; border-radius: 10px !important; background: var(--kh-panel) !important;
  color: var(--kh-text) !important; box-shadow: 0 16px 40px rgba(1, 4, 9, .8) !important; font: 500 13.5px/1.4 Inter, system-ui, sans-serif !important; }
.kh .kh-me-list > a, .kh .kh-me-list > button, .kh .kh-me > .me-list > a, .kh .kh-me > .me-list > button, .kh .kh-me > .hb-menu-list > button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--kh-text); font: inherit; text-align: left;
  text-decoration: none; letter-spacing: normal; text-transform: none; cursor: pointer; white-space: nowrap; }
.kh .kh-me-list > a:hover, .kh .kh-me-list > button:hover, .kh .kh-me > .me-list > a:hover, .kh .kh-me > .me-list > button:hover, .kh .kh-me > .hb-menu-list > button:hover { background: var(--kh-hover); color: var(--kh-text); }
.kh .kh-me .me-head { border-bottom-color: var(--kh-line) !important; }
.kh .kh-me .me-head span { color: var(--kh-dim) !important; }

@media (max-width: 1279px) { .kh { gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; } .kh-tabs > button, .kh-tabs > a { padding: 7px 9px; } }
@media (max-width: 999px) { .kh { flex-wrap: wrap; row-gap: 6px; } .kh-tabs { order: 5; width: 100%; overflow-x: auto; } }

/* логотипы разделов — своим шрифтом (шапка задаёт свой только остальному) */
.kh .hb-brand { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; text-decoration: none; }
.kh .hb-user { display: flex; align-items: center; gap: 8px; }
.kh .hb-tbar { margin: 0; }
.kh .stats { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; border: 0; background: none; color: var(--kh-dim) !important; font-size: 13px; }
.kh .stats b { color: var(--kh-text) !important; font-size: 16px; }
.kh .hb-av { width: auto; height: auto; border: 0; background: none; font-size: 16px; }
.kh .hb-caret { color: var(--kh-dim); font-size: 11px; }
@media (max-width: 1279px) { .kh-tabs .lbl { display: none; } }

/* логотип хаба «КГУ coding»: КГУ — белым, coding — зелёным моноширинным, мигающий курсор */
.kh-logo { display: inline-flex; align-items: baseline; gap: 7px; font: 800 19px/1 "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; }
.kh-logo b { color: #e6edf3; font-weight: 800; }
.kh-logo i { color: #3dff7a; font-style: normal; font-weight: 700; text-shadow: 0 0 10px rgba(61, 255, 122, .45); }
.kh-cursor { margin-left: -5px; color: #3dff7a; animation: kh-blink 1.1s steps(1) infinite; }
@keyframes kh-blink { 50% { opacity: 0; } }
a:hover > .kh-logo b { color: #fff; }

/* в шапке нет счётчика «онлайн» и точки подключения (элементы остаются — их обновляют скрипты квеста) */
.kh > .online, .kh > .conn, .kh .stats > span:has(#b-online) { display: none !important; }
/* у имени — без счёта заданий: он на кнопке «Задания» (в меню под именем остаётся) */
.kh .me .my-progress { display: none !important; }