/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 2: оболонка сайту (шапка, палітра, нижня панель,
   футер, службові стани). Токени й базові компоненти — public/css/vn.css
   (етап 1). Усе тут — під html.vn:not([data-section="admin"]), той самий
   принцип, що в vn.css (адмінка поза скоупом, docs/redesign/ROUTES.md).

   Нова шапка (views/_nav_vn.erb) рендериться ЗАМІСТЬ _nav_sidebar+_nav_topbar
   (views/layout.erb, _vn_shell) — не поруч із ними, тож тут немає правил, що
   ховають старий сайдбар/топбар: їх просто немає в DOM на .vn-сторінках.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Шапка: .vn-topbar ─────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vn-topbar {
  position: sticky; top: 14px; z-index: 40; padding: 0 20px; font-family: var(--vn-font-body), sans-serif;
}
html.vn:not([data-section="admin"]) .vn-topbar__bar {
  position: relative; max-width: 1240px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 20px; background: rgba(20, 18, 32, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--vn-radius-pill); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
html.vn:not([data-section="admin"]) .vn-logo {
  margin-right: 14px; font-family: var(--vn-font-display), sans-serif; font-weight: 900; font-size: 18px;
  text-decoration: none; background: var(--vn-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: none;
}
html.vn:not([data-section="admin"]) .vn-logo span { color: transparent; }

html.vn:not([data-section="admin"]) .vn-links { display: flex; align-items: center; gap: 2px; min-width: 0; }
html.vn:not([data-section="admin"]) .vn-link {
  height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--vn-radius-pill);
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--vn-text-2); background: transparent; white-space: nowrap;
  transition: background .2s, color .2s; cursor: pointer;
}
html.vn:not([data-section="admin"]) .vn-link:hover { background: rgba(255, 255, 255, .06); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .vn-link[aria-current="page"],
html.vn:not([data-section="admin"]) .vn-link.nav-link--active,
html.vn:not([data-section="admin"]) .vn-grp__h.is-on {
  color: var(--vn-pink-soft); background: rgba(255, 79, 163, .1);
}
html.vn:not([data-section="admin"]) .vn-link__count {
  font-family: var(--vn-font-mono); font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: var(--vn-radius-pill);
  background: rgba(255, 159, 69, .18); color: var(--vn-orange);
}
html.vn:not([data-section="admin"]) .vn-grp { position: relative; }
html.vn:not([data-section="admin"]) .vn-grp__chev { transition: transform .3s; }
html.vn:not([data-section="admin"]) .vn-grp__h[aria-expanded="true"] .vn-grp__chev { transform: rotate(180deg); }

/* ─── Мега-панель груп ──────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vn-mega {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 45; min-width: 320px; max-width: 560px;
  padding: 14px; border-radius: 22px; background: rgba(20, 18, 32, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 79, 163, .28); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: bPop .2s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .vn-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
html.vn:not([data-section="admin"]) .vn-mega__it {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none;
  color: var(--vn-text); background: rgba(255, 255, 255, .025); font-size: 14px; font-weight: 700; transition: background .2s;
}
html.vn:not([data-section="admin"]) .vn-mega__it:hover { background: rgba(255, 255, 255, .07); }
html.vn:not([data-section="admin"]) .vn-mega__it.is-on { background: rgba(255, 79, 163, .12); }
html.vn:not([data-section="admin"]) .vn-mega__ic { flex: none; width: 20px; height: 20px; color: var(--vn-pink); }

/* ─── Правий блок: пошук, дзвінок, профіль/мова, ☰ ─────────────────────── */
html.vn:not([data-section="admin"]) .vn-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
html.vn:not([data-section="admin"]) .vn-icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); color: var(--vn-text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; flex: none;
}
html.vn:not([data-section="admin"]) .vn-icon-btn:hover { background: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .vn-search-btn { width: auto; height: 40px; padding: 0 12px; border-radius: var(--vn-radius-pill); gap: 8px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vn-kbd {
  font-family: var(--vn-font-mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .16); color: var(--vn-muted);
}
html.vn:not([data-section="admin"]) .vn-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--vn-radius-pill); background: var(--vn-pink); color: var(--vn-ink); font-family: var(--vn-font-mono);
  font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--vn-bg);
}
html.vn:not([data-section="admin"]) .nav-menu__item .vn-badge,
html.vn:not([data-section="admin"]) .vn-drawer__item .vn-badge { position: static; border: 0; margin-left: auto; }

html.vn:not([data-section="admin"]) .vn-btn {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--vn-radius-pill);
  background: var(--vn-grad-brand); color: var(--vn-ink); font-weight: 800; font-size: 13.5px; text-decoration: none; flex: none;
}
html.vn:not([data-section="admin"]) .vn-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: var(--vn-text); }

/* Профіль (кнопка в шапці) — панель використовує ту саму .nav-menu__panel-поведінку (public/js/nav.js) */
html.vn:not([data-section="admin"]) .vn-me {
  height: 40px; padding: 0 6px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--vn-radius-pill); background: rgba(255, 255, 255, .06); color: var(--vn-text); cursor: pointer; flex: none;
}
html.vn:not([data-section="admin"]) .vn-me__name { font-weight: 800; font-size: 13px; padding-right: 6px; }
html.vn:not([data-section="admin"]) .vn-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
html.vn:not([data-section="admin"]) .vn-ava--letter {
  display: grid; place-items: center; background: conic-gradient(from 200deg, var(--vn-cyan), var(--vn-pink), var(--vn-orange), var(--vn-cyan));
  color: var(--vn-ink); font-family: var(--vn-font-display); font-weight: 900; font-size: 13px;
}
html.vn:not([data-section="admin"]) .vn-ava--lg { width: 44px; height: 44px; font-size: 16px; }

html.vn:not([data-section="admin"]) .vn-menu__panel {
  position: absolute; right: 0; top: 48px; z-index: 46; width: 260px; padding: 6px; border-radius: 18px;
  background: #1A1428; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 2px; animation: bPop .2s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .vn-menu__panel--sm { width: 180px; }
html.vn:not([data-section="admin"]) .vn-menu__head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .vn-menu__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.vn:not([data-section="admin"]) .vn-role { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--vn-radius-pill); background: rgba(255, 255, 255, .08); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vn-role--owner,
html.vn:not([data-section="admin"]) .vn-role--admin { background: rgba(255, 79, 163, .16); color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .vn-role--moderator { background: rgba(46, 230, 214, .14); color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .vn-menu__item {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; text-decoration: none;
  color: var(--vn-text); font-weight: 700; font-size: 13.5px;
}
html.vn:not([data-section="admin"]) .vn-menu__item:hover { background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .vn-menu__item--danger { color: var(--vn-red); }
html.vn:not([data-section="admin"]) .vn-menu__sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .vn-lang { display: flex; gap: 4px; padding: 4px 6px; }
html.vn:not([data-section="admin"]) .vn-lang__btn {
  flex: 1; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  color: var(--vn-muted); font-family: var(--vn-font-mono); font-size: 12px; font-weight: 800; text-decoration: none;
}
html.vn:not([data-section="admin"]) .vn-lang__btn:hover { background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .vn-lang__btn.lang-btn--active { background: rgba(255, 79, 163, .14); color: var(--vn-pink-soft); }

html.vn:not([data-section="admin"]) .vn-burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); align-items: center; justify-content: center; flex: none; }

/* ─── ≤900px: ☰ замість лінків і груп ───────────────────────────────────── */
@media (max-width: 900px) {
  html.vn:not([data-section="admin"]) .vn-links { display: none; }
  html.vn:not([data-section="admin"]) .vn-burger { display: inline-flex; }
}

/* ─── Шторка ≤900px: .vn-drawer ─────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vn-drawer { position: fixed; inset: 0; z-index: 90; }
html.vn:not([data-section="admin"]) .vn-drawer__bg { position: absolute; inset: 0; background: rgba(6, 5, 12, .62); backdrop-filter: blur(6px); }
html.vn:not([data-section="admin"]) .vn-drawer__panel {
  position: absolute; left: 12px; right: 12px; top: 68px; max-height: 80vh; overflow-y: auto; padding: 12px;
  border-radius: 26px; background: rgba(20, 18, 32, .97); border: 1px solid rgba(255, 79, 163, .3); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; font-family: var(--vn-font-body), sans-serif;
}
html.vn:not([data-section="admin"]) .vn-drawer__item {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px; border: 0; background: none; width: 100%;
  text-decoration: none; font-weight: 800; font-size: 16px; color: var(--vn-text); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
html.vn:not([data-section="admin"]) .vn-drawer__item[aria-current="page"],
html.vn:not([data-section="admin"]) .vn-drawer__item.nav-link--active { color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .vn-drawer__grp-h { justify-content: space-between; }
html.vn:not([data-section="admin"]) .vn-drawer__chev { transition: transform .3s; }
html.vn:not([data-section="admin"]) .vn-drawer__grp-h[aria-expanded="true"] .vn-drawer__chev { transform: rotate(180deg); }
html.vn:not([data-section="admin"]) .vn-drawer__sub { display: flex; flex-direction: column; padding: 0 0 10px 10px; }
html.vn:not([data-section="admin"]) .vn-drawer__subit {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--vn-text);
  text-decoration: none; font-weight: 600;
}
html.vn:not([data-section="admin"]) .vn-drawer__subit:hover,
html.vn:not([data-section="admin"]) .vn-drawer__subit.nav-link--active { background: rgba(255, 79, 163, .1); }
html.vn:not([data-section="admin"]) .vn-drawer__sep { height: 1px; margin: 6px 10px; background: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .vn-drawer__item--danger { color: var(--vn-red); }

/* ─── Основний контейнер контенту (без сайдбара) ────────────────────────── */
html.vn:not([data-section="admin"]) .vn-main {
  max-width: 1240px; margin: 0 auto; padding: 28px 20px 60px; display: flex; flex-direction: column; gap: 24px; min-height: 50vh;
}
html.vn:not([data-section="admin"]) .vn-main .hidden-page-note { order: -1; }

@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .vn-main { padding: 22px 16px 118px; gap: 18px; }
  html.vn:not([data-section="admin"]) .vn-topbar { padding: 0 10px; }
  html.vn:not([data-section="admin"]) .vn-me__name { display: none; }
}

/* m-hide: приховати на телефоні (той самий намір, що в base-prototype.css, але лише в межах .vn-topbar) */
@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .vn-topbar .m-hide { display: none !important; }
}

/* ─── Палітра Ctrl+K: #nav-pal (views/_nav_mobile.erb, public/js/nav.js) ────
   Позиціювання й розміри (fixed/flex/width/max-height) лишаються зі style.css —
   тут лише колір, шрифт, радіуси, тінь під .vn. Класи й поведінка не змінені:
   .nav-pal__g/.nav-pal__it/.is-sel/.nav-pal__empty генерує public/js/nav.js. */
html.vn:not([data-section="admin"]) .nav-pal__bg { background: rgba(6, 5, 12, .62); backdrop-filter: blur(6px); }
html.vn:not([data-section="admin"]) .nav-pal__box {
  border-radius: 22px; background: #17121F; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7); font-family: var(--vn-font-body), sans-serif;
}
html.vn:not([data-section="admin"]) .nav-pal__in { gap: 12px; padding: 0 18px; height: 62px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .nav-pal__in input { color: var(--vn-text); font: 700 16px var(--vn-font-body); }
html.vn:not([data-section="admin"]) .nav-pal__in input::placeholder { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .nav-pal kbd {
  font-family: var(--vn-font-mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .16); color: var(--vn-muted);
}
html.vn:not([data-section="admin"]) .nav-pal__list { padding: 8px; }
html.vn:not([data-section="admin"]) .nav-pal__g { color: var(--vn-muted-2); font-weight: 800; }
html.vn:not([data-section="admin"]) .nav-pal__it { border-radius: 14px; font: 600 14.5px var(--vn-font-body); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .nav-pal__it svg { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .nav-pal__it small { color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .nav-pal__it.is-sel { background: rgba(46, 230, 214, .12); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .nav-pal__it.is-sel svg { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .nav-pal__empty { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .nav-pal__foot { border-top: 1px solid rgba(255, 255, 255, .08); color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .nav-pal__foot a { color: var(--vn-pink-soft); font-weight: 800; text-decoration: none; }