/* Истории: полка карточек и просмотр на весь экран. */
.st-strip { display: flex; gap: 10px; margin: 0 0 14px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.st-strip::-webkit-scrollbar { display: none; }
.st-card { position: relative; flex: 0 0 108px; height: 192px; overflow: hidden; border: 1px solid var(--fd-line); border-radius: 16px; background: var(--fd-surface); color: #fff; text-decoration: none; font: inherit; cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.st-card:hover { transform: translateY(-2px); border-color: var(--fd-accent, #6c4ff0); }
.st-card:focus-visible { outline: 2px solid var(--fd-accent, #6c4ff0); outline-offset: 2px; }
.st-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(6, 6, 10, .88)); pointer-events: none; }
.st-icon { position: absolute; top: 8px; left: 8px; z-index: 1; border-radius: 9px; box-shadow: 0 0 0 2px var(--fd-accent, #6c4ff0); background: #101115; }
.st-card.is-seen .st-icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.st-card b { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 1; overflow: hidden; font-size: 12.5px; font-weight: 650; line-height: 1.25; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-add { display: block; padding: 0; color: var(--fd-text); }
.st-add::after { display: none; }
.st-add b { color: var(--fd-text); text-align: center; }
.st-plus { position: absolute; top: 58px; left: 50%; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; background: var(--fd-accent, #6c4ff0); }
.st-plus::before, .st-plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); }
.st-plus::before { width: 18px; height: 2.5px; }
.st-plus::after { width: 2.5px; height: 18px; }
.st-toast { position: fixed; left: 50%; bottom: 84px; z-index: 100001; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: #1b1c24; color: #fff; font-size: 15px; box-shadow: 0 10px 32px rgba(0, 0, 0, .45); transform: translateX(-50%); }

.st-view { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #050508; color: #fff; }
/* Панели над и под видео, поверх кадра ничего не лежит: подписи и счётчики в роликах остаются видны. */
.st-stage { display: flex; flex-direction: column; width: min(100vw, calc((100dvh - 126px) * 9 / 16)); height: 100dvh; overflow: hidden; background: #000; }
@media (min-width: 700px) { .st-stage { width: min(100vw, calc((94dvh - 126px) * 9 / 16)); height: 94dvh; border-radius: 16px; } }
.st-top { flex: none; padding: 10px 10px 6px; }
.st-frame { position: relative; flex: 1; min-height: 0; }
.st-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.st-bars { display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.st-bars u { display: block; width: 0; height: 100%; background: #fff; }
.st-head { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 650; font-size: 15px; }
.st-head a { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: #fff; text-decoration: none; }
.st-head img { border-radius: 9px; background: #101115; }
.st-close { flex: none; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.st-tap { position: absolute; top: 0; bottom: 0; z-index: 2; width: 38%; border: 0; background: none; cursor: pointer; }
.st-tap.prev { left: 0; }
.st-tap.next { right: 0; width: 62%; }
.st-foot { flex: none; display: flex; justify-content: flex-end; padding: 8px 12px 10px; }
.st-share { min-height: 42px; padding: 0 18px; border: 0; border-radius: 21px; background: #fff; color: #111; font: 650 15px/1 inherit; font-family: inherit; cursor: pointer; }

.st-page { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.st-page-video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.st-page-text h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.12; letter-spacing: -.02em; }
.st-page-text > p:last-child { margin-top: 12px; color: var(--fd-text-2); font-size: 17px; }
@media (max-width: 680px) { .st-page { grid-template-columns: minmax(0, 1fr); } }