/* Roomly app theme (2026-10-05) — светлый «мягкий» стиль кабинета.
   Слой поверх скомпилированного CSS: только html.rt-app (кабинет) и только
   светлая тема. Лендинг, вход/регистрация и тёмная тема не затрагиваются.
   Палитра: холодный светло-серый фон, белые карточки, голубые пилюли для
   главных действий (фирменный цвет), голубые тинты — мягкий акцент. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

html.rt-app {
  --rt-bg: #eef1f4;
  --rt-card: #ffffff;
  --rt-tile: #f4f6f8;
  --rt-tile-2: #eceff3;
  --rt-line: rgba(16, 24, 40, .07);
  --rt-ink: #17181b;
  --rt-ink-2: #5b6170;
  --rt-ink-3: #8b91a0;
  --rt-blue: #3d7ff2;
  --rt-blue-2: #2f6fe0;
  --rt-blue-soft: #8db6fb;
  --rt-blue-ink: #1d4fb0;
  --rt-blue-tint: #eaf2fe;
  --rt-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -14px rgba(16, 24, 40, .14);
  --rt-shadow-lg: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -20px rgba(16, 24, 40, .22);
  --rt-r: 22px;
}

/* ---------- основа ---------- */
html.rt-app.light-theme,
html.rt-app body.light-theme,
html.rt-app body.light-theme #root.light-theme {
  --bg-primary: #eef1f4; --bg-secondary: #ffffff; --bg-tertiary: #f4f6f8; --bg-hover: #eceff3;
  --text-primary: #17181b; --text-secondary: #5b6170; --border-color: rgba(16, 24, 40, .07);
  --card-bg: #ffffff; --input-bg: #ffffff; --input-border: rgba(16, 24, 40, .1); --accent-color: #3d7ff2; --accent-hover: #2f6fe0;
}
html.rt-app.light-theme { background-color: var(--rt-bg) !important; }
html.rt-app body.light-theme,
html.rt-app body.light-theme .bg-telegram-bg { background: var(--rt-bg) !important; }
html.rt-app body.light-theme,
html.rt-app body.light-theme button,
html.rt-app body.light-theme input,
html.rt-app body.light-theme textarea,
html.rt-app body.light-theme select { font-family: 'Onest', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
html.rt-app body.light-theme #root { color: var(--rt-ink); }
html.rt-app body.light-theme h1 { font-weight: 600 !important; letter-spacing: -.025em; }
html.rt-app body.light-theme h2,
html.rt-app body.light-theme h3 { font-weight: 600 !important; letter-spacing: -.015em; }
html.rt-app body.light-theme .font-bold { font-weight: 600 !important; }
html.rt-app body.light-theme .font-extrabold,
html.rt-app body.light-theme .font-black { font-weight: 700 !important; }
html.rt-app body.light-theme .text-telegram-text-secondary { color: var(--rt-ink-2) !important; }
html.rt-app body.light-theme .text-telegram-text-secondary\/70,
html.rt-app body.light-theme .text-telegram-text-secondary\/60 { color: var(--rt-ink-3) !important; }
html.rt-app body.light-theme .text-telegram-text-secondary\/50 { color: #a3a8b4 !important; }
html.rt-app body.light-theme .text-telegram-accent { color: var(--rt-blue) !important; }
html.rt-app body.light-theme :is(a, button).text-telegram-accent { font-weight: 500; }
html.rt-app body.light-theme ::selection { background: #cfe0fd; color: var(--rt-ink); }

/* подложки страниц: белые обёртки → общий серый фон */
html.rt-app body.light-theme #root,
html.rt-app body.light-theme #root div.light-theme,
html.rt-app body.light-theme .explore-page,
html.rt-app body.light-theme .min-h-screen.bg-gradient-to-b,
html.rt-app body.light-theme .min-h-screen.bg-gradient-to-br { background: var(--rt-bg) !important; }

/* ---------- карточки ---------- */
html.rt-app body.light-theme .telegram-card,
html.rt-app body.light-theme .bg-telegram-secondary,
html.rt-app body.light-theme .bg-telegram-secondary\/95,
html.rt-app body.light-theme .bg-telegram-secondary\/90,
html.rt-app body.light-theme .bg-telegram-secondary\/80 {
  background: var(--rt-card) !important;
  border: 1px solid var(--rt-line) !important;
  border-radius: var(--rt-r) !important;
  box-shadow: var(--rt-shadow) !important;
}
html.rt-app body.light-theme .telegram-card::before,
html.rt-app body.light-theme .telegram-card::after { display: none !important; }
html.rt-app body.light-theme .bg-telegram-secondary\/50,
html.rt-app body.light-theme .bg-telegram-secondary\/30 { background: var(--rt-tile) !important; border-color: transparent !important; box-shadow: none !important; }

/* вложенные плитки внутри карточек — светло-серые, без рамок и теней */
html.rt-app body.light-theme .bg-telegram-tertiary,
html.rt-app body.light-theme .bg-telegram-tertiary\/50,
html.rt-app body.light-theme .bg-telegram-tertiary\/30,
html.rt-app body.light-theme .bg-telegram-tertiary\/20 { background: var(--rt-tile) !important; }
html.rt-app body.light-theme .telegram-card .telegram-card,
html.rt-app body.light-theme .telegram-card .bg-telegram-secondary,
html.rt-app body.light-theme .bg-telegram-secondary .bg-telegram-secondary {
  background: var(--rt-tile) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 16px !important;
}
html.rt-app body.light-theme .hover\:bg-telegram-tertiary:hover,
html.rt-app body.light-theme .hover\:bg-telegram-tertiary\/50:hover { background: var(--rt-tile-2) !important; }

/* рамки — один тон */
html.rt-app body.light-theme .border-telegram-border,
html.rt-app body.light-theme .border-telegram-border\/30,
html.rt-app body.light-theme .border-telegram-border\/40,
html.rt-app body.light-theme .border-telegram-border\/50,
html.rt-app body.light-theme .border-telegram-border\/60,
html.rt-app body.light-theme .border-telegram-secondary,
html.rt-app body.light-theme .border-gray-200\/50 { border-color: var(--rt-line) !important; }
html.rt-app body.light-theme .bg-telegram-border { background: var(--rt-line) !important; }

/* ---------- кнопки и акцент ---------- */
/* главные действия — голубая пилюля */
html.rt-app body.light-theme .bg-telegram-accent,
html.rt-app body.light-theme .telegram-button,
html.rt-app body.light-theme .bg-gradient-to-r.from-telegram-accent,
html.rt-app body.light-theme .bg-gradient-to-br.from-telegram-accent:is(button, a) {
  background: var(--rt-blue) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(61, 127, 242, .7) !important;
}
html.rt-app body.light-theme :is(button, a).bg-telegram-accent,
html.rt-app body.light-theme .telegram-button { border-radius: 999px !important; }
html.rt-app body.light-theme .bg-telegram-accent *,
html.rt-app body.light-theme .telegram-button * { color: #fff !important; }
html.rt-app body.light-theme .hover\:bg-telegram-hover:hover,
html.rt-app body.light-theme .bg-telegram-accent:hover,
html.rt-app body.light-theme .telegram-button:hover { background: var(--rt-blue-2) !important; }
html.rt-app body.light-theme [class*="shadow-telegram-accent"] { --tw-shadow-color: rgba(16, 24, 40, .12) !important; }

/* мягкие тинты акцента — лаймовые */
html.rt-app body.light-theme .bg-telegram-accent\/5 { background: #f5f9ff !important; }
html.rt-app body.light-theme .bg-telegram-accent\/10,
html.rt-app body.light-theme .bg-telegram-accent\/15 { background: var(--rt-blue-tint) !important; color: var(--rt-blue-ink) !important; }
html.rt-app body.light-theme .bg-telegram-accent\/20 { background: #dbe8fd !important; color: var(--rt-blue-ink) !important; }
html.rt-app body.light-theme .bg-telegram-accent\/50 { background: var(--rt-blue-soft) !important; }
html.rt-app body.light-theme .bg-telegram-accent\/10 .text-telegram-accent,
html.rt-app body.light-theme .bg-telegram-accent\/15 .text-telegram-accent,
html.rt-app body.light-theme .bg-telegram-accent\/20 .text-telegram-accent { color: var(--rt-blue-ink) !important; }
html.rt-app body.light-theme .border-telegram-accent,
html.rt-app body.light-theme .border-telegram-accent\/30,
html.rt-app body.light-theme .border-telegram-accent\/20 { border-color: rgba(61, 127, 242, .35) !important; }
html.rt-app body.light-theme .ring-telegram-accent\/40,
html.rt-app body.light-theme .focus\:ring-telegram-accent:focus { --tw-ring-color: rgba(61, 127, 242, .45) !important; }
html.rt-app body.light-theme .from-telegram-accent\/30 { --tw-gradient-from: #e3edfd !important; --tw-gradient-to: rgba(227, 237, 253, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.rt-app body.light-theme .to-telegram-hover\/30 { --tw-gradient-to: #e6eaef !important; }

/* ---------- поля ввода ---------- */
html.rt-app body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.rt-app body.light-theme textarea,
html.rt-app body.light-theme select {
  background-color: var(--rt-card) !important;
  border-color: var(--rt-line) !important;
  border-radius: 16px !important;
  color: var(--rt-ink) !important;
}
html.rt-app body.light-theme input:focus,
html.rt-app body.light-theme textarea:focus,
html.rt-app body.light-theme select:focus { border-color: var(--rt-blue-soft) !important; box-shadow: 0 0 0 4px rgba(61, 127, 242, .18) !important; outline: none !important; }

/* ---------- навигация ---------- */
html.rt-app body.light-theme nav.sticky {
  background: rgba(238, 241, 244, .82) !important;
  border-bottom: 1px solid var(--rt-line) !important;
  box-shadow: none !important;
}
html.rt-app body.light-theme nav.sticky a[class*="rounded-xl"],
html.rt-app body.light-theme nav.sticky button[class*="rounded-xl"] { border-radius: 999px !important; color: var(--rt-ink-2) !important; }
html.rt-app body.light-theme nav.sticky a[class*="rounded-xl"]:hover,
html.rt-app body.light-theme nav.sticky button[class*="rounded-xl"]:hover { background: rgba(255, 255, 255, .9) !important; color: var(--rt-ink) !important; }
/* активный пункт — голубая пилюля */
html.rt-app body.light-theme nav.sticky a[class*="bg-telegram-accent"],
html.rt-app body.light-theme nav.sticky a[class*="bg-blue"] { background: var(--rt-blue) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(61, 127, 242, .7) !important; }
html.rt-app body.light-theme nav.sticky a[class*="bg-telegram-accent"] *,
html.rt-app body.light-theme nav.sticky a[class*="bg-blue"] * { color: #fff !important; }
html.rt-app body.light-theme nav.sticky a[class*="bg-telegram-accent"] span.rounded-full,
html.rt-app body.light-theme nav.sticky a[class*="bg-blue"] span.rounded-full { background: #fff !important; }
/* иконки справа — белые кружки, как в референсе */
html.rt-app body.light-theme nav.sticky > div:last-child > :is(button, a, div > button)[class*="p-2"] {
  background: #fff !important; border-radius: 999px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important; color: var(--rt-ink) !important;
}

/* ---------- бейджи, статусы, иконки ---------- */
/* пастельные квадраты-иконки → круглые мягкие кружки */
html.rt-app body.light-theme .telegram-card :is(.w-10, .w-11, .w-12, .w-14).rounded-xl:is([class*="/10"], [class*="/15"], [class*="/20"]),
html.rt-app body.light-theme .telegram-card :is(.w-10, .w-11, .w-12, .w-14).rounded-2xl:is([class*="/10"], [class*="/15"], [class*="/20"]) {
  border-radius: 999px !important; background-image: none !important;
}
html.rt-app body.light-theme .bg-blue-500\/20,
html.rt-app body.light-theme .bg-blue-500\/10 { background-color: #e8eefc !important; }
html.rt-app body.light-theme .bg-purple-500\/20,
html.rt-app body.light-theme .bg-purple-500\/10 { background-color: #efeafc !important; }
html.rt-app body.light-theme .bg-emerald-500\/20,
html.rt-app body.light-theme .bg-emerald-500\/15,
html.rt-app body.light-theme .bg-emerald-500\/10 { background-color: #e6f7ef !important; }
html.rt-app body.light-theme .bg-yellow-500\/20,
html.rt-app body.light-theme .bg-yellow-500\/15,
html.rt-app body.light-theme .bg-yellow-500\/10,
html.rt-app body.light-theme .bg-amber-600\/20 { background-color: #fdf1e2 !important; }
html.rt-app body.light-theme .bg-red-500\/20,
html.rt-app body.light-theme .bg-red-500\/10 { background-color: #fdebec !important; }
html.rt-app body.light-theme .bg-emerald-400,
html.rt-app body.light-theme .bg-green-500 { background-color: #34c47c !important; }
html.rt-app body.light-theme .text-emerald-400,
html.rt-app body.light-theme .text-emerald-500,
html.rt-app body.light-theme .text-green-400,
html.rt-app body.light-theme .text-green-500 { color: #16a163 !important; }
/* градиентные «простыни» внутри карточек — убираем, остаётся чистый белый */
html.rt-app body.light-theme .telegram-card.bg-gradient-to-br:not(:is(button, a)),
html.rt-app body.light-theme .telegram-card.bg-gradient-to-r:not(:is(button, a)) { background-image: none !important; }
html.rt-app body.light-theme .absolute.inset-y-0.left-0.w-1 { display: none !important; }

/* ---------- модалки ---------- */
html.rt-app body.light-theme .fixed.inset-0 > div[class*="rounded-2xl"][class*="bg-telegram-secondary"],
html.rt-app body.light-theme .fixed.inset-0 > div[class*="rounded-3xl"] { border-radius: 28px !important; box-shadow: var(--rt-shadow-lg) !important; }

/* ---------- кнопки-«переключатели» (табы) ---------- */
html.rt-app body.light-theme button.bg-telegram-tertiary.px-6,
html.rt-app body.light-theme button.bg-telegram-tertiary.px-4 { background: #fff !important; border: 1px solid var(--rt-line) !important; color: var(--rt-ink-2) !important; border-radius: 999px !important; }
html.rt-app body.light-theme button.bg-telegram-tertiary:hover { color: var(--rt-ink) !important; }

/* ---------- плавающие элементы ---------- */
html.rt-app body.light-theme .rounded-xl.rounded-xl { border-radius: 14px; }
html.rt-app .roomly-launch-admin { background: var(--rt-blue) !important; border-radius: 999px !important; }

/* скелетоны в тон новой палитре */
html.rt-app { --rsk-c: rgba(16, 24, 40, .07); --rsk-h: rgba(16, 24, 40, .13); --rsk-line: rgba(16, 24, 40, .06); }
html.rt-app .rsk-card { background: #fff; border-radius: var(--rt-r); box-shadow: var(--rt-shadow); border-color: transparent; }

/* ---------- цифры статистики — один цвет ---------- */
html.rt-app body.light-theme .telegram-card :is(.text-xl, .text-2xl, .text-3xl):is([class*="text-emerald"], [class*="text-green"], [class*="text-blue"], [class*="text-yellow"], [class*="text-orange"], [class*="text-purple"], [class*="text-pink"], [class*="text-telegram-accent"]) { color: var(--rt-ink) !important; }
html.rt-app body.light-theme [class*="bg-yellow-500\/"] :is(.text-yellow-400, .text-yellow-500, .text-yellow-300),
html.rt-app body.light-theme [class*="bg-yellow-500\/"]:is(.text-yellow-400, .text-yellow-500, .text-yellow-300, .text-yellow-400\/80, .text-yellow-400\/70) { color: #85570a !important; }

/* ---------- «Исследовать» ---------- */
html.rt-app body.light-theme .explore-filter-row { background: var(--rt-card) !important; border: 1px solid var(--rt-line) !important; border-radius: var(--rt-r) !important; box-shadow: var(--rt-shadow) !important; }
html.rt-app body.light-theme .explore-chip { background: var(--rt-tile) !important; border: 1px solid transparent !important; color: var(--rt-ink-2) !important; box-shadow: none !important; border-radius: 999px !important; }
html.rt-app body.light-theme .explore-chip:hover { background: var(--rt-tile-2) !important; color: var(--rt-ink) !important; }
html.rt-app body.light-theme .explore-chip--active { background: var(--rt-blue) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(61, 127, 242, .7) !important; }
html.rt-app body.light-theme .explore-chip--group { background: transparent !important; color: var(--rt-ink-3) !important; padding-left: 6px !important; }
html.rt-app body.light-theme .explore-search { background: var(--rt-card) !important; border: 1px solid var(--rt-line) !important; box-shadow: var(--rt-shadow) !important; }
/* обложки карточек: вместо кислотных градиентов — мягкие пастельные подложки */
html.rt-app body.light-theme [class*="aspect-[16/11]"] {
  background: radial-gradient(circle at 78% 18%, rgba(125, 172, 250, .55), transparent 58%), linear-gradient(140deg, #f3f6fb, #e2eaf7) !important;
  border-radius: 16px !important;
}
html.rt-app body.light-theme a:nth-child(3n+2) [class*="aspect-[16/11]"] { background: radial-gradient(circle at 78% 18%, rgba(165, 180, 252, .5), transparent 58%), linear-gradient(140deg, #f4f5fb, #e6e8f7) !important; }
html.rt-app body.light-theme a:nth-child(3n+3) [class*="aspect-[16/11]"] { background: radial-gradient(circle at 78% 18%, rgba(125, 211, 252, .5), transparent 58%), linear-gradient(140deg, #f2f8fb, #e0eef5) !important; }
html.rt-app body.light-theme [class*="aspect-[16/11]"] img { box-shadow: 0 0 0 4px #fff, 0 10px 24px -10px rgba(16, 24, 40, .35) !important; }
html.rt-app body.light-theme a.group:hover > div[class*="rounded-2xl"] { box-shadow: var(--rt-shadow-lg) !important; border-color: var(--rt-line) !important; }

/* ---------- «Моё расписание»: фиолетовый → голубой ---------- */
html.rt-app body.light-theme .schedule-page { background: var(--rt-bg) !important; }
html.rt-app body.light-theme .schedule-page .sched-pill { background: var(--rt-blue-tint) !important; color: var(--rt-blue-ink) !important; }
html.rt-app body.light-theme .schedule-page .sched-pill--soft { background: #fff !important; color: var(--rt-ink-2) !important; border-color: var(--rt-line) !important; }
html.rt-app body.light-theme .schedule-page :is(.sched-pill--active, .sched-slot--active) { background: var(--rt-blue) !important; box-shadow: 0 8px 18px -10px rgba(61, 127, 242, .7) !important; color: #fff !important; }
html.rt-app body.light-theme .schedule-page .sched-body { background: transparent !important; border: 0 !important; padding: 0 !important; }
html.rt-app body.light-theme .schedule-page :is(.sched-stat, .sched-card, .sched-empty) { border-radius: var(--rt-r) !important; border-color: var(--rt-line) !important; box-shadow: var(--rt-shadow) !important; }
html.rt-app body.light-theme .schedule-page .sched-slot { border-radius: 16px !important; border-color: var(--rt-line) !important; }
html.rt-app body.light-theme .schedule-page .sched-card:hover { border-color: rgba(61, 127, 242, .35) !important; }
html.rt-app body.light-theme .schedule-page .sched-card__time { color: var(--rt-blue) !important; }
html.rt-app body.light-theme .schedule-page .sched-stat--purple .sched-stat__num { color: var(--rt-blue) !important; }
html.rt-app body.light-theme .schedule-page .sched-tag--purple { background: var(--rt-blue-tint) !important; color: var(--rt-blue-ink) !important; }

/* ---------- мобильный: плитки статистики в две колонки ---------- */
@media (max-width: 767px) {
  html.rt-app body.light-theme .grid.grid-cols-1:is(.md\:grid-cols-4, .md\:grid-cols-5):has(> .telegram-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  html.rt-app body.light-theme .grid.grid-cols-1:is(.md\:grid-cols-4, .md\:grid-cols-5) > .telegram-card { padding: 14px !important; }
  html.rt-app body.light-theme .grid.grid-cols-1:is(.md\:grid-cols-4, .md\:grid-cols-5) > .telegram-card :is(.w-12, .w-14) { width: 36px !important; height: 36px !important; }
}

/* карточки с «акцентной» рамкой — нейтральная рамка, как у остальных */
html.rt-app body.light-theme :is(.telegram-card, .bg-telegram-secondary):is(.border-telegram-accent\/30, .border-telegram-accent\/20, .border-telegram-accent) { border-color: var(--rt-line) !important; }

/* подсказки на жёлтой подложке — читаемый тёмно-янтарный текст */
html.rt-app body.light-theme [class*="bg-yellow-500\/"] :is(.text-yellow-400\/80, .text-yellow-400\/70),
html.rt-app body.light-theme .text-yellow-400\/70 { color: #85570a !important; }

/* ---------- чат: не перекрывать меню (любая тема) ---------- */
html.rt-app .fixed.inset-0.z-50:has(button[aria-label="Close chat"]) {
  top: 65px !important; z-index: 40 !important; background: transparent !important; backdrop-filter: none !important;
}
@media (max-width: 767px) {
  html.rt-app .fixed.inset-0.z-50:has(button[aria-label="Close chat"]) { top: 0 !important; bottom: var(--rt-bottom-nav, 72px) !important; }
}

/* ---------- чат: зелёный brand-teal → фирменный голубой (обе темы) ---------- */
html.rt-app body .bg-brand-teal { background-color: var(--rt-blue, #3d7ff2) !important; }
html.rt-app body .text-brand-teal { color: var(--rt-blue, #3d7ff2) !important; }
html.rt-app body .bg-brand-teal\/10 { background-color: rgba(61, 127, 242, .1) !important; }
html.rt-app body :is(.ring-brand-teal\/20, .ring-brand-teal\/40, .focus\:ring-brand-teal\/20:focus) { --tw-ring-color: rgba(61, 127, 242, .3) !important; }
html.rt-app body :is(.border-brand-teal\/20, .border-brand-teal\/40, .focus\:border-brand-teal\/20:focus) { border-color: rgba(61, 127, 242, .35) !important; }
html.rt-app { --rt-blue: #3d7ff2; }
/* светлая тема: лента на общем сером фоне, белые входящие пузыри */
html.rt-app body.light-theme .chat-thread { background: var(--rt-bg) !important; }
html.rt-app body.light-theme .chat-thread .bg-white { box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important; }
/* поле ввода чата — без общей рамки/скругления полей (у композера своя обёртка) */
html.rt-app body.light-theme .fixed:has(button[aria-label="Close chat"]) textarea {
  background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* пока открыт чат, админская кнопка «Управление запуском» не перекрывает отправку */
html.rt-app:has(button[aria-label="Close chat"]) .roomly-launch-admin { display: none !important; }