/* Сцена Instagram: телефон с хромом приложения. Свои цвета только внутри экрана телефона (это чужой интерфейс, а не наш). */
:root { /* имена библиотеки r7 → токены r8 */
  --zd-muted: var(--ink2); --zd-ink: var(--ink); --zd-panel: var(--panel); --zd-frame: var(--frame); --zd-raised: var(--ctl); --zd-ease: var(--ease);
  --zd-lime: var(--lime); --zd-lime-ink: var(--lime-ink); --zd-hover: var(--ctl-hover); --zd-select: var(--well); --zd-select-ink: var(--ink);
  --zd-font: var(--font); --zd-focus: var(--ink); --zd-faint: var(--ink2); --r-s: 8px; --r: 18px; --r-xl: 28px; --gap-s: 8px; }
:root { --ig-w: 312px; --ig-h: 640px; --ig-bezel: #0e0f11;
  --ig-scr: #ffffff; --ig-tx: var(--ink); --ig-mu: var(--ink2); --ig-bb: #efefef; --ig-blue: #0c6fd6; --ig-blue-tx: #0c6fd6; --ig-on-blue: #ffffff; --ig-dimc: rgb(0 0 0 / .45); --ig-sheet: #ffffff; --ig-av-fg: #ffffff; --ig-av-bg: #c9cdd2; }
:root[data-theme=dark] { --ig-av-fg: #8e8e8e; --ig-av-bg: #363636; --ig-blue-tx: #4a9bf0; --ig-scr: #000000; --ig-bb: #262626; --ig-sheet: #1c1c1e; --ig-bezel: #2a2d31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --ig-av-fg: #8e8e8e; --ig-av-bg: #363636; --ig-blue-tx: #4a9bf0; --ig-scr: #000000; --ig-bb: #262626; --ig-sheet: #1c1c1e; --ig-bezel: #2a2d31; } }

.ig-phone { width: var(--ig-w); height: var(--ig-h); flex: none; padding: 10px; border-radius: 48px; background: var(--ig-bezel); }
.ig-phone--s { --ig-w: 236px; --ig-h: 470px; padding: 8px; border-radius: 38px; }
.ig-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 38px; background: var(--ig-scr); color: var(--ig-tx); font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif; letter-spacing: -.005em; }
.ig-screen b { font-weight: 600; } /* чужой интерфейс: системный шрифт Instagram, имена 600 */
.ig-phone--s .ig-screen { border-radius: 30px; font-size: 11px; }
.ig-screen p { margin: 0; }
.ig-i { width: 22px; height: 22px; flex: none; }
.ig-phone--s .ig-i { width: 17px; height: 17px; }

.ig-sb { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font-size: 13px; flex: none; }
.ig-sb__r { display: flex; align-items: flex-end; gap: 2px; }
.ig-sb__r i { width: 3px; background: currentColor; border-radius: 1px; } .ig-sb__r i:nth-child(1) { height: 5px; } .ig-sb__r i:nth-child(2) { height: 7px; } .ig-sb__r i:nth-child(3) { height: 9px; }
.ig-sb__r u { width: 20px; height: 9px; margin-left: 4px; border: 1.5px solid currentColor; border-radius: 3px; text-decoration: none; }

.ig-top { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; flex: none; }
.ig-top__t { flex: 1; display: grid; justify-items: center; font-weight: 600; font-size: 14px; line-height: 1.2; }
.ig-top__t small { font-size: 10px; color: var(--ig-mu); font-weight: 500; letter-spacing: .02em; }
.ig-top__t--l { justify-items: start; } .ig-top__t--l small { letter-spacing: 0; text-transform: none; }
.ig-top__s { width: 22px; flex: none; }

.ig-scroll { flex: 1; overflow: hidden; }
.ig-au { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.ig-au__more { margin-left: auto; }
.ig-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.ig-av--s { width: 26px; height: 26px; } .ig-av--xl { width: 76px; height: 76px; }
.ig-av--i { display: grid; place-items: end center; overflow: hidden; background: var(--ig-av-bg); }
.ig-av--i svg { width: 86%; height: 86%; fill: var(--ig-av-fg); }
.ig-av--gap { visibility: hidden; }
.ig-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ig-acts { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; }
.ig-acts span { flex: 1; }
.ig-likes { padding: 0 12px; font-weight: 600; }
.ig-cap { padding: 2px 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-meta { padding: 2px 12px; color: var(--ig-mu); } .ig-meta--s { font-size: 11px; }
.ig-under { margin: 10px 0 0; max-width: var(--ig-w); text-align: center; font-size: 12px; color: var(--zd-muted); }

/* шторка комментариев */
.ig-dim { position: relative; flex: none; height: 30%; overflow: hidden; }
.ig-dim::after { content: ''; position: absolute; inset: 0; background: var(--ig-dimc); }
.ig-drawer { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: -14px; position: relative; border-radius: 16px 16px 0 0; background: var(--ig-sheet); }
.ig-grab { display: block; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--ig-mu); opacity: .5; }
.ig-drawer__t { text-align: center; font-weight: 600; padding: 2px 0 10px; }
.ig-cms { flex: 1; overflow-y: auto; scrollbar-width: none; display: grid; gap: 14px; align-content: start; padding: 4px 14px 10px; }
.ig-cm { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; }
.ig-cm--re { padding-left: 38px; }
.ig-cm__b { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.ig-cm__time, .ig-cm__rp { color: var(--ig-mu); font-size: 11px; } .ig-cm__rp { font-weight: 600; }
.ig-cm__h { width: 14px; height: 14px; color: var(--ig-mu); margin-top: 4px; }
.ig-empty { color: var(--ig-mu); text-align: center; padding-top: 24px; }
.ig-emoji { display: flex; justify-content: space-around; padding: 8px 10px; font-size: 18px; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ig-phone--s .ig-emoji { font-size: 14px; }
.ig-in { display: flex; align-items: center; gap: 10px; margin: 0 10px 14px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ig-bb); color: var(--ig-mu); font-size: 12px; flex: none; white-space: nowrap; overflow: hidden; }

/* директ */
.ig-thread { flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.ig-thread > :first-child { margin-top: auto; } /* прижать к низу, но верх длинной переписки остаётся доступен прокруткой */
.ig-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.ig-row--me { align-self: flex-end; }
.ig-bub { padding: 8px 12px; border-radius: 20px; background: var(--ig-bb); overflow-wrap: anywhere; display: grid; gap: 8px; }
.ig-bub img { width: 100%; border-radius: 12px; }
.ig-row--me .ig-bub { background: var(--ig-blue); color: var(--ig-on-blue); }
.ig-row--me .ig-mbtn { color: var(--ig-tx); }
.ig-bub--card { padding: 10px 10px 8px; border-radius: 18px; }
.ig-bub--card p { padding: 0 2px; }
.ig-mbtns { display: grid; gap: 4px; }
.ig-mbtn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px; background: var(--ig-scr); font-weight: 600; text-align: center; }
.ig-mbtn .ig-i { width: 15px; height: 15px; }
.ig-sys { align-self: center; color: var(--ig-mu); font-size: 11px; padding: 6px 0; text-align: center; }
.ig-qr { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 92%; }
.ig-qr span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ig-blue-tx); color: var(--ig-blue-tx); font-weight: 500; }
.ig-ph { color: var(--ig-mu); font-style: normal; }
.ig-row--me .ig-ph { color: inherit; opacity: .7; }
.ig-compose { display: flex; align-items: center; gap: 10px; margin: 4px 10px 14px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ig-bb); flex: none; }
.ig-compose__cam { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ig-blue); color: var(--ig-on-blue); flex: none; }
.ig-compose__cam .ig-i { width: 17px; height: 17px; }
.ig-compose__t { flex: 1; color: var(--ig-mu); }
.ig-compose .ig-i { width: 20px; height: 20px; }

/* профиль */
.ig-prof { display: flex; align-items: center; gap: 14px; padding: 8px 14px; }
.ig-prof__n { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 10px; line-height: 1.2; }
.ig-prof__n p { min-width: 0; overflow-wrap: anywhere; }
.ig-prof__n b { display: block; font-size: 15px; font-weight: 600; }
.ig-bio { padding: 4px 14px; font-size: 12px; }
.ig-bio__l { display: flex; align-items: center; gap: 4px; margin: 2px 14px; color: var(--ig-blue-tx); font-weight: 500; font-size: 12px; border-radius: 8px; }
.ig-bio__l .ig-i { width: 14px; height: 14px; }
.ig-pbtn { display: flex; gap: 6px; padding: 10px 14px; }
.ig-pbtn span { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--ig-bb); font-weight: 600; font-size: 12px; }
.ig-pbtn span:first-child { background: var(--ig-blue); color: var(--ig-on-blue); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* что сейчас редактируют: кольцо вокруг элемента в телефоне */
.ig-screen [data-hl] { transition: box-shadow var(--t-fast) var(--zd-ease); }
.ig-screen .is-hl { box-shadow: 0 0 0 2px var(--ig-scr), 0 0 0 4px var(--zd-lime); }

/* проигрывание пути: элемент ждёт, потом проявляется */
.ig-screen .is-wait { opacity: 0; transform: translateY(8px); }
.ig-screen .is-in { opacity: 1; transform: none; transition: opacity 320ms var(--zd-ease), transform 320ms var(--zd-ease); }
@media (prefers-reduced-motion: reduce) { .ig-screen .is-wait { transform: none; } .ig-screen .is-in { transition: opacity 120ms linear; transform: none; } }

/* место сцены рядом с формой */
.ih-stage { display: grid; justify-items: center; align-content: start; gap: 14px; padding: 20px 16px; border-radius: var(--r-xl); background: var(--zd-raised); }
.ih-stage__bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* миниатюры постов — настоящие фото */
.ih-thumb { background: var(--zd-panel); }
.ih-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-fast) var(--zd-ease); }
button.ih-thumb { padding: 0; aspect-ratio: 1; }
.ih-thumbs .ih-thumb { aspect-ratio: 1; }
.ih-thumb__on { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--zd-lime); color: var(--zd-lime-ink); }
.ih-thumb__on svg { width: 15px; height: 15px; }
button.ih-thumb[aria-pressed=true] { background: var(--zd-panel); }
button.ih-thumb[aria-pressed=true] .ih-thumb__on { display: grid; }
button.ih-thumb[aria-pressed=true] .ih-thumb__img { opacity: .72; }
.ih-thumb--card { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 2px; padding: 0 0 10px; background: var(--zd-raised); aspect-ratio: auto; }
.ih-thumb--card .ih-thumb__img { position: static; aspect-ratio: 1; height: auto; border-radius: var(--r-s) var(--r-s) 0 0; }
.ih-thumb--card .ih-thumb__cap, .ih-thumb--card .ih-thumb__date { padding: 0 10px; }
.ih-thumb--card .ih-thumb__cap { padding-top: 6px; }
.ih-thumb--card:has(.zd-check__input:checked) { background: var(--zd-select); color: var(--zd-select-ink); }
.ih-posts .ih-thumb--card:first-child { grid-column: span 2; }
.ih-posts .ih-thumb--card:first-child .ih-thumb__img { aspect-ratio: 2 / 1; }
img.ih-thumb--sm { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.ih-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ih-thumbs .ih-thumb:first-child { grid-column: span 2; aspect-ratio: auto; }
.ih-thumb__new { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--zd-frame); color: var(--zd-ink); font-size: 12px; font-weight: 500; }
@media (max-width: 600px) { .ih-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ih-thumbs .ih-thumb:nth-child(4) { display: none; } }

/* онбординг: шаг слева, сцена справа (как «Pick a popular first move» у ManyChat) */
.ih-onb2 { display: grid; gap: var(--gap-l); align-items: stretch; }
.ih-onb2__stage { display: none; }
@media (min-width: 1000px) {
  .ih-onb2 { grid-template-columns: minmax(0, 480px) 400px; justify-content: center; gap: 64px; }
  .ih-onb2 .ih-onboard { margin: 0; width: 100%; max-width: none; }
  .ih-onb2 .ih-onboard__mid { padding-top: 40px; }
  .ih-onb2 .ih-onboard__foot { grid-auto-flow: column; justify-content: start; align-items: center; }
  .ih-onb2 .ih-onboard__foot .zd-btn--block { width: 240px; }
  /* высота колонки постоянна: длинный шаг прокручивается внутри, кнопка на одном месте */
  .ih-onb2 .ih-onboard { height: calc(100dvh - 40px); min-height: 0; }
  .ih-onb2 .ih-onboard__mid { overflow-y: auto; min-height: 0; padding-inline: 4px; margin-inline: -4px; }
  .ih-onb2__stage { display: grid; place-content: center; }
}
.ih-goal .zd-check { align-items: center; }
/* мастер настройки, круг 5 */
.ih-onb-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-s); }
.ih-onb-posts .ih-thumb { aspect-ratio: 1; }
.ih-pick--s { min-height: 52px; padding: 0 16px; }
.ih-acct__ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.ih-acct .ih-status { margin-left: auto; color: var(--zd-ink); font-size: 13px; }
.ih-acct .ih-status svg { width: 16px; height: 16px; }
.ih-onboard .ih-cluster { justify-content: space-between; flex-wrap: nowrap; min-height: 44px; font-size: 14px; }
.ih-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--zd-raised); }
.ih-file .ih-row__text { flex: 1; min-width: 0; }
.ih-file .ih-row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: var(--r); background: var(--zd-raised); text-align: center; cursor: pointer; transition: background-color var(--t-fast) var(--zd-ease); }
.ih-drop:hover { background: var(--zd-hover); }
.ih-drop:focus-within { outline: 2px solid var(--zd-focus); outline-offset: 2px; }
.ih-drop.is-bad { background: var(--zd-panel); }
.ih-onboard .zd-progress__seg[data-on] { background: var(--zd-ink); }
.ih-drop > svg { width: 22px; height: 22px; }
.ih-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-s); counter-reset: s; }
.ih-sum li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--zd-raised); counter-increment: s; }
.ih-sum li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--zd-frame); font-size: 13px; font-weight: 500; }
.ih-sum .ih-row__s { overflow-wrap: anywhere; }
.ih-live-test { display: grid; gap: 4px; padding: 20px; border-radius: var(--r); background: var(--zd-raised); }
.ig-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--ig-scr); color: var(--ig-tx); }
.ig-file .ig-i { width: 20px; height: 20px; flex: none; }
.ig-file span { display: grid; min-width: 0; }
.ig-file b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-file small { opacity: .7; }

/* обзор: лента событий с фото постов и шагами пути, телефон рядом */
.ih-evs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-s); }
.ih-ev { appearance: none; border: 0; width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ph tx tail"; align-items: center; gap: 2px 14px; padding: 10px 12px; border-radius: var(--r-s); background: var(--zd-frame); color: var(--zd-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--zd-ease); }
.ih-ev:hover { background: var(--zd-panel); }
.ih-ev[aria-pressed=true] { background: var(--zd-select); color: var(--zd-select-ink); }
.ih-ev[aria-pressed=true] .ih-row__s, .ih-ev[aria-pressed=true] .ih-ev__tail { color: inherit; opacity: .78; }
.ih-ev__ph { grid-area: ph; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.ih-ev .ih-row__text { grid-area: tx; }
.ih-ev .ih-row__t b { font-weight: 500; }
.ih-ev__tail { grid-area: tail; justify-self: end; font-size: 12px; color: var(--zd-muted); white-space: nowrap; }
.ih-ev__tail[data-ink] { color: var(--zd-ink); font-weight: 500; }
.ih-ev__legend { font-size: 12px; color: var(--zd-muted); }
@media (max-width: 600px) { .ih-ev { grid-template-areas: "ph tx" "ph tail"; grid-template-columns: 48px minmax(0, 1fr); } .ih-ev__tail { justify-self: start; } .ih-ev__legend { display: none; } }
.ih-home-stage { align-self: stretch; }
@media (max-width: 1099px) { .ih-home-stage { display: none; } }
.ih-tops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-s); }
@media (max-width: 600px) { .ih-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ih-top { margin: 0; display: grid; gap: 8px; }
.ih-top img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); }
.ih-top figcaption { display: grid; gap: 2px; padding: 0 2px; }
.ih-top__n { font-size: 12px; color: var(--zd-muted); font-variant-numeric: tabular-nums; }
.ih-top__n b { color: var(--zd-ink); font-weight: 500; }

/* лицо правила в списке: стопка фото его постов */
.ih-ph-stack { flex: none; display: flex; width: 72px; height: 48px; align-items: center; }
.ih-ph-stack img, .ih-ph-next { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 2px var(--zd-raised); }
.ih-ph-stack img + img { margin-left: -24px; }
.ih-ph-next { display: grid; place-items: center; background: var(--zd-frame); color: var(--zd-muted); box-shadow: none; border: 1px dashed var(--zd-faint); }
.ih-ph-next svg { width: 18px; height: 18px; }

/* кусок переписки на карточке шаблона */
.ig-crop { height: auto; border-radius: var(--r-s); font-size: 12px; pointer-events: none; }
.ig-crop .ig-thread { justify-content: flex-start; padding: 12px; overflow: visible; }
.ig-crop .ig-av { width: 22px; height: 22px; }
.ih-tplsheet { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .ih-tplsheet { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.ih-onb-mini { border-radius: var(--r); background: var(--zd-raised); padding: 8px; }
@media (min-width: 1000px) { .ih-onb-mini { display: none; } }
/* узкий телефон: имя в шапке директа в одну строку, подписи профиля без переносов */
.ig-top__t--l { min-width: 0; } .ig-top__t--l b, .ig-top__t--l small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-prof .ig-av--xl { width: 64px; height: 64px; }
.ig-prof__n p { white-space: nowrap; overflow-wrap: normal; font-size: 9.5px; }
.ig-phone--s .ig-prof__n b { font-size: 13px; }
button.ih-thumb--all { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; aspect-ratio: auto; background: var(--zd-frame); color: var(--zd-ink); text-align: center; font-size: 13px; font-weight: 500; }
button.ih-thumb--all svg { width: 20px; height: 20px; }
/* пример под полем: нажатие подставляет значение */
.ih-eg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ih-eg__w { appearance: none; border: 0; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--zd-panel); color: var(--zd-ink); font: 400 13px/1 var(--zd-font); cursor: pointer; transition: background-color var(--t-fast) var(--zd-ease); }
.ih-eg__w:hover { background: var(--zd-hover); }
.ig-in span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* средняя ширина: лента событий и посты на всю ширину сетки, иначе слова рвутся в узкой колонке */
@media (min-width: 768px) and (max-width: 1099px) { .ih-grid > .ih-g-wide { grid-column: 1 / -1; } }

/* узкий телефон: короткие подписи цифр профиля, иначе накладываются */
.ig-prof__n { container-type: inline-size; }
.ig-k { display: none; }
@container (max-width: 150px) { .ig-l { display: none; } .ig-k { display: inline; } .ig-prof__n p { font-size: 7.5px; letter-spacing: -.02em; } }

/* ── Сцена YouTube (канал): страница видео и ветка комментариев; те же --ig-* токены «чужого интерфейса» ── */
.yt-app { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ig-scr); color: var(--ig-tx); }
.yt-player { position: relative; flex: none; aspect-ratio: 16 / 9; background: #000; }
.yt-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* иначе min-height:auto картинки ломает 16:9 */
.yt-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; }
.yt-play .ig-i { width: 20px; height: 20px; }
.yt-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgb(0 0 0 / .8); color: #fff; font-size: 10px; font-weight: 600; }
.yt-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 10px 12px 16px; }
.yt-title { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.yt-meta { color: var(--ig-mu); font-size: 11px; }
.yt-ch { display: flex; align-items: center; gap: 10px; }
.yt-ch__t { display: grid; min-width: 0; }
.yt-ch__t b { font-size: 12px; }
.yt-ch__t small { color: var(--ig-mu); font-size: 11px; }
.yt-ch .ig-i { margin-left: auto; color: var(--ig-mu); width: 15px; height: 15px; }
.yt-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.yt-av--i { display: grid; place-items: center; background: var(--ig-bb); font-size: 12px; font-weight: 600; }
.yt-cms { display: grid; gap: 12px; align-content: start; }
.yt-cms__t { font-size: 13px; font-weight: 600; }
.yt-cms__t b { color: var(--ig-mu); font-weight: 500; }
.yt-cm { display: flex; gap: 10px; }
.yt-cm .yt-av { width: 24px; height: 24px; }
.yt-cm__b { display: grid; gap: 4px; min-width: 0; }
.yt-cm__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yt-cm__h b { font-size: 12px; }
.yt-cm__time { color: var(--ig-mu); font-size: 10px; }
.yt-cm__t { overflow-wrap: anywhere; }
.yt-cm__acts { display: flex; align-items: center; gap: 12px; color: var(--ig-mu); font-size: 11px; font-weight: 600; }
.yt-cm__acts .ig-i { width: 13px; height: 13px; }
.yt-cm--re { margin-left: 34px; }
.yt-cm--re .yt-cm__t { padding: 6px 10px; border-radius: 10px; background: var(--ig-bb); }
.ig-phone--s .yt-title { font-size: 12px; }
.ig-phone--s .yt-cms__t { font-size: 11px; }
.ig-phone--s .yt-play { width: 32px; height: 32px; }
/* миниатюры видео в редакторе: свежее видео вдвое шире, как первый пост ленты Instagram (иначе ряд равных плиток) */
.ih-thumbs--yt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ih-thumbs--yt .ih-thumb { grid-column: auto; aspect-ratio: 16 / 9; }
.ih-thumbs--yt .ih-thumb:first-child { grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 600px) { .ih-thumbs--yt { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ih-thumbs--yt .ih-thumb:first-child { grid-column: span 3; aspect-ratio: 16 / 9; } .ih-thumbs--yt .ih-thumb:nth-child(4) { display: flex; } }

/* нижняя панель вкладок Instagram под лентой */
.ig-nav { display: flex; justify-content: space-around; align-items: center; padding: 8px 10px 16px; flex: none; background: var(--ig-scr); }
.ig-av--t { width: 24px; height: 24px; }
.ig-phone--s .ig-nav { padding: 6px 8px 12px; } .ig-phone--s .ig-av--t { width: 19px; height: 19px; }
.ig-photo--none { background: var(--ig-bb); }