/* Roomly dashboard (2026-10-06) — лёгкий «воздушный» дашборд.
   Корень дашборда в бандле помечен классом .rt-dashboard.
   Вместо пяти насыщенных цветов, градиентов и тяжёлых теней — один фирменный
   голубой акцент, белые карточки, мягкие тени и небесная подложка сверху.
   По умолчанию значения для тёмной темы; body.light-theme — светлая. */

.rt-dashboard {
  --rd-bg-wash: none;
  --rd-card: #1c2029;
  --rd-tile: rgba(255, 255, 255, .04);
  --rd-tile-hover: rgba(255, 255, 255, .07);
  --rd-line: rgba(255, 255, 255, .07);
  --rd-ink: #f2f4f8;
  --rd-ink-2: #a3a9b8;
  --rd-ink-3: #7d8494;
  --rd-blue: #6ea2f7;
  --rd-blue-strong: #3d7ff2;
  --rd-blue-tint: rgba(61, 127, 242, .16);
  --rd-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px -18px rgba(0, 0, 0, .55);
  --rd-shadow-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .65);
  --rd-r: 22px;
  min-height: 100%;
}

body.light-theme .rt-dashboard {
  --rd-bg-wash:
    radial-gradient(900px 340px at 78% -60px, rgba(141, 182, 251, .38), transparent 70%),
    radial-gradient(700px 300px at 8% -40px, rgba(198, 222, 255, .55), transparent 70%),
    linear-gradient(180deg, #e8f1fe 0, #eef1f4 380px);
  --rd-card: #ffffff;
  --rd-tile: #f4f6f8;
  --rd-tile-hover: #eceff3;
  --rd-line: rgba(16, 24, 40, .06);
  --rd-ink: #17181b;
  --rd-ink-2: #5b6170;
  --rd-ink-3: #8b91a0;
  --rd-blue: #3d7ff2;
  --rd-blue-strong: #3d7ff2;
  --rd-blue-tint: #eaf2fe;
  --rd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -16px rgba(16, 24, 40, .14);
  --rd-shadow-hover: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px -18px rgba(16, 24, 40, .2);
  background: var(--rd-bg-wash);
}

/* ---------- заголовок ---------- */
.rt-dashboard h1 {
  color: var(--rd-ink) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em;
}
.rt-dashboard h2,
.rt-dashboard h3,
.rt-dashboard h4 { color: var(--rd-ink) !important; }

.rt-dashboard > div > div:first-child > div.bg-telegram-tertiary {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-line);
  box-shadow: var(--rd-shadow);
  border-radius: 999px !important;
}

/* ---------- карточки ---------- */
.rt-dashboard .telegram-card,
.rt-dashboard .bg-telegram-secondary {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-r) !important;
  box-shadow: var(--rd-shadow) !important;
}
.rt-dashboard .telegram-card[class*="bg-gradient"],
.rt-dashboard [class*="bg-gradient-to-r"].telegram-card { background-image: none !important; }
.rt-dashboard .telegram-card.cursor-pointer:hover { box-shadow: var(--rd-shadow-hover) !important; }

/* Полоска-градиент слева у карточек комнат — убираем. */
.rt-dashboard .absolute.inset-y-0.left-0.w-1 { display: none; }

/* ---------- цифры и подписи ---------- */
.rt-dashboard h3.text-2xl {
  color: var(--rd-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}
.rt-dashboard .telegram-card p.text-sm { color: var(--rd-ink-2) !important; }
.rt-dashboard .telegram-card p.text-sm > svg { color: var(--rd-ink-3) !important; fill: none !important; }

/* ---------- значки: одна мягкая голубая плашка вместо пяти цветов ---------- */
.rt-dashboard .w-12.h-12.rounded-2xl,
.rt-dashboard .w-14.h-14.rounded-2xl,
.rt-dashboard .h-10.w-10.rounded-xl {
  background: var(--rd-blue-tint) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.rt-dashboard .w-12.h-12.rounded-2xl svg,
.rt-dashboard .w-14.h-14.rounded-2xl svg,
.rt-dashboard .h-10.w-10.rounded-xl svg { color: var(--rd-blue) !important; }
.rt-dashboard .w-14.h-14.rounded-2xl { width: 48px !important; height: 48px !important; border-radius: 16px !important; }
.rt-dashboard .w-14.h-14.rounded-2xl svg { width: 22px !important; height: 22px !important; }

/* ---------- топ пользователей: без золота/серебра/бронзы на фоне ---------- */
.rt-dashboard a.block.p-3.rounded-xl.border {
  background: var(--rd-tile) !important;
  border-color: transparent !important;
  transform: none !important;
}
.rt-dashboard a.block.p-3.rounded-xl.border:hover { background: var(--rd-tile-hover) !important; }
.rt-dashboard a.block.p-3.rounded-xl.border p.font-medium { color: var(--rd-ink) !important; }

/* ---------- внутренние цветные плашки (донаты, выплаты, удержание) ---------- */
.rt-dashboard [class*="bg-emerald-500/10"],
.rt-dashboard [class*="bg-yellow-500/10"],
.rt-dashboard [class*="bg-purple-500/10"],
.rt-dashboard [class*="bg-blue-500/10"],
.rt-dashboard [class*="bg-red-500/10"] {
  background: var(--rd-tile) !important;
  border-color: var(--rd-line) !important;
}
.rt-dashboard [class*="bg-emerald-500/10"] .text-lg,
.rt-dashboard [class*="bg-yellow-500/10"] .text-lg,
.rt-dashboard [class*="bg-purple-500/10"] .text-lg,
.rt-dashboard [class*="bg-blue-500/10"] .text-lg { color: var(--rd-ink) !important; }
.rt-dashboard [class*="bg-emerald-500/10"] svg,
.rt-dashboard [class*="bg-yellow-500/10"] svg,
.rt-dashboard [class*="bg-purple-500/10"] svg { color: var(--rd-blue) !important; }
.rt-dashboard [class*="bg-red-500/20"].rounded-full {
  background: var(--rd-blue-tint) !important;
  color: var(--rd-blue) !important;
}

/* ---------- бейджи и пилюли ---------- */
.rt-dashboard [class*="bg-emerald-500/15"],
.rt-dashboard [class*="bg-telegram-accent/15"].rounded-full {
  background: var(--rd-blue-tint) !important;
  color: var(--rd-blue) !important;
}
.rt-dashboard .rounded-full.bg-telegram-tertiary {
  background: var(--rd-tile) !important;
  color: var(--rd-ink-2) !important;
}
.rt-dashboard [class*="border-t"][class*="border-telegram-border"] { border-color: var(--rd-line) !important; }

/* ---------- ссылки «Все →», «Создать» ---------- */
.rt-dashboard a.text-telegram-accent,
.rt-dashboard button.text-telegram-accent { color: var(--rd-blue) !important; font-weight: 500; }

/* ---------- без «прыжков» при наведении ---------- */
.rt-dashboard [class*="hover:scale"]:hover,
.rt-dashboard .group:hover [class*="group-hover:scale"] { transform: none !important; }

/* =====================================================================
   Светлая тема: «парящие» карточки и воздушный фон (как в референсе)
   ===================================================================== */
body.light-theme .rt-dashboard {
  --rd-card: rgba(255, 255, 255, .78);
  --rd-tile: rgba(255, 255, 255, .7);
  --rd-tile-hover: #ffffff;
  --rd-line: rgba(255, 255, 255, .95);
  --rd-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(40, 70, 140, .05),
    0 10px 20px -12px rgba(50, 90, 180, .16),
    0 30px 60px -28px rgba(50, 90, 180, .28);
  --rd-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(40, 70, 140, .06),
    0 16px 28px -14px rgba(50, 90, 180, .22),
    0 42px 80px -30px rgba(50, 90, 180, .36);
  --rd-r: 24px;
  /* фон — прежняя небесная подложка (--rd-bg-wash выше) */
}

/* Карточки — полупрозрачные, с белой кромкой и большой рассеянной тенью. */
body.light-theme .rt-dashboard .telegram-card,
body.light-theme .rt-dashboard .bg-telegram-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 250, 255, .78) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .95) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.light-theme .rt-dashboard .telegram-card:hover,
body.light-theme .rt-dashboard .bg-telegram-secondary:hover {
  transform: translateY(-3px);
  box-shadow: var(--rd-shadow-hover) !important;
}

/* Строки топа и внутренние плашки — тоже «парят», но тише. */
body.light-theme .rt-dashboard a.block.p-3.rounded-xl.border,
body.light-theme .rt-dashboard [class*="bg-emerald-500/10"],
body.light-theme .rt-dashboard [class*="bg-yellow-500/10"],
body.light-theme .rt-dashboard [class*="bg-purple-500/10"],
body.light-theme .rt-dashboard [class*="bg-blue-500/10"],
body.light-theme .rt-dashboard [class*="bg-red-500/10"] {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(255, 255, 255, .95) !important;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(50, 90, 180, .22);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.light-theme .rt-dashboard a.block.p-3.rounded-xl.border:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 12px 24px -12px rgba(50, 90, 180, .3);
}

/* Значки — объёмная светлая «таблетка» с голубой иконкой. */
body.light-theme .rt-dashboard .w-12.h-12.rounded-2xl,
body.light-theme .rt-dashboard .w-14.h-14.rounded-2xl,
body.light-theme .rt-dashboard .h-10.w-10.rounded-xl {
  background: linear-gradient(150deg, #ffffff 0%, #e6efff 100%) !important;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(61, 127, 242, .45) !important;
}

/* Чип рейтинга в шапке и пилюли. */
body.light-theme .rt-dashboard > div > div:first-child > div.bg-telegram-tertiary,
body.light-theme .rt-dashboard .rounded-full.bg-telegram-tertiary {
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(50, 90, 180, .3);
}

@media (prefers-reduced-motion: reduce) {
  .rt-dashboard *,
  .rt-dashboard *:hover { transition: none !important; transform: none !important; }
}

/* ---------- мобильные ---------- */
@media (max-width: 767px) {
  .rt-dashboard h1 { font-size: 22px !important; }
}