body{background:#fafafa;color:#111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
body.theme-dark{background:#000;color:#f5f5f5;}
a{text-decoration:none;color:inherit;}
.navbar-inst{border-bottom:1px solid #ddd;background:#fff;position:sticky;top:0;z-index:1030;}
body.theme-dark .navbar-inst{background:#111;border-color:#222;}
.navbar-inst .brand a{font-weight:700;font-size:1.3rem;}
.app-shell{padding:16px;}
.feed-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:24px;}
@media (max-width:991.98px){.feed-grid{grid-template-columns:1fr;}}
.card-post{background:#fff;border-radius:12px;border:1px solid #e5e5e5;margin-bottom:16px;overflow:hidden;}
body.theme-dark .card-post{background:#111;border-color:#222;}
.card-post-header,.card-post-footer{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;}
.card-post-body{padding:0 16px 12px;}
.card-post-media img,.card-post-media video{width:100%;display:block;object-fit:cover;border-radius:0;}
.avatar-small{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#ddd;}
.badge-counter{font-size:.8rem;color:#8e8e8e;}
.story-strip-card{background:#fff;border-radius:12px;border:1px solid #e5e5e5;margin-bottom:16px;}
body.theme-dark .story-strip-card{background:#111;border-color:#222;}
.story-strip{display:flex;overflow-x:auto;padding:8px 12px 12px;gap:12px;}
.story-circle-wrap{width:70px;flex:0 0 auto;text-align:center;font-size:.7rem;cursor:pointer;}
.story-circle{width:64px;height:64px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);display:flex;align-items:center;justify-content:center;}
.story-circle-inner{width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-color:#111;}
.story-circle-title{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.story-badge{position:absolute;right:6px;bottom:6px;width:18px;height:18px;border-radius:50%;background:#000a;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;}
.theme-toggle-btn{border-radius:999px;padding:4px 12px;font-size:.8rem;border:1px solid #d1d5db;background:#fff;}
body.theme-dark .theme-toggle-btn{background:#000;color:#f5f5f5;border-color:#374151;}
.skeleton-container{display:block;}
.real-content{display:none;}
body.page-loaded .skeleton-container{display:none;}
body.page-loaded .real-content{display:block;}
.skeleton-block{background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200% 100%;animation:skeleton 1.4s infinite;}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.btn-like{border:none;background:transparent;font-size:1.2rem;padding:0;margin-right:6px;position:relative;}
.btn-like .like-icon{display:inline-block;transition:transform .2s ease;}
.btn-like.liked .like-icon{transform:scale(1.3);}
.like-burst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,0,80,.7);animation:burst .35s ease-out;pointer-events:none;}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.story-view-body{background:#000;color:#fff;}
.story-view-wrapper{display:flex;justify-content:center;padding:16px;}
.story-viewer{max-width:480px;width:100%;background:#000;border-radius:16px;border:none;color:#fff;}
.story-progress{display:flex;gap:4px;padding:8px 8px 0;}
.story-progress-segment{flex:1;height:3px;border-radius:99px;background:#111;overflow:hidden;}
.story-progress-segment::after{content:'';display:block;width:0;height:100%;background:#fff;transform-origin:left center;}
.story-slide{display:none;position:absolute;inset:0;}
.story-slide.active{display:block;}
.story-media-frame{position:relative;padding-top:177%;overflow:hidden;background:#000;}
.story-media-frame img,.story-media-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.story-nav{position:absolute;top:40px;bottom:60px;width:50%;z-index:5;cursor:pointer;}
.story-nav-left{left:0;}
.story-nav-right{right:0;}
@media (max-width:576px){.story-nav{top:30px;bottom:80px;}}
.story-footer{background:#000;}
.story-comments{max-height:140px;overflow:auto;font-size:.8rem;}
.story-comment-row{padding:2px 0;border-top:1px solid #1f2933;}

.popular-post-row{display:flex;gap:.5rem;padding:.35rem .25rem;border-radius:.5rem;cursor:pointer;}
.popular-post-row:hover{background:rgba(255,255,255,.06);}
.popular-post-title{font-size:.85rem;font-weight:500;}
.popular-post-meta{font-size:.75rem;color:#8e8e8e;}


/* просмотренные сторис — делаем кольцо чуть бледным */
.story-circle-wrap.story-viewed .story-circle {
  opacity: .45;
  filter: grayscale(.3);
}


/* fallback для сторис, когда видео не может отрендериться — вместо чёрного экрана показываем постер */
.story-slide.story-video-fallback {
  background: #000;
  position: relative;
}
.story-slide.story-video-fallback::after {
  content: 'Видео недоступно для этого устройства';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: .8rem;
  color: #fff;
  text-align: center;
  padding: .5rem .75rem;
  background: rgba(0,0,0,.6);
  border-radius: .75rem;
}