/* The Forge · 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}
/* layout */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.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.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{max-height:0;overflow:hidden;transition:max-height .18s ease}
.navgroup.open .navgroup-items{max-height:200px}
.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{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--fg2);text-decoration:none}
.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}
.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}
.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 h1{font-size:23px;margin:0 0 6px;letter-spacing:-.02em}
.head .sub{color:var(--muted);font-size:12.5px;line-height:1.5;max-width:840px}
/* 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}
.kpi[data-href]{cursor:pointer;transition:background-image .12s}
.kpi[data-href]: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:var(--hot);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.warm{background:var(--serious)} .badge-m.mid{background:var(--warn);color:#221a00}
.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)}
.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}
/* 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-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}
.vrow2-metrics{display:flex;gap:28px;flex-wrap:wrap;margin-top: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}
.metric .mv.hot{color:var(--hot)} .metric .mv.warm{color:var(--serious)} .metric .mv.mid{color:var(--warn)} .metric .mv.good{color:var(--good)}
@media(max-width:680px){.vrow2{flex-direction:column}.vrow2-left{width:100%;max-width:340px}.vrow2-metrics{gap:20px}}
/* 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}
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)}
/* table */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
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(--hot)} .mult.warm{color:var(--serious)} .mult.mid{color:var(--warn)}
.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{opacity:.78}
/* 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;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)}
/* справка */
.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)}
.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:480px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.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}
.mform label{display:block;font-size:13px;color:var(--fg2);margin:16px 0 6px}
.mform input,.mform select{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--fg);font-size:15px}
.mform input:focus,.mform select: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)}
.qa-h{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:22px 0 10px;font-weight:600}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.qa{grid-template-columns:1fr}}
.qbtn{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:left;cursor:pointer;color:var(--fg);font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.qbtn .qi{font-size:18px} .qbtn:hover{border-color:var(--accent)}
.qbtn.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);color:var(--accent)}
.simlist{margin-top:16px} .simrow{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer}
.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}