/* Макет «navy» (Бренд → Вигляд сайту → Макет): темно-синій ігровий стиль — шапка й бічне меню темніші за
   вміст, пункти меню списком «іконка + назва» в одній заокругленій панелі, вкладки в шапці — кнопки-плашки,
   сині кнопки без великих літер, компактні заокруглення 8 px, зелена «жива» крапка.
   Підключається після site.css. Кольори — з бренду (--primary, --accent, --bg, --panel, --sidebar-bg). */
.theme-navy {
  --radius: 8px;
  --sidebar: 240px;
  --topbar-h: 64px;
  --line: color-mix(in srgb, var(--panel) 75%, #fff 12%);
  --panel-2: color-mix(in srgb, var(--panel) 80%, #fff 8%);
  --muted: #b1bad3;
  --navy-hi: color-mix(in srgb, var(--panel) 70%, #fff 14%);    /* світліша плашка (вкладки, наведення) */
}
body.theme-navy { background: var(--bg); }

/* ---------- кнопки ---------- */
.theme-navy .btn { border-radius: 6px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.theme-navy .btn-primary { color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.theme-navy .btn-primary:hover { filter: brightness(1.12); }
.theme-navy .btn-lg { height: 52px; padding: 0 34px; font-size: 17px; text-transform: none; }
.theme-navy .icon-btn { border-radius: 6px; border-color: transparent; background: transparent; }
.theme-navy .icon-btn:hover { background: var(--navy-hi); }

/* ---------- шапка: темніша за вміст, з тінню ---------- */
.theme-navy .topbar { background: var(--sidebar-bg); border-bottom: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.theme-navy .tabs { border: 0; padding: 0; gap: 8px; }
.theme-navy .tab { height: 40px; padding: 0 18px; border-radius: 8px; background: var(--panel); color: #fff; font-weight: 700; }
.theme-navy .tab .ic { color: #fff; }
.theme-navy .tab:hover { background: var(--navy-hi); }
.theme-navy .tab.on { background: var(--navy-hi); box-shadow: inset 0 -2px 0 var(--primary); }
.theme-navy .tab.on .ic { color: #fff; }
.theme-navy .search input { height: 42px; border-radius: 8px; border: 2px solid var(--panel); background: var(--sidebar-bg); }
.theme-navy .search input:hover { border-color: var(--navy-hi); }
.theme-navy .topbar > .btn-primary { height: 44px; }

/* ---------- бічне меню: одна панель, пункти списком ---------- */
.theme-navy .sidebar { background: var(--sidebar-bg); gap: 10px; padding: 14px 10px; }
.theme-navy .promo { border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 55%, var(--panel)), var(--panel) 80%); }
.theme-navy .promo-ic { color: #fff; }
.theme-navy .pill { height: 46px; border-radius: 8px; background: var(--panel); border: 0; font-weight: 700; }
.theme-navy .pill-ic { color: var(--accent); }
.theme-navy .pill:hover { background: var(--navy-hi); }
.theme-navy .tiles { grid-template-columns: 1fr; gap: 0; padding: 6px; border-radius: 8px; background: var(--panel); }
.theme-navy .tile { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 46px; padding: 0 12px; border: 0;
  border-radius: 6px; background: transparent; font-size: 15px; font-weight: 700; text-align: left; }
.theme-navy .tile .ic { color: #fff; width: 22px; height: 22px; }
.theme-navy .tile:hover { background: var(--navy-hi); }
.theme-navy .tile.on { background: var(--navy-hi); }
.theme-navy .tile.on .ic { color: var(--primary); }
.theme-navy .tile-wide { grid-column: auto; min-height: 46px; }
.theme-navy .sidebar-foot { gap: 0; padding: 6px; border-radius: 8px; background: var(--panel); }
.theme-navy .side-link { border: 0; height: 44px; border-radius: 6px; font-weight: 700; font-size: 15px; }
.theme-navy .side-link:hover { background: var(--navy-hi); }
.theme-navy .socials a { border-color: transparent; background: var(--navy-hi); border-radius: 6px; }
.theme-navy .sidebar-foot > .badge18 { margin: 8px 0 4px 12px; }
html.sb-collapsed .theme-navy .tile { justify-content: center; padding: 0; }

/* ---------- вміст ---------- */
.theme-navy .ticker { border-radius: 8px; background: var(--panel); }
.theme-navy .ticker-label { background: var(--primary); color: #fff; }
.theme-navy .hero { border-radius: 8px; }
.theme-navy .slide-cat { border-radius: 4px; }
.theme-navy .hero-nav { border-radius: 6px; }
.theme-navy .dots button.on { background: var(--primary); }
.theme-navy .lobby-ic { border-radius: 8px; border: 0; background: var(--panel); color: #fff; }
.theme-navy .lobby-item:hover .lobby-ic, .theme-navy .lobby-item.on .lobby-ic { border: 0; background: var(--navy-hi); color: #fff; }
.theme-navy .lobby-item.on { color: #fff; }
.theme-navy .block-head h2 { font-size: 20px; font-weight: 800; text-transform: none; }
.theme-navy .row-btn { border-radius: 6px; border: 0; background: var(--panel); }
.theme-navy .row-btn:hover { background: var(--navy-hi); }
.theme-navy .card { border-radius: 8px; transition: transform .2s; }
.theme-navy .card:hover { transform: translateY(-4px); }
.theme-navy .page-ic { border-radius: 8px; }
.theme-navy .subscribe { border-radius: 8px; border: 0; background: var(--panel); }
.theme-navy .partner, .theme-navy .unsub, .theme-navy .message, .theme-navy .gate-box { border-radius: 8px; border-color: transparent; background: var(--panel); }
.theme-navy .footer { background: var(--sidebar-bg); }
.theme-navy .footer-links a { border-radius: 6px; border-color: transparent; background: var(--panel); }
.theme-navy .footer-links a:hover { background: var(--navy-hi); }
/* «жива» зелена крапка перед мітками категорій у картках і банері */
.theme-navy .slide-cat::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: 1px; }
@media (max-width: 900px) {
  .theme-navy .sidebar { padding: 12px 10px; }
  .theme-navy .topbar > .btn-primary { height: 40px; padding: 0 14px; font-size: 14px; }
}