/* YouTube Radar · YT Радар — YouTube-style skin (тест «один в один» с нативным YouTube) */
:root{
  color-scheme:light;
  --page:#ffffff;--surface:#ffffff;--surface2:#f2f2f2;--sidebar:#ffffff;
  --fg:#0f0f0f;--fg2:#606060;--muted:#606060;
  --border:#e5e5e5;--grid:#e5e5e5;--accent:#d33;--accent2:#b32c2c;
  --good:#0ca30c;--warn:#eda100;--serious:#ec835a;--hot:#d03b3b;--vidgreen:#6fbf73;--mid:#2a78d6;
  --shadow:none;
  --hoverbg:rgba(0,0,0,.05);--hoverborder:transparent;
}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme=light])){
  color-scheme:dark;
  --page:#0f0f0f;--surface:#0f0f0f;--surface2:#272727;--sidebar:#0f0f0f;
  --fg:#f1f1f1;--fg2:#aaaaaa;--muted:#aaaaaa;
  --border:#303030;--grid:#303030;--accent:#e04a4a;--accent2:#c73a3a;
  --good:#0ca30c;--warn:#c98500;--serious:#e66767;--hot:#e34948;--mid:#3987e5;
  --shadow:none;
  --hoverbg:rgba(255,255,255,.08);--hoverborder:transparent;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --page:#0f0f0f;--surface:#0f0f0f;--surface2:#272727;--sidebar:#0f0f0f;
  --fg:#f1f1f1;--fg2:#aaaaaa;--muted:#aaaaaa;
  --border:#303030;--grid:#303030;--accent:#e04a4a;--accent2:#c73a3a;
  --good:#0ca30c;--warn:#c98500;--serious:#e66767;--hot:#e34948;--mid:#3987e5;
  --shadow:none;
  --hoverbg:rgba(255,255,255,.08);--hoverborder:transparent;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--fg);
  font:14px/1.5 "Roboto","YouTube Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
/* иконки: тонкая обводка, наследуют цвет окружающего текста (серый/белый, не цветные эмодзи) */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{fill:currentColor;stroke:none}
.icon-flip{transform:scaleY(-1)}
/* layout */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;position:relative}
.app.collapsed{grid-template-columns:64px 1fr}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden}
.sb-top{display:flex;align-items:center;gap:10px;padding:16px 14px;min-height:60px}
.sb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:1;min-width:0}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;color:#fff}
.logo .icon{width:18px;height:18px}
.brandname{font-weight:750;letter-spacing:-.01em;white-space:nowrap;text-transform:uppercase}
.sb-toggle{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;padding:4px;border-radius:8px}
.sb-toggle:hover{background:var(--surface2);color:var(--fg)}
.collapsed .brandname,.collapsed .navtxt,.collapsed .acc-txt,.collapsed .navbadge{display:none}
.collapsed .logo{display:none}
.collapsed .sb-top{justify-content:center;padding:16px 8px}
.collapsed .sb-toggle{margin:0}
nav{padding:8px;flex:1;overflow-y:auto}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--fg2);
  cursor:pointer;font-size:14.5px;font-weight:500;white-space:nowrap;margin-bottom:2px;text-decoration:none}
.navitem .ic{font-size:17px;width:20px;text-align:center;flex:0 0 auto}
.navbadge{padding:1px 4px;border-radius:5px;font-size:8.5px;font-weight:750;
  text-transform:uppercase;letter-spacing:.02em;background:var(--surface2);color:var(--fg2);
  border:1px solid var(--border);line-height:1.5;flex:0 0 auto}
/* та же вёрстка, что .navbadge, но отдельный класс — .navbadge скрывается при .collapsed сайдбара,
   а этот бейдж (активность канала на странице канала) должен быть виден всегда */
.statusbadge{padding:1px 4px;border-radius:5px;font-size:8.5px;font-weight:750;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.5;flex:0 0 auto}
.navbadge.hot{background:var(--hot);color:#fff;border:0}
.activity-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:7px;vertical-align:middle;flex:0 0 auto}
.navitem:hover{background:var(--surface2);color:var(--fg)}
.navitem.active{background:var(--surface2);color:var(--fg);font-weight:700}
.collapsed .navitem{justify-content:center;padding:10px}
.navgroup-toggle{width:100%;border:0;background:none;text-align:left;font-family:inherit}
.navgroup-chevron{margin-left:auto;flex:0 0 auto;transition:transform .15s;display:flex}
.navgroup-chevron .icon{width:14px;height:14px}
.navgroup.open .navgroup-chevron{transform:rotate(180deg)}
.navgroup-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .18s ease}
.navgroup-items-inner{overflow:hidden;min-height:0}
.navgroup.open .navgroup-items{grid-template-rows:1fr}
.navitem.sub{padding-left:32px;font-size:13.5px;gap:8px}
.navitem.sub .navbadge{margin-left:auto}
.collapsed .navgroup-chevron,.collapsed .navgroup-items{display:none}
.sb-tg-hint{color:var(--muted);font-size:11px;margin:10px 12px 0;line-height:1.3}
.sb-tg{color:var(--muted);font-size:12px;margin-top:2px}
.sb-tg .ic{font-size:14px}
.sb-tg:hover{color:var(--accent);background:none}
.sb-bottom{border-top:1px solid var(--border);padding:10px}
.acc-wrap{position:relative}
.acc{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--fg2);
  text-decoration:none;width:100%;border:none;background:none;font:inherit;text-align:left}
.acc:hover{background:var(--surface2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.acc-txt{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-txt b{display:block} .acc-txt span{color:var(--muted);font-size:11px}
.acc-menu{display:none;position:fixed;width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px;z-index:50}
.acc-menu.open{display:block}
.acc-menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--fg);
  text-decoration:none;font-size:13.5px}
.acc-menu-item:hover{background:var(--surface2)}
.sb-bottom-row{display:flex;align-items:stretch;gap:6px}
.acc-wrap{position:relative;flex:1;min-width:0}
.notif-wrap{position:relative;flex:0 0 auto}
.collapsed .notif-wrap{display:none}
.notif-btn{position:relative;width:38px;height:100%;min-height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:none;background:none;color:var(--fg2);cursor:pointer}
.notif-btn:hover{background:var(--surface2)}
.notif-badge{position:absolute;top:4px;right:4px;background:var(--hot);color:#fff;font-size:10px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-menu{display:none;position:fixed;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);
  z-index:50;overflow:hidden}
.notif-menu.open{display:block}
.notif-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;white-space:nowrap}
.notif-action{background:none;border:none;color:var(--accent);font-size:11.5px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap}
.notif-action:hover{text-decoration:underline}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:11px 14px;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--surface2)}
.notif-item.unread{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.notif-item-icon{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--surface2);color:var(--fg2);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.notif-item-title{font-size:13px;font-weight:650}
.notif-item-text{font-size:12px;color:var(--fg2);margin-top:2px}
.notif-item-time{font-size:11px;color:var(--muted);margin-top:4px}
.notif-empty{padding:24px 14px;text-align:center;font-size:13px}
.sb-actions{display:flex;gap:8px;margin-top:6px}
.collapsed .sb-actions{flex-direction:column}
.sbtn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--fg2);border-radius:18px;
  padding:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.sbtn:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,var(--surface2))}
.sbtn.on{background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--fg)}
.sbtn.on:hover{background:color-mix(in srgb,var(--fg) 10%,var(--surface2))}
.sbtn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.sbtn.accent:hover{background:var(--accent2);color:#fff}
.sbtn.danger{color:var(--hot);border-color:color-mix(in srgb,var(--hot) 40%,transparent)}
.sbtn.danger:hover{background:color-mix(in srgb,var(--hot) 12%,transparent)}
.sbtn:disabled{opacity:.5;cursor:default}
.sbtn-icon{flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:9px}
.sbtn-icon .icon{width:15px;height:15px}
/* main */
main{padding:22px 26px 60px;max-width:1320px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.head-main{flex:1;min-width:220px}
.lastupd{color:var(--good);font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:5px;white-space:nowrap;margin-top:4px}
.head-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:25px}
.head h1{font-size:23px;margin:0;letter-spacing:-.02em;flex:0 0 auto}
.head .sub{color:var(--muted);font-size:12.5px;line-height:1.5;max-width:840px}

/* поиск в стиле YouTube — центрирован по ширине всей страницы (position:absolute относительно
   .app, который занимает всю ширину независимо от сайдбара), но остаётся в потоке страницы
   и уходит при обычном скролле — НЕ зафиксирован поверх контента (не position:fixed) */
.yt-search{position:absolute;top:21px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:stretch;width:320px;height:40px;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.yt-search:focus-within{border-color:var(--accent)}
.yt-search input[type=text]{flex:1;min-width:0;background:none;color:var(--fg);font-family:inherit;
  font-size:14px;padding:0 16px;border:0;border-radius:0}
.yt-search input[type=text]::placeholder{color:var(--muted)}
.yt-search input[type=text]:focus{outline:0}
.yt-search button{width:44px;flex:0 0 auto;background:none;color:var(--fg2);cursor:pointer;
  border:0;border-left:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.yt-search button:hover{background:var(--hoverbg)}
.yt-search button .icon{width:16px;height:16px}
/* kpi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);position:relative}
a.kpi{display:block;color:inherit;text-decoration:none}
.kpi[data-href],a.kpi{cursor:pointer;transition:background-image .12s}
.kpi[data-href]:hover,a.kpi:hover{background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
.kpi .qmark{position:absolute;top:10px;right:10px;margin-left:0}
.kpi .n{font-size:29px;font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .l{color:var(--muted);font-size:12px;margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
.kpi.accent .n{color:var(--accent)} .kpi.hot .n{color:var(--hot)}
/* section blocks */
.block{margin-bottom:30px}
.block-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;justify-content:space-between}
.block-h h2{font-size:16px;margin:0;font-weight:700;display:flex;align-items:center;gap:8px}
.block-h .cnt{color:var(--muted);font-size:13px}
.block-h .see-all{font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.block-h .see-all:hover{color:var(--accent);text-decoration:underline}
.hscroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.hscroll::-webkit-scrollbar{height:8px} .hscroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
/* video card (grid) */
.vcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;
  transition:background-image .12s;min-width:232px;scroll-snap-align:start;position:relative}
.vcard:hover{background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
.vthumb{position:relative;aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge-m{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:750;
  padding:3px 9px;border-radius:20px;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.badge-m.hot{background:var(--vt1,var(--hot))}
.badge-m.warm{background:var(--vt2,var(--serious))} .badge-m.mid{background:var(--vt3,var(--warn));color:#221a00} .badge-m.cool{background:var(--vt4,var(--mid))}
.vmeta{padding:11px 12px 13px}
.vtitle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vtitle{color:var(--fg);font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px;flex:1;min-width:0}
.vsub{color:var(--muted);font-size:12px;margin-top:7px;display:flex;justify-content:space-between;gap:8px}
.chan-link{cursor:pointer;color:var(--vidgreen);text-decoration:none}
.chan-link:hover{color:var(--accent);text-decoration:underline}
.txt-good{color:var(--vidgreen)}
/* кнопка "добавить в избранное" — тот же вид, что и "Добавить канал" (.sbtn.accent) */
.vtitle-row .sbtn,.vrow2-title-row .sbtn{flex:0 0 auto;min-width:98px;justify-content:center;padding:7px 12px;font-size:12.5px;white-space:nowrap}
/* карточка/строка как ссылка целиком, но с реальными вложенными ссылками/кнопками поверх —
   .stretched-link перекрывает всю карточку невидимой <a>, чтобы работал средний клик/правый клик
   "открыть в новой вкладке" по всей карточке; остальные прямые дети рисуются поверх неё */
.stretched-link{position:absolute;inset:0;z-index:1}
.stretched-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccard,.crow{position:relative}
/* только реальные интерактивные элементы поднимаем над stretched-link — если поднимать целиком
   их контейнеры (crow-main и т.п.), весь пустой текст внутри перехватывает клик и стретч-ссылка
   срабатывает только в узких промежутках между контейнерами (ощущается как "клик не сразу") */
.ccard a:not(.stretched-link),.ccard button,.ccard .qmark,.crow a:not(.stretched-link),.crow button,.crow .qmark{position:relative;z-index:2}
/* строки таблиц (напр. списки каналов в админке) с тем же приёмом — clickable row + средний клик */
.tablewrap tbody tr.rowlink{position:relative}
.tablewrap tbody tr.rowlink input,.tablewrap tbody tr.rowlink select,.tablewrap tbody tr.rowlink button,
.tablewrap tbody tr.rowlink a:not(.stretched-link){position:relative;z-index:2}
.ndel{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ndel:hover{color:var(--hot);background:var(--hoverbg)}
.ccard > .ndel{position:absolute;top:10px;right:10px}
.ndesc{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ndesc:hover{color:var(--accent);background:var(--hoverbg)}
.ccard > .ndesc{position:absolute;top:10px;right:40px}
/* channel card */
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:250px;scroll-snap-align:start}
.ccard-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.niche-name{color:var(--fg);text-decoration:none;font-size:1.25em}
.niche-name:hover{text-decoration:underline}
.niche-chan-link{color:var(--fg2);text-decoration:none}
.niche-chan-link:hover{color:var(--accent)}
#nGrid .cinit{width:22px;height:22px;font-size:19px;background:transparent;color:var(--fg2)}
.cinit{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:750;color:#fff;font-size:16px;flex:0 0 auto}
img.cinit{object-fit:cover;border-radius:50%}
.ccard-h b{display:block;font-size:14.5px;line-height:1.2} .ccard-h span{color:var(--muted);font-size:12px}
.ratings{display:flex;gap:10px;margin:12px 0}
.rate{flex:1;background:var(--surface2);border-radius:10px;padding:9px 10px;text-align:center}
.rate .rv{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums}
.rate .rl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.cstats{display:flex;gap:14px;color:var(--fg2);font-size:12.5px;flex-wrap:wrap}
.cstats b{color:var(--fg);font-variant-numeric:tabular-nums}
.tierhot{color:var(--hot)} .tierwarm{color:var(--warn)} .tiermid{color:var(--mid)} .tierlow{color:var(--muted)}
.ccard[data-cid],.ccard[data-niche]{cursor:pointer;transition:border-color .12s,transform .12s,background-image .12s}
.ccard[data-cid]:hover,.ccard[data-niche]:hover{border-color:var(--hoverborder);transform:translateY(-2px);background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
/* страница канала */
.chhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* строка канала (списочный вид) */
.crow{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-bottom:10px;cursor:pointer;flex-wrap:wrap;transition:background-image .12s}
.crow[data-cid]:hover,.crow[data-niche]:hover{background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
.crow .cinit{width:40px;height:40px;flex:0 0 auto}
.crow-main{flex:1;min-width:150px} .crow-main b{display:block;font-size:14.5px} .crow-main span{font-size:12.5px}
.crow-main .muted{display:inline-block;margin-top:4px}
.crow-r{text-align:center;min-width:54px} .crow-r .rv{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums} .crow-r .rl{font-size:10px;color:var(--muted);text-transform:uppercase}
.crow-act{display:flex;gap:6px} .crow-act .sbtn{min-width:134px;padding:10px 16px;font-size:14.5px}
.ccard .sb-actions .sbtn{padding:11px;font-size:14.5px}
@media(max-width:640px){.crow-r{min-width:44px}}
/* крупные карточки-строки каналов (страницы «Каналы» и «Конкуренты») — container.className
   перезаписывается рендерером целиком, поэтому используем id-селекторы, а не класс */
#cGrid.crow, #cGrid .crow, #compGrid.crow, #compGrid .crow{padding:18px 22px;gap:24px;margin-bottom:14px}
#cGrid .crow .cinit, #compGrid .crow .cinit{width:58px;height:58px;font-size:22px}
#cGrid .crow-main b, #compGrid .crow-main b{font-size:17.5px}
#cGrid .crow-main span, #compGrid .crow-main span{font-size:14px}
#cGrid .crow-r, #compGrid .crow-r{min-width:70px}
#cGrid .crow-r .rv, #compGrid .crow-r .rv{font-size:21px}
#cGrid .crow-r .rl, #compGrid .crow-r .rl{font-size:11.5px}
#cGrid .crow-act .sbtn, #compGrid .crow-act .sbtn{min-width:135px;padding:11px 16px;font-size:13.5px}
#cGrid .crow-act .sbtn.accent, #compGrid .crow-act .sbtn.accent{background:var(--fg);border-color:var(--fg);color:var(--page)}
#cGrid .crow-act .sbtn.accent:hover, #compGrid .crow-act .sbtn.accent:hover{background:color-mix(in srgb,var(--fg) 85%,var(--page))}
/* кнопка "Добавить канал" — крупнее, размер как у прежней "Отслеживать" */
.add-channel-btn{padding:12px 18px;font-size:15px}
/* переключатель список/сетка */
.viewtog{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.viewtog button{background:var(--surface2);border:0;color:var(--muted);padding:7px 12px;cursor:pointer;font-size:15px;line-height:1}
.viewtog button.active{background:var(--accent);color:#fff}
.list-view{display:block}
/* развёрнутая карточка видео (список) */
.vrow2{display:flex;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:14px;cursor:pointer;transition:background-image .12s;position:relative}
.vrow2:hover{background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
.vrow2-left{flex:0 0 auto;width:240px}
.vrow2-th{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--surface2)}
.vrow2-th img{width:100%;height:100%;object-fit:cover}
.vrow2-dur{color:var(--muted);font-size:12.5px;margin-top:7px}
.vrow2-body{flex:1;min-width:0;display:flex;flex-direction:column}
.vrow2-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.vrow2-title{color:var(--fg);font-size:16.5px;font-weight:700;line-height:1.3;flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vrow2-title-row .sbtn{min-width:118px;padding:9px 15px;font-size:13.5px}
.vrow2-sub{font-size:13px;color:var(--fg2);margin-bottom:14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.vrow2-sub b{color:var(--fg)} .vrow2-sub .chip{padding:1px 8px}
/* grid вместо flex-wrap: у flex одно длинное число раздувало свой элемент и «Комментарии»
   вываливались одни на отдельную строку — grid с равными колонками такого не допускает.
   Числа теперь компактные (nfc(), напр. 5.87M) и всегда умещаются в одну строку. */
.vrow2-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 24px;margin-top:14px}
.metric{min-width:0}
.metric:nth-child(5){margin-left:14px}
.metric .ml{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:3px;margin-bottom:5px;white-space:nowrap}
.metric .mv{font-size:27px;font-weight:560;font-stretch:condensed;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}
.metric .mv.hot{color:var(--vt1,var(--hot))} .metric .mv.warm{color:var(--vt2,var(--serious))} .metric .mv.mid{color:var(--vt3,var(--warn))} .metric .mv.cool{color:var(--vt4,var(--mid))} .metric .mv.good{color:var(--good)}
@media(max-width:900px){.vrow2-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric:nth-child(5){margin-left:0}}
@media(max-width:680px){.vrow2{flex-direction:column}.vrow2-left{width:100%;max-width:340px}.vrow2-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.metric:nth-child(5){margin-left:0}}
/* niche card */
.ncard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.ncard h3{margin:0 0 4px;font-size:17px}
.ncard .nsub{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.ncard .nstats{display:flex;gap:18px;flex-wrap:wrap}
.nstat .v{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums} .nstat .l{font-size:11px;color:var(--muted);text-transform:uppercase}
/* niche row (list) */
.nrow{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:12px 16px;margin-bottom:10px;box-shadow:var(--shadow);flex-wrap:wrap}
.nrow b{font-size:14.5px} .nrow .nsub{color:var(--muted);font-size:12.5px}
/* filters */
.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
.controls label{font-size:13px;color:var(--fg2);display:flex;align-items:center;gap:8px}
.controls .rangewrap{flex:1;min-width:220px;display:flex;align-items:center;gap:10px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:3px;background:var(--surface2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}
select{background:var(--surface2);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:14px}
/* компактный кастомный дропдаун (замена длинных нативных select) */
.csel{position:relative;display:inline-block}
.csel-btn{background:var(--surface2);color:var(--fg);border:1px solid var(--border);border-radius:8px;
  padding:7px 30px 7px 11px;font-size:14px;cursor:pointer;min-width:150px;max-width:230px;text-align:left;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-btn::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.csel-btn:hover{border-color:var(--accent)}
.csel-pop{position:absolute;top:calc(100% + 5px);left:0;z-index:30;background:var(--surface);border:1px solid var(--border);
  border-radius:11px;box-shadow:var(--shadow);width:240px;padding:7px}
.csel-search{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--fg);font-size:14px;margin-bottom:6px}
.csel-list{max-height:264px;overflow-y:auto}
.csel-list::-webkit-scrollbar{width:8px} .csel-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.csel-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-item:hover{background:var(--surface2)}
.csel-item.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600}
input[type=range]{accent-color:var(--accent);vertical-align:middle}
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px;cursor:pointer}
.controls .count{margin-left:auto;color:var(--muted)}
input[type=text],input[type=password]{background:var(--surface2);color:var(--fg);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;font-size:14px}
input[type=text]:focus,input[type=password]:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{background:var(--surface2);color:var(--fg);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical}
.badge{font-size:12px;padding:3px 10px;border-radius:20px;font-weight:600}
.badge.on{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.badge.off{background:color-mix(in srgb,var(--hot) 16%,transparent);color:var(--hot)}
.badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.tgl{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;cursor:pointer}
.tgl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tgl-track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .15s}
.tgl-track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl input:checked ~ .tgl-track{background:var(--good)}
.tgl input:checked ~ .tgl-track::after{transform:translateX(18px)}
.tgl input:focus-visible ~ .tgl-track{outline:2px solid var(--accent);outline-offset:2px}
/* карточка тарифа — используется на /account/plans и в попапе-апселле на /home */
.plans-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-top:6px}
.plans-grid .pcard{flex:1 1 230px;max-width:100%}
.pcard.nowrap .plimits div{white-space:nowrap}
.pcard h3 .icon{width:19px;height:19px;vertical-align:-3px;margin-right:4px}
.pcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 22px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.pcard.featured{background:var(--accent);border-color:var(--accent);padding:40px 22px 36px;box-shadow:0 12px 32px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.pcard.current{border-color:var(--good);box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 35%,transparent)}
.pcard h3{font-size:19px;margin:0 0 6px}
.pcard.featured h3{font-size:24px;color:#fff}
.pbadge{position:absolute;top:0;right:0;background:#fff;color:var(--accent);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-bottom-left-radius:14px}
.pbadge-crown{background:linear-gradient(135deg,#f6cb5a,#c8931a);color:#fff}
.pbadge .icon{width:18px;height:18px}
.pcurrent-badge{position:absolute;top:12px;left:12px;background:var(--good);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;z-index:1}
.pcard .pprice{font-size:26px;font-weight:800;margin-bottom:4px}
.pcard.featured .pprice{color:#fff}
.pcard .pprice-wrap{margin-bottom:4px;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.pcard .pprice-wrap .pprice{margin-bottom:0}
.pcard .pprice-old{font-size:16px;font-weight:600;color:var(--muted);text-decoration:line-through}
.pcard.featured .pprice-old{color:color-mix(in srgb,#fff 65%,transparent)}
.pcard .pprice-suffix{font-size:13px;color:var(--muted);font-weight:600}
.pcard.featured .pprice-suffix{color:color-mix(in srgb,#fff 75%,transparent)}
.pcard .psave-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--good);
  background:color-mix(in srgb,var(--good) 15%,transparent);border-radius:999px;padding:3px 10px;flex-basis:100%;
  justify-content:center;margin-top:2px}
.billing-toggle{display:flex;justify-content:center;margin-bottom:24px}
.billing-toggle-inner{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px;gap:2px}
.billing-toggle-btn{border:none;background:none;padding:10px 20px;border-radius:999px;font-weight:650;font-size:13.5px;
  cursor:pointer;color:var(--fg2);font-family:inherit;transition:background .15s,color .15s}
.billing-toggle-btn.active{background:var(--accent);color:#fff}
.pcard .pdur{font-size:13.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:18px}
.pcard.featured .pdur{color:color-mix(in srgb,#fff 75%,transparent)}
.pcard .plimits{font-size:15px;color:var(--fg2);margin-bottom:22px;flex:1;text-align:left}
.pcard .plimits div{margin-bottom:10px;display:flex;align-items:center;gap:9px}
.pcard .plimits div:last-child{margin-bottom:0}
.pcard .plimits b{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
.pcard .plimits .icon{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.pcard.featured .plimits{color:#fff}
.pcard.featured .plimits b{color:#fff}
.pcard.featured .plimits .icon{color:#fff}
.pcard a,.pcard button{text-decoration:none;display:block;width:100%;padding:12px;border-radius:12px;font-size:16px;font-weight:650;border:1px solid var(--border);color:var(--fg);background:var(--surface);cursor:pointer;font-family:inherit}
.pcard a:hover,.pcard button:hover{background:var(--surface2)}
.pcard.featured a,.pcard.featured button{background:#fff;color:var(--accent);border-color:#fff}
.pcard.featured a:hover,.pcard.featured button:hover{background:color-mix(in srgb,#fff 88%,var(--accent))}
.pcard a.current-cta{opacity:.55;pointer-events:none;background:var(--surface2)}
/* попап-апселл на /home — карточки прямо на затемнённом фоне, без белой рамки-модалки */
.upsell-wrap{position:relative;width:100%;max-width:900px}
.upsell-close{position:absolute;top:-6px;right:0;background:none;border:0;color:#fff;font-size:64px;opacity:.8;cursor:pointer;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.upsell-heading{text-align:center;color:#fff;font-size:24px;font-weight:750;margin:0 0 22px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.method-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min-w,120px),1fr));gap:14px}
.method-opt{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 5px;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s;overflow:hidden;box-sizing:border-box}
.method-opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.method-opt.disabled{cursor:not-allowed;opacity:.55}
.method-opt.disabled:hover{border-color:var(--border);transform:none}
.method-soon{position:absolute;top:8px;right:8px;background:var(--surface2);color:var(--muted);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.method-icon{width:48px;height:48px;max-width:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#fff;font-weight:800;font-size:14px}
.method-icon.currency-badge{border-radius:50%;font-size:20px}
.method-label{font-size:13px;font-weight:650;color:var(--fg)}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-success-check{width:52px;height:52px;border-radius:50%;background:#1fae5f;color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto}
.upsell-later{display:block;text-align:center;color:rgba(255,255,255,.65);font-size:16px;margin-top:56px;text-decoration:none;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.upsell-later:hover{color:#fff}
/* table */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.log-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;color:var(--fg2);
  white-space:pre-wrap;word-break:break-all;max-height:70vh;overflow-y:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;min-width:820px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--grid);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th{position:sticky;top:0;background:var(--surface);cursor:pointer;user-select:none;z-index:1;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
th[aria-sort=descending]::after{content:" ↓";color:var(--accent)} th[aria-sort=ascending]::after{content:" ↑";color:var(--accent)}
td.title{white-space:normal;max-width:440px;line-height:1.4;cursor:pointer}
td.title:hover{color:var(--accent)}
#hTable tbody tr:nth-child(even) td{background-image:linear-gradient(var(--hoverbg),var(--hoverbg))}
#chMetricsBody tr:nth-child(even) td{background-image:linear-gradient(color-mix(in srgb,var(--hoverbg) 40%,transparent),color-mix(in srgb,var(--hoverbg) 40%,transparent))}
#chMetricsBody tr:first-child td{border-top:2px solid var(--accent)}
#chMetricsTable,#chMetricsSummaryTable{table-layout:fixed}
#chMetricsTable th,#chMetricsTable td,#chMetricsSummaryTable th,#chMetricsSummaryTable td{padding:6px 14px}
#chMetricsTable th:first-child,#chMetricsTable td:first-child,#chMetricsSummaryTable th:first-child,#chMetricsSummaryTable td:first-child{white-space:nowrap;padding-right:10px}
#chMetricsTable th.mgroup-delta,#chMetricsTable td.mgroup-delta,#chMetricsSummaryTable th.mgroup-delta,#chMetricsSummaryTable td.mgroup-delta,
#chMetricsTable th.col-videos,#chMetricsTable td.col-videos,#chMetricsSummaryTable th.col-videos,#chMetricsSummaryTable td.col-videos{padding-right:8px}
#chMetricsTable th.mgroup-total,#chMetricsTable td.mgroup-total,#chMetricsSummaryTable th.mgroup-total,#chMetricsSummaryTable td.mgroup-total{padding-left:8px;font-size:12.5px}
#chTable th,#chTable td{padding:7px 14px}
.chip{background:var(--surface2);color:var(--fg2);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.chip.chan-link{color:var(--vidgreen)}
.chip.chan-link:hover{color:var(--accent)}
.mult{font-weight:750;font-variant-numeric:tabular-nums}
.mult.hot{color:var(--vt1,var(--hot))} .mult.warm{color:var(--vt2,var(--serious))} .mult.mid{color:var(--vt3,var(--warn))} .mult.cool{color:var(--vt4,var(--mid))}
.muted{color:var(--muted)}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
/* charts */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media (max-width:900px){.charts{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px 10px;box-shadow:var(--shadow)}
.panel h3{font-size:13px;font-weight:650;margin:0 0 2px;text-transform:uppercase;letter-spacing:.03em}
.panel .ph{color:var(--muted);font-size:12px;margin:0 0 10px}
.bars text{font:12px system-ui,sans-serif} .bars .lbl{fill:var(--fg2)} .bars .val{fill:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
.bars g.row:hover rect.bar,.bars a.row:hover rect.bar{opacity:.78}
.bars a.row{text-decoration:none}
/* empty / placeholder */
.empty{background:var(--surface);border:1px dashed var(--border);border-radius:14px;padding:48px 24px;text-align:center;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:10px}
.soon{display:inline-block;background:var(--surface2);color:var(--fg2);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:600;margin-top:8px}
/* значок-подсказка ? */
.qmark{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:700;
  cursor:help;margin-left:5px;vertical-align:middle;line-height:1}
.qmark:hover{border-color:var(--accent);color:var(--accent)}
/* на "Мой аккаунт" подсказки у лимитов должны быть заметны сразу, а не только на ховере */
.acc-limits .qmark{border-color:var(--hot);color:var(--hot)}
.acc-limits .qmark:hover{background:var(--hot);color:#fff}
/* справка */
.help-layout{display:flex;gap:24px;align-items:flex-start}
.help{max-width:840px;flex:1;min-width:0}
.hcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);scroll-margin-top:20px}
.hcard h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:8px}
.hcard p{margin:6px 0;color:var(--fg2);font-size:14px;line-height:1.55}
.hcard .formula{background:var(--surface2);border-radius:10px;padding:11px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.6;margin:10px 0;color:var(--fg);white-space:pre-wrap;overflow-x:auto}
.hcard .note{font-size:13px;color:var(--muted)}
.acc-grid{display:flex;gap:20px;align-items:flex-start}
.acc-grid .acc-col{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
.acc-grid .hcard{margin-bottom:0}
@media(max-width:860px){.acc-grid{flex-direction:column}}
.htag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:600;margin-right:4px}
.help-nav{position:sticky;top:20px;flex:0 0 200px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.help-nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:6px 10px 8px}
.help-nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:var(--fg2);
  text-decoration:none;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-nav a:hover{background:var(--surface2);color:var(--fg)}
.help-nav a.active{background:var(--surface2);color:var(--accent);font-weight:700}
@media (max-width:980px){.help-layout{flex-direction:column}.help-nav{position:static;flex:1 1 auto;width:100%;flex-direction:row;flex-wrap:wrap}}
/* раскрывающееся описание канала */
.descblock{position:relative}
.desc-wrap{overflow:hidden;transition:max-height .35s ease}
.desc-fade{position:absolute;left:20px;right:20px;height:56px;bottom:38px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--surface) 92%);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%);
  transition:opacity .25s}
.desc-more{display:flex;align-items:center;justify-content:center;gap:5px;margin:10px auto 0;
  background:none;border:0;color:var(--fg2);padding:4px;font-size:13px;font-weight:500;cursor:pointer}
.desc-more:hover{color:var(--fg)}
.desc-more .icon{width:.85em;height:.85em;transition:transform .25s}
.desc-more.expanded .icon{transform:rotate(180deg)}
/* сворачиваемые списки (Топ-10 каналов/видео на Главной): видно первые N, остальное блюром */
.listcollapse{position:relative;overflow:hidden;transition:max-height .35s ease}
.list-fade{position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--page) 92%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%);
  transition:opacity .25s}
.list-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px auto 0;max-width:220px;
  background:var(--surface2);border:1px solid var(--border);border-radius:18px;color:var(--fg);
  padding:9px 20px;font-size:13.5px;font-weight:600;cursor:pointer}
.list-more:hover{background:color-mix(in srgb,var(--fg) 8%,var(--surface2))}
.list-more .icon{width:.85em;height:.85em;transition:transform .25s}
.list-more.expanded .icon{transform:rotate(180deg)}
/* modal (используется только попапом «Добавить канал») */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:50;display:none;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:100%;max-width:520px;
  max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.modal.wide{max-width:760px}
/* дропдаун ниши в попапах (например «Добавить канал») — шире, чем стандартный .csel,
   и список ограничен ~6 пунктами, остальное скроллится */
.modal .csel{display:block;width:100%}
.modal .csel-btn{width:100%;max-width:none;min-width:0}
.modal .csel-pop{width:100%}
.modal .csel-list{max-height:190px}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);flex:0 0 auto}
.modal-h b{font-size:15px} .modal-x{background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}
.modal-b{padding:20px;overflow-y:auto;flex:1 1 auto;min-height:0}
.mform label{display:block;font-size:13px;color:var(--fg2);margin:16px 0 6px}
.mform label:first-child{margin-top:0}
.mform input,.mform select,.mform textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--fg);font-size:15px;font-family:inherit}
.mform textarea{resize:vertical}
.mform input:focus,.mform select:focus,.mform textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.mform button.primary{margin-top:20px;width:100%;padding:12px;border:0;border-radius:20px;background:var(--accent);color:#fff;font-weight:650;font-size:15px;cursor:pointer}
.mform button.primary:hover{background:var(--accent2)} .mform button.primary:disabled{opacity:.6;cursor:default}
/* видео-детальная страница */
.vd-top{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-bottom:20px}
@media (max-width:720px){.vd-top{grid-template-columns:1fr}}
.vd-thumb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;display:block;background:var(--surface2)}
.vd-thumb img{width:100%;height:100%;object-fit:cover}
.vd-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15)}
.vd-play span{background:rgba(0,0,0,.7);color:#fff;padding:9px 18px;border-radius:24px;font-size:13.5px;font-weight:600}
.vd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vd-title{font-size:19px;font-weight:750;margin:0 0 10px;line-height:1.35}
.vd-chan{display:flex;gap:16px;color:var(--fg2);font-size:13.5px;flex-wrap:wrap;margin-bottom:6px;align-items:center}
.vd-chan b{color:var(--fg)}
.simlist{margin-top:16px} .simrow{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;color:inherit;text-decoration:none}
.simrow:hover{background:var(--surface2)} .simrow img{width:64px;height:36px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.simrow .st{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chart-body{margin-top:6px}
/* блок вкладок (переключение видео/каналы) — карточка как у .controls, внутри —
   сегментированный переключатель как .viewtog, но растянутый на всю ширину */
.tabbar{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 16px;margin-bottom:32px}
.tabseg{display:flex;width:100%;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.tabbtn{flex:1;background:var(--surface2);border:0;color:var(--fg2);padding:13px 16px;font-size:15.5px;
  font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .12s,color .12s}
.tabbtn:hover{color:var(--fg)}
.tabbtn.active{background:color-mix(in srgb,var(--accent) 82%,var(--surface2));color:#fff}
@media (max-width:560px){.tabseg{flex-direction:column}}
/* массовое выделение (Избранное) */
.bulkbar{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.bulkbar .cnt{color:var(--muted);font-size:13px;margin-left:auto}
.cbwrap{position:absolute;top:8px;left:8px;z-index:3}
.cbwrap input{width:19px;height:19px}
.crow-cb{flex:0 0 auto}
#tip{position:fixed;pointer-events:none;background:var(--fg);color:var(--page);font-size:12px;padding:6px 9px;
  border-radius:7px;opacity:0;transition:opacity .1s;z-index:60;max-width:280px;box-shadow:var(--shadow);font-weight:500}
/* плавающая кнопка "наверх" */
.to-top-btn{position:fixed;right:26px;bottom:28px;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s;
  z-index:40;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.to-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top-btn:hover{background:rgba(0,0,0,.65)}
.to-top-btn svg{width:20px;height:20px;transform:rotate(180deg)}
#fvDeleteBtn:hover,#compDeleteBtn:hover{text-decoration:underline}

/* --- единый пикер иконок (везде в админке, где можно выбрать иконку) --- */
.icon-picker{position:relative}
.icon-picker.icon-picker-fixed{position:fixed;z-index:60}
.icon-picker-pop{display:none;position:absolute;top:100%;left:0;z-index:20;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:8px;
  margin-top:4px;width:280px;max-height:260px;overflow-y:auto;grid-template-columns:repeat(6,1fr);gap:4px}
.icon-picker.icon-picker-fixed .icon-picker-pop{top:0;margin-top:0}
.icon-picker.open .icon-picker-pop{display:grid}
.icon-picker-opt{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;
  border:1px solid transparent;background:none;cursor:pointer;color:var(--fg)}
.icon-picker-opt:hover{background:var(--surface2)}
.icon-picker-opt.active{border-color:var(--accent);color:var(--accent)}