/* Сторис PPFit: кружки под первым экраном, просмотрщик, раздел /stories/ и страница истории */

/* --- Кружки --- */
.st-strip[hidden]{display:none}
.st-strip{padding:18px 0 6px}
.st-strip-row{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.st-strip-row::-webkit-scrollbar{display:none}
.st-circle{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--tx);text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font:inherit}
.st-ring{display:block;width:80px;height:80px;border-radius:50%;padding:3px;background:conic-gradient(var(--ac),#fff3,var(--ac));position:relative;transition:transform .18s}
.st-circle:hover .st-ring,.st-circle:focus-visible .st-ring{transform:scale(1.06)}
.st-circle:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:12px}
.st-ring img,.st-ring-fill{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg);background:var(--panel)}
.st-ring-fill{display:flex;align-items:center;justify-content:center;font:800 13px/1.1 'Manrope';color:var(--ac);text-align:center;padding:6px;box-sizing:border-box}
.st-name{font:600 12px/1.3 'Manrope';color:var(--mute);text-align:center;max-width:84px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-more .st-ring{background:var(--line2)}
@media (min-width:900px){.st-strip-row{gap:24px}.st-circle{width:96px}.st-ring{width:92px;height:92px}.st-name{max-width:96px;font-size:13px}}

/* --- Просмотрщик --- */
.stv{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center}
.stv-card{position:relative;width:min(100vw,420px);height:min(100dvh,760px);background:#0b0c0a;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;color:#fff}
@media (max-width:480px){.stv-card{border-radius:0;height:100dvh}}
.stv-bars{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.stv-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.stv-bar i{display:block;height:100%;width:0;background:#fff}
.stv-bar.done i{width:100%}
.stv-bar.run i{animation:stvFill var(--dur,6s) linear forwards}
.stv.paused .stv-bar.run i{animation-play-state:paused}
@keyframes stvFill{to{width:100%}}
.stv-top{position:absolute;top:22px;left:14px;right:14px;display:flex;justify-content:flex-end;align-items:center;gap:10px;z-index:3}
.stv-x{border:0;background:rgba(0,0,0,.45);color:#fff;width:36px;height:36px;border-radius:50%;font:400 22px/1 'Manrope';cursor:pointer}
.stv-media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#0b0c0a;display:flex;align-items:center;justify-content:center}
.stv-bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(26px) brightness(.55)}
.stv-media img,.stv-media video{position:relative;width:100%;height:100%;display:block}
.stv-media img.fit,.stv-media video{object-fit:contain}
.stv-media img.tall{object-fit:cover}
.stv-plain{padding:28px;font:800 28px/1.2 'Exo 2','Manrope';text-align:center;color:var(--ac)}
.stv-text{flex:0 0 auto;max-height:46%;overflow:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;background:#0b0c0a;border-top:1px solid rgba(255,255,255,.08)}
.stv-text h2{margin:0;font:800 19px/1.25 'Manrope';text-wrap:balance}
.stv-text p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0;font:500 14px/1.5 'Manrope';color:rgba(255,255,255,.85)}
.stv-zone{position:absolute;top:56px;bottom:0;width:34%;z-index:2;border:0;background:none;cursor:pointer;padding:0}
.stv-zone.l{left:0}.stv-zone.r{right:0}
@media (prefers-reduced-motion:reduce){.stv-bar.run i{animation:none;width:100%}}

/* --- Раздел и страница истории --- */
.st-crumbs-bar{border-bottom:1px solid var(--line)}
.st-crumbs-bar .crumbs{max-width:1600px;margin:0 auto;padding:12px var(--pad-x);display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:600 13px/1.4 'Manrope';color:var(--dim)}
.st-crumbs-bar .crumbs a{color:var(--mute)}.st-crumbs-bar .crumbs a:hover{color:var(--ac)}
.st-kicker{color:var(--bg);background:var(--ac);padding:7px 9px;border-radius:6px;align-self:flex-start;display:inline-block}
.st-head{display:flex;flex-direction:column;gap:16px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.st-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--tx);text-decoration:none;transition:border-color .18s,transform .18s}
.st-card:hover,.st-card:focus-visible{border-color:var(--ac);transform:translateY(-2px)}
.st-card-pic{display:block;aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.st-card-pic img{width:100%;height:100%;object-fit:cover;display:block}
.st-card-empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--panel),var(--line2))}
.st-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.st-card-body b{font:800 18px/1.3 'Manrope';text-wrap:balance}
.st-card-body>span:not(.st-rubric){font:400 14px/1.55 'Manrope';color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-card-body time,.st-meta time{font:500 12px/1 'JetBrains Mono',monospace;color:var(--dim)}
.st-rubric{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--ac);text-transform:uppercase;text-decoration:none}
.st-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.st-article{max-width:820px;display:flex;flex-direction:column;gap:28px;padding-top:12px}
.st-lead b{color:var(--ac)}
.st-lead{margin:0;font:500 19px/1.6 'Manrope';color:var(--tx);background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:18px 22px;text-wrap:pretty}
.st-fig{margin:0}
.st-fig img,.st-fig video{display:block;width:100%;height:auto;border-radius:20px;background:var(--panel)}
.st-body{display:flex;flex-direction:column;gap:18px;font:400 17px/1.75 'Manrope';color:var(--mute)}
.st-body p,.st-body ul{margin:0;text-wrap:pretty}
.st-body ul{padding-left:22px;display:grid;gap:8px}
.st-body strong{color:var(--tx)}
.st-body a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.st-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--ac);border-radius:22px;padding:26px 28px}
.st-cta b{font:800 20px/1.3 'Manrope'}.st-cta span{font:400 15px/1.55 'Manrope';color:var(--mute)}
.st-empty{font:500 17px/1.6 'Manrope';color:var(--mute)}

/* --- Подписка на каналы: под историей в просмотрщике и на её странице --- */
.st-follow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.st-follow span{flex:1 1 100%;font:600 14px/1.4 'Manrope';color:var(--mute)}
.st-follow .btn{padding:14px 20px}
.st-follow-max{background:transparent;color:var(--tx);border:1px solid var(--line2)}

/* Просмотрщик: «Читать целиком» и подписки в одну строку */
.stv-text{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.stv-actions{display:flex;gap:8px;align-items:stretch}
.stv-actions a{display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:12px;text-decoration:none;padding:12px 10px;font:800 13px/1 'Manrope'}
.stv-more{flex:1 1 auto;background:var(--ac);color:var(--bg)}
.stv-sub{flex:0 0 auto;color:#fff;border:1px solid rgba(255,255,255,.3)}
.stv-sub:hover,.stv-sub:focus-visible{border-color:var(--ac);color:var(--ac)}

/* Раздел: все истории подряд, карточки ниже экрана рисуются по мере прокрутки */
.st-grid .st-card{content-visibility:auto;contain-intrinsic-size:auto 420px}