/* Карточки разделов на главной: кликабельна вся карточка, а не только заголовок */
.md-typeset .grid.cards > ul > li {
  position: relative;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.md-typeset .grid.cards > ul > li a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.md-typeset .grid.cards > ul > li a {
  color: var(--md-typeset-color);
  text-decoration: none;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li:hover a {
  color: var(--md-accent-fg-color);
}

/* Скриншоты с телефона: не растягивать на всю ширину */
.md-typeset img.phone {
  display: block;
  width: 260px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);
  margin: .8em 0;
}
.md-typeset .phones p {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.md-typeset .phones img.phone { margin: 0; }

/* Видео с телефона */
.md-typeset video.phone-video {
  display: block;
  width: 300px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);
  background: #000;
}

/* Заметный выбор телефона перед вкладками */
.md-typeset .choose-phone {
  margin: 1.6em 0 .6em;
  padding: .9em 1.1em;
  border-radius: 12px;
  border: 2px solid var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
  font-size: 1.15em;
  animation: choose-pulse 2s ease-in-out 3;
}
.md-typeset .choose-phone p { margin: 0; }
@keyframes choose-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-accent-fg-color) 45%, transparent); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

/* Вкладки как крупные кнопки */
.md-typeset .tabbed-labels {
  gap: 12px;
  box-shadow: none;
  padding: 4px 0 8px;
}
.md-typeset .tabbed-labels > label {
  flex: 1 1 0;
  text-align: center;
  font-size: 1.05em;
  font-weight: 700;
  padding: .8em 1em;
  border-radius: 12px;
  border: 2px solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.md-typeset .tabbed-labels > label:hover {
  border-color: var(--md-accent-fg-color);
}
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4) {
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
}
.md-typeset .tabbed-labels::before { display: none; }
/* перебиваем стили темы: цвет неактивной кнопки и полоску-индикатор */
.md-typeset .tabbed-set .tabbed-labels > label { color: var(--md-default-fg-color); }
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2) { color: var(--md-accent-bg-color); }
.js .md-typeset .tabbed-labels::before { display: none; }

/* Блок «другая учётная запись»: красный и крупный */
.md-typeset details.drugaya {
  border: 2px solid #e53935;
  border-radius: 12px;
  font-size: 1em;
  margin: 1.6em 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, #e53935 18%, transparent);
}
.md-typeset details.drugaya > summary {
  background: color-mix(in srgb, #e53935 16%, transparent);
  font-size: 1.1em;
  font-weight: 700;
  padding-top: .8em;
  padding-bottom: .8em;
  border-radius: 10px;
}
.md-typeset details.drugaya[open] > summary { border-radius: 10px 10px 0 0; }
.md-typeset details.drugaya > summary::before { top: .95em; }
.md-typeset details.drugaya > summary::after  { top: .95em; }

/* Блок «С чего начать» перед видео */
.md-typeset .admonition.start {
  font-size: 1.05em;
  border: 2px solid #00c853;
  border-radius: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #00c853 18%, transparent);
  margin: 1.4em 0;
}
.md-typeset .admonition.start > .admonition-title {
  font-size: 1.05em;
  font-weight: 700;
}
.md-typeset .admonition.start > p:last-child {
  font-size: 1.1em;
  padding: .3em 0 .5em;
}

/* Увеличение скриншотов */
.md-typeset img.phone { cursor: zoom-in; }
.img-zoom {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px; cursor: zoom-out;
}
.img-zoom img {
  max-width: 100%; max-height: calc(100vh - 60px);
  border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.img-zoom-hint { color: #ddd; font-size: .8rem; }
html.img-zoom-open { overflow: hidden; }

/* Блок техподдержки */
.md-typeset .admonition.podderzhka { font-size: 1em; margin-top: 2em; }
.md-typeset .admonition.podderzhka p { margin: .4em 0; }

/* Блок «Главное — прочитайте до начала» */
.md-typeset .admonition.glavnoe {
  font-size: 1em;
  border: 2px solid #ff9100;
  border-radius: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ff9100 18%, transparent);
}
.md-typeset .admonition.glavnoe > .admonition-title { font-size: 1.05em; font-weight: 700; }
.md-typeset .admonition.glavnoe li { margin-bottom: .45em; }
.md-typeset .glavnoe-link { font-weight: 600; margin-top: -.4em; }

/* Скриншоты и видео с компьютера */
.md-typeset img.screen {
  display: block;
  width: 100%;
  max-width: 760px;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);
  margin: .8em 0;
  cursor: zoom-in;
}
.md-typeset video.screen-video {
  display: block;
  width: 100%;
  max-width: 900px;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);
  background: #000;
}

/* Крупное красное предупреждение */
.md-typeset .admonition.krasnyi {
  font-size: 1em;
  border: 2px solid #e53935;
  border-radius: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #e53935 18%, transparent);
}
.md-typeset .admonition.krasnyi > .admonition-title {
  font-size: 1.15em;
  font-weight: 700;
  background: color-mix(in srgb, #e53935 16%, transparent);
}

/* Обращение к коллегам */
.md-typeset .admonition.obrashchenie {
  font-size: .95em;
  border: 2px solid #7c4dff;
  border-radius: 12px;
  margin: 1.4em 0;
}
.md-typeset .admonition.obrashchenie > .admonition-title {
  font-size: 1.05em;
  font-weight: 700;
}