/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 5a: профіль/акаунт (/profile) за ProfileB.dc.html +
   SettingsB.dc.html. Розмітку, форми й JS (profile.erb) не змінено — лише
   вигляд, через перевизначення вже наявних CSS-змінних (.pf-section, .pf-btn,
   .pf-input, .tile, .preview-card… самі посилаються на --card/--primary/
   --border/…) у межах .profile-page, за взірцем vn-jobs.css/vn-crafts.css.

   Вкладки (.pf-tabs) — нова навігація над тими самими секціями (group by
   data-pf-tab, public/js/profile-vn.js); без JS усі секції лишаються
   видимими одним списком, як було. «Сповіщення» й «Активні сесії» —
   посилання/заглушка без логіки (profile.erb, @design_b).
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .profile-page {
  --media-bg: rgba(255, 255, 255, .035);
  --well: rgba(0, 0, 0, .25);
  --muted-icon: var(--vn-muted-2);
  --card: rgba(255, 255, 255, .035);
  --card-hover: rgba(255, 255, 255, .06);
  --surface: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .18);
  --text: var(--vn-text);
  --text-2: var(--vn-muted);
  --primary: var(--vn-pink);
  --primary-soft: rgba(255, 79, 163, .14);
  --primary-hover: #FF6BB2;
  --on-primary: var(--vn-ink);
  --secondary: var(--vn-cyan);
  --success: var(--vn-cyan);
  --danger: var(--vn-red);
  --acc-1: 255, 79, 163;
  --font: var(--vn-font-body), sans-serif;
  --r-sm: 10px;
  --r-md: var(--vn-radius-field);
  --r-lg: var(--vn-radius-card);
  --focus-ring: 0 0 0 3px rgba(46, 230, 214, .6);
  width: 100%; box-sizing: border-box;
}

html.vn:not([data-section="admin"]) .profile-page .catalog-head__title {
  font-family: var(--vn-font-display), sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--vn-text) 40%, var(--vn-pink), var(--vn-orange), var(--vn-cyan));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bHue 8s ease-in-out infinite;
}
html.vn:not([data-section="admin"]) .profile-page .pf-section {
  border-radius: var(--vn-radius-section);
  transition: border-color .3s, box-shadow .35s;
}
html.vn:not([data-section="admin"]) .profile-page .pf-section:hover { border-color: rgba(255, 79, 163, .35); }
html.vn:not([data-section="admin"]) .profile-page .pf-btn--primary,
html.vn:not([data-section="admin"]) .profile-page .pf-public-btn:not(.pf-public-btn--off) {
  background: var(--vn-grad-brand); color: var(--vn-ink); font-weight: 800;
}
html.vn:not([data-section="admin"]) .profile-page .pf-btn { border-radius: var(--vn-radius-pill); }
html.vn:not([data-section="admin"]) .profile-page .pf-public-btn { border-radius: var(--vn-radius-pill); }

/* ─── Tabs (role=tablist) ─────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .pf-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto 4px; max-width: 1180px;
  padding: 6px; border-radius: var(--vn-radius-pill); background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
}
html.vn:not([data-section="admin"]) .pf-tab {
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--vn-radius-pill);
  background: transparent; color: var(--vn-muted); font: 700 13px var(--vn-font-body), sans-serif;
  cursor: pointer; transition: background .2s, color .2s;
}
html.vn:not([data-section="admin"]) .pf-tab:hover { background: rgba(255, 255, 255, .06); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .pf-tab[aria-selected="true"] {
  background: var(--vn-grad-brand); color: var(--vn-ink);
}

@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .pf-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  html.vn:not([data-section="admin"]) .pf-tab { flex: none; }
}