:root {
  --ui-html-bg: #f5f5f5;
  --ui-page-bg: #eeeeee;
  --ui-header-bg: #e0e0e0;
  --ui-header-text: #424242;
  --ui-tab-active-bg: #e0e0e0;
  --ui-tab-active-text: #23262f;
  --ui-drawer-bg: #ffffff;
  --ui-drawer-content-bg: #eeeeee;
  --ui-drawer-border-color: rgba(0, 0, 0, 0.12);
  --ui-active-item-bg: #e0e0e0;
  --ui-active-item-text: #212121;
}

html,
body,
#q-app {
  width: 100%;
  direction: ltr;
}

html,
body {
  margin: 0;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.content-center {
  align-content: center;
}

.q-icon::before,
.q-icon::after {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.q-toggle__inner--truthy .q-toggle__thumb .q-icon {
  color: #fff;
  opacity: 1;
}

.q-toggle__thumb .q-icon {
  opacity: 1 !important;
}

.q-toggle__thumb .q-icon {
  font-size: .3em;
  min-width: 1em;
  color: #000;
  opacity: .54;
  z-index: 1;
}

.q-icon,
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  -webkit-user-select: none;
  user-select: none;
  cursor: inherit;
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.q-icon {
  line-height: 1;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-align: center;
  position: relative;
  box-sizing: content-box;
  fill: currentColor;
}

body.body--dark {
  --ui-html-bg: #17181c;
  --ui-page-bg: #17181c;
  --ui-header-bg: #23262f;
  --ui-header-text: #eeeeee;
  --ui-tab-active-bg: #424242;
  --ui-tab-active-text: #f5f5f5;
  --ui-drawer-bg: #17181c;
  --ui-drawer-content-bg: #17181c;
  --ui-drawer-border-color: rgba(255, 255, 255, 0.28);
  --ui-active-item-bg: #424242;
  --ui-active-item-text: #f5f5f5;
}

.q-page-container-blog {
  padding-top: 66px;
  padding-left: 320px;
}

/* Критичный фон страницы статьи на первом кадре */
.q-page {
  background-color: var(--ui-page-bg);
}

/* Критичные адаптивные утилиты для первого кадра хедера */
.hidden-gt-1193 {
  @media (min-width: 1194px) {
    display: none !important;
  }
}

.hidden-gt-799 {
  @media (min-width: 800px) {
    display: none !important;
  }
}

.hidden-gt-599 {
  @media (min-width: 600px) {
    display: none !important;
  }
}

.visible-gt-560 {
  @media (max-width: 561px) {
    display: none !important;
  }
}

.visible-gt-449 {
  @media (max-width: 450px) {
    display: none !important;
  }
}

/* Критичные стили аватара/логотипа для первого кадра хедера */
.q-header .q-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 50%;
  font-size: 58px;
  width: 1em;
  height: 1em;
}

.q-header .q-avatar--square {
  border-radius: 0;
}

.q-header .logo-lottie {
  display: block;
  width: 100%;
  height: 100%;
}

.q-header .logo-static {
  display: block;
}

/* Критичные цвета хедера/тулбара на первом кадре */
.q-header,
.q-header.q-layout__section--marginal {
  background-color: var(--ui-header-bg);
  color: var(--ui-header-text);
}

.q-header .q-toolbar {
  background-color: var(--ui-header-bg);
}

body.body--dark .q-header {
  border-color: rgba(255, 255, 255, 0.28);
  color: #f5f5f5;
}

/* Критичная тень хедера: геометрия как в Quasar */
.q-layout__shadow {
  width: 100%;
}

.q-layout__shadow::after {
  content: '';
  position: absolute;
  inset: 0;
}

.q-header .q-layout__shadow {
  bottom: -10px;
}

.q-header .q-layout__shadow::after {
  bottom: 10px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.24) !important;
}

body.body--dark .q-header .q-layout__shadow::after {
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.24) !important;
}

/* Критичные стили активного таба хедера до q-tab--active */
.q-header .header-tabs .q-tab.q-router-link--active,
.q-header .header-tabs .q-tab.q-router-link--exact-active {
  opacity: 1;
}

.q-header .header-tabs .q-tab.q-router-link--exact-active {
  background-color: var(--ui-tab-active-bg);
  color: var(--ui-tab-active-text);
}

/* Критичные стили нижней линии активного таба до q-tab--active */
.q-header .header-tabs .q-tab.q-router-link--active .q-tab__indicator,
.q-header .header-tabs .q-tab.q-router-link--exact-active .q-tab__indicator {
  opacity: 1;
}

@media (min-width: 800px) {
  .q-page-container-blog .q-drawer--left.q-drawer--bordered {
    border-right-color: rgba(0, 0, 0, 0.12) !important;
  }

  body.body--dark .q-page-container-blog .q-drawer--left.q-drawer--bordered {
    border-right-color: rgba(255, 255, 255, 0.28) !important;
  }

  .q-page-container-blog .q-drawer-container {
    position: relative;
  }

  .q-page-container-blog .q-drawer {
    position: fixed;
    top: 66px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 320px;
    background: var(--ui-drawer-bg);
    border-right: 1px solid var(--ui-drawer-border-color);
    transition: none !important;
  }

  .q-page-container-blog .q-drawer.q-drawer--mobile {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .q-page-container-blog .q-drawer__content {
    height: calc(100vh - 66px);
    overflow: auto;
    background: var(--ui-drawer-content-bg);
  }

  .q-page-container-blog .q-list {
    min-height: 100%;
    background: var(--ui-drawer-content-bg);
  }

  .q-page-container-blog .q-drawer__backdrop {
    display: none !important;
  }

}

/* Базовые quasar-стили пунктов blog drawer для первого кадра */
.q-page-container-blog .q-drawer .q-item {
  position: relative;
  min-height: 48px;
  padding: 8px 16px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.q-page-container-blog .q-drawer a.q-item,
.q-page-container-blog .q-drawer .q-link {
  color: inherit;
  text-decoration: none;
}

.q-page-container-blog .q-drawer .row {
  display: flex;
  flex-wrap: wrap;
}

.q-page-container-blog .q-drawer .no-wrap {
  flex-wrap: nowrap;
}

.q-page-container-blog .q-drawer .column {
  display: flex;
  flex-direction: column;
}

.q-page-container-blog .q-drawer .justify-center {
  justify-content: center;
}

.q-page-container-blog .q-drawer .q-item__section {
  min-width: 0;
}

.q-page-container-blog .q-drawer .q-item__section--main {
  flex: 10000 1 0%;
}

.q-page-container-blog .q-drawer .q-item--dark {
  color: #ffffff;
}

.q-page-container-blog .q-drawer .q-link,
.q-page-container-blog .q-drawer .q-focusable,
.q-page-container-blog .q-drawer .q-hoverable {
  outline: 0;
}

/* Критичные стили активного элемента в blog drawer */
.drawer-active-item {
  background-color: var(--ui-active-item-bg);
  color: var(--ui-active-item-text);
}

/* Критичный цвет заголовков секций в drawer */
.q-page-container-blog .q-item__label--header {
  color: #424242;
  opacity: 1;
}

body.body--dark .q-page-container-blog .q-item__label--header {
  color: #eeeeee;
  opacity: 1;
}

@media (max-width: 799px) {
  .q-page-container-blog {
    padding-left: 0;
  }
}