:root{
    --bg: oklch(0.1450 0 0);
    --fg: oklch(0.9850 0 0);
    --card: oklch(0.2050 0 0);
    --card-fg: oklch(0.9850 0 0);
    --popover: oklch(0.2690 0 0);
    --accent: oklch(0.8675 0.1805 161.4219);
    --accent-fg: oklch(0.1776 0 0);
    --secondary: oklch(0.9357 0.0959 168.3850);
    --secondary-fg: oklch(0.1776 0 0);
    --muted: oklch(0.2690 0 0);
    --muted-fg: oklch(0.7080 0 0);
    --border: oklch(0.2750 0 0);
    --input: oklch(0.3250 0 0);
    --destructive: oklch(0.7040 0.1910 22.2160);
    --chart-1: oklch(0.9914 0.0117 170.2818);
    --chart-2: oklch(0.9458 0.0795 169.0521);
    --chart-3: oklch(0.9297 0.1059 167.7794);
    --chart-4: oklch(0.9049 0.1394 165.8117);
    --chart-5: oklch(0.8675 0.1805 161.4219);
    --radius: 0.625rem;
    --shadow: 0 1px 3px 0px rgba(0,0,0,.30), 0 1px 2px -1px rgba(0,0,0,.30);
  }
  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--fg); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; margin:0; padding:0; line-height:1.5; -webkit-font-smoothing:antialiased;}
  a{color:inherit;}

  .ig-shell{display:flex; min-height:100vh;}

  .ig-sidebar{width:240px; flex-shrink:0; border-right:1px solid var(--border); padding:20px 14px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; transition:width .18s ease, padding .18s ease; overflow-x:hidden;}
  /* Полоса прокрутки сайдбара скрыта, но сам он прокручивается колесом.
     Появляется она из-за overflow-x:hidden выше: браузер в этом случае
     считает overflow-y равным auto, и стоит раскрыть два-три списка
     разделов, как справа возникает полоса, режущая колонку. Скрываем
     двумя способами сразу: scrollbar-width понимают Firefox и свежие
     Chromium, ::-webkit-scrollbar — те, что постарше, и Safari. */
  .ig-sidebar{scrollbar-width:none;}
  .ig-sidebar::-webkit-scrollbar{width:0; height:0;}
  /* Кто вошёл и выход. margin-top:auto прижимает блок к низу колонки —
     сайдбар это flex-колонка, и отдельной распорки для этого не нужно. */
  .ig-account{margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px;}
  .ig-account-name{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ig-account-role{font-size:11px; color:var(--muted-fg); white-space:nowrap;}
  .ig-logout{font-size:12px; color:var(--muted-fg); text-decoration:none; margin-top:6px; white-space:nowrap;}
  .ig-logout:hover{color:var(--fg); text-decoration:underline;}
  /* В свёрнутом сайдбаре остаётся только «Выйти» — имя и роль там не помещаются. */
  .ig-shell.collapsed .ig-account-name,
  .ig-shell.collapsed .ig-account-role{display:none;}
  .ig-shell.collapsed .ig-account{align-items:center;}
  .ig-sidebar-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .ig-brand{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; padding:4px 8px; white-space:nowrap;}
  .ig-collapse-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); border-radius:6px; width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .ig-collapse-btn:hover{color:var(--fg); border-color:var(--input);}
  .ig-collapse-ic{transition:transform .18s ease;}
  .ig-acc-switch{display:flex; flex-direction:column; gap:2px;}
  .ig-acc-btn{text-align:left; background:transparent; border:none; color:var(--muted-fg); padding:8px 10px; border-radius:calc(var(--radius) - 2px); font-size:13px; cursor:pointer; white-space:nowrap;}
  .ig-acc-btn.active{background:var(--muted); color:var(--fg); font-weight:600;}
  .ig-acc-btn:hover:not(.active){background:var(--muted); opacity:.6;}
  .ig-nav{display:flex; flex-direction:column; gap:1px;}
  .ig-nav-item{display:flex; align-items:center; gap:10px; text-align:left; background:transparent; border:none; color:var(--muted-fg); padding:8px 10px; border-radius:calc(var(--radius) - 2px); font-size:13px; cursor:pointer; white-space:nowrap;}
  .ig-nav-item.active{background:var(--muted); color:var(--fg); font-weight:600;}
  .ig-nav-item:hover:not(.active){background:var(--muted); opacity:.6;}
  .ig-nav-ic{display:flex; flex-shrink:0;}

  /* группы верхнего уровня в сайдбаре (Контент / Продажи / ... — по образцу референса) */
  .ig-nav-group{display:flex; flex-direction:column; gap:6px;}
  .ig-group-label{color:var(--muted-fg); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:0 10px; white-space:nowrap;}

  /* свёрнутое меню — узкая иконочная панель, разворачивается кнопкой в ig-sidebar-top */
  .ig-shell.collapsed .ig-sidebar{width:60px; padding:20px 10px;}
  .ig-shell.collapsed .ig-sidebar-top{flex-direction:column; gap:10px;}
  .ig-shell.collapsed .ig-brand-text,
  .ig-shell.collapsed .ig-acc-switch,
  .ig-shell.collapsed .ig-source-caret,
  .ig-shell.collapsed .ig-group-label,
  .ig-shell.collapsed .ig-nav-text{display:none;}
  .ig-shell.collapsed .ig-nav-item{justify-content:center; padding:8px;}
  .ig-shell.collapsed .ig-collapse-ic{transform:rotate(180deg);}

  .ig-main-wrap{flex:1; min-width:0;}
  .ig-topbar{padding:24px 32px 16px; border-bottom:1px solid var(--border);}
  .ig-topbar h1{margin:0 0 6px; font-size:20px;}
  .ig-topbar .sub{color:var(--muted-fg); font-size:13px;}
  .ig-topbar-source{display:none;}
  .ig-topbar-source.active{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;}
  .ig-topbar-main{flex:1; min-width:0;}
  .ig-topbar-actions{display:flex; align-items:center; gap:8px;}

  /* Кнопка «Обновить». Спрятана до тех пор, пока JS не убедится, что за
     страницей стоит живой backend (GET /api/status) — в автономном HTML,
     открытом файлом, обслуживать её некому. */
  .ig-refresh-btn{display:none; align-items:center; gap:7px; background:var(--accent); color:var(--accent-fg);
                  border:none; border-radius:calc(var(--radius) - 2px); padding:8px 14px; font-size:13px;
                  font-weight:600; cursor:pointer; white-space:nowrap;}
  .ig-live .ig-refresh-btn{display:inline-flex;}
  /* Атрибут hidden прячет элемент правилом display:none из стилей браузера,
     а любое авторское display его перебивает — поэтому вкладке без скрипта
     сбора (ChatPlace) кнопка оставалась видимой. Поймано тестом. */
  .ig-refresh-btn[hidden]{display:none;}
  .ig-refresh-btn:disabled{opacity:.55; cursor:default;}
  .ig-refresh-btn .ig-refresh-ic{display:flex;}
  .ig-refresh-btn.busy .ig-refresh-ic{animation:ig-spin 1.1s linear infinite;}
  @keyframes ig-spin{to{transform:rotate(360deg);}}

  .ig-updated{color:var(--muted-fg); font-size:13px;}
  .ig-updated:not(:empty)::before{content:" · ";}

  /* Статус задачи обновления — на всю ширину под заголовком */
  .ig-job{flex-basis:100%; background:var(--muted); border:1px solid var(--border);
          border-radius:calc(var(--radius) - 2px); padding:10px 14px; font-size:13px;}
  .ig-job[hidden]{display:none;}
  .ig-job-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .ig-job-steps{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px;}
  .ig-job-steps li{color:var(--muted-fg); font-size:12px; display:flex; gap:7px; align-items:baseline;}
  .ig-job-steps li.running{color:var(--fg);}
  .ig-job-steps li.ok .ig-job-mark{color:var(--accent);}
  .ig-job-steps li.error .ig-job-mark, .ig-job-steps li.timeout .ig-job-mark{color:var(--destructive);}
  .ig-job-mark{width:1em; flex-shrink:0;}
  .ig-job-dur{color:var(--muted-fg); font-size:11.5px;}

  /* --- Конкуренты: список аккаунтов слева, профиль справа --- */
  /* Список аккаунтов и профиль — в одной строке, контент под ними во всю
     ширину: в узкой правой колонке карточки занимали быполовину экрана, а слева
     под никами зияла пустота. */
  .ig-comp-layout{display:grid; grid-template-columns:250px minmax(0,1fr);
                  gap:20px; margin-top:14px; align-items:start;}
  .ig-comp-sidebar{grid-column:1; grid-row:1;}
  .ig-comp-tops{grid-column:2; grid-row:1; min-width:0;}
  .ig-comp-bodies{grid-column:1 / -1; grid-row:2; min-width:0;}
  @media (max-width:900px){
    .ig-comp-layout{grid-template-columns:1fr;}
    .ig-comp-sidebar, .ig-comp-tops, .ig-comp-bodies{grid-column:1; grid-row:auto;}
  }

  .ig-comp-sidebar{background:var(--card); border:1px solid var(--border);
                   border-radius:var(--radius); padding:14px; align-self:start;}
  .ig-comp-sidebar-title{color:var(--muted-fg); font-size:10.5px; font-weight:700;
                         text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}

  /* Форма показывается только под живым backend'ом — в автономном HTML
     отправлять её некуда (класс .ig-live ставит JS после /api/status). */
  .ig-comp-add{display:none; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
  .ig-live .ig-comp-add{display:flex;}
  .ig-comp-add input{flex:1; min-width:0; background:var(--bg); color:var(--fg);
                     border:1px solid var(--input); border-radius:calc(var(--radius) - 2px);
                     padding:7px 10px; font-size:13px;}
  .ig-comp-add input:focus{outline:none; border-color:var(--accent);}
  .ig-comp-analyze{background:var(--accent); color:var(--accent-fg); border:none; cursor:pointer;
                   border-radius:calc(var(--radius) - 2px); padding:7px 13px;
                   font-size:12.5px; font-weight:600; white-space:nowrap;}
  .ig-comp-analyze:disabled{opacity:.55; cursor:default;}
  .ig-comp-err{flex-basis:100%; color:var(--destructive); font-size:12px;}
  .ig-comp-err:empty{display:none;}

  /* Список скроллится: аккаунтов может быть до двадцати */
  .ig-comp-list{display:flex; flex-direction:column; gap:2px; max-height:420px; overflow-y:auto;}
  .ig-comp-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
                background:transparent; border:none; color:var(--muted-fg); cursor:pointer;
                padding:7px 8px; border-radius:calc(var(--radius) - 2px); font-size:13px;}
  .ig-comp-item:hover{background:var(--muted);}
  .ig-comp-item.active{background:var(--muted); color:var(--fg);}
  .ig-comp-item.active .ig-comp-item-nick{font-weight:600;}
  .ig-comp-item-nick{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ig-comp-item-count{color:var(--muted-fg); font-size:11.5px; flex-shrink:0;}

  .ig-comp-avatar{border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--muted);}
  .ig-comp-avatar-sm{width:26px; height:26px;}
  .ig-comp-avatar-lg{width:76px; height:76px;}
  .ig-comp-avatar-empty{display:flex; align-items:center; justify-content:center;
                        color:var(--muted-fg); font-weight:700;}
  .ig-comp-avatar-empty.ig-comp-avatar-sm{font-size:12px;}
  .ig-comp-avatar-empty.ig-comp-avatar-lg{font-size:28px;}

  .ig-comp-panel{display:none;}
  .ig-comp-bodies .ig-comp-panel.active{display:block;}
  .ig-comp-panel.active{display:block;}

  /* Вкладка «Подписчики»: переключатель разреза и две таблицы под ним. */
  .ig-fw{display:flex; flex-direction:column; gap:12px;}
  /* Два ряда кнопок в одну строку: разрез слева, период справа — они
     независимы, и ставить их друг под другом значило бы намекать на связь. */
  .ig-fw-bar{display:flex; gap:14px; flex-wrap:wrap; align-items:center;
            justify-content:space-between;}
  .ig-fw-switch{display:flex; gap:4px; flex-wrap:wrap;}
  .ig-fw-switch button{background:transparent; border:1px solid var(--border);
            color:var(--muted-fg); border-radius:20px; padding:4px 13px;
            font-size:12px; cursor:pointer; white-space:nowrap;}
  .ig-fw-switch button.active{background:var(--accent); color:var(--accent-fg);
            border-color:var(--accent); font-weight:600;}
  .ig-fw-switch button:hover:not(.active){color:var(--fg); border-color:var(--input);}
  .ig-fw-chart{width:100%; height:260px;}
  /* Неактивный разрез убираем из потока целиком: 366 строк в display:none
     всё равно остаются в DOM, но не участвуют в раскладке. */
  .ig-fw-table{display:none;}
  .ig-fw-table.active{display:block;}
  .ig-fw .ig-table td{white-space:nowrap;}

  .ig-comp-header{display:flex; gap:18px; align-items:flex-start; margin-bottom:16px;}
  /* Шапка ещё не собранного аккаунта: без аватара и счётчиков, но с теми же
     кнопками — иначе ошибочно добавленный ник нельзя было бы удалить. */
  .ig-comp-header-pending{margin-bottom:10px;}
  .ig-comp-header-pending .ig-comp-nick{word-break:break-all;}
  .ig-comp-ident{min-width:0;}
  .ig-comp-name{font-size:19px; font-weight:700; line-height:1.25;}
  .ig-comp-nick{color:var(--muted-fg); font-size:13.5px; text-decoration:none;}
  .ig-comp-nick:hover{color:var(--accent);}
  .ig-comp-counts{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:13px; color:var(--muted-fg);}
  .ig-comp-counts b{color:var(--fg);}
  .ig-comp-bio{margin-top:9px; font-size:13px; line-height:1.5; max-width:70ch;}
  .ig-comp-link{display:inline-block; margin-top:7px; font-size:13px;
                color:var(--accent); text-decoration:none; word-break:break-all;}
  .ig-comp-link:hover{text-decoration:underline;}
  .ig-comp-fetched{margin-top:8px; color:var(--muted-fg); font-size:11.5px;}
  /* Действия над конкурентом. Скрыты вне веб-приложения (класс .ig-live
     ставит JS после успешного /api/status): в автономном HTML их некому
     обслуживать. */
  .ig-comp-actions{margin-left:auto; display:none; gap:8px; flex-shrink:0;}
  .ig-live .ig-comp-actions{display:flex;}
  .ig-comp-refresh, .ig-comp-remove{background:transparent; cursor:pointer;
                  border:1px solid var(--border); color:var(--muted-fg);
                  border-radius:calc(var(--radius) - 2px); padding:6px 12px; font-size:12.5px;}
  .ig-comp-refresh{color:var(--fg); border-color:var(--accent);}
  .ig-comp-refresh:hover:not(:disabled){background:var(--accent); color:var(--accent-fg);}
  .ig-comp-refresh:disabled{opacity:.55; cursor:default;}
  .ig-comp-remove:hover{color:var(--destructive); border-color:var(--destructive);}

  /* Четыре плитки в ряд, как в референсе. Селектор из двух классов —
     иначе .grid.ig-summary перебивает по специфичности и четвёртая
     плитка уезжает на вторую строку. */
  .ig-summary.ig-comp-kpi{margin-bottom:8px; grid-template-columns:repeat(4, minmax(0, 1fr));}
  @media (max-width:1500px){ .ig-summary.ig-comp-kpi{grid-template-columns:repeat(2, minmax(0, 1fr));} }
  @media (max-width:700px){ .ig-summary.ig-comp-kpi{grid-template-columns:1fr;} }
  .ig-mix-bar{height:5px; border-radius:3px; background:var(--muted); overflow:hidden; margin-top:6px;}
  .ig-mix-reels{display:block; height:100%; background:var(--accent);}
  .ig-comp-content-label{color:var(--muted-fg); font-size:10.5px; font-weight:700;
                         text-transform:uppercase; letter-spacing:.08em; margin:18px 0 10px;}
  .ig-job.error{border-color:var(--destructive);}
  .ig-job-err{color:var(--destructive); margin-top:6px;}
  .ig-job-log{margin-top:8px;}
  .ig-job-log summary{cursor:pointer; color:var(--muted-fg); font-size:12px;}
  .ig-job-log pre{margin:6px 0 0; padding:10px; background:var(--bg); border:1px solid var(--border);
                  border-radius:6px; font-size:11.5px; line-height:1.45; max-height:260px;
                  overflow:auto; white-space:pre-wrap; word-break:break-word;}
  .ig-job-close{margin-left:auto; background:transparent; border:none; color:var(--muted-fg);
                cursor:pointer; font-size:16px; line-height:1; padding:0 4px;}

  /* переключатель источника (Instagram / Telegram-канал) в сайдбаре */
  .ig-source-switch{display:flex; flex-direction:column; gap:2px; padding-bottom:6px; border-bottom:1px solid var(--border);}
  .ig-source-btn{display:flex; align-items:center; gap:10px; text-align:left; background:transparent; border:none; color:var(--muted-fg); padding:8px 10px; border-radius:calc(var(--radius) - 2px); font-size:13px; cursor:pointer; white-space:nowrap;}
  .ig-source-btn.active{background:var(--accent); color:var(--accent-fg); font-weight:600;}
  .ig-source-btn:hover:not(.active){background:var(--muted); opacity:.6;}
  /* Разделы вкладки — выпадающим списком прямо под ней, а не общим блоком
     внизу сайдбара: там было не видно, к какой вкладке они относятся.

     Раскрытие анимируется через grid-template-rows 0fr -> 1fr, а НЕ через
     display или max-height. display вообще не анимируется, а max-height
     требует выдуманного числа: возьмёшь мало — длинный список обрежется,
     возьмёшь много — короткий раскрывается с паузой, потому что скорость
     считается от выдуманной высоты, а не от настоящей. Приём с grid едет
     ровно до высоты содержимого, какой бы она ни была.

     Раскрытие НЕ привязано к активной вкладке (класс .open, а не .active):
     списков может быть открыто сколько угодно, и заглянуть в разделы
     соседнего источника можно, не уходя со своего. */
  .ig-source-nav{display:grid; grid-template-rows:0fr;
                 transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1);}
  .ig-source-nav.open{grid-template-rows:1fr;}
  /* overflow:hidden обязан висеть здесь, на вложенном узле: на самом
     grid-контейнере он приёма не работает. min-height:0 — иначе grid не
     даёт строке сжаться ниже высоты содержимого, и список не закроется.

     Отступы сверху и снизу — padding, и он анимируется вместе со строкой.
     margin лежал бы СНАРУЖИ анимируемой строки и появлялся мгновенно:
     раскрытие начиналось скачком на 8 px и только потом ехало плавно.
     А статический padding, наоборот, в нулевой строке никуда не девается
     (min-height:0 обнуляет только content-box) — и под каждым свёрнутым
     пунктом оставалось бы по 8 px пустоты. Поэтому он в переходе. */
  .ig-source-nav-in{overflow:hidden; min-height:0;
                    margin-left:13px; padding:0 0 0 9px;
                    border-left:1px solid var(--border);
                    transition:padding-top .26s cubic-bezier(.4,0,.2,1),
                               padding-bottom .26s cubic-bezier(.4,0,.2,1);}
  .ig-source-nav.open > .ig-source-nav-in{padding-top:2px; padding-bottom:6px;}
  .ig-source-nav .ig-nav-item{font-size:12.5px; padding:6px 10px;}
  .ig-source-nav .ig-acc-switch{margin-bottom:6px;}
  /* Кликабельная зона «птички» шире самой стрелки — в неё надо попадать. */
  .ig-source-caret{margin-left:auto; display:flex; opacity:.55; border-radius:5px;
                   padding:3px; margin-right:-3px;
                   transition:transform .26s cubic-bezier(.4,0,.2,1), opacity .15s ease,
                              background-color .15s ease;}
  .ig-source-caret:hover{opacity:1; background:rgba(127,127,127,.22);}
  .ig-source-btn:not(.expanded) .ig-source-caret{transform:rotate(-90deg);}
  /* В свёрнутом меню отступа нет — колонка узкая, остаются одни иконки. */
  .ig-shell.collapsed .ig-source-nav-in{margin-left:0; padding-left:0; border-left:none;}
  /* Уважаем системную настройку «меньше движения»: там анимация не нужна. */
  @media (prefers-reduced-motion: reduce){
    .ig-source-nav, .ig-source-nav-in, .ig-source-caret{transition:none;}
  }
  .ig-source-content{display:none;}
  .ig-source-content.active{display:block;}
  .ig-shell.collapsed .ig-source-switch{align-items:center;}
  .ig-shell.collapsed .ig-source-btn{justify-content:center; padding:8px;}

  /* карточки постов Telegram-канала — превью как у Instagram, если есть фото/видео */
  .tg-card{gap:0;}
  .tg-card > .tg-kind-badge{margin:14px 16px 0;}
  .tg-kind-badge{align-self:flex-start; background:var(--muted); color:var(--muted-fg); font-size:11px; padding:2px 8px; border-radius:20px;}
  /* Плеер голосового/аудио в карточке поста канала. color-scheme:dark —
     как у input[type=date] выше: иначе Chrome рисует светлые системные
     кнопки на тёмной карточке. */
  /* Обложка кружка круглая, а вот ИГРАЮЩЕЕ видео — нет. Скругление
     обрезало собственные контролы браузера: полоса перемотки уходила за
     край круга, и промотать кружок было нечем. Форма важна как признак
     формата на обложке, а во время просмотра важнее управление. */
  .tg-note-wrap .ig-thumb{border-radius:50%;}
  .tg-note-wrap .ig-card-video{background:transparent;}
  .tg-note-len{position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.7);
            color:#fff; font-size:11px; padding:2px 7px; border-radius:20px;
            font-variant-numeric:tabular-nums;}
  .tg-note-wrap.ig-playing .tg-note-len{display:none;}

  /* Свой плеер голосовых: системные контролы в узкой карточке прячут
     полосу перемотки, а записи здесь до 22 минут. */
  .tg-audio{display:flex; align-items:center; gap:10px; margin:10px 0 4px;
            padding:8px 10px; background:var(--input); border-radius:12px;}
  .tg-audio-play{flex:0 0 34px; width:34px; height:34px; padding:0; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            border:none; border-radius:50%; background:var(--accent); color:var(--accent-fg);
            font-size:12px; line-height:1;}
  .tg-audio-play:hover{filter:brightness(1.08);}
  .tg-audio-ic-pause{display:none; letter-spacing:1px;}
  .tg-audio.playing .tg-audio-ic-play{display:none;}
  .tg-audio.playing .tg-audio-ic-pause{display:inline;}
  .tg-audio-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
  /* Полоса намеренно с запасом по высоте и отрицательными отступами:
     сама дорожка тонкая, но попасть по ней пальцем надо наверняка. */
  .tg-audio-bar{position:relative; height:16px; margin:-5px 0; cursor:pointer;
            display:flex; align-items:center; touch-action:none;}
  .tg-audio-bar::before{content:""; position:absolute; left:0; right:0; height:4px;
            border-radius:4px; background:var(--border);}
  .tg-audio-fill{position:absolute; left:0; height:4px; width:0; border-radius:4px;
            background:var(--accent);}
  .tg-audio-knob{position:absolute; left:0; width:10px; height:10px; margin-left:-5px;
            border-radius:50%; background:var(--accent); pointer-events:none;}
  .tg-audio-bar:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
  .tg-audio-meta{display:flex; align-items:center; justify-content:space-between; gap:8px;
            color:var(--muted-fg); font-size:11.5px; font-variant-numeric:tabular-nums;}
  .tg-audio-rate{background:transparent; border:1px solid var(--border); color:var(--muted-fg);
            border-radius:20px; padding:1px 8px; font-size:11px; cursor:pointer;
            font-variant-numeric:tabular-nums;}
  .tg-audio-rate:hover{color:var(--fg); border-color:var(--input);}
  .tg-audio.failed .tg-audio-cur{color:var(--destructive);}
  .tg-multi-badge{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.75); border:1px solid var(--border); color:var(--fg); font-size:11px; padding:2px 8px; border-radius:20px;}
  main{padding:24px 32px 60px; max-width:1200px;}

  .ig-section{display:none;}
  .ig-section.active{display:block;}
  .ig-subsection{display:none;}
  .ig-subsection.active{display:block;}

  .ig-summary{margin-bottom:20px;}
  .ig-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
  .ig-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);}
  .ig-thumb-wrap{position:relative; width:100%; aspect-ratio:1/1; background:var(--muted);}
  .ig-thumb{width:100%; height:100%; object-fit:cover; display:block;}
  .ig-type-badge{position:absolute; top:8px; left:8px; background:rgba(0,0,0,.75); border:1px solid var(--border); color:var(--fg); font-size:11px; padding:2px 8px; border-radius:20px;}
  .ig-card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .ig-date{color:var(--muted-fg); font-size:12px;}
  .ig-caption{font-size:13px; color:var(--card-fg); flex:1;}
  .ig-stats-row{display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--card-fg);}
  .ig-stat{display:flex; align-items:center; gap:4px;}
  .ig-stat-ic{font-size:12px;}
  .ig-nostat{color:var(--muted-fg); font-size:11px; font-style:italic;}
  .ig-detail{font-size:12px;}
  .ig-detail summary{cursor:pointer; color:var(--muted-fg); font-weight:500; list-style:none; display:flex; align-items:center; gap:4px;}
  .ig-detail summary::-webkit-details-marker{display:none;}
  .ig-detail summary::before{content:"›"; display:inline-block; transition:transform .15s;}
  .ig-detail[open] summary::before{transform:rotate(90deg);}
  .ig-detail table{margin-top:8px;}
  .ig-detail td{padding:5px 0; font-size:12px; border-bottom:1px solid var(--border);}
  .ig-detail td:last-child{text-align:right; font-weight:600;}
  .ig-detail-note{color:var(--muted-fg); font-size:11px; font-style:italic;}
  .ig-detail-text{margin-top:8px; font-size:12.5px; color:var(--card-fg); white-space:pre-wrap; line-height:1.5;}
  .ig-link{display:inline-block; text-align:center; background:var(--accent); color:var(--accent-fg); font-size:12px; font-weight:600; text-decoration:none; margin-top:4px; padding:8px 14px; border-radius:calc(var(--radius) + 4px);}
  .ig-link:hover{filter:brightness(1.08);}
  .ig-note{background:var(--muted); border:1px dashed var(--border); border-radius:calc(var(--radius) - 2px); padding:14px 16px; color:var(--muted-fg); font-size:13px; margin-top:14px;}
  .ig-h3{font-size:14px; margin:20px 0 8px; color:var(--muted-fg); font-weight:600;}
  .ig-h3:first-child{margin-top:0;}
  .ig-raw{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; font-size:11px; color:var(--muted-fg); overflow:auto; max-height:300px;}
  .ig-demo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:start;}
  .ig-bar-cell{width:40%;}
  .ig-bar{height:6px; background:var(--accent); border-radius:4px; min-width:2px;}
  .ig-chart{width:100%; height:260px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:8px; box-shadow:var(--shadow);}

  .ig-stream-switch{display:flex; gap:8px; margin-bottom:18px; position:sticky; top:0; z-index:20; background:var(--bg); padding:14px 0; border-bottom:1px solid var(--border);}
  .ig-stream-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:6px 16px; border-radius:20px; font-size:13px; font-weight:500; cursor:pointer;}
  .ig-stream-btn.active{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:600;}
  .ig-stream-section{display:none;}
  .ig-stream-section.active{display:block;}

  .ig-top-row{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; margin-bottom:4px;}
  .ig-top-card{flex:0 0 120px; display:block; text-decoration:none; color:inherit;}
  .ig-top-card .ig-thumb-wrap{width:120px; height:120px; aspect-ratio:auto; border-radius:calc(var(--radius) - 2px); box-shadow:var(--shadow);}
  .ig-top-badge{position:absolute; bottom:8px; left:8px; background:var(--accent); color:var(--accent-fg); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;}
  .ig-top-date{color:var(--muted-fg); font-size:11px; margin-top:6px; text-align:center;}

  .ig-viral-badge{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.75); border:1px solid var(--border); color:var(--fg); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;}
  .ig-viral-badge.hot{background:var(--destructive); border-color:var(--destructive); color:var(--fg);}
  .ig-competitor-block{padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--border);}
  .ig-competitor-block:last-child{border-bottom:none;}

  .ig-sort-bar{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px;}
  .ig-sort-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:5px 14px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer;}
  .ig-sort-btn.active{color:var(--accent-fg); border-color:var(--accent); background:var(--accent); font-weight:600;}

  .ig-date-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:18px 0 10px;}
  .ig-date-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer;}
  .ig-date-btn.active{color:var(--accent-fg); border-color:var(--accent); background:var(--accent); font-weight:600;}
  .ig-date-custom{display:flex; align-items:center; gap:6px; margin-left:4px;}
  .ig-date-custom input[type=date]{background:var(--card); border:1px solid var(--border); color:var(--fg); font-size:12px; border-radius:calc(var(--radius) - 4px); padding:4px 6px; color-scheme:dark;}
  .ig-date-sep{color:var(--muted-fg); font-size:12px;}

  .ig-type-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px;}
  .ig-type-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer;}
  .ig-type-btn.active{color:var(--accent-fg); border-color:var(--accent); background:var(--accent); font-weight:600;}

  .ig-subheading{margin:26px 0 4px; font-size:15px; font-weight:600;}

  .ig-funnel-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 14px;}
  .ig-funnel-controls .ig-sort-bar, .ig-funnel-controls .ig-trend-switch{margin:0;}
  .ig-bar-label{color:var(--muted-fg); font-size:12.5px; white-space:nowrap;}
  .ig-bar-sep{width:1px; height:18px; background:var(--border);}
  .ig-trend-switch{display:flex; gap:8px;}
  .ig-trend-btn{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer;}
  .ig-trend-btn.active{color:var(--accent-fg); border-color:var(--accent); background:var(--accent); font-weight:600;}

  .ig-bar-trend{display:flex; align-items:flex-end; gap:2px; height:32px; width:170px;}
  .ig-bar-slot{flex:1; height:100%; display:flex; align-items:flex-end; cursor:default;}
  .ig-bar{width:100%; background:var(--accent); opacity:.55; border-radius:2px 2px 0 0; min-height:2px; pointer-events:none;}
  .ig-bar-slot:hover .ig-bar{opacity:1;}
  .ig-trend-numbers{display:none; flex-wrap:wrap; gap:6px 10px; max-width:420px;}
  .ig-trend-cell{min-width:38px; text-align:center;}
  .ig-trend-date{color:var(--muted-fg); font-size:10.5px;}
  .ig-trend-count{font-size:12.5px; font-weight:600;}
  .ig-trend-wrap.mode-numbers .ig-bar-trend{display:none;}
  .ig-trend-wrap.mode-numbers .ig-trend-numbers{display:flex;}
  .ig-bar-tooltip{position:fixed; display:none; background:#27272a; border:1px solid var(--border); color:var(--fg); font-size:11.5px; padding:5px 9px; border-radius:6px; pointer-events:none; z-index:9999; white-space:nowrap;}
  .ig-date-apply{background:transparent; border:1px solid var(--border); color:var(--muted-fg); padding:5px 12px; border-radius:20px; font-size:12px; cursor:pointer;}
  .ig-date-apply:hover{background:var(--muted);}

  .ig-view-switch{display:flex; gap:4px; background:var(--muted); border-radius:20px; padding:3px; width:max-content;}
  .ig-view-btn{background:transparent; border:none; color:var(--muted-fg); padding:5px 14px; border-radius:16px; font-size:12px; font-weight:500; cursor:pointer;}
  .ig-view-btn.active{background:var(--card); color:var(--fg); font-weight:600;}

  .ig-view-container{display:none; margin-top:14px;}
  .ig-view-container.active{display:block;}
  /* контейнер карточек/скролла совмещён (data-view="cards scroll") — его
     layout задаёт .ig-grid/.ig-scroll-row, а не общий display:block выше;
     нужна специфичность в 3 класса, чтобы выиграть у правила над этой строкой */
  .ig-view-container.active.ig-grid{display:grid;}
  .ig-view-container.active.ig-scroll-row{display:flex;}
  /* страховка: если ig-grid/ig-scroll-row всё же остался на неактивном
     контейнере (JS должен снимать его сам при переключении на "таблица"),
     не даём двум ниже стоящим правилам .ig-grid{display:grid}/.ig-scroll-row
     {display:flex} перебить display:none только за счёт порядка в файле */
  .ig-view-container:not(.active).ig-grid,
  .ig-view-container:not(.active).ig-scroll-row{display:none;}

  .ig-table-wrap{overflow-x:auto;}
  .ig-table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .ig-table-thumb{width:44px; height:44px; object-fit:cover; border-radius:6px; display:block;}
  .ig-link-sm{padding:5px 10px; font-size:11px; margin-top:0;}

  .ig-chart-controls{margin-bottom:6px;}
  .ig-chart-acc-switch, .ig-gran-switch, .ig-efir-switch{display:flex; gap:6px;}

  .ig-scoped-switch{display:flex; gap:6px; margin:6px 0 14px; flex-wrap:wrap;}
  .ig-scoped-variant{display:none;}
  .ig-scoped-variant.active{display:block;}

  .ig-search-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .ig-search-filter{flex:0 1 320px; background:var(--card); border:1px solid var(--border); color:var(--fg); border-radius:8px; padding:7px 12px; font-size:12.5px;}
  .ig-search-filter:focus{outline:none; border-color:var(--accent);}
  .ig-search-count{color:var(--muted-fg); font-size:12px; white-space:nowrap;}

  .ig-scroll-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:10px;}
  .ig-scroll-row .ig-card{flex:0 0 240px;}

  .ig-day-table{margin-bottom:24px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
  .ig-day-row{display:grid; grid-template-columns:100px 100px 70px 100px 100px 80px 100px 90px 90px 90px; gap:4px; align-items:center; padding:10px 14px; font-size:12.5px;}
  .ig-day-header{background:var(--muted); color:var(--muted-fg); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em;}
  .ig-day-block{border-top:1px solid var(--border);}
  .ig-day-block:first-of-type{border-top:none;}
  .ig-day-block summary{cursor:pointer; list-style:none;}
  .ig-day-block summary::-webkit-details-marker{display:none;}
  .ig-day-block[open] summary{background:var(--muted);}
  .ig-day-block summary:hover{background:var(--muted);}
  .ig-day-detail-table{width:100%; border-collapse:collapse; font-size:12px; background:var(--card);}
  .ig-day-detail-table th{padding:6px 14px; font-size:11px;}
  .ig-day-detail-table td{padding:6px 14px;}

  @media (max-width:900px){
    .ig-day-row{grid-template-columns:repeat(5, minmax(70px,1fr)); font-size:11px;}
  }

  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
  .kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);}
  .kpi .kpi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px;}
  .kpi .label{color:var(--muted-fg); font-size:12.5px;}
  .kpi .value{font-size:28px; font-weight:600; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:var(--card-fg);}
  .kpi .kpi-note{color:var(--muted-fg); font-size:12px; margin-top:6px;}
  .ig-trend{display:inline-flex; align-items:center; gap:2px; padding:2px 8px; border-radius:20px; border:1px solid var(--border); font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0;}
  .ig-trend.up{color:var(--accent);}
  .ig-trend.down{color:var(--destructive); border-color:color-mix(in oklch, var(--destructive) 35%, transparent);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; color:var(--muted-fg); font-weight:600; letter-spacing:0.01em; padding:9px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
  td{padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--fg);}
  tr:last-child td{border-bottom:none;}
  tbody tr:hover td{background:var(--muted);}

  @media (max-width:800px){
    .ig-shell{flex-direction:column;}
    .ig-sidebar{width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; align-items:center;}
    .ig-acc-switch, .ig-nav{flex-direction:row;}
  }

  /* --- Динамика Reels --- */
  .ig-rd{display:flex; flex-direction:column; gap:14px;}
  .ig-rd-label{color:var(--muted-fg); font-size:10.5px; font-weight:700;
               text-transform:uppercase; letter-spacing:.08em;}
  .ig-rd-viewer{background:var(--card); border:1px solid var(--border);
                border-radius:var(--radius); padding:18px;}
  .ig-rd-panel{display:none; gap:20px;}
  /* flex-wrap + flex-basis:100% у таблицы по дням: обложка и текст стоят в
     ряд, а разбивка по дням уходит на свою строку во всю ширину. */
  .ig-rd-panel.active{display:flex; flex-wrap:wrap;}
  .ig-rd-daily-wrap{flex:1 0 100%; min-width:0;}
  .ig-rd-cover{flex:0 0 240px;}
  .ig-rd-cover .ig-thumb-wrap{aspect-ratio:9/16; border-radius:calc(var(--radius) - 2px); overflow:hidden;}
  .ig-rd-cover-badge{position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.68);
                     color:#fff; font-size:11px; padding:3px 8px; border-radius:20px;}
  .ig-rd-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
  .ig-rd-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .ig-rd-date{font-size:16px; font-weight:600;}
  .ig-rd-er{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
            color:var(--accent); border:1px solid color-mix(in oklch, var(--accent) 40%, transparent);
            border-radius:20px; padding:3px 10px;}
  .ig-rd-caption{color:var(--muted-fg); font-size:13px; line-height:1.55;
                 max-height:150px; overflow-y:auto;}
  .ig-rd-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px;}
  .ig-rd-stat-v{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}
  .ig-rd-stat-l{color:var(--muted-fg); font-size:11.5px;}
  .ig-rd-chart-head{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center;}
  .ig-rd-metrics, .ig-rd-modes{display:flex; gap:4px; flex-wrap:wrap;}
  .ig-rd-metric, .ig-rd-mode{background:transparent; border:1px solid var(--border);
              color:var(--muted-fg); border-radius:20px; padding:4px 11px;
              font-size:12px; cursor:pointer; white-space:nowrap;}
  .ig-rd-metric.active, .ig-rd-mode.active{background:var(--accent); color:var(--accent-fg);
              border-color:var(--accent); font-weight:600;}
  .ig-rd-metric:hover:not(.active), .ig-rd-mode:hover:not(.active){color:var(--fg); border-color:var(--input);}
  /* метрики аккаунта в том же ряду, но зрительно отделены: у них другая
     природа данных (настоящий ряд из API против накопленных срезов). */
  /* подписки с публикации — единственная цифра на карточке, которой у Reels
     не бывает в принципе, поэтому она выделена цветом */
  .ig-stat-follows{color:var(--accent); font-weight:600;}
  .ig-rd-metrics-sep{align-self:center; color:var(--muted-fg); font-size:11px;
              margin-left:6px; white-space:nowrap;}
  .ig-rd-metric-acc{border-style:dashed;}
  .ig-rd-metric-acc.active{border-style:solid;}
  /* переключатель «Всего / Прирост» не действует на суточные метрики */
  .ig-rd-modes-off{opacity:.35; pointer-events:none;}
  .ig-rd-chart{width:100%; height:230px;}
  /* .ig-link в колонке-флексе растягивался во всю ширину и выглядел как
     главная кнопка раздела — прижимаем к левому краю. */
  .ig-rd-body .ig-link{align-self:flex-start;}

  /* разбивка по дням для выбранной публикации */
  .ig-rd-daily{display:flex; flex-direction:column; gap:8px;}
  .ig-rd-day-table td{white-space:nowrap;}
  .ig-rd-day-date{font-weight:600;}
  .ig-rd-day-first{display:block; color:var(--muted-fg); font-size:10.5px; font-weight:400;}
  .ig-rd-plus{color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;}
  .ig-rd-minus{color:var(--destructive); font-weight:600; font-variant-numeric:tabular-nums;}
  .ig-rd-zero{color:var(--muted-fg); font-variant-numeric:tabular-nums;}
  .ig-rd-day-total{display:block; color:var(--muted-fg); font-size:11px;
                   font-variant-numeric:tabular-nums;}
  .ig-rd-day-table thead th{text-align:left; white-space:nowrap;}
  .ig-rd-day-none{color:var(--muted-fg); font-size:11.5px;}
  /* столбцы аккаунта отделены линией — иначе их легко принять за цифры
     самой публикации, а это разные сущности */
  .ig-rd-day-table .ig-rd-acc-col{border-left:1px solid var(--border);}

  /* лента выбора публикации */
  .ig-rd-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;}
  .ig-rd-thumb{position:relative; flex:0 0 84px; height:130px; padding:0; cursor:pointer;
               background:transparent; border:2px solid transparent;
               border-radius:calc(var(--radius) - 2px); overflow:hidden;}
  .ig-rd-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .ig-rd-thumb.active{border-color:var(--accent);}
  .ig-rd-thumb-badge{position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.7);
                     color:#fff; font-size:10px; padding:2px 6px; border-radius:20px;}

  /* список всех Reels */
  .ig-rd-list-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .ig-rd-list-title{color:var(--muted-fg); font-size:10.5px; font-weight:700;
                    text-transform:uppercase; letter-spacing:.08em;}
  .ig-rd-list{background:var(--card); border:1px solid var(--border);
              border-radius:var(--radius); overflow:hidden;}
  .ig-rd-row{display:flex; align-items:center; gap:16px; padding:14px 18px;
             border-bottom:1px solid var(--border); cursor:pointer;}
  .ig-rd-row:last-child{border-bottom:none;}
  .ig-rd-row:hover{background:var(--muted);}
  .ig-rd-row-date{flex:0 0 62px; display:flex; flex-direction:column; line-height:1.25;}
  .ig-rd-row-date b{font-size:14px;}
  .ig-rd-row-date span{color:var(--muted-fg); font-size:11px;}
  .ig-rd-row-bars{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
  .ig-rd-bar{display:flex; align-items:center; gap:8px;}
  .ig-rd-bar-ic{color:var(--muted-fg); font-size:11px; width:14px; flex-shrink:0;}
  .ig-rd-bar-track{flex:1; height:6px; background:var(--muted); border-radius:20px; overflow:hidden;}
  .ig-rd-bar-track i{display:block; height:100%; border-radius:20px;
                     background:linear-gradient(90deg, #7DD3FC, #6EE7B7);}
  .ig-rd-bar-track.alt i{background:linear-gradient(90deg, #FCD34D, #F9A8D4);}
  .ig-rd-row-mini{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted-fg); font-size:11.5px;}
  .ig-rd-growth{color:var(--accent); font-weight:600;}
  .ig-rd-row-nums{flex:0 0 120px; text-align:right;}
  .ig-rd-row-views{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}
  .ig-rd-row-views span, .ig-rd-row-er span{color:var(--muted-fg); font-size:11px; font-weight:400;}
  .ig-rd-row-er{color:var(--accent); font-size:12.5px; font-weight:600;}

  @media (max-width:900px){
    .ig-rd-panel.active{flex-direction:column;}
    .ig-rd-cover{flex:0 0 auto; max-width:220px;}
  }

  /* --- Просмотрщик: карусели и видео конкурентов --- */
  .ig-thumb-wrap{position:relative;}
  .ig-thumb-clickable{cursor:zoom-in;}
  .ig-carousel-badge{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.68);
                     color:#fff; font-size:11px; padding:3px 8px; border-radius:20px;}
  .ig-play-btn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
               width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
               background:rgba(0,0,0,.6); color:#fff; font-size:17px; line-height:1;
               display:flex; align-items:center; justify-content:center; padding-left:3px;}
  .ig-play-btn:hover{background:var(--accent); color:var(--accent-fg);}

  /* Стрелки карусели прямо на обложке карточки. Видны всегда (не только
     на hover): иначе о том, что карточку можно листать, узнаёшь случайно. */
  .ig-slide-btn{position:absolute; top:50%; transform:translateY(-50%);
                width:26px; height:42px; padding:0; border:none; border-radius:6px;
                background:rgba(0,0,0,.45); color:#fff; font-size:20px; line-height:1;
                cursor:pointer; display:flex; align-items:center; justify-content:center;
                opacity:.8; transition:opacity .12s, background .12s;}
  .ig-thumb-wrap:hover .ig-slide-btn{opacity:1;}
  .ig-slide-btn:hover{background:var(--accent); color:var(--accent-fg);}
  .ig-slide-prev{left:6px;}
  .ig-slide-next{right:6px;}

  /* Плеер прямо в карточке. Окно поверх ленты перекрывало соседние
     публикации, поэтому Reels играет на месте обложки: карточка на время
     воспроизведения принимает пропорции ролика (их ставит JS по
     videoWidth/videoHeight — обложка квадратная, а Reels вертикальные). */
  .ig-card-player{position:absolute; inset:0; z-index:3; background:#000;
                  display:flex; align-items:center; justify-content:center;}
  .ig-card-video{width:100%; height:100%; object-fit:contain; display:block; background:#000;}
  .ig-video-close{position:absolute; top:6px; right:6px; z-index:4; width:26px; height:26px;
                  padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.6);
                  color:#fff; font-size:17px; line-height:1; cursor:pointer;
                  display:flex; align-items:center; justify-content:center;}
  .ig-video-close:hover{background:var(--accent); color:var(--accent-fg);}
  .ig-card-loading{position:absolute; inset:0; display:flex; align-items:center;
                   justify-content:center; color:var(--muted-fg); font-size:12.5px;}
  .ig-card-msg{color:#fff; font-size:12.5px; text-align:center; padding:16px; line-height:1.5;}
  .ig-card-msg a{color:var(--accent);}
  /* Пока играет ролик, всё, что лежало на обложке, только мешает. */
  .ig-thumb-wrap.ig-playing .ig-play-btn,
  .ig-thumb-wrap.ig-playing .ig-slide-btn,
  .ig-thumb-wrap.ig-playing .ig-carousel-badge,
  .ig-thumb-wrap.ig-playing .ig-type-badge,
  .ig-thumb-wrap.ig-playing .ig-viral-badge{display:none;}

  .ig-lightbox{position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.88);
               display:flex; align-items:center; justify-content:center; padding:40px 60px;}
  .ig-lightbox[hidden]{display:none;}
  .ig-lightbox-body{display:flex; align-items:center; justify-content:center;
                    max-width:100%; max-height:100%; min-width:0; min-height:0;}
  .ig-lightbox-media{max-width:100%; max-height:calc(100vh - 80px); width:auto; height:auto;
                     object-fit:contain; display:block; border-radius:8px;}
  .ig-lightbox-close{position:absolute; top:16px; right:20px; background:transparent;
                     border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer;}
  .ig-lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5);
                   border:none; color:#fff; font-size:26px; cursor:pointer; width:46px; height:66px;
                   border-radius:8px;}
  .ig-lightbox-nav:hover{background:var(--accent); color:var(--accent-fg);}
  .ig-lightbox-prev{left:10px;}
  .ig-lightbox-next{right:10px;}
  .ig-lightbox-count{position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
                     color:#fff; font-size:13px; background:rgba(0,0,0,.55);
                     padding:5px 12px; border-radius:20px;}
  .ig-lightbox-msg{color:#fff; font-size:14px; max-width:460px; text-align:center; line-height:1.6;}
  .ig-lightbox-msg a{color:var(--accent);}