/* =============================================================================
   EvoLust Main Styles
   ============================================================================= */

:root {
  --main-bg: #181a1b;
  --main-fg: #f3f3f3;
  --accent: #6ec1e4;
  --accent2: #ffb86c;
  --evolust-orange: #FB7802;
  --card-bg: #23272a;
  --card-fg: #f3f3f3;
  --btn-bg: linear-gradient(90deg, #6ec1e4 0%, #ffb86c 100%);
  --btn-fg: #181a1b;
  --border-radius: 22px;
  --max-width: 640px;
  --shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
  --transition: 0.25s cubic-bezier(.4,2,.6,1);
}

[data-theme="light"] {
  --main-bg: #f6faff;
  --main-fg: #181a1b;
  --accent: #0066ff;
  --accent2: #ffb300;
  --card-bg: #fff;
  --card-fg: #181a1b;
  --btn-bg: linear-gradient(90deg, #0066ff 0%, #ffb300 100%);
  --btn-fg: #fff;
  --toggle-border: #d0d6e0;
  --toggle-shadow: 0 4px 18px 0 rgba(0,102,255,0.10);
  --toggle-inactive-bg: #f6faff;
  --toggle-inactive-fg: #181a1b;
}

[data-theme="light"] .container {
  background-image: url('data:image/svg+xml;utf8,<svg width="180" height="120" viewBox="0 0 180 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 54C29.1 54 28.3 53.7 27.6 53.1C19.2 45.7 12 39.2 12 32.5C12 27.4 16.1 23.5 21 23.5C23.7 23.5 26.2 24.8 27.7 26.9C29.2 24.8 31.7 23.5 34.4 23.5C39.3 23.5 43.4 27.4 43.4 32.5C43.4 39.2 36.2 45.7 27.8 53.1C27.1 53.7 26.3 54 25.4 54H30Z" fill="%230066ff" fill-opacity="0.10"/><path d="M120 90C119.4 90 118.8 89.8 118.3 89.3C112.8 84.2 108 79.7 108 75.5C108 72.2 110.7 69.5 114 69.5C115.8 69.5 117.5 70.4 118.5 71.9C119.5 70.4 121.2 69.5 123 69.5C126.3 69.5 129 72.2 129 75.5C129 79.7 124.2 84.2 118.7 89.3C118.2 89.8 117.6 90 117 90H120Z" fill="%230066ff" fill-opacity="0.07"/><path d="M80 30C79.7 30 79.4 29.9 79.2 29.7C76.1 26.9 73.5 24.6 73.5 22.3C73.5 20.4 75.1 18.8 77 18.8C78.1 18.8 79.1 19.3 79.7 20.1C80.3 19.3 81.3 18.8 82.4 18.8C84.3 18.8 85.9 20.4 85.9 22.3C85.9 24.6 83.3 26.9 80.2 29.7C80 29.9 79.7 30 79.4 30H80Z" stroke="%230066ff" stroke-width="1.5" fill="none" opacity="0.18"/><path d="M160 40C159.7 40 159.4 39.9 159.2 39.7C156.1 36.9 153.5 34.6 153.5 32.3C153.5 30.4 155.1 28.8 157 28.8C158.1 28.8 159.1 29.3 159.7 30.1C160.3 29.3 161.3 28.8 162.4 28.8C164.3 28.8 165.9 30.4 165.9 32.3C165.9 34.6 163.3 36.9 160.2 39.7C160 39.9 159.7 40 159.4 40H160Z" stroke="%230066ff" stroke-width="1.5" fill="none" opacity="0.13"/></svg>');
}

/* =============================================================================
   Base Styles
   ============================================================================= */

html, body {
  font-family: 'Montserrat', Arial, sans-serif !important;
  height: 100%;
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

p {
  margin: 0 !important;
  padding: 0 !important;
}

.container, .btn, .features, .features li, .desc, h1, .toggle-switch, .toggle-btn, .actions, .switchers, .top-switchers {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

body {
  background: var(--main-bg);
  color: var(--main-fg);
  font-family: 'Montserrat', 'Segoe UI', 'Roboto', Arial, sans-serif;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* =============================================================================
   Background Elements
   ============================================================================= */



/* Звездное небо */
.starry-sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Мерцающие сердечки разных размеров */
.twinkle-heart {
  position: absolute;
  animation: twinkle 4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #ff6b9d);
  opacity: 0.4;
  transform: scale(0.9);
}

.twinkle-heart.small {
  font-size: 0.8rem;
  filter: drop-shadow(0 0 3px #ff6b9d);
}

.twinkle-heart.medium {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 4px #ff6b9d);
}

.twinkle-heart.large {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 6px #ff6b9d);
}

/* Позиции для 60 сердечек - равномерное распределение */
.twinkle-heart:nth-child(1) { left: 8%; top: 5%; animation-delay: 0s; }
.twinkle-heart:nth-child(2) { left: 18%; top: 15%; animation-delay: 0.5s; }
.twinkle-heart:nth-child(3) { left: 28%; top: 8%; animation-delay: 1s; }
.twinkle-heart:nth-child(4) { left: 38%; top: 22%; animation-delay: 1.5s; }
.twinkle-heart:nth-child(5) { left: 48%; top: 12%; animation-delay: 2s; }
.twinkle-heart:nth-child(6) { left: 58%; top: 25%; animation-delay: 2.5s; }
.twinkle-heart:nth-child(7) { left: 68%; top: 18%; animation-delay: 3s; }
.twinkle-heart:nth-child(8) { left: 78%; top: 28%; animation-delay: 0.3s; }
.twinkle-heart:nth-child(9) { left: 88%; top: 10%; animation-delay: 0.8s; }
.twinkle-heart:nth-child(10) { left: 95%; top: 20%; animation-delay: 1.3s; }
.twinkle-heart:nth-child(11) { left: 12%; top: 35%; animation-delay: 1.8s; }
.twinkle-heart:nth-child(12) { left: 22%; top: 42%; animation-delay: 2.3s; }
.twinkle-heart:nth-child(13) { left: 32%; top: 38%; animation-delay: 0.7s; }
.twinkle-heart:nth-child(14) { left: 42%; top: 45%; animation-delay: 1.2s; }
.twinkle-heart:nth-child(15) { left: 52%; top: 32%; animation-delay: 1.7s; }
.twinkle-heart:nth-child(16) { left: 62%; top: 48%; animation-delay: 2.2s; }
.twinkle-heart:nth-child(17) { left: 72%; top: 35%; animation-delay: 0.4s; }
.twinkle-heart:nth-child(18) { left: 82%; top: 52%; animation-delay: 0.9s; }
.twinkle-heart:nth-child(19) { left: 92%; top: 40%; animation-delay: 1.4s; }
.twinkle-heart:nth-child(20) { left: 5%; top: 55%; animation-delay: 1.9s; }
.twinkle-heart:nth-child(21) { left: 15%; top: 62%; animation-delay: 0.2s; }
.twinkle-heart:nth-child(22) { left: 25%; top: 58%; animation-delay: 0.7s; }
.twinkle-heart:nth-child(23) { left: 35%; top: 65%; animation-delay: 1.2s; }
.twinkle-heart:nth-child(24) { left: 45%; top: 72%; animation-delay: 1.7s; }
.twinkle-heart:nth-child(25) { left: 55%; top: 68%; animation-delay: 2.2s; }
.twinkle-heart:nth-child(26) { left: 65%; top: 75%; animation-delay: 2.7s; }
.twinkle-heart:nth-child(27) { left: 75%; top: 62%; animation-delay: 0.1s; }
.twinkle-heart:nth-child(28) { left: 85%; top: 78%; animation-delay: 0.6s; }
.twinkle-heart:nth-child(29) { left: 95%; top: 65%; animation-delay: 1.1s; }
.twinkle-heart:nth-child(30) { left: 8%; top: 82%; animation-delay: 1.6s; }
.twinkle-heart:nth-child(31) { left: 18%; top: 88%; animation-delay: 2.1s; }
.twinkle-heart:nth-child(32) { left: 28%; top: 85%; animation-delay: 2.6s; }
.twinkle-heart:nth-child(33) { left: 38%; top: 92%; animation-delay: 0.4s; }
.twinkle-heart:nth-child(34) { left: 48%; top: 78%; animation-delay: 0.9s; }
.twinkle-heart:nth-child(35) { left: 58%; top: 85%; animation-delay: 1.4s; }
.twinkle-heart:nth-child(36) { left: 68%; top: 92%; animation-delay: 1.9s; }
.twinkle-heart:nth-child(37) { left: 78%; top: 88%; animation-delay: 2.4s; }
.twinkle-heart:nth-child(38) { left: 88%; top: 95%; animation-delay: 0.3s; }
.twinkle-heart:nth-child(39) { left: 98%; top: 82%; animation-delay: 0.8s; }
.twinkle-heart:nth-child(40) { left: 3%; top: 95%; animation-delay: 1.3s; }
.twinkle-heart:nth-child(41) { left: 13%; top: 3%; animation-delay: 1.8s; }
.twinkle-heart:nth-child(42) { left: 23%; top: 8%; animation-delay: 2.3s; }
.twinkle-heart:nth-child(43) { left: 33%; top: 15%; animation-delay: 2.8s; }
.twinkle-heart:nth-child(44) { left: 43%; top: 5%; animation-delay: 0.5s; }
.twinkle-heart:nth-child(45) { left: 53%; top: 12%; animation-delay: 1.0s; }
.twinkle-heart:nth-child(46) { left: 63%; top: 8%; animation-delay: 1.5s; }
.twinkle-heart:nth-child(47) { left: 73%; top: 15%; animation-delay: 2.0s; }
.twinkle-heart:nth-child(48) { left: 83%; top: 5%; animation-delay: 2.5s; }
.twinkle-heart:nth-child(49) { left: 93%; top: 12%; animation-delay: 0.8s; }
.twinkle-heart:nth-child(50) { left: 7%; top: 18%; animation-delay: 1.3s; }
.twinkle-heart:nth-child(51) { left: 17%; top: 25%; animation-delay: 1.8s; }
.twinkle-heart:nth-child(52) { left: 27%; top: 32%; animation-delay: 2.3s; }
.twinkle-heart:nth-child(53) { left: 37%; top: 28%; animation-delay: 2.8s; }
.twinkle-heart:nth-child(54) { left: 47%; top: 35%; animation-delay: 0.6s; }
.twinkle-heart:nth-child(55) { left: 57%; top: 42%; animation-delay: 1.1s; }
.twinkle-heart:nth-child(56) { left: 67%; top: 38%; animation-delay: 1.6s; }
.twinkle-heart:nth-child(57) { left: 77%; top: 45%; animation-delay: 2.1s; }
.twinkle-heart:nth-child(58) { left: 87%; top: 32%; animation-delay: 2.6s; }
.twinkle-heart:nth-child(59) { left: 97%; top: 38%; animation-delay: 0.9s; }
.twinkle-heart:nth-child(60) { left: 9%; top: 45%; animation-delay: 1.4s; }

@keyframes twinkle {
  0% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  20% {
    opacity: 0.5;
    transform: scale(0.95);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}



/* =============================================================================
   Top Switchers
   ============================================================================= */

.top-switchers {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 12px;
  gap: 2em;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  background: transparent;
  pointer-events: none;
}

.top-switchers .switchers {
  pointer-events: all;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
  padding: 8px 24px;
  gap: 2em;
  margin: 0;
  position: static;
  top: auto;
  right: auto;
  display: flex;
  align-items: center;
}

/* =============================================================================
   Toggle Switches
   ============================================================================= */

.toggle-group {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.toggle-switch {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-radius: 999px;
  box-shadow: 0 1px 6px 0 rgba(110,193,228,0.10);
  padding: 3px 6px;
  position: relative;
  min-width: 90px;
  min-height: 36px;
  transition: background 0.2s;
}

.toggle-switch, .toggle-switch.theme-toggle {
  background: var(--card-bg);
  border: 1.5px solid var(--toggle-border, #23272a);
  box-shadow: var(--toggle-shadow, 0 1px 6px 0 rgba(110,193,228,0.10));
  transition: box-shadow 0.2s, border 0.2s;
}

.toggle-switch .toggle-btn {
  border: none;
  background: none;
  color: var(--toggle-inactive-fg, #fff);
  font-size: 1.08em;
  font-weight: 700;
  padding: 0.3em 1.1em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  outline: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.7;
  color: var(--toggle-inactive-fg, #fff);
  background: var(--toggle-inactive-bg, #23272a);
  font-weight: 800;
}

.toggle-switch .toggle-btn.active {
  background: #181a1b;
  color: #ffb86c;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.13);
  opacity: 1;
  font-weight: 900;
  text-shadow: 0 2px 8px #ffb86c55;
}

.toggle-switch .toggle-btn .lang-flag, .toggle-switch .toggle-btn .theme-ico {
  font-size: 1.1em;
  margin-right: 0;
}

/* Увеличиваем размер флагов для визуального баланса */
.toggle-switch .toggle-btn .lang-flag {
  font-size: 1.3em;
}

/* Уменьшаем размер иконок темы для визуального баланса */
.toggle-switch .toggle-btn .theme-ico {
  font-size: 1.0em;
}

/* Theme toggle special - теперь одинаковый с языковым переключателем */
.toggle-switch.theme-toggle {
  min-width: 90px;
  padding: 3px 6px;
  background: var(--card-bg);
  border: 1.5px solid var(--toggle-border, #23272a);
  box-shadow: var(--toggle-shadow, 0 1px 6px 0 rgba(110,193,228,0.10));
}

.toggle-switch .toggle-btn.theme {
  font-size: 1.08em;
  padding: 0.3em 1.1em;
}

/* =============================================================================
   Main Container
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  background: var(--card-bg);
  color: var(--card-fg);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
  padding: 36px 18px 28px 18px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px) saturate(1.2);
  border: none;
  animation: fadeIn 1.2s cubic-bezier(.4,2,.6,1);
  z-index: 1;
  /* SVG pattern of hearts as background */
  background-image: url('data:image/svg+xml;utf8,<svg width="180" height="120" viewBox="0 0 180 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 54C29.1 54 28.3 53.7 27.6 53.1C19.2 45.7 12 39.2 12 32.5C12 27.4 16.1 23.5 21 23.5C23.7 23.5 26.2 24.8 27.7 26.9C29.2 24.8 31.7 23.5 34.4 23.5C39.3 23.5 43.4 27.4 43.4 32.5C43.4 39.2 36.2 45.7 27.8 53.1C27.1 53.7 26.3 54 25.4 54H30Z" fill="%23ffb86c" fill-opacity="0.07"/><path d="M120 90C119.4 90 118.8 89.8 118.3 89.3C112.8 84.2 108 79.7 108 75.5C108 72.2 110.7 69.5 114 69.5C115.8 69.5 117.5 70.4 118.5 71.9C119.5 70.4 121.2 69.5 123 69.5C126.3 69.5 129 72.2 129 75.5C129 79.7 124.2 84.2 118.7 89.3C118.2 89.8 117.6 90 117 90H120Z" fill="%23ffb86c" fill-opacity="0.04"/><path d="M80 30C79.7 30 79.4 29.9 79.2 29.7C76.1 26.9 73.5 24.6 73.5 22.3C73.5 20.4 75.1 18.8 77 18.8C78.1 18.8 79.1 19.3 79.7 20.1C80.3 19.3 81.3 18.8 82.4 18.8C84.3 18.8 85.9 20.4 85.9 22.3C85.9 24.6 83.3 26.9 80.2 29.7C80 29.9 79.7 30 79.4 30H80Z" stroke="%23ffb86c" stroke-width="1.5" fill="none" opacity="0.13"/><path d="M160 40C159.7 40 159.4 39.9 159.2 39.7C156.1 36.9 153.5 34.6 153.5 32.3C153.5 30.4 155.1 28.8 157 28.8C158.1 28.8 159.1 29.3 159.7 30.1C160.3 29.3 161.3 28.8 162.4 28.8C164.3 28.8 165.9 30.4 165.9 32.3C165.9 34.6 163.3 36.9 160.2 39.7C160 39.9 159.7 40 159.4 40H160Z" stroke="%23ffb86c" stroke-width="1.5" fill="none" opacity="0.09"/></svg>');
  background-size: 180px 120px;
  background-repeat: repeat;
  background-position: center;
  min-width: 640px;
}
@media (max-width: 700px) {
  .container {
    min-width: unset;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   Logo
   ============================================================================= */

.logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px auto 24px auto;
  box-shadow: 0 0 24px 0 #6ec1e4, 0 2px 24px 0 #ffb86c44;
  border: 5px solid #ffb300;
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
  z-index: 2;
  animation: popIn 1.2s cubic-bezier(.4,2,.6,1);
  overflow: hidden;
  font-size: 4rem;
}

.logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  display: block;
  background: #fff;
  transition: none;
}

.logo:hover img {
  filter: drop-shadow(0 0 16px #6ec1e4ff);
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.main-page .logo {
  animation: heartbeat 2.4s cubic-bezier(.4,2,.6,1) infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.08); }
  20% { transform: scale(1.01); }
  28% { transform: scale(1.15); }
  40% { transform: scale(1); }
  97% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* =============================================================================
   Typography
   ============================================================================= */

h1 {
  font-size: 1.35rem;
  margin-top: 0.7em;
  margin-bottom: 1.1em;
  font-weight: 900;
  letter-spacing: 0.2px;
  background: none;
  color: var(--main-fg);
  display: block;
  text-align: center;
  z-index: 2;
  animation: fadeInUp 1.2s cubic-bezier(.4,2,.6,1);
  line-height: 1.2;
  word-break: break-word;
}

h1 .highlight {
  color: #ffb86c;
  background: none;
  font-weight: 900;
  display: inline;
}

h1 .tg {
  color: #6ec1e4;
  font-weight: 900;
  display: inline;
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 0.01em;
  display: inline-block;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: none; }
}

.desc {
  text-align: center;
  margin: 0.8em 0 0.1em 0 !important;
  line-height: 1.6;
  font-size: 1.1em;
  color: var(--main-fg);
  opacity: 0.9;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.desc-main {
  display: block;
  margin-bottom: 0.2em !important;
  font-weight: 700;
  color: var(--main-fg);
  font-size: 1.1em;
}

.desc-sub {
  display: block;
  font-weight: 400;
  opacity: 0.8;
  font-size: 1em;
  margin-bottom: 0 !important;
}

/* =============================================================================
   Features List
   ============================================================================= */

.features {
  text-align: left;
  margin: 0.6em 0 0.6em 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  z-index: 2;
  animation: fadeInUp 1.2s cubic-bezier(.4,2,.6,1);
  font-size: 1.08em;
  width: 100%;
  max-width: none;
}

.features li {
  background: rgba(0,102,255,0.11);
  border-left: 5px solid var(--accent2);
  border-radius: 10px;
  padding: 0.7em 1em 0.7em 2.1em;
  position: relative;
  font-size: 1em;
  font-weight: 700;
  box-shadow: 0 2px 10px 0 rgba(0,102,255,0.07);
  transition: background var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--main-fg);
}

.features li:before {
  position: absolute;
  left: 0.8em;
  font-size: 1.1em;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.7em;
}

.features li:nth-child(1):before { content: '🔎'; color: #6ec1e4; }
.features li:nth-child(2):before { content: '🧑‍💼'; color: #ffb86c; }
.features li:nth-child(3):before { content: '🛡️'; color: #6ec1e4; }
.features li:nth-child(4):before { content: '💌'; color: #ffb86c; }
.features li:nth-child(5):before { content: '🎉'; color: #6ec1e4; }

.features li span.emoji { display: none; }
.features li span.feature-text {
  padding-left: 0.6em;
  display: inline-block;
}

/* =============================================================================
   Actions & Buttons
   ============================================================================= */

.actions {
  margin: 1.7em 0 0.7em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  z-index: 2;
  animation: fadeInUp 1.2s cubic-bezier(.4,2,.6,1);
  width: 100%;
}

.btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 1em 2em;
  border-radius: var(--border-radius);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  font-weight: 600;
  font-size: 1em;
  transition: all var(--transition);
  box-shadow: var(--shadow);
  border: none;
  cursor: pointer;
  min-width: 400px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.tg-btn {
  background: linear-gradient(90deg, #6ec1e4 0%, #ffb86c 100%);
  color: #181a1b;
  padding: 1.2em 1.5em;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-weight: 900;
  font-size: 1.32em;
  transition: all var(--transition);
  box-shadow: 0 4px 24px 0 rgba(0,102,255,0.13);
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  letter-spacing: 0.5px;
  outline: none;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  box-sizing: border-box;
}

.btn .btn-emoji {
  font-size: 1.5em;
  transition: transform var(--transition);
  filter: drop-shadow(0 0 6px #ffb86ccc);
}

.btn:hover .btn-emoji {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px #ffb86cff);
}

.btn .tg-icon {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url('https://telegram.org/img/t_logo.svg') center/cover no-repeat;
  vertical-align: middle;
  margin-right: 0.5em;
  filter: drop-shadow(0 0 6px #6ec1e4cc);
  transition: filter var(--transition);
}

.btn .home-icon {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.btn .btn-text {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 900;
}

.tg-btn .btn-text {
  font-size: 1.05em;
}

.btn:hover, .btn:focus {
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
  color: var(--main-bg);
  box-shadow: 0 8px 32px 0 rgba(255,184,108,0.18);
  transform: translateY(-2px) scale(1.05);
}

.btn:hover .tg-icon {
  filter: drop-shadow(0 0 8px #6ec1e4ff);
}

.btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px 0 rgba(110,193,228,0.10);
}

/* =============================================================================
   Secondary Actions
   ============================================================================= */

.secondary-actions {
  display: flex;
  flex-direction: row;
  gap: 1em;
  margin: 0.5em auto;
  max-width: var(--max-width);
  width: 100%;
  justify-content: space-between;
  animation: fadeInUp 1.2s cubic-bezier(.4,2,.6,1);
}

.secondary-btn {
  background: var(--card-bg);
  border: 2px solid var(--card-bg);
  color: var(--main-fg);
  padding: 0.8em 1.5em;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  font-weight: 500;
  font-size: 0.75em;
  transition: all var(--transition);
  box-shadow: var(--shadow);
  opacity: 0.9;
  min-width: 180px;
  width: auto;
  max-width: 220px;
  margin: 0;
}

.secondary-btn:hover {
  border-color: var(--accent2);
  background: var(--card-bg);
  color: var(--accent2);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.20);
}

.secondary-btn:active {
  transform: translateY(0) scale(0.98);
}

.secondary-btn .btn-emoji {
  font-size: 1.3em;
  transition: transform var(--transition);
}

.secondary-btn:hover .btn-emoji {
  transform: scale(1.1);
}

.secondary-btn .btn-text {
  font-weight: 500;
}

/* =============================================================================
   Links
   ============================================================================= */

.link-primary {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
  font-size: 1.1em;
}

.link-primary:hover {
  color: #ffb86c;
}

/* =============================================================================
   Footer Text
   ============================================================================= */

.footer-text {
  color: #888;
  font-size: 0.98em;
  margin-top: 0.7em;
  display: block;
}

/* =============================================================================
   Error Pages
   ============================================================================= */

.error-code {
  font-size: 2.7rem;
  font-weight: 900;
  color: #ffb86c;
  letter-spacing: 2px;
  margin-bottom: 0.1em;
  text-shadow: 0 2px 16px #23272a55,0 1px 0 #fff;
}

.error-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #6ec1e4;
  margin-bottom: 0.2em;
  letter-spacing: 0.5px;
}

.botname {
  font-family: 'Montserrat', Arial, sans-serif;
  margin-top: 0.3em;
  opacity: 0.7;
  font-size: 0.9em;
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 600px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    height: 100vh !important;
  }
  
  /* Скрываем большинство сердечек на мобильных */
  .twinkle-heart {
    display: none !important;
  }
  
  /* Показываем только каждое 5-е сердечко для легкого эффекта */
  .twinkle-heart:nth-child(5n) {
    display: block !important;
  }
  
  body {
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: 100vh !important;
  }
  
  .container {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 36px 18px 28px 18px !important;
    margin: 0 auto !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 36px) !important;
  }
  
  .logo {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    margin: 10px auto 15px auto !important;
    border-radius: 50% !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .logo img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
    display: block;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .desc {
    font-size: 1em;
    margin: 0.8em 0 0.1em 0 !important;
  }
  
  .desc-main {
    font-size: 1em;
    margin-bottom: 0.2em !important;
    font-weight: 700 !important;
    color: var(--main-fg) !important;
  }
  
  .desc-sub {
    font-size: 0.9em;
    margin-bottom: 0 !important;
  }
  
  .secondary-actions {
    margin: 0.5em auto 0.8em auto !important;
    gap: 0.6em;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .btn {
    padding: 0.8em 1.5em;
    font-size: 0.9em;
    min-width: 320px;
    max-width: 400px;
  }
  
  .tg-btn {
    padding: 1.4em 2em;
    font-size: 1.1em;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  
  .secondary-btn {
    padding: 0.7em 1em;
    min-width: 0;
    max-width: 48%;
    width: 48%;
    margin: 0;
    flex: 1;
  }
  
  .features {
    display: none !important;
  }
  
  .features li {
    transition: max-height 0.25s cubic-bezier(.4,2,.6,1), opacity 0.25s cubic-bezier(.4,2,.6,1), background 0.25s cubic-bezier(.4,2,.6,1), border-color 0.25s cubic-bezier(.4,2,.6,1), transform 0.25s cubic-bezier(.4,2,.6,1) !important;
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
  }
  
  .features li:not(:last-child) {
    margin-bottom: 0.6em !important;
  }
  
  .features li.hide {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: none !important;
  }
  
  .features-toggle-li {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: relative;
  }
  
  .features-toggle-btn {
    margin-top: 15px !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: none;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    color: var(--btn-fg);
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(.4,2,.6,1), transform 0.25s cubic-bezier(.4,2,.6,1);
    outline: none;
    z-index: 10;
    position: relative;
    font-size: 1.08em;
    font-weight: 700;
    margin-bottom: 0;
  }
  
  [data-theme="light"] .features-toggle-btn {
    color: #181a1b !important;
  }
  
  .features-toggle-btn:hover, .features-toggle-btn:focus {
    color: var(--accent2) !important;
    background: none !important;
    box-shadow: none !important;
    transform: translateY(-2px) scale(1.05);
  }
  
  .features-toggle-btn:active {
    transform: scale(0.98);
    box-shadow: none !important;
  }
  
  .divider-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    opacity: 0.35;
    border-radius: 2px;
    margin: 0 0.7em;
    min-width: 18px;
  }
  
  .divider-text {
    font-weight: 800;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
    font-size: 1em;
    padding: 0 0.2em;
    background: none;
  }
  
  h1 {
    font-size: 0.9rem !important;
    margin-top: 0.7em !important;
    margin-bottom: 1.1em !important;
  }
  
  .error-code {
    font-size: 2.2rem !important;
  }
  
  .error-title {
    font-size: 1.2rem !important;
  }
  
  .features li {
    font-size: 0.93em;
    padding: 0.7em 0.7em 0.7em 1.7em;
  }
  
  .btn {
    font-size: 1em;
    padding: 0.8em 1.2em;
    margin-top: 0 !important;
  }
  
  .top-switchers {
    margin-top: 0.5em !important;
  }
  
  .actions {
    margin: 1.7em 0 0.7em 0 !important;
  }
  
  .text-fields {
    margin: 0 !important;
    gap: 0.8em;
  }
  
  .text-field {
    padding: 0.8em 1.2em;
    font-size: 0.95em;
  }
  
  .features li:not(.features-toggle-li):last-child {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  .features li:not(.features-toggle-li):not(:last-child) {
    margin-bottom: 0 !important;
  }
  
  .features li:nth-last-child(2) {
    margin-bottom: 0 !important;
  }
  
  .main-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .features-toggle-btn,
  .features-toggle-btn .divider-text {
    color: #fff !important;
  }
  
  [data-theme="light"] .features-toggle-btn,
  [data-theme="light"] .features-toggle-btn .divider-text {
    color: #181a1b !important;
  }
  
  .features li:not(.features-toggle-li):not(:last-child) {
    margin-bottom: 0 !important;
  }
  
  .features-toggle-btn {
    margin-top: 0 !important;
  }
  
  .features li:before {
    left: 0.7em;
  }
  
  .features li span.feature-text {
    padding-left: 1.1em;
  }
}

@media (max-width: 600px) {
  .top-switchers {
    margin-top: 0.92em !important;
  }
  .secondary-actions {
    margin: 0.5em auto 0.8em auto !important;
  }
}

[data-theme="light"] .features li {
  border-left: 5px solid var(--evolust-orange) !important;
}

[data-theme="light"] .features li:before {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  text-fill-color: initial !important;
  color: inherit !important;
}

.top-title {
  color: #ffb86c;
}

.bottom-title {
  color: #0066ff;
}

[data-theme="light"] .top-title {
  color: #e6a200 !important;
}

[data-theme="light"] .bottom-title {
  color: #0066ff !important;
}

[data-theme="light"] #main-title .top-title {
  color: #e6a200 !important;
}

[data-theme="light"] #main-title .bottom-title {
  color: #0066ff !important;
}

[data-theme="light"] #main-title .highlight {
  color: #e6a200 !important;
}

[data-theme="light"] #main-title .tg {
  color: #0066ff !important;
}

.btn {
  font-family: 'Oswald', Impact, Charcoal, sans-serif !important;
  font-size: 1.22em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .btn {
    font-size: 1em;
  }
}

/* Стили для страниц политики и соглашений */
#policy-title-block {
  text-align: center;
  margin: 2rem 0;
}

.policy-title {
  color: #8B5CF6;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.policy-subtitle {
  color: #A0A0A0;
  font-size: 1.2rem;
  font-weight: 500;
}

.policy-content {
  width: 100%;
  max-width: none;
  margin: 0 0 1rem 0;
  padding: 0;
  text-align: left;
}

.policy-section {
  line-height: 1.4;
}

.policy-section h2 {
  color: #8B5CF6;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1.5rem 0 1rem 0;
  border-bottom: 2px solid rgba(139, 92, 246, 0.2);
}

.policy-section h2:first-child {
  margin-top: 0;
}

.policy-section p {
  color: #CCCCCC;
  margin: 0.6rem 0;
  font-size: 1rem;
  line-height: 1.4;
}

.policy-section ul {
  color: #CCCCCC;
  margin: 0.6rem 0;
  padding-left: 1.2rem;
}

.policy-section li {
  margin: 0.3rem 0;
  font-size: 1rem;
  line-height: 1.4;
}

.policy-section strong {
  color: #FFFFFF;
  font-weight: 600;
}

.policy-notice {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 15px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.policy-notice p {
  color: #E0E0E0;
  margin: 0;
  font-size: 1rem;
}

/* Стили для пагинации */
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.page-info {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
  position: static;
  left: unset;
  transform: none;
  pointer-events: auto;
  z-index: auto;
}
.pagination-btn {
  flex: 0 0 auto;
  min-width: 0;
  text-align: center;
}



.pagination-btn {
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.pagination-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.page-info {
  color: #CCCCCC;
  font-weight: 500;
  font-size: 1rem;
  margin: 0 1rem;
}

/* Адаптивность для страниц политики */
@media (max-width: 768px) {
  .policy-title {
    font-size: 2rem;
  }
  
  .policy-subtitle {
    font-size: 1rem;
  }
  
  .policy-content {
    padding: 0 0 0 0;
    margin: 0 0.5rem 1rem 0.5rem;
  }
  
  .policy-section {
    line-height: 1.3;
  }
  
  .policy-section h2 {
    font-size: 1.2rem;
    margin: 0.8rem 0 0.6rem 0;
    line-height: 1.0;
    padding-bottom: 0.2rem;
  }
  
  .policy-section h2:first-child {
    margin-top: 0;
  }
  
  .policy-section p {
    font-size: 0.9rem;
    margin: 0.5rem 0;
    line-height: 1.3;
  }
  
  .policy-section ul {
    margin: 0.5rem 0;
    padding-left: 1rem;
  }
  
  .policy-section li {
    font-size: 0.9rem;
    margin: 0.2rem 0;
    line-height: 1.3;
  }
  
  .policy-notice {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .policy-notice p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  .pagination {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .page-info {
    order: -1;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
  }
  
  .pagination-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  /* Контейнер для кнопок на мобильных */
  .pagination {
    align-items: center;
  }
  
  .pagination-btn + .pagination-btn {
    margin-left: 0.5rem;
  }
}

@media (max-width: 480px) {
  .policy-title {
    font-size: 1.8rem;
  }
  
  .policy-content {
    padding: 1rem;
    margin: 0 0.5rem;
  }
  
  .policy-section h2 {
    font-size: 1.2rem;
  }
  
  .policy-section p,
  .policy-section li {
    font-size: 0.9rem;
  }
}

/* Force smooth text rendering */
.policy-section,
.policy-content * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce top padding for policy pages only */
body:has(.policy-content) .container {
  padding-top: 18px !important;
}

@media (max-width: 768px) {
  body:has(.policy-content) .container {
    padding-top: 12px !important;
  }
  
  body:has(.policy-content) .actions {
    margin-top: 0.5rem !important;
  }
  
  .policy-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 6px;
  }
  
  .mobile-pagination-row {
    padding: 0.5rem 1rem 0.3rem 1rem;
  }
  
  .mobile-pagination-row {
    justify-content: center;
    align-items: center;
  }
  
  .mobile-pagination-row #page-info {
    font-size: 0.9rem;
    font-weight: 600;
    color: #FFFFFF;
    min-width: 50px;
    text-align: center;
    margin: 0 1rem;
  }
  
  .mobile-pagination-row button {
    min-width: 80px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  }
  
  .mobile-pagination-row button:hover:not(:disabled) {
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  }
  
  .mobile-pagination-row button:disabled {
    background: rgba(139, 92, 246, 0.3);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
} 
[data-theme="light"] .page-info {
  color: #181a1b !important;
}
[data-theme="light"] .policy-content,
[data-theme="light"] .policy-section,
[data-theme="light"] .policy-section p,
[data-theme="light"] .policy-section ul,
[data-theme="light"] .policy-section li {
  color: #181a1b !important;
} 
[data-theme="light"] .error-code {
  color: var(--evolust-orange);
  text-shadow: none;
}
[data-theme="light"] .desc-sub {
  color: var(--main-fg) !important;
}
[data-theme="light"] .error-title {
  color: #0066ff !important;
}
[data-theme="light"] .container {
  background-color: #fff;
} 
.policy-content ul,
.policy-section ul {
  list-style-type: none;
  padding-left: 0;
}
.policy-content ul li,
.policy-section ul li {
  padding-left: 0.2em;
} 
@media (max-width: 768px) {
  .pagination {
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
  }
  .page-info {
    order: 0;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
    flex: 1 1 auto;
  }
  .pagination-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    flex: 0 0 auto;
  }
  .pagination-btn + .pagination-btn {
    margin-left: 0.5rem;
  }
  .container {
    min-width: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
} 
[data-theme="light"] .botname a {
  color: #111;
  text-shadow: none;
  font-weight: 500;
} 
[data-theme="light"] b,
[data-theme="light"] strong {
  color: #222;
  text-shadow: none;
} 
[data-theme="light"] .tg-btn {
  background: linear-gradient(90deg, #0066ff 0%, #ffb300 100%) !important;
  color: #181a1b !important;
} 
[data-theme="light"] .tg-btn:hover, [data-theme="light"] .tg-btn:focus {
  background: linear-gradient(90deg, #ffb300 0%, #0066ff 100%) !important;
  color: #fff !important;
} 
[data-theme="light"] .btn:not(.tg-btn):hover, [data-theme="light"] .btn:not(.tg-btn):focus {
  color: var(--evolust-orange) !important;
  border: 2px solid var(--evolust-orange) !important;
  background: #fff !important;
} 
[data-theme="light"] .features li:before {
  color: var(--evolust-orange) !important;
} 
[data-theme="light"] .tg-btn .btn-text {
  color: #fff !important;
} 
[data-theme="light"] .desc b,
[data-theme="light"] .desc strong {
  color: #181a1b !important;
} 
[data-theme="light"] .desc a {
  color: #181a1b !important;
  text-decoration: none;
} 
[data-theme="light"] .desc a:hover, [data-theme="light"] .desc a:focus {
  color: var(--evolust-orange) !important;
  text-decoration: none !important;
}