/* Макет «evo» (Бренд → Вигляд сайту → Макет), у стилі evospin.com: бічне меню — окрема «плаваюча» панель із
   заокругленими кутами й рамкою, логотип угорі меню; пункти меню — список «іконка + назва»; кнопки з підсвіткою;
   блоки головної — у панелях із тонкою рамкою; Top Stories — кружечки-сторіс (шаблон content/home/_top.html).
   Підключається після site.css. Кольори — з бренду (--primary, --accent, --bg, --panel, --sidebar-bg). */
.theme-evo {
  --radius: 14px;
  --sidebar: 268px;
  --evo-line: color-mix(in srgb, #8fb0e6 22%, transparent);
  --evo-glow: color-mix(in srgb, var(--primary) 45%, transparent);
  --muted: #a3adc2;
}
body.theme-evo {
  background:
    radial-gradient(900px 600px at 70% -200px, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, color-mix(in srgb, #3b5bdb 10%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- кнопки ---------- */
.theme-evo .btn { border-radius: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 15px; }
.theme-evo .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, #fff 22%), var(--primary) 55%, color-mix(in srgb, var(--primary) 85%, #000 15%));
  box-shadow: 0 0 18px var(--evo-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.theme-evo .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 26px var(--evo-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
.theme-evo .btn-ghost { border-color: var(--evo-line); }
.theme-evo .btn-lg { height: 52px; padding: 0 30px; font-size: 17px; }
/* кнопка підписки в шапці — жовта, як «Sign up» / «Deposit» */
.theme-evo .topbar > .btn-primary {
  height: 48px; padding: 0 20px; color: #1c1503;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff 25%), var(--accent) 60%, color-mix(in srgb, var(--accent) 85%, #000 15%));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.theme-evo .icon-btn { width: 48px; height: 48px; border-radius: 12px; border-color: var(--evo-line);
  background: color-mix(in srgb, var(--bg) 70%, #1b2a48); }
.theme-evo .icon-btn:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.theme-evo .burger { background: transparent; border-color: transparent; }

/* ---------- шапка: прозора, над вмістом ---------- */
.theme-evo .topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px); border-bottom: 0; box-shadow: none; }
.theme-evo .tabs { border-color: var(--evo-line); border-radius: 14px; }
.theme-evo .tab { border-radius: 10px; color: #d9e0ec; }
.theme-evo .tab .ic { color: #fff; }
.theme-evo .tab:hover, .theme-evo .tab.on { background: rgba(255, 255, 255, .06); }
.theme-evo .search input { height: 48px; border-radius: 12px; border-color: var(--evo-line); background: color-mix(in srgb, var(--bg) 70%, #1b2a48); }

/* ---------- бічне меню: пункти списком ---------- */
.theme-evo .sidebar { gap: 10px; }
.theme-evo .promo { border-radius: 16px; border: 1px solid var(--evo-line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 38%, #0b1f3d), #0a1630 75%); }
.theme-evo .pill { height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 14px; }
.theme-evo .pill-ic { color: var(--accent); }
.theme-evo .tiles { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; border-top: 1px solid var(--evo-line); border-bottom: 1px solid var(--evo-line); }
.theme-evo .tile { flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 54px; padding: 0 14px; border-radius: 12px; border: 0;
  background: transparent; font-size: 17px; font-weight: 500; text-align: left; }
.theme-evo .tile .ic { color: #fff; width: 26px; height: 26px; }
.theme-evo .tile:hover { background: rgba(255, 255, 255, .05); }
.theme-evo .tile.on { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), transparent);
  box-shadow: inset 3px 0 0 var(--primary); }
.theme-evo .tile.on .ic { color: var(--primary); filter: drop-shadow(0 0 6px var(--evo-glow)); }
.theme-evo .tile-wide { grid-column: auto; min-height: 54px; }
.theme-evo .sidebar-foot { gap: 2px; }
.theme-evo .side-link { border: 0; height: 46px; color: #c6cedd; font-size: 15px; border-radius: 10px; }
.theme-evo .side-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.theme-evo .socials a { border-color: var(--evo-line); border-radius: 10px; }
.theme-evo .sidebar-foot > .badge18 { margin: 10px 0 0 14px; }

/* ---------- комп'ютер: меню — плаваюча панель на всю висоту, логотип у ньому ---------- */
@media (min-width: 901px) {
  .theme-evo .sidebar { position: fixed; z-index: 35; top: 16px; bottom: 16px; left: 16px; height: auto; padding: 20px 14px;
    border-radius: 24px; border: 1px solid var(--evo-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 82%, #1d3058), var(--sidebar-bg) 45%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
  .theme-evo .sidebar-head { display: flex; justify-content: center; padding: 6px 0 18px; }
  .theme-evo .sidebar-head .icon-btn { display: none; }
  .theme-evo .sidebar-head .logo { font-size: 28px; }
  .theme-evo .topbar-logo { display: none; }
  .theme-evo .topbar { margin-left: calc(var(--sidebar) + 32px); padding: 0 24px 0 8px; height: 84px; }
  .theme-evo .app { padding-left: calc(var(--sidebar) + 32px); }
  .theme-evo .content { padding: 8px 24px 24px 8px; }
  .theme-evo .subscribe { margin: 36px 24px 0 8px; }
  .theme-evo .footer { padding-left: 8px; }
  html.sb-collapsed .theme-evo .sidebar-head { display: none; }
  html.sb-collapsed .theme-evo .tile { justify-content: center; padding: 0; }
  html.sb-collapsed .theme-evo .tile.on { box-shadow: none; }
  html.sb-collapsed .theme-evo .sidebar-foot > .badge18 { margin: 10px 0 0; }
}
/* телефон: виїзне меню з заокругленим краєм */
@media (max-width: 900px) {
  .theme-evo .sidebar { border-radius: 0 24px 24px 0; border-right: 1px solid var(--evo-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 82%, #1d3058), var(--sidebar-bg) 45%); }
  .theme-evo .icon-btn { width: 44px; height: 44px; }
  .theme-evo .topbar > .btn-primary { height: 42px; padding: 0 14px; font-size: 13px; }
}

/* ---------- сторіс (Top Stories) ---------- */
.stories { display: flex; gap: 18px; overflow-x: auto; padding: 10px 4px 16px; margin-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.stories::-webkit-scrollbar { display: none; }
.story-bubble { flex: none; width: 108px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.story-ring { display: block; width: 104px; height: 104px; padding: 4px; border-radius: 50%; border: 3px solid var(--primary);
  background: var(--bg); box-shadow: 0 0 16px var(--evo-glow); transition: transform .2s, box-shadow .2s; }
.story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.story-ph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--panel); color: var(--primary); }
.story-bubble:hover .story-ring { transform: translateY(-3px); box-shadow: 0 0 26px var(--evo-glow); }
.story-name { font-size: 12px; font-weight: 700; line-height: 1.25; color: #dfe6f2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-bubble:hover .story-name { color: #fff; }
@media (max-width: 900px) {
  .stories { gap: 12px; padding-top: 6px; }
  .story-bubble { width: 80px; }
  .story-ring { width: 76px; height: 76px; padding: 3px; }
  .story-name { font-size: 11px; }
}

/* ---------- панелі з рамкою ---------- */
.theme-evo .ticker { border-radius: 14px; border: 1px solid var(--evo-line); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.theme-evo .hero { border-radius: 24px; border: 1px solid var(--evo-line); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.theme-evo .slide-cat { border-radius: 8px; }
.theme-evo .hero-nav { width: 50px; height: 50px; border-radius: 12px; border: 1px solid var(--evo-line); background: rgba(5, 12, 27, .55); }
.theme-evo .hero-nav:hover { border-color: var(--primary); }
.theme-evo .dots button { width: 8px; height: 8px; border-radius: 50%; }
.theme-evo .dots button.on { width: 8px; background: var(--primary); box-shadow: 0 0 8px var(--evo-glow); }

/* ряд категорій — панель із вкладками «іконка + назва», як Lobby / Top Games / Slots */
.theme-evo .lobby { gap: 4px; margin-top: 22px; padding: 10px; border-radius: 20px; border: 1px solid var(--evo-line);
  background: color-mix(in srgb, var(--panel) 55%, transparent); }
.theme-evo .lobby-item { flex-direction: row; gap: 10px; min-width: auto; height: 50px; padding: 0 16px; border-radius: 12px;
  border: 1px solid transparent; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.theme-evo .lobby-ic { width: auto; height: auto; border: 0; background: none; color: #fff; }
.theme-evo .lobby-ic .ic { width: 24px; height: 24px; }
.theme-evo .lobby-item:hover .lobby-ic, .theme-evo .lobby-item.on .lobby-ic { background: none; border: 0; color: var(--primary); }
.theme-evo .lobby-item.on { color: #fff; border-color: var(--evo-line); background: rgba(255, 255, 255, .05); }

.theme-evo .block { padding: 22px 24px 24px; border-radius: 22px; border: 1px solid var(--evo-line);
  background: color-mix(in srgb, var(--panel) 50%, transparent); }
.theme-evo .block-head h2 { font-size: 21px; font-weight: 800; }
.theme-evo .show-all { font-weight: 700; }
.theme-evo .row-btn { width: 44px; height: 44px; border-radius: 10px; border-color: var(--evo-line); background: color-mix(in srgb, var(--bg) 70%, #1b2a48); }
.theme-evo .card { border-radius: 14px; }
.theme-evo .page-ic { border-radius: 16px; box-shadow: 0 0 16px var(--evo-glow); }
.theme-evo .subscribe { border-radius: 24px; border-color: var(--evo-line); }
.theme-evo .partner, .theme-evo .unsub, .theme-evo .message, .theme-evo .gate-box { border-radius: 22px; border-color: var(--evo-line); }
.theme-evo .footer-links a { border-radius: 10px; border-color: var(--evo-line); }
@media (max-width: 900px) {
  .theme-evo .block { padding: 16px 14px 18px; border-radius: 18px; }
  .theme-evo .lobby { padding: 6px; border-radius: 16px; }
  .theme-evo .lobby-item { height: 44px; padding: 0 12px; font-size: 14px; }
}
.theme-evo .ticker { margin-top: 16px; }
.theme-evo .topbar-logo { white-space: nowrap; }