/**
 * Стили в духе Telegram Mini Apps / @telegram-apps/telegram-ui (тёмная тема),
 * но палитра TRIAD GHETTO из brand-tokens.css.
 * Полные React-компоненты см. https://github.com/telegram-mini-apps-dev/TelegramUI
 *
 * Подключать сразу после brand-tokens.css, до Tabler.
 */
body.ac-tg-ui {
  /* Мост к Mini App theme (используются в токенах tgui) */
  --tg-theme-bg-color: var(--ac-void);
  --tg-theme-text-color: #f4f3f1;
  --tg-theme-hint-color: #a89f94;
  --tg-theme-link-color: var(--ac-gold-bright);
  --tg-theme-button-color: var(--ac-red-rich);
  --tg-theme-button-text-color: #fff;
  --tg-theme-secondary-bg-color: var(--ac-ink);
  --tg-theme-header-bg-color: rgba(13, 13, 13, 0.92);
  --tg-theme-accent-text-color: var(--ac-gold-bright);
  --tg-theme-section-bg-color: rgba(26, 26, 26, 0.65);
  --tg-theme-section-header-text-color: #c4b8a8;
  --tg-theme-subtitle-text-color: #b8aea2;
  --tg-theme-destructive-text-color: #ff6b6b;

  /* Зеркало тёмной темы из telegram-ui (namespaced --tgui--) */
  --tgui--font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tgui--font_weight--accent1: 800;
  --tgui--font_weight--accent2: 700;
  --tgui--font_weight--accent3: 500;
  --tgui--large_title--font_size: 34px;
  --tgui--large_title--line_height: 42px;
  --tgui--title1--font_size: 22px;
  --tgui--title1--line_height: 28px;
  --tgui--title2--font_size: 20px;
  --tgui--title2--line_height: 26px;
  --tgui--title3--font_size: 17px;
  --tgui--title3--line_height: 22px;
  --tgui--headline--font_size: 17px;
  --tgui--headline--line_height: 24px;
  --tgui--text--font_size: 16px;
  --tgui--text--line_height: 24px;
  --tgui--subheadline1--font_size: 15px;
  --tgui--subheadline1--line_height: 22px;
  --tgui--subheadline2--font_size: 14px;
  --tgui--subheadline2--line_height: 20px;
  --tgui--caption1--font_size: 13px;
  --tgui--caption1--line_height: 18px;
  --tgui--caption2--font_size: 11px;
  --tgui--caption2--line_height: 14px;
  --tgui--border--width: 1px;
  --tgui--base--section--box_shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  --tgui--bg_color: var(--tg-theme-bg-color);
  --tgui--text_color: var(--tg-theme-text-color);
  --tgui--hint_color: var(--tg-theme-hint-color);
  --tgui--link_color: var(--tg-theme-link-color);
  --tgui--button_color: var(--tg-theme-button-color);
  --tgui--button_text_color: var(--tg-theme-button-text-color);
  --tgui--secondary_bg_color: var(--tg-theme-secondary-bg-color);
  --tgui--header_bg_color: var(--tg-theme-header-bg-color);
  --tgui--accent_text_color: var(--tg-theme-accent-text-color);
  --tgui--section_bg_color: var(--tg-theme-section-bg-color);
  --tgui--section_header_text_color: var(--tg-theme-section-header-text-color);
  --tgui--subtitle_text_color: var(--tg-theme-subtitle-text-color);
  --tgui--destructive_text_color: var(--tg-theme-destructive-text-color);
  --tgui--skeleton: rgba(255, 255, 255, 0.04);
  --tgui--divider: rgba(242, 201, 76, 0.12);
  --tgui--outline: rgba(242, 201, 76, 0.14);
  --tgui--surface_primary: rgba(26, 22, 20, 0.92);
  --tgui--tertiary_bg_color: rgba(42, 28, 16, 0.55);
  --tgui--quartenary_bg_color: rgba(31, 20, 10, 0.65);
  --tgui--segmented_control_active_bg: rgba(26, 26, 26, 0.95);
  --tgui--card_bg_color: rgba(26, 22, 20, 0.72);
  --tgui--secondary_hint_color: #8a8075;
  --tgui--secondary_fill: rgba(var(--ac-rgb), 0.18);
  --tgui--green: #5cce7a;
  --tgui--destructive_background: rgba(224, 42, 27, 0.25);
  --tgui--primary_code_highlight: var(--ac-gold-bright);
  --tgui--secondary_code_highlight: #e937ed;
  --tgui--tertiary_code_highlight: #5ae536;
  --tgui--plain_background: rgba(255, 255, 255, 0.06);
  --tgui--plain_foreground: #f4f3f1;
  --tgui--toast_accent_color: var(--ac-gold-bright);
  --tgui--surface_dark: rgba(13, 13, 13, 0.88);
  --tooltip_background_dark: rgba(0, 0, 0, 0.88);
  --tgui--white: #fff;
  --tgui--black: #000;
  --tgui--z-index--simple: 1;
  --tgui--z-index--skeleton: 2;
  --tgui--z-index--overlay: 3;
  --tgui--safe_area_inset_bottom: env(safe-area-inset-bottom, 0px);

  font-family: var(--tgui--font-family);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Tabler под токены TG/TRIAD */
body.ac-tg-ui.ac-app-shell {
  color: var(--tgui--text_color);
  background-color: var(--tgui--bg_color);
  background-image:
    radial-gradient(ellipse 100% 70% at 100% -10%, rgba(242, 201, 76, 0.1), transparent 55%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(224, 42, 27, 0.07), transparent 50%),
    linear-gradient(180deg, var(--tgui--bg_color) 0%, var(--ac-ink) 55%, var(--ac-brown-shadow) 100%);
}

body.ac-tg-ui.ac-app-shell .navbar.navbar-light {
  background: var(--tgui--header_bg_color) !important;
  border-bottom-color: var(--tgui--divider) !important;
  backdrop-filter: saturate(180%) blur(16px);
}

body.ac-tg-ui.ac-app-shell .card {
  background: var(--tgui--card_bg_color);
  border: 1px solid var(--tgui--outline);
  color: var(--tgui--text_color);
  border-radius: 12px;
  box-shadow: var(--tgui--base--section--box_shadow);
}

body.ac-tg-ui.ac-app-shell .card-header,
body.ac-tg-ui.ac-app-shell .card-title {
  color: var(--tgui--text_color);
}

body.ac-tg-ui.ac-app-shell .list-group-item {
  background: rgba(26, 22, 20, 0.35);
  border-color: var(--tgui--divider);
  color: var(--tgui--text_color);
}

body.ac-tg-ui.ac-app-shell .btn-primary {
  background: var(--tgui--button_color);
  border-color: transparent;
  color: var(--tgui--button_text_color);
  border-radius: 12px;
  font-weight: var(--tgui--font_weight--accent2);
}

body.ac-tg-ui.ac-app-shell .btn-primary:hover {
  filter: brightness(1.08);
  color: var(--tgui--button_text_color);
}

body.ac-tg-ui.ac-app-shell .btn-outline-secondary {
  border-radius: 12px;
  border-color: var(--tgui--outline);
  color: var(--tgui--plain_foreground);
  background: var(--tgui--plain_background);
}

body.ac-tg-ui.ac-app-shell a:not(.btn):not(.navbar-brand) {
  color: var(--tgui--link_color);
}

/* Лендинг: те же токены, без ломания десктоп-сетки */
body.ac-tg-ui.ac-landing-v2 {
  color: var(--tgui--text_color);
}

@media (max-width: 767.98px) {
  body.ac-tg-ui.ac-landing-v2 .ac-nav {
    background: var(--tgui--header_bg_color) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tgui--divider);
  }
}

/* Кабинет: шапка и нижняя панель в духе Telegram (моб. + узкий десктоп ок) */
body.ac-tg-ui .cabinet-mheader {
  background: var(--tgui--header_bg_color);
  border-bottom: 1px solid var(--tgui--divider);
}

body.ac-tg-ui .cabinet-mheader-title {
  color: var(--tgui--text_color);
  font-size: var(--tgui--headline--font_size);
  font-weight: var(--tgui--font_weight--accent2);
}

body.ac-tg-ui .cabinet-bottomtabs {
  background: var(--tgui--surface_dark);
  border-top: 1px solid var(--tgui--divider);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

body.ac-tg-ui .cabinet-bottomtab {
  color: var(--tgui--hint_color);
}

body.ac-tg-ui .cabinet-bottomtab.is-active {
  color: var(--tgui--link_color);
}

body.ac-tg-ui .cabinet-bottomtab.is-active .cabinet-bottomtab__ico {
  color: var(--tgui--link_color);
}

/* Вход / регистрация: шапка как у TG-панели */
body.ac-tg-ui.auth-page .site-topbar {
  border-bottom-color: var(--tgui--divider);
  background: var(--tgui--header_bg_color);
}