/* «📰 Лента» (js/feed.js): шапка, сторис «Главное за день», карточки новостей, экран статьи, просмотр сторис.
   Анимации — только transform/opacity; картинки — <img loading=lazy> с плавным появлением. Токены — из c.css. */
:root { --f-radius: 22px; --f-title: #0b0d10; --f-ours: #0f766e; }
:root[data-theme="dark"] { --f-title: #f5f6f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --f-title: #f5f6f8; } }

.pane-in.feed { padding-top: 0; }

/* ---------------------------------------------------------------- шапка */
.fmast { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 4px 4px; }
.fmast-k { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.fmast-k::first-letter { text-transform: uppercase; }
.fmast h1 { margin: 1px 0 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--f-title); }
.fmast-live { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 4px 9px 4px 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: #e5322d; background: var(--bad-bg); }
.fmast-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #e5322d; }
.fmast-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e5322d; animation: dot 1.6s ease-out infinite; }
#nowTop:empty { display: none; }
#nowTop .top-row { margin-top: 8px; }

/* ---------------------------------------------------------------- сторис */
.st-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 4px 8px; }
.st-h b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.st-h span { font-size: 13px; color: var(--muted); font-weight: 600; }
.st-rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -12px; padding: 2px 12px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.st-rail::-webkit-scrollbar { display: none; }
.st { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; }
.st-ring { position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--c), #f59e0b, #ec4899, var(--c)); transition: transform .15s; }
.st.hot .st-ring { background: conic-gradient(from 200deg, #ef4444, #f97316, #ef4444); }
.st.seen .st-ring { background: var(--surface-3); }
.st:active .st-ring { transform: scale(.94); }
.st-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--bg); background: var(--surface-2); }
.st-in img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.st-in img.ok { opacity: 1; }
.st-e { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); }
.st-l { width: 78px; font-size: 11.5px; line-height: 1.25; font-weight: 600; text-align: center; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st.seen .st-l { color: var(--muted); font-weight: 500; }
.st-skel .st-ring { background: var(--surface-3); }
.st-skel .sk { display: block; width: 56px; height: 10px; border-radius: 5px; background: var(--surface-3); }
.st-skel .st-in, .st-skel .sk { animation: shimmer 1.2s ease-in-out infinite alternate; }

/* чипы ленты */
#feedChipsWrap { margin-top: 4px; }

/* ---------------------------------------------------------------- карточки */
.flist { contain: layout; }
.fc { position: relative; margin: 12px 0 0; border-radius: var(--f-radius); background: var(--surface); box-shadow: var(--shadow-card);
  overflow: hidden; cursor: pointer; transform: translateZ(0); transition: transform .14s ease; content-visibility: auto; contain-intrinsic-size: auto 380px; }
.fc:active { transform: scale(.985); }
.fc.enter { animation: fcin .42s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes fcin { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.fm { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--mm-ph); overflow: hidden; }
.fm img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.fm img.ok { opacity: 1; }
.fm.contain { background: var(--c); }
.fm.contain img { position: relative; object-fit: contain; }
.fm-blur { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(26px) saturate(1.25); opacity: .85; transform: translateZ(0); }
.cr { position: absolute; left: 10px; bottom: 9px; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, .46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); letter-spacing: .01em; }

/* наша карточка-иконка категории (нет картинки) */
.fb { position: relative; display: flex; align-items: center; gap: 14px; aspect-ratio: 2.7 / 1; padding: 0 20px; overflow: hidden; color: #fff;
  background: linear-gradient(125deg, color-mix(in srgb, var(--c) 78%, #fff 22%), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000 30%)); }
.fb.big { aspect-ratio: 16 / 9; padding: 0 24px; }
.fb-e { position: relative; z-index: 1; width: 58px; height: 58px; flex: none; display: grid; place-items: center; font-size: 32px; border-radius: 18px;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.fb.big .fb-e { width: 72px; height: 72px; font-size: 40px; border-radius: 22px; }
.fb-t { position: relative; z-index: 1; display: flex; flex-direction: column; }
.fb-t b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.fb-t i { font-style: normal; font-size: 12.5px; opacity: .85; font-weight: 600; }
.fb-deco i { position: absolute; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .09); }
.fb-deco i:first-child { width: 190px; height: 190px; right: -50px; top: -70px; }
.fb-deco i:last-child { width: 120px; height: 120px; right: 70px; bottom: -80px; border-width: 12px; }

.fbody { padding: 12px 15px 12px; }
.fmeta { display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.fmeta > span { flex: none; }
.fmeta > .fpl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fmeta > span + span::before { content: "·"; margin: 0 6px; opacity: .7; }
.fcat { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: color-mix(in srgb, var(--c) 82%, var(--text)); }
.fc.fresh .ftm { color: #e5322d; font-weight: 700; }
.fc h3 { margin: 6px 0 0; font-size: 18.5px; line-height: 1.27; font-weight: 750; letter-spacing: -.012em; color: var(--f-title);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.flead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ffoot { display: flex; align-items: center; gap: 8px; margin-top: 11px; min-height: 34px; }
.fa { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff;
  background: hsl(var(--h, 200) 55% 46%); }
.fa-ours { background: linear-gradient(135deg, #14b8a6, var(--f-ours)); }
.fsrc { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fcm { flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.fcm b { font-weight: 700; color: var(--text); }
.fsp { flex: 1; }
.fread { flex: none; height: 34px; padding: 0 14px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 700; }
.fshare { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.fread:active, .fshare:active { transform: scale(.94); }

/* герой — первая новость с фото: заголовок поверх картинки */
.k-hero .fhero { position: relative; }
.k-hero .fm { aspect-ratio: 4 / 3.3; }
.fhero-g { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .0) 30%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .82)); }
.fhero-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 15px; color: #fff; }
.fhero-t .fmeta { color: rgba(255, 255, 255, .86); }
.fhero-t .fcat { color: #fff; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 82%, transparent); }
.fhero-t .fmeta > span + span::before { opacity: .8; }
.fc.fresh .fhero-t .ftm { color: #fff; }
.fhero-t h2 { margin: 8px 0 0; font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.k-hero .cr { top: 12px; bottom: auto; left: auto; right: 12px; }
.k-hero .flead { -webkit-line-clamp: 3; margin-top: 0; color: var(--text); opacity: .78; }

/* компактная — новость без фото: иконка рубрики справа */
.fcomp { display: flex; gap: 12px; align-items: flex-start; }
.fcomp-t { flex: 1; min-width: 0; }
.fcomp-e { flex: none; width: 54px; height: 54px; margin-top: 2px; border-radius: 16px; display: grid; place-items: center; font-size: 27px;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.k-compact h3 { font-size: 17px; -webkit-line-clamp: 3; }
/* «Важно» (тревога, погода, отбой) без картинки — алая плашка, чтобы не потерялась */
.fc.k-compact.c-alert { background: linear-gradient(135deg, color-mix(in srgb, #ef4444 13%, var(--surface)), var(--surface) 70%);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px color-mix(in srgb, #ef4444 35%, transparent); }
.fc.c-alert .fcomp-e { background: #ef4444; box-shadow: 0 6px 16px rgba(239, 68, 68, .35); }

/* скелетоны */
.fskel { cursor: default; }
.fskel .sk-img { animation: shimmer 1.2s ease-in-out infinite alternate; }
.fskel .sk { display: block; height: 11px; margin: 9px 0; border-radius: 6px; background: var(--surface-2); animation: shimmer 1.2s ease-in-out infinite alternate; }
.fskel .sk.t { height: 17px; margin: 7px 0; }
.fskel .w30 { width: 34%; } .fskel .w95 { width: 95%; } .fskel .w70 { width: 68%; } .fskel .w90 { width: 90%; } .fskel .w60 { width: 58%; }
.fmore { padding-bottom: 4px; }
.fmore .btn { display: flex; margin: 16px auto; }
.fend { text-align: center; color: var(--muted); font-size: 13.5px; padding: 28px 10px 6px; line-height: 1.5; }
.fend span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-weight: 800; }
.fend i { font-style: normal; font-size: 12.5px; opacity: .8; }
.flist .row-h { padding-top: 22px; }
.flist .ph-sec, .flist .hp { margin-top: 6px; }
.finj:empty { display: none; }

/* pull-to-refresh */
.ptr { position: absolute; z-index: 4; top: 0; left: 50%; width: 38px; height: 38px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--shadow-s); opacity: 0; transform: translate(-50%, -44px); transition: transform .25s, opacity .2s; pointer-events: none; }
.ptr i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--surface-3); border-top-color: var(--muted); }
.ptr.ready i { border-top-color: var(--accent); }
.ptr.spin-on i { border-top-color: var(--accent); animation: spin .8s linear infinite; }
.pane-in.feed { transition: transform .28s cubic-bezier(.2, .9, .25, 1); }
#pane-now { position: absolute; }

/* ---------------------------------------------------------------- экран статьи */
.s-art .s-body { padding-top: 0; }
.art-hero .fm { aspect-ratio: 16 / 10; }
.art-hero .fm.contain { aspect-ratio: 16 / 11; }
.art-hero .cr { left: auto; right: 12px; }
.art .d-in h1 { font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; color: var(--f-title); }
.art-by { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-by .fa { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
.art-by span { display: flex; flex-direction: column; min-width: 0; }
.art-by b { font-size: 14.5px; }
.art-by i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.art-txt p { font-size: 16.5px; line-height: 1.55; margin: 12px 0 0; }
.art-txt p.lead { font-size: 17.5px; font-weight: 500; margin-top: 14px; }
.art-txt h4 { margin: 18px 0 0; font-size: 16.5px; font-weight: 750; }
.art-txt ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.art-txt li { position: relative; padding: 4px 0 4px 20px; font-size: 16px; line-height: 1.45; }
.art-txt li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.art-cr { color: var(--muted); font-style: italic; font-size: 14px !important; }
.art .sub-h { margin-top: 22px; }
.art-src { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.as { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.as span { font-weight: 650; }
.as i { font-style: normal; font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.art-map { margin: 18px 0 0; border-radius: 18px; }
.links-row { display: flex; gap: 8px; }
.links-row .btn { flex: 1; }
.btn .bc { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255, 255, 255, .25); font-size: 12.5px; }
.art-more { margin-top: 18px; }
.am { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line); }
.am:last-child { border-bottom: 0; }
.am-i { flex: none; width: 76px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--mm-ph); display: grid; place-items: center; }
.am-i img { width: 100%; height: 100%; object-fit: cover; }
.am-i.e { font-size: 24px; background: color-mix(in srgb, var(--c) 15%, var(--surface)); }
.am-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-t b { font-size: 14.5px; line-height: 1.3; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-t i { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- просмотр сторис */
.sv { position: fixed; z-index: 90; inset: 0; background: #000; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: scale(.94); transition: opacity .22s, transform .26s cubic-bezier(.2, .9, .25, 1); }
.sv.in { opacity: 1; transform: none; }
.sv.out { opacity: 0; transform: translateY(40px) scale(.94); }
.sv-bars { position: absolute; z-index: 3; top: calc(var(--safe-top) + 10px); left: 10px; right: 10px; display: flex; gap: 4px; }
.sv-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.sv-bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; will-change: transform; }
@keyframes svbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-top { position: absolute; z-index: 3; top: calc(var(--safe-top) + 20px); left: 12px; right: 6px; display: flex; align-items: center; justify-content: space-between; }
.sv-brand { display: flex; align-items: center; gap: 9px; }
.sv-brand .fa { width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
.sv-brand span { display: flex; flex-direction: column; }
.sv-brand b { font-size: 14px; }
.sv-brand i { font-style: normal; font-size: 12px; opacity: .8; }
.sv-x { width: 44px; height: 44px; font-size: 30px; line-height: 1; color: #fff; }
.sv-stage, .sv-slide { position: absolute; inset: 0; }
.sv-slide { animation: svin .28s ease both; }
.sv-slide.from-r { animation-name: svr; }
.sv-slide.from-l { animation-name: svl; }
@keyframes svin { from { opacity: 0; } }
@keyframes svr { from { opacity: .3; transform: translateX(36px); } }
@keyframes svl { from { opacity: .3; transform: translateX(-36px); } }
.sv-bg { position: absolute; inset: 0; }
.sv-bg { overflow: hidden; }
.sv-bg img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.sv-bg img.contain { object-fit: contain; object-position: 50% 32%; }
.sv-bg.card { display: grid; place-items: center; padding-bottom: 30vh;
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 45%, #000)); }
.sv-bg.card span { font-size: 120px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .25)); }
.sv-g { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 42%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .92)); }
.sv-c { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px calc(22px + var(--safe-bottom)); }
.sv-cat { display: inline-flex; padding: 5px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--c) 85%, transparent); }
.sv-c h2 { margin: 12px 0 0; font-size: 27px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.sv-c p { margin: 10px 0 0; font-size: 16px; line-height: 1.45; opacity: .9; }
.sv-cr { display: block; margin-top: 10px; font-size: 12px; opacity: .7; }
.sv-b { display: flex; gap: 8px; margin-top: 18px; }
.sv-read { flex: 1; background: #fff; color: #0b0d10; }
.sv-more { background: rgba(255, 255, 255, .18); color: #fff; }
.sv.paused .sv-c, .sv.paused .sv-top { opacity: .35; transition: opacity .2s; }
body.has-sv .fab { transform: translateY(140px); }

/* «новые» поверх ленты */
#feedPill { top: calc(var(--safe-top) + var(--hdr) + 60px); }
body:not([data-tab="now"]) #feedPill { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fc, .fc.enter, .sv, .sv-slide, .fm img, .st-in img, .pane-in.feed { animation: none !important; transition: none !important; }
}
@media (min-width: 600px) {
  .fc h3 { font-size: 20px; }
  .fhero-t h2 { font-size: 27px; }
}