/* Шапка в стиле главной (/next) для страниц нового дизайна (/v2): та же разметка и поведение, что на /next.
   Цвета заданы на самой шапке, чтобы не зависеть от переменных страницы. Правила ниже — копия шапки из next.css */
.x-head { --ink: #0E0E10; --acid: #D4FF3A; --white: #FFFFFF; --raise: #F2F2F4; --bg: #FFFFFF; --fg: #0E0E10; --fg-2: #4A4A55;
  --display: 'Dela Gothic One', 'Arial Black', sans-serif; --body: 'Onest', system-ui, sans-serif;
  --spring: cubic-bezier(.2, .9, .3, 1.35); --out: cubic-bezier(.2, .8, .2, 1); font: 400 17px/1.55 var(--body); color: var(--fg); }
html[data-theme="dark"] .x-head { --raise: #222229; --bg: #0E0E10; --fg: #FFFFFF; --fg-2: #D6D4DE; }
.x-head :where(a) { color: inherit; text-decoration: none; }  /* без веса: цвет кнопок-ссылок задают их собственные классы */
.x-head .x-acts > * { flex: none; white-space: nowrap; }
.x-head p { margin: 0; }
/* .x-btn в стилях приложения — кнопка-крестик 32×32: внутри шапки снимаем её размеры */
.x-head .x-btn { width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px/1 var(--body); white-space: nowrap; transition: transform .2s var(--spring), background-color .2s; }
.x-head .x-btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.x-head .x-btn-acid { background: var(--acid); color: var(--ink); }
.x-head .x-btn-ghost { background: var(--raise); color: var(--fg); }
.x-head { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.x-logo { font: 400 24px/1 var(--display); letter-spacing: -.01em; }
.x-logo span { color: var(--acid); }
.x-head .x-logo { flex: none; padding: 11px 16px; border-radius: 999px; background: var(--ink); color: var(--white); }
.x-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 5px; border-radius: 999px; background: var(--ink); color: var(--white); }
.x-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: none; color: inherit;
  font: 600 15px/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.x-nav-btn i { font-style: normal; font-size: 11px; opacity: .7; transition: transform .25s var(--out); }
.x-nav-btn:hover, .x-nav-btn[aria-expanded="true"] { background: var(--white); color: var(--ink); }
.x-nav-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.x-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.x-head .x-cta { padding: 14px 20px; box-shadow: 0 0 0 2px var(--ink); } /* обводка — чтобы кнопка читалась на кислотном подвале */
.x-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white); font: 600 15px/1 var(--body); cursor: pointer; transition: transform .25s var(--spring), background-color .2s; }
.x-icon:hover { transform: translateY(-2px); }
.x-phone span { color: var(--acid); font-size: 17px; }
.x-theme { width: 48px; padding: 0; font-size: 19px; }
.x-theme:hover { transform: rotate(-20deg); }
.x-user { padding: 0 16px; }
.x-user.is-in { width: 48px; padding: 0; background: var(--acid); color: var(--ink); font-family: var(--display); font-size: 18px; background-size: cover; background-position: center; }
.x-burger { display: none; width: 48px; padding: 0; font-size: 20px; }

/* выпадающие меню */
.x-dd { position: relative; }
.x-menu { position: absolute; left: 0; top: calc(100% + 12px); min-width: 300px; padding: 8px; border-radius: 22px; background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 60px -24px rgba(14, 14, 16, .45), 0 0 0 1px rgba(14, 14, 16, .06);
  transform-origin: 20% 0; animation: x-menu-in .22s var(--out); }
.x-menu[hidden] { display: none; }
@keyframes x-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.x-menu > a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; transition: background-color .15s; }
.x-menu > a:hover, .x-menu > a:focus-visible { background: var(--raise); }
.x-menu b { font-weight: 700; font-size: 15px; }
.x-menu small { color: var(--fg-2); font-size: 13px; }
/* «Модули»: слева экзамен, справа курсы этого экзамена из каталога */
.x-mega { width: 560px; display: grid; grid-template-columns: 170px 1fr; grid-template-rows: 1fr auto; gap: 6px; padding: 10px; }
.x-mega-tabs { display: flex; flex-direction: column; gap: 4px; grid-row: 1 / 3; }
.x-mega-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-radius: 14px; background: none; color: var(--fg);
  font: 400 20px/1 var(--display); cursor: pointer; text-align: left; transition: background-color .15s; }
.x-mega-tabs small { font: 600 12px/1.3 var(--body); color: var(--fg-2); }
.x-mega-tabs button:hover { background: var(--raise); }
.x-mega-tabs button.is-on { background: var(--ink); color: var(--white); }
.x-mega-tabs button.is-on small { color: #C9C7D1; }
.x-mega-list { display: flex; flex-direction: column; gap: 2px; min-height: 150px; }
.x-mega-list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 14px; transition: background-color .15s; }
.x-mega-list a:hover { background: var(--raise); }
.x-mega-empty { padding: 12px 14px; color: var(--fg-2); font-size: 15px; }
.x-mega-all { align-self: end; justify-self: start; padding: 10px 14px; border-radius: 999px; font-weight: 700; background: var(--acid); color: var(--ink); }

/* мобильная шторка */
.x-drawer { position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); max-height: calc(100svh - 90px); overflow: auto; padding: 14px; border-radius: 24px;
  background: var(--bg); color: var(--fg); display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 60px -24px rgba(14, 14, 16, .5), 0 0 0 1px rgba(14, 14, 16, .06);
  animation: x-menu-in .22s var(--out); }
.x-drawer[hidden] { display: none; }
.x-drawer > a:not(.x-btn) { padding: 12px 12px; border-radius: 12px; font-weight: 600; }
.x-drawer > a:not(.x-btn):hover { background: var(--raise); }
.x-drawer-t { margin: 12px 12px 4px; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.x-drawer .x-btn { margin-top: 8px; }
/* ссылка «оставь заявку» внутри пустого списка — обычная строка, а не пункт меню */
.x-mega-empty a { display: inline; padding: 0; border-radius: 0; text-decoration: underline; }
@media (max-width: 1360px) { .x-nav { display: none; } .x-burger { display: inline-flex; } .x-acts { margin-left: auto; } }
@media (max-width: 640px) {
  .x-head { padding: 12px 12px; gap: 8px; }
  .x-phone, .x-head .x-cta { display: none; }
  .x-icon { height: 44px; min-width: 44px; }
  .x-theme, .x-burger, .x-user.is-in { width: 44px; }
}
@media (max-width: 380px) { .x-head .x-logo { font-size: 20px; padding: 10px 13px; } }
/* в приложении шапка не поверх первого экрана, а своей полосой сверху; в кабинете её нет — там своя */
html.v2 #site-header { display: none !important; }
html.v2 .x-head { position: sticky; top: 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
html.v2[data-theme="dark"] .x-head { background: rgba(14, 14, 16, .92); }
html.v2 body.is-lms-mode .x-head { display: none; }