/* SELFDOT: слой стиля «стекло, свет и точки» (по макетам rondesignlab) поверх кабинета Bedolaga.
   Цвета обеих тем задаются не здесь, а в настройке бота CABINET_THEME_COLORS - кабинет сам
   строит из них шкалы --color-dark-*, --color-champagne-*, --color-accent-*.
   Здесь только форма: фон, стекло, скругления, шрифты, градиентная карточка подписки.
   Метки data-sd-* ставит /selfdot.js по смыслу текста - классы Tailwind кабинета меняются от версии к версии.
   ⚠️ После обновления образа кабинета проверить снимками: селекторы ниже завязаны на его разметку. */

:root {
  --bento-radius: 28px;
  --bento-radius-lg: 32px;
  --sd-accent: #fcee0a;
  --sd-ink: #121214;
  --sd-green: linear-gradient(180deg, #F6D1AA 0%, #D9DC86 20%, #7CC54E 48%, #2C9F3E 76%, #17862F 100%);
}

html, body, .font-sans {
  font-family: 'Twemoji Country Flags', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ---------- фон: точечная сетка и мягкие цветные пятна вместо движущихся лучей ---------- */
div.pointer-events-none.fixed.inset-0[style*="z-index: -2"] { display: none !important; }

html.light body {
  background-color: #ececef !important;
  background-image:
    radial-gradient(55% 40% at 100% 0%, rgba(124, 197, 78, 0.30), transparent 70%),
    radial-gradient(50% 38% at 0% 100%, rgba(156, 149, 240, 0.26), transparent 70%),
    radial-gradient(rgba(18, 18, 24, 0.07) 1px, transparent 1.3px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px !important;
  background-attachment: fixed !important;
}
html.dark body {
  background-color: #0e0e11 !important;
  background-image:
    radial-gradient(55% 40% at 100% 0%, rgba(44, 159, 62, 0.20), transparent 70%),
    radial-gradient(50% 38% at 0% 100%, rgba(122, 112, 230, 0.18), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.3px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px !important;
  background-attachment: fixed !important;
}

/* ---------- стеклянные карточки ---------- */
.card {
  border-radius: var(--bento-radius) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
html.light .card {
  background-color: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 1px 2px rgba(18, 18, 24, 0.04), 0 24px 48px -32px rgba(18, 18, 24, 0.28) !important;
}
html.dark .card {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px -30px rgba(0, 0, 0, 0.65) !important;
}

/* ---------- кнопки-таблетки и поля ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger { border-radius: 999px !important; }
.btn-primary { font-weight: 600 !important; box-shadow: 0 14px 30px -18px rgba(150, 140, 0, 0.75); }
/* светлая тема: кабинет затемняет жёлтый до графита ради контраста - возвращаем фирменный жёлтый с тёмным текстом */
html.light .btn-primary:not(:disabled) { background-color: #fcee0a !important; color: #121214 !important; }
html.light .btn-primary:not(:disabled):hover { background-color: #fff45a !important; }
.input, input.input, textarea.input, select.input { border-radius: 16px !important; }

/* ---------- верхняя шапка (компьютер) и нижнее меню (телефон, мини-приложение) ---------- */
header.fixed.top-0 {
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
html.light header.fixed.top-0 { background-color: rgba(236, 236, 239, 0.78) !important; border-color: rgba(18, 18, 24, 0.06) !important; }
html.dark header.fixed.top-0 { background-color: rgba(14, 14, 17, 0.78) !important; border-color: rgba(255, 255, 255, 0.06) !important; }

nav.fixed.z-50 {
  border-radius: 30px !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
html.light nav.fixed.z-50 {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 20px 40px -24px rgba(18, 18, 24, 0.35) !important;
}
html.dark nav.fixed.z-50 {
  background-color: rgba(26, 26, 31, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7) !important;
}

/* ---------- главная: градиентная карточка подписки ---------- */
[data-sd-hero] {
  background: var(--sd-green) !important;
  border: none !important;
  border-radius: 34px !important;
  box-shadow: 0 30px 60px -30px rgba(23, 134, 47, 0.55) !important;
  color: #ffffff;
}
/* весь текст на градиенте тёмно-зелёный: светлый не читается на жёлто-зелёной середине */
[data-sd-hero], [data-sd-hero] * { color: #10301a !important; }
[data-sd-hero] svg { stroke: currentColor; }
/* строки и плитки внутри - матовое белое стекло */
[data-sd-hero] .rounded-\[14px\],
[data-sd-hero] [class*="rounded-2xl"],
[data-sd-hero] [class*="rounded-xl"] {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #10301a !important;
}
[data-sd-hero] .rounded-\[14px\] *, [data-sd-hero] [class*="rounded-2xl"] *, [data-sd-hero] [class*="rounded-xl"] * { color: #10301a !important; }
html.dark [data-sd-hero] { box-shadow: 0 30px 60px -28px rgba(23, 134, 47, 0.45) !important; }

/* ---------- крупные числа: Onest жирным, цифры одинаковой ширины ----------
   Точечный Doto из макетов убран по просьбе владельца 2026-10-19: плохо читается. */
[data-sd-num] {
  font-family: 'Onest', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em !important;
}

/* ---------- тариф «Премиум»: розово-сиреневый градиент, тёмный текст для контраста ---------- */
[data-sd-premium] {
  background: linear-gradient(160deg, #FFD3B5 0%, #FFB3D2 45%, #E9A6F0 100%) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 30px 60px -32px rgba(210, 68, 207, 0.55) !important;
}
[data-sd-premium], [data-sd-premium] * { color: #2a0b26 !important; }
[data-sd-premium] .btn-secondary, [data-sd-premium] button:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- светлая тема: жёлтый ТЕКСТ на светлом не читается (замечание владельца 2026-10-19) ----------
   Фоны, рамки и кнопки остаются жёлтыми; текст акцентного цвета - тёмно-оливковый (#5c5600, контраст ~7:1). */
html.light .text-accent-300, html.light .text-accent-400, html.light .text-accent-500,
html.light .text-accent-600, html.light [class*="text-accent-"]:not(.btn-primary) {
  color: #5c5600 !important;
}
/* статусы с цветом в разметке: «Безлимит», «Активна» и подобные */
html.light [style*="color: rgb(252, 238, 10)"], html.light [style*="color: #fcee0a"], html.light [style*="color:#fcee0a"] {
  color: #5c5600 !important;
}
html.light main .prose a, html.light main article a, html.light main p a { color: #5c5600 !important; text-decoration-color: #d9cc00; }