/* ============================================================
   Ishonch — МАҚОЛА (ички саҳифа). Article detail page.
   Грузится после styles.css + layout.css + premium-skin.css.
   Переиспользует токены/компоненты дизайн-системы. Namespaced .art-*
   ============================================================ */

/* ---------- прогресс чтения ---------- */
/* ============================================================
   МУҲИМ ЯНГИЛИКЛАР — breaking ticker: базовые стили в premium-skin.css,
   здесь только отступ сверху на странице статьи
   ============================================================ */
.bnews{margin-top:20px;}

/* ============================================================
   ПРОГРЕСС ЧТЕНИЯ
   ============================================================ */
.art-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:transparent;z-index:60;pointer-events:none;}
.art-progress .bar{height:100%;width:0;background:var(--accent);transition:width .08s linear;}

/* ---------- хлебные крошки ---------- */
.art-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--f-ui);
  font-size:12.5px;color:var(--ink-faint);padding-top:24px;}
.art-crumbs a{color:var(--ink-muted);transition:.14s;}
.art-crumbs a:hover{color:var(--accent);}
.art-crumbs .sep{display:inline-flex;opacity:.5;}
.art-crumbs .sep svg{width:13px;height:13px;}
.art-crumbs .cur{color:var(--ink);font-weight:600;}

/* ============================================================
   ШАПКА МАТЕРИАЛА
   ============================================================ */
.art-head{max-width:900px;padding:24px 0 28px;}
.art-head .badge{font-size:12px;}
.art-head h1{font-size:clamp(31px,3.9vw,52px);line-height:1.07;letter-spacing:-.025em;
  margin:14px 0 0;text-wrap:balance;}
.art-head .art-lead{font-family:var(--f-body);font-size:21px;line-height:1.5;color:var(--ink-muted);
  margin:18px 0 0;max-width:36em;text-wrap:pretty;}

.art-byline{display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.art-byline .av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.art-byline .av .ph{width:100%;height:100%;}
.art-byline .who{display:flex;flex-direction:column;gap:3px;min-width:0;}
.art-byline .who .nm{font-family:var(--f-head);font-weight:700;font-size:15.5px;letter-spacing:-.01em;}
.art-byline .who .nm a:hover{color:var(--accent);}
.art-byline .who .st{font-family:var(--f-ui);font-size:12px;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.art-byline .who .st .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;}
.art-byline .who .st .views,.art-byline .who .st .upd{display:inline-flex;align-items:center;gap:5px;}
.art-byline .who .st svg{width:13px;height:13px;opacity:.75;}
.art-byline .share-mini{margin-left:auto;display:flex;gap:7px;}
.art-byline .share-mini a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-muted);background:var(--surface);transition:.15s;}
.art-byline .share-mini a:hover{border-color:var(--accent);color:var(--accent);}
.art-byline .share-mini svg{width:16px;height:16px;}

/* ---------- большое фото-герой ---------- */
.art-hero{margin:6px 0 0;}
.art-hero .ph{aspect-ratio:16/9;width:100%;border-radius:var(--card-radius);}
.art-hero figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  margin-top:12px;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap;}
.art-hero figcaption .cap{color:var(--ink-muted);line-height:1.45;max-width:60ch;}
.art-hero figcaption .src{white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;}

/* ============================================================
   POST CONTAINER — обычный поток (НЕ карточка): без фона, рамки,
   тени и паддингов. Просто группирует данные поста.
   ============================================================ */
.art-post{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.art-post .art-toc{margin-top:36px;}
.art-head-meta{margin:14px 0 0;font-size:12.5px;}

/* ============================================================
   РАСКЛАДКА: [share] [контент] [правый рейл]
   ============================================================ */
.art-layout{display:grid;grid-template-columns:54px minmax(0,1fr) 332px;gap:46px;
  align-items:start;padding-top:40px;}
.art-main{min-width:0;}

/* плавающий вертикальный шэр */
.art-share{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:9px;}
.art-share .lbl{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);writing-mode:vertical-rl;margin-bottom:4px;}
.art-share button,.art-share a{width:46px;height:46px;border-radius:11px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-muted);background:var(--surface);cursor:pointer;
  transition:.15s;padding:0;position:relative;}
.art-share button:hover,.art-share a:hover{border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);}
.art-share svg{width:18px;height:18px;}
.art-share .tg:hover{border-color:#229ED9;color:#229ED9;}
.art-share .copied::after{content:"Нусхаланди";position:absolute;left:54px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--paper);font-family:var(--f-ui);font-size:11px;font-weight:600;
  padding:5px 9px;border-radius:6px;white-space:nowrap;}

/* правый рейл */
.art-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px;}
.art-rail .rail-ad{width:100%;aspect-ratio:300/250;}

/* ============================================================
   МУНДАРИЖА (table of contents)
   ============================================================ */
.art-toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--card-radius);
  padding:18px 22px 20px;margin-bottom:34px;}
.art-toc .toc-h{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.art-toc .toc-h svg{width:14px;height:14px;color:var(--accent);}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.art-toc li{counter-increment:toc;}
.art-toc a{display:flex;gap:11px;font-family:var(--f-ui);font-size:14px;color:var(--ink-muted);
  padding:8px 0 8px 14px;border-left:2px solid var(--line);transition:.14s;line-height:1.35;}
.art-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;
  color:var(--ink-faint);flex-shrink:0;}
.art-toc a:hover{color:var(--accent);}
.art-toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600;}
.art-toc a.active::before{color:var(--accent);}

/* ============================================================
   ТЕЛО МАТЕРИАЛА — длинное чтение
   ============================================================ */
.art-body{font-family:var(--f-body);font-size:19px;line-height:1.78;color:var(--ink);}
.art-body p{margin:0 0 25px;text-wrap:pretty;}
.art-body p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--accent-line);transition:.14s;}
.art-body p a:hover{text-decoration-color:var(--accent);}
.art-body strong{font-weight:700;color:var(--ink);}
.art-body .dropcap::first-letter{float:left;font-family:var(--f-head);font-weight:700;font-size:4.4em;
  line-height:.78;padding:6px 14px 0 0;color:var(--accent);}

.art-body h2{font-family:var(--f-head);font-size:clamp(24px,2.4vw,30px);line-height:1.18;
  letter-spacing:-.02em;margin:46px 0 16px;scroll-margin-top:120px;}
.art-body h2 .h-anchor{font-family:var(--f-mono);font-size:.42em;font-weight:500;color:var(--accent);
  vertical-align:super;margin-right:9px;letter-spacing:.05em;}
.art-body h3{font-family:var(--f-head);font-size:21px;line-height:1.25;letter-spacing:-.015em;
  margin:34px 0 12px;}

.art-body ul,.art-body ol{margin:0 0 25px;padding-left:4px;list-style:none;}
.art-body ul li,.art-body ol li{position:relative;padding-left:28px;margin-bottom:13px;line-height:1.6;}
.art-body ul li::before{content:"";position:absolute;left:3px;top:13px;width:7px;height:7px;
  background:var(--accent);transform:rotate(45deg);border-radius:1px;}
.art-body ol{counter-reset:li;}
.art-body ol li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:1px;
  font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--accent);}

/* цитата */
.art-quote{margin:38px 0;padding:4px 0 4px 30px;border-left:3px solid var(--accent);}
.art-quote p{font-family:var(--f-head);font-size:clamp(22px,2.3vw,27px);line-height:1.36;
  font-style:italic;letter-spacing:-.01em;color:var(--ink);margin:0;}
.art-quote cite{display:block;margin-top:16px;font-family:var(--f-ui);font-size:13px;font-style:normal;
  font-weight:600;color:var(--ink-faint);letter-spacing:.01em;}
.art-quote cite .role{font-weight:400;color:var(--ink-faint);}

/* выделенный факт / статистика */
.art-fact{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--card-radius);
  padding:24px 26px;margin:34px 0;}
.art-fact .fk{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block;}
.art-fact .row{display:flex;gap:30px;flex-wrap:wrap;}
.art-fact .it{flex:1;min-width:120px;}
.art-fact .n{font-family:var(--f-head);font-size:clamp(28px,3vw,38px);font-weight:700;color:var(--accent);
  line-height:1;letter-spacing:-.02em;}
.art-fact .t{font-family:var(--f-ui);font-size:13.5px;color:var(--ink-muted);line-height:1.4;margin-top:8px;}

/* встроенное фото */
.art-fig{margin:36px 0;}
.art-fig .ph{aspect-ratio:16/9;width:100%;border-radius:var(--card-radius);}
.art-fig.wide{position:relative;}
.art-fig figcaption{margin-top:11px;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;line-height:1.45;}
.art-fig figcaption .src{font-family:var(--f-mono);font-size:11px;white-space:nowrap;}

/* встроенное видео */
.art-embed-lbl{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px;margin:36px 0 12px;}
.art-embed-lbl svg{width:14px;height:14px;color:var(--accent);}
.art-video{margin:0 0 8px;}
.art-video .thumb{position:relative;aspect-ratio:16/9;border-radius:var(--card-radius);overflow:hidden;cursor:pointer;}
.art-video .thumb .ph{width:100%;height:100%;}
.art-video .play{position:absolute;inset:0;display:grid;place-items:center;}
.art-video .play > span{width:68px;height:68px;border-radius:50%;background:rgba(10,14,22,.5);
  backdrop-filter:blur(3px);display:grid;place-items:center;transition:.18s;}
.art-video:hover .play > span{background:var(--accent);transform:scale(1.06);}
.art-video .play svg{width:26px;height:26px;color:#fff;margin-left:3px;}
.art-video .dur{position:absolute;right:11px;bottom:11px;background:rgba(8,10,14,.82);color:#fff;
  font-family:var(--f-mono);font-size:11px;padding:3px 7px;border-radius:4px;}
.art-video .vtitle{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(8,10,14,.85),transparent);color:#fff;
  font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.25;}

/* встроенное аудио */
.art-audio{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:16px 20px;margin:0 0 8px;}
.art-audio .pp{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-on);
  border:0;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:.15s;}
.art-audio .pp:hover{transform:scale(1.05);}
.art-audio .pp svg{width:20px;height:20px;}
.art-audio .pp .ico-pause{display:none;}
.art-audio.playing .pp .ico-play{display:none;}
.art-audio.playing .pp .ico-pause{display:block;}
.art-audio .ax{flex:1;min-width:0;}
.art-audio .ax h4{font-family:var(--f-head);font-weight:600;font-size:15px;margin:0 0 8px;letter-spacing:-.01em;}
.art-audio .ax .bar{height:6px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line);
  position:relative;cursor:pointer;}
.art-audio .ax .bar .fill{position:absolute;left:0;top:0;bottom:0;width:32%;background:var(--accent);border-radius:3px;}
.art-audio .ax .times{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;
  color:var(--ink-faint);margin-top:7px;}

/* теги */
.art-tags{display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 0;padding-top:28px;border-top:1px solid var(--line);}

/* ============================================================
   ПАНЕЛЬ ВЗАИМОДЕЙСТВИЯ: реакции + сохранить/печать + рейтинг
   ============================================================ */
.art-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:30px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.art-react{display:flex;gap:9px;flex-wrap:wrap;}
.react-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--ink-muted);
  background:var(--surface);cursor:pointer;transition:.15s;}
.react-btn:hover{border-color:var(--accent);color:var(--accent);}
.react-btn.on{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent);}
.react-btn svg{width:16px;height:16px;}
.react-btn .c{font-family:var(--f-mono);font-size:12px;opacity:.85;}
.art-acts{display:flex;gap:8px;}
.tool-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:600;transition:.15s;}
.tool-btn:hover{border-color:var(--accent);color:var(--accent);}
.tool-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.tool-btn svg{width:17px;height:17px;}
.tool-btn .x{display:none;}
.tool-btn.on .x{display:inline;}
.tool-btn.on .o{display:none;}

/* рейтинг */
.art-rate{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--card-radius);padding:18px 22px;}
.art-rate .rt{font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:-.01em;}
.art-rate .stars{display:flex;gap:5px;}
.art-rate .star{width:26px;height:26px;cursor:pointer;color:var(--line-strong);transition:.12s;}
.art-rate .star svg{width:100%;height:100%;display:block;}
.art-rate .star:hover,.art-rate .star.on{color:#e8a33d;}
.art-rate .score{font-family:var(--f-ui);font-size:13px;color:var(--ink-faint);margin-left:auto;}
.art-rate .score b{font-family:var(--f-head);font-size:18px;color:var(--ink);}

/* ============================================================
   БЛОК АВТОРА
   ============================================================ */
.art-author{display:flex;gap:24px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:28px 30px;margin:40px 0 0;}
.art-author .av{width:86px;height:86px;border-radius:50%;overflow:hidden;flex-shrink:0;
  box-shadow:0 8px 24px -14px rgba(20,30,60,.5);}
.art-author .av .ph{width:100%;height:100%;}
.art-author .ab{flex:1;min-width:0;}
.art-author .ab .role{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);}
.art-author .ab h4{font-family:var(--f-head);font-size:21px;letter-spacing:-.02em;margin:6px 0 0;}
.art-author .ab h4 a:hover{color:var(--accent);}
.art-author .ab .bio{font-family:var(--f-body);font-size:15.5px;line-height:1.55;color:var(--ink-muted);
  margin:11px 0 0;max-width:54ch;}
.art-author .ab-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;}
.art-author .ab-foot .ct{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-faint);}
.art-author .ab-foot .ct b{color:var(--ink);font-family:var(--f-head);}
.art-author .ab-foot .lnk{font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;}
.art-author .ab-foot .lnk svg{width:14px;height:14px;transition:transform .15s;}
.art-author .ab-foot .lnk:hover svg{transform:translateX(3px);}
.art-author .ab-soc{display:flex;gap:8px;margin-left:auto;}
.art-author .ab-soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink-muted);transition:.14s;}
.art-author .ab-soc a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.art-author .ab-soc svg{width:15px;height:15px;}

/* ============================================================
   САЙДБАР: энг кўп ўқилган / муҳаррир танлови / трендлар
   ============================================================ */
.mr-list{display:flex;flex-direction:column;}
.mr-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.mr-item:first-child{padding-top:2px;}
.mr-item:last-child{border-bottom:0;padding-bottom:0;}
.mr-item .mr-n{font-family:var(--f-head);font-size:26px;font-weight:800;line-height:.9;flex-shrink:0;
  width:30px;color:var(--accent-line);}
.mr-item:nth-child(1) .mr-n,.mr-item:nth-child(2) .mr-n,.mr-item:nth-child(3) .mr-n{color:var(--accent);}
.mr-item .mr-b{min-width:0;}
.mr-item h4{font-family:var(--f-head);font-weight:600;font-size:15px;line-height:1.27;margin:0;letter-spacing:-.005em;}
.mr-item:hover h4{color:var(--accent);}
.mr-item .meta{margin-top:6px;font-size:11.5px;}

/* ============================================================
   ПОДВАЛ-БЛОКИ ПОЛНОЙ ШИРИНЫ (related / автор / тема)
   ============================================================ */
.art-more-author{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap);}
.art-more-author .card h3{font-size:16.5px;}

.art-topic-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 38px;}
.art-tl{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line);align-items:flex-start;}
.art-topic-list .art-tl:nth-child(1),.art-topic-list .art-tl:nth-child(2){border-top:0;}
.art-tl .tl-th{flex:0 0 92px;aspect-ratio:16/11;border-radius:var(--card-radius);overflow:hidden;}
.art-tl .tl-th .ph{width:100%;height:100%;}
.art-tl .tl-b{min-width:0;}
.art-tl h4{font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.25;margin:0;letter-spacing:-.01em;}
.art-tl:hover h4{color:var(--accent);}
.art-tl .meta{margin-top:7px;font-size:11.5px;}

/* ============================================================
   ИНФОРМАЦИОННЫЙ БЮЛЛЕТЕНЬ (newsletter)
   ============================================================ */
.art-nl{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:34px 38px;}
:root[data-card="boxed"] .art-nl{border-radius:16px;}
.art-nl .nl-tx{max-width:42ch;}
.art-nl .nl-tx .k{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);}
.art-nl .nl-tx h3{font-family:var(--f-head);font-size:25px;letter-spacing:-.02em;margin:9px 0 8px;}
.art-nl .nl-tx p{font-family:var(--f-body);font-size:15.5px;color:var(--ink-muted);margin:0;line-height:1.5;}
.art-nl form{display:flex;gap:10px;flex:1;min-width:280px;max-width:440px;}
.art-nl input{flex:1;min-width:0;font-family:var(--f-ui);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;padding:14px 16px;outline:none;transition:.14s;}
.art-nl input:focus{border-color:var(--accent);}
.art-nl button{flex-shrink:0;}
.art-nl .nl-note{flex-basis:100%;font-family:var(--f-ui);font-size:12px;color:var(--ink-faint);margin-top:-4px;}

/* ============================================================
   ПРЕДЫДУЩАЯ / СЛЕДУЮЩАЯ
   ============================================================ */
.art-pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.art-pn a{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:20px 22px;transition:.16s;}
.art-pn a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-card);}
.art-pn .ar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);flex-shrink:0;
  display:grid;place-items:center;color:var(--ink-muted);transition:.15s;}
.art-pn a:hover .ar{background:var(--accent);border-color:var(--accent);color:#fff;}
.art-pn .ar svg{width:17px;height:17px;}
.art-pn .pn-b .k{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);}
.art-pn .pn-b h4{font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.25;
  margin:6px 0 0;letter-spacing:-.01em;}
.art-pn .next{flex-direction:row-reverse;text-align:right;}

/* ============================================================
   КОММЕНТАРИИ
   ============================================================ */
.art-cm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--ink);}
.art-cm-head h2{font-size:25px;display:flex;align-items:center;gap:12px;}
.art-cm-head h2 .accent-mark{width:5px;height:24px;background:var(--accent);display:inline-block;border-radius:1px;}
.art-cm-head h2 .cnt{font-family:var(--f-mono);font-size:16px;color:var(--ink-faint);font-weight:500;}
.cm-sort{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;}
.cm-sort button{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--ink-muted);
  background:transparent;border:0;padding:8px 14px;border-radius:7px;cursor:pointer;transition:.14s;}
.cm-sort button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(20,20,25,.1);}

.cm-form{display:flex;gap:14px;margin-bottom:30px;}
.cm-form .av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface-2);
  display:grid;place-items:center;color:var(--ink-faint);}
.cm-form .av svg{width:22px;height:22px;}
.cm-form .fx{flex:1;min-width:0;}
.cm-form textarea{width:100%;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;outline:none;resize:vertical;
  min-height:54px;line-height:1.5;transition:.14s;}
.cm-form textarea:focus{border-color:var(--accent);}
.cm-form .fx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;}
.cm-form .fx-foot .hint{font-family:var(--f-ui);font-size:12px;color:var(--ink-faint);}

.cm-list{display:flex;flex-direction:column;gap:26px;}
.cm-item{display:flex;gap:14px;}
.cm-item .av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.cm-item .av .ph{width:100%;height:100%;}
.cm-bd{flex:1;min-width:0;}
.cm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cm-top .nm{font-family:var(--f-head);font-weight:700;font-size:14.5px;letter-spacing:-.01em;}
.cm-top .pin{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:4px;padding:2px 7px;}
.cm-top .tm{font-family:var(--f-ui);font-size:12px;color:var(--ink-faint);}
.cm-text{font-family:var(--f-body);font-size:15.5px;line-height:1.6;color:var(--ink);margin:8px 0 0;}
.cm-acts{display:flex;align-items:center;gap:18px;margin-top:11px;}
.cm-acts button{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:12.5px;
  font-weight:600;color:var(--ink-faint);background:transparent;border:0;cursor:pointer;transition:.14s;}
.cm-acts button:hover{color:var(--accent);}
.cm-acts button svg{width:15px;height:15px;}
.cm-acts button.on{color:var(--accent);}
.cm-replies{margin-top:20px;padding-left:24px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:20px;}

/* пустое состояние комментариев */
.cm-empty{text-align:center;padding:46px 20px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--card-radius);}
.cm-empty .ic{width:54px;height:54px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-faint);margin:0 auto 16px;}
.cm-empty .ic svg{width:24px;height:24px;}
.cm-empty h4{font-family:var(--f-head);font-size:18px;margin:0 0 6px;}
.cm-empty p{font-family:var(--f-body);font-size:14.5px;color:var(--ink-muted);margin:0;}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .art-layout{grid-template-columns:1fr;gap:36px;}
  .art-share{flex-direction:row;justify-content:flex-start;position:static;top:auto;
    padding-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .art-share .lbl{writing-mode:horizontal-tb;margin:0 4px 0 0;align-self:center;}
  .art-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .art-more-author{grid-template-columns:repeat(2,1fr);}
}
/* планшет: ограничить длину строки для удобного чтения */
@media (max-width:1080px) and (min-width:681px){
  .art-head,.art-hero,.art-main{max-width:760px;margin-left:auto;margin-right:auto;}
}
@media (max-width:680px){
  .art-head h1{font-size:clamp(27px,7vw,38px);}
  .art-head .art-lead{font-size:18px;}
  .art-body{font-size:17.5px;}
  .art-rail{grid-template-columns:1fr;}
  .art-more-author{grid-template-columns:1fr;}
  .art-topic-list{grid-template-columns:1fr;}
  .art-topic-list .art-tl:nth-child(2){border-top:1px solid var(--line);}
  .art-pn{grid-template-columns:1fr;}
  .art-author{flex-direction:column;gap:16px;}
  .art-author .ab-soc{margin-left:0;}
  .art-nl{padding:26px 22px;}
  .art-tools{flex-direction:column;align-items:stretch;}
  .art-acts{justify-content:space-between;}
  .cm-replies{padding-left:14px;}
}

/* ============================================================
   БЕКСИЗ ЎҚИШ ОҚИМИ — infinite reading feed (внутри колонки статьи)
   ============================================================ */
.infinite-feed{margin-top:40px;padding-top:34px;border-top:1px solid var(--line);}
.feed-intro{margin-bottom:22px;}
.feed-intro .k{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);}
.feed-intro h2{font-family:var(--f-head);font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;
  display:flex;align-items:center;gap:12px;margin:9px 0 6px;}
.feed-intro h2 .accent-mark{width:5px;height:22px;background:var(--accent);border-radius:1px;display:inline-block;}
.feed-intro p{font-family:var(--f-body);font-size:15px;color:var(--ink-muted);margin:0;}

.feed-stream{display:flex;flex-direction:column;gap:24px;}

/* карточка-рекомендация — вертикальная белая карточка-превью */
.feed-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  padding:24px;box-shadow:var(--shadow-card);transition:box-shadow .18s ease,transform .18s ease;}
:root[data-card="boxed"] .feed-card{border-radius:16px;}
.feed-card:hover{box-shadow:var(--shadow-pop);transform:translateY(-2px);}
.fc{display:block;}
.fc .fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
.fc .fc-head .badge{margin:0;}
.fc-src{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:11px;font-weight:600;
  letter-spacing:.03em;color:var(--ink-faint);white-space:nowrap;}
.fc-src .d{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.fc-src[data-src="cat"] .d{background:#1452e0;}
.fc-src[data-src="author"] .d{background:#7c2230;}
.fc-src[data-src="editor"] .d{background:#e8a33d;}
.fc-src[data-src="most"] .d{background:#1c6b54;}
.fc h3{font-family:var(--f-head);font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.02em;margin:0;}
.fc:hover h3{color:var(--accent);}
.fc .fc-meta{margin:11px 0 16px;font-size:12px;}
.fc .fc-img{aspect-ratio:16/9;width:100%;border-radius:var(--card-radius);overflow:hidden;}
:root[data-card="boxed"] .fc .fc-img{border-radius:10px;}
.fc .fc-img .ph{width:100%;height:100%;}
.fc .fc-ex{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--ink-muted);margin:16px 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty;}
.fc .fc-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:13.5px;font-weight:700;
  color:var(--accent);background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:9px;
  padding:11px 18px;transition:.15s;}
.fc:hover .fc-cta{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.fc .fc-cta svg{width:15px;height:15px;transition:transform .15s;}
.fc:hover .fc-cta svg{transform:translateX(3px);}

/* нативная реклама внутри ленты */
.feed-card.is-ad .ad-lbl{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;padding:4px 9px;}
.feed-card.is-ad .fc-cta{color:var(--ink);background:var(--surface-2);border-color:var(--line-strong);}
.feed-card.is-ad:hover .fc-cta{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* загрузка */
.feed-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:34px 0 4px;
  font-family:var(--f-ui);font-size:13px;color:var(--ink-faint);}
.feed-loader .sp{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line-strong);
  border-top-color:var(--accent);animation:feed-spin .7s linear infinite;}
@keyframes feed-spin{to{transform:rotate(360deg)}}
.feed-loader.done{display:none;}

/* ============================================================
   КОММЕНТАРИИ — контейнер-карточка + пагинация
   ============================================================ */
.art-comments-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  padding:28px 30px;margin-top:40px;}
:root[data-card="boxed"] .art-comments-box{border-radius:16px;}
.cm-more-wrap{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);text-align:center;}
.cm-more{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-size:13.5px;font-weight:700;
  color:var(--accent);background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:9px;
  padding:12px 22px;cursor:pointer;transition:.15s;}
.cm-more:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.cm-more.done{display:none;}
.cm-more .rest{font-family:var(--f-mono);font-weight:500;font-size:12px;opacity:.8;}

/* конец ленты */
.feed-end{margin-top:24px;padding:44px 40px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);text-align:center;}
.feed-end .fe-ic{width:56px;height:56px;border-radius:50%;background:var(--accent-tint);border:1px solid var(--accent-line);
  display:grid;place-items:center;color:var(--accent);margin:0 auto 16px;}
.feed-end .fe-ic svg{width:26px;height:26px;}
.feed-end h3{font-family:var(--f-head);font-size:24px;letter-spacing:-.02em;margin:0 0 8px;}
.feed-end > p{font-family:var(--f-body);font-size:15.5px;color:var(--ink-muted);margin:0 auto 26px;max-width:46ch;}
.feed-end .fe-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left;margin:0 0 28px;
  padding-top:26px;border-top:1px solid var(--line);}
.feed-end .fe-col h4{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;}
.feed-end .fe-chips{display:flex;flex-wrap:wrap;gap:9px;}
.feed-end .fe-most{display:flex;flex-direction:column;}
.feed-end .fe-most a{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.feed-end .fe-most a:last-child{border-bottom:0;}
.feed-end .fe-most .n{font-family:var(--f-head);font-weight:800;font-size:16px;color:var(--accent);width:18px;flex-shrink:0;}
.feed-end .fe-most h5{font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.25;margin:0;}
.feed-end .fe-most a:hover h5{color:var(--accent);}
.feed-end .fe-home{display:inline-flex;}

@media (max-width:760px){
  .feed-card{padding:18px;}
  .art-comments-box{padding:22px 18px;}
  .feed-end{padding:32px 22px;}
  .feed-end .fe-grid{grid-template-columns:1fr;gap:24px;}
}