/* ============================================================================
   redesign.css — полная смена визуальной айдентики (Avuo).
   Грузится после основного бандла и перекрывает палитру Tailwind-переменных,
   поэтому меняется весь сайт сразу, без правки 240 КБ разметки.
   Функционал, разметка и логика не затрагиваются — только оболочка.
   ----------------------------------------------------------------------------
   1. Палитра
   2. Типографика и фон
   3. Хедер, сайдбар, карточки, кнопки
   4. Провайдер-кнопки и тосты
   ========================================================================== */

/* --------------------------------------------------------------- 1. Палитра */
:root {
  /* бренд: полночный графит + электрический циан */
  --color-red-100: #cffafe;
  --color-red-200: #a5f3fc;
  --color-red-300: #67e8f9;
  --color-red-400: #22d3ee;
  --color-red-500: #06b6d4;
  --color-red-600: #0891b2;
  --color-red-700: #0e7490;

  --color-pink-400: #7dd3fc;
  --color-pink-500: #38bdf8;
  --color-pink-600: #0ea5e9;
  --color-pink-700: #0284c7;

  --color-purple-300: #c7d2fe;
  --color-purple-400: #818cf8;
  --color-purple-500: #6366f1;
  --color-purple-600: #4f46e5;
  --color-purple-700: #4338ca;

  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;

  /* нейтральная шкала уходит в синий подтон */
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0b1220;
  --color-gray-950: #05070c;

  /* системные токены поверхностей */
  --avuo-bg: #05070c;
  --avuo-surface: #0b1220;
  --avuo-surface-2: #111a2c;
  --avuo-line: rgba(148, 163, 184, 0.16);
  --avuo-line-strong: rgba(148, 163, 184, 0.28);
  --avuo-accent: #22d3ee;
  --avuo-accent-deep: #0891b2;
  --avuo-glow: rgba(34, 211, 238, 0.28);
  --avuo-live: #ef4444;
  --avuo-live-deep: #b91c1c;

  /* fonts: Space Grotesk for display, Manrope for body */
  --avuo-font-body: "Manrope", "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --avuo-font-display: "Space Grotesk", "Manrope", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ------------------------------------------- 2. Типографика и базовый фон */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--avuo-font-body);
  letter-spacing: -0.01em;
  background: var(--avuo-bg);
  color: #e2e8f0;
}

/* фон всего приложения: мягкие световые пятна вместо плоского чёрного */
[data-slot="sidebar-wrapper"] {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(34, 211, 238, 0.14), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(99, 102, 241, 0.16), transparent 58%),
    linear-gradient(180deg, #05070c 0%, #060a12 55%, #04060a 100%) !important;
}

/* мягкая сетка поверх фона, очень низкая контрастность */
[data-slot="sidebar-wrapper"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
}

/* ----------------------------------------------------- 3. Хедер и сайдбар */
header {
  background: rgba(5, 7, 12, 0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--avuo-line) !important;
}

header [class*="bg-gradient-to-br"][class*="rounded-2xl"] {
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.35),
    0 12px 34px rgba(8, 145, 178, 0.35) !important;
}

/* сайдбар: отдельная поверхность, не сливается с фоном */
[data-slot="sidebar-container"] > div {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.94) 0%, rgba(5, 7, 12, 0.98) 100%) !important;
  border-right: 1px solid var(--avuo-line) !important;
}

[data-slot="sidebar-menu-item"] a,
[data-slot="sidebar-menu-item"] button {
  border-radius: 12px !important;
}

[data-slot="sidebar-menu-item"] a:hover,
[data-slot="sidebar-menu-item"] button:hover {
  background: rgba(34, 211, 238, 0.09) !important;
}

/* активный пункт меню */
[data-slot="sidebar-menu-item"] a[aria-current="page"],
[data-slot="sidebar-menu-item"] a[data-active="true"] {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(99, 102, 241, 0.12)) !important;
  box-shadow: inset 2px 0 0 var(--avuo-accent);
}

/* карточки: тоньше рамка, глубже тень, аккуратный подъём */
.bg-gray-900 {
  background-color: var(--avuo-surface) !important;
}

.rounded-lg {
  border-radius: 14px !important;
}

.group.cursor-pointer,
[class*="overflow-hidden"][class*="group"] {
  border: 1px solid var(--avuo-line);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[class*="overflow-hidden"][class*="group"]:hover {
  border-color: var(--avuo-line-strong);
  box-shadow: 0 18px 44px rgba(2, 6, 16, 0.55);
}

/* Логотип в шапке — без рамки (карточное правило выше его задевало) */
header .group.cursor-pointer {
  border: 0;
}

/* кнопки-CTA */
.bg-red-600 {
  background: linear-gradient(135deg, var(--avuo-accent) 0%, var(--avuo-accent-deep) 100%) !important;
  color: #04121a !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px rgba(8, 145, 178, 0.35);
}

.hover\:bg-red-700:hover {
  background: linear-gradient(135deg, #67e8f9 0%, var(--avuo-accent) 100%) !important;
}

.text-red-500 {
  color: var(--avuo-accent) !important;
}

.hover\:text-red-400:hover {
  color: #67e8f9 !important;
}

/* заголовки секций — плотнее и с разрядкой */
h1, h2, h3 {
  font-family: var(--avuo-font-display);
  letter-spacing: -0.02em;
}

/* alpha-варианты: перекрываем захардкоженные hex-значения палитрой бренда */
.border-gray-800\/50 { border-color: var(--avuo-line) !important; }
.border-gray-700\/50 { border-color: var(--avuo-line) !important; }
.bg-gray-800\/50 { background-color: rgba(17, 26, 44, 0.62) !important; }
.bg-gray-800\/60 { background-color: rgba(17, 26, 44, 0.72) !important; }
.bg-gray-800\/90 { background-color: rgba(17, 26, 44, 0.92) !important; }
.shadow-red-500\/40 { --tw-shadow-color: rgba(34, 211, 238, 0.35) !important; }
.shadow-red-500\/50 { --tw-shadow-color: rgba(34, 211, 238, 0.45) !important; }
.shadow-red-500\/60 { --tw-shadow-color: rgba(34, 211, 238, 0.55) !important; }
.shadow-red-500\/30 { --tw-shadow-color: rgba(34, 211, 238, 0.28) !important; }
.shadow-red-500\/20 { --tw-shadow-color: rgba(34, 211, 238, 0.2) !important; }
.shadow-red-500\/25 { --tw-shadow-color: rgba(34, 211, 238, 0.22) !important; }
.border-red-500\/20 { border-color: rgba(34, 211, 238, 0.22) !important; }
.border-red-500\/60 { border-color: rgba(34, 211, 238, 0.5) !important; }
.ring-red-500\/20 { --tw-ring-color: rgba(34, 211, 238, 0.22) !important; }
.from-red-500\/10 { --tw-gradient-from: rgba(34, 211, 238, 0.12) !important; }
.from-red-500\/20 { --tw-gradient-from: rgba(34, 211, 238, 0.22) !important; }
.to-red-500\/10 { --tw-gradient-to: rgba(34, 211, 238, 0.12) !important; }
.via-red-500\/20 { --tw-gradient-via: rgba(34, 211, 238, 0.2) !important; }
.via-red-500\/30 { --tw-gradient-via: rgba(34, 211, 238, 0.28) !important; }
.via-red-500\/40 { --tw-gradient-via: rgba(34, 211, 238, 0.36) !important; }
.to-red-400\/30 { --tw-gradient-to: rgba(34, 211, 238, 0.28) !important; }

/* ------------------------------------------- 4. Провайдер-кнопки и тосты */
/* соцкнопки в диалоге: одинаковая высота, мягкая рамка, читаемый текст */
[role="dialog"] button img {
  filter: saturate(0.9);
}

/* скроллбар */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 999px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------------------------------ 5. Прямой эфир / LIVE */
/* бейдж «直播中» на карточках — красный, брендовый циан его не перекрывает */
.absolute.top-3.left-3[class*="bg-red-600"],
.absolute.top-3.left-3[class*="from-red-500"][class*="to-red-600"],
.absolute.top-3.right-3[class*="bg-red-600"] {
  background-image: linear-gradient(135deg, #f05252 0%, #dc2626 55%, var(--avuo-live-deep) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(220, 38, 38, 0.45) !important;
}

/* текстовая метка «直播中» в hero-баннере */
.text-red-500.font-semibold.uppercase {
  color: var(--avuo-live) !important;
}

/* точки эфира */
.bg-red-500 {
  background-color: var(--avuo-live) !important;
}

/* логотип-марка в шапке и подвале */
img[alt="Avuo"] {
  display: block;
  object-fit: cover;
}