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;max-width:1040px !important;margin:0 auto !important;}
.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:16px;}
.story-circle-wrap{width:82px;flex:0 0 auto;text-align:center;font-size:.75rem;cursor:pointer;}
.story-circle{width:76px;height:76px;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;
  color:#ef4444;           /* всегда красное сердечко */
}
.btn-like.liked .like-icon{
  transform:scale(1.3);
}

/* чуть более мягкий цвет в тёмной теме */
body.theme-dark .btn-like .like-icon{
  color:#f97373;
}
/* общий текст в тёмной теме */
body.theme-dark{
  background:#000;
  color:#f9fafb;
}

body.theme-dark .card-post,
body.theme-dark .story-strip-card,
body.theme-dark .side-profile-card,
body.theme-dark .popular-posts-card{
  background:#111;
  border-color:#1f2937;
}

body.theme-dark .card-post-body,
body.theme-dark .card-post-header,
body.theme-dark .card-post-footer{
  color:#f9fafb;
}

body.theme-dark .badge-counter,
body.theme-dark .text-muted{
  color:#9ca3af;
}

.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-progress-bar{
  height:100%;
  width:0;
  background:#fff;
  transform-origin:left center;
}
.story-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.story-slide.active{
  opacity:1;
  pointer-events:auto;
}
.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:140px;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:180px;}}
.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;
}


/* нижнее меню как в Instagram (только иконки) */
.navbar-mobile-bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:52px;
  background:#fff;
  border-top:1px solid rgba(148,163,184,.4);
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:1030;
}
.nav-item-mobile{
  flex:1;
  text-align:center;
  color:#111827;
  text-decoration:none;
}
.nav-icon-mobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-icon-mobile svg{
  width:24px;
  height:24px;
}
@media (min-width:768px){
  .navbar-mobile-bottom{display:none;}
}

/* якоря для инсты-меню */
#feed{
  scroll-margin-top:72px;
}
#stories{
  scroll-margin-top:72px;
}


/* comments with avatar bubble */
.comment-list{
  font-size:.9rem;
}
.comment-row{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  padding:6px 0;
  border-top:1px solid rgba(148,163,184,.35);
}
.comment-avatar span{
  transform:translateY(1px);
}
.comment-body{
  flex:1;
}
.comment-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
}
.comment-name{
  font-weight:600;
}
.comment-date{
  color:#9ca3af;
  font-size:.75rem;
}
.comment-text{
  margin-top:2px;
}


/* search cards */
.search-card{
  display:block;
  padding:.55rem .75rem;
  border-radius:.75rem;
  border:1px solid rgba(148,163,184,.45);
  text-decoration:none;
  color:#111827;
  background:#fff;
}
.search-card:hover{
  background:#f9fafb;
}
.search-card-title{
  font-weight:600;
  font-size:.9rem;
}
.search-card-meta{
  margin-top:2px;
}

/* --- Stories: не прячем футер под нижнее меню на мобилках --- */
@media (max-width: 576px) {
  .story-view-wrapper {
    padding-bottom: 90px; /* место под нижнюю панель */
  }
}

/* тёмная тема — читаемый текст в сторис */
body.theme-dark .story-viewer {
  background: #000;
  color: #f9fafb;
}

body.theme-dark .story-footer,
body.theme-dark .story-comments {
  background: #000;
  color: #e5e7eb;
}

body.theme-dark .story-comment-row {
  border-color: #1f2937;
}


.comment-typing{
  font-size:.75rem;
}

/* прячем верхнюю панель внутри просмотра Stories, чтобы не было лишней линии */
body.story-view-body .navbar-inst{
  display:none;
}

.story-reactions{
  padding:8px 16px 14px;
  display:flex;
  justify-content:center;
  gap:10px;
}
.story-reaction-btn{
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:1.1rem;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.story-reaction-btn:hover{
  transform:translateY(-1px) scale(1.05);
  background:rgba(255,255,255,.12);
}
.story-reaction-btn:active{
  transform:scale(.95);
}
.story-view-body .story-reaction-btn{
  backdrop-filter:blur(8px);
}

/* превью соседних сторис по бокам */
.story-peek{
  position:absolute;
  top:50%;
  width:64px;
  height:64px;
  margin-top:-32px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 2px rgba(0,0,0,.6);
  cursor:pointer;
  opacity:.85;
  transition:transform .15s ease, opacity .15s ease;
  z-index:6;
}
.story-peek img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-peek-left{left:-36px;}
.story-peek-right{right:-36px;}
.story-peek:hover{
  opacity:1;
  transform:scale(1.05);
}
@media (max-width:576px){
  .story-peek{
    width:56px;
    height:56px;
    margin-top:-28px;
  }
  .story-peek-left{left:-30px;}
  .story-peek-right{right:-30px;}
}

.story-reaction-btn.sending{transform:scale(1.1);box-shadow:0 0 0 2px rgba(255,255,255,.3);} 
.profile-header{
  display:flex;
  gap:24px;
  padding:24px 8px 8px;
}
.profile-avatar-wrap{
  flex:0 0 auto;
}
.profile-avatar-lg{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
}
.profile-main{
  flex:1;
}
.profile-username{
  font-size:1.3rem;
  font-weight:600;
}
.profile-name{
  font-size:.95rem;
}
.profile-bio{
  font-size:.9rem;
  white-space:pre-wrap;
  line-height:1.4;
  max-height:calc(1.4em * 3);
  overflow:hidden;
}

.profile-bio.expanded{
  max-height:none;
}

.profile-bio-more{
  margin-top:4px;
  font-size:.85rem;
  font-weight:500;
  background:none;
  border:0;
  padding:0;
  color:#0095f6;
  cursor:pointer;
}
.profile-links a{
  font-size:.85rem;
  color:#2563eb;
}

.profile-row-stats{
  display:flex;
  gap:24px;
  font-size:.9rem;
  margin-top:8px;
  margin-bottom:4px;
}
.profile-row-stats .profile-stat .value{
  font-weight:600;
}

.profile-panels{
  width:100%;
  margin:0 auto 40px;
}

.profile-panel{
  display:none;
}

.profile-panel.active{
  display:block;
}

.profile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}
.profile-grid-item{
  display:block;
  position:relative;
  background:#000;
}
.profile-grid-media{
  position:relative;
  padding-top:100%; /* квадратная сетка */
  overflow:hidden;
  background-color:#fff;
  background-size:contain;     /* показываем фото полностью */
  background-position:center;
  background-repeat:no-repeat;
}
.profile-grid-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;          /* если вдруг используется <img> */
}

.profile-grid-badge{
  position:absolute;
  top:6px;
  right:6px;
  font-size:.85rem;
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
}
body.theme-dark .profile-header{
  color:#f9fafb;
}

body.page-fade-enter{
  opacity:0;
}
body.page-fade-enter.page-fade-enter-active{
  opacity:1;
  transition:opacity .18s ease-out;
}
body.page-fade-leave{
  opacity:0;
  transition:opacity .14s ease-in;
}

/* === Insta-like profile layout === */
.profile-header{
  max-width: 935px;
  margin: 24px auto 16px;
}
.profile-avatar-lg{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-avatar-lg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-stats{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:.95rem;
  margin-bottom:16px;
}
.profile-stat .value{
  font-weight:600;
}
.profile-bio{
  font-size:.9rem;
  white-space:pre-line;
}

.profile-grid{
  width:100%;
  margin:0 auto 40px;
}
.profile-grid-item{
  border-radius:8px;
  overflow:hidden;
  background:#000;
}
.profile-grid-thumb{
  position:relative;
  width:100%;
  padding-bottom:100%; /* квадрат */
  overflow:hidden;
}
.profile-grid-thumb img,
.profile-grid-thumb video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-grid-thumb.video-thumb::after{
  content:'▶';
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:1rem;
  color:#fff;
  text-shadow:0 0 4px rgba(0,0,0,.7);
}

/* адаптация профиля под мобилку */
@media (max-width: 576px){
  .profile-header{
    margin-top:16px;
    padding-inline:12px;
  }
  .profile-avatar-lg{
    width:80px;
    height:80px;
  }
  .profile-stats{
    font-size:.8rem;
  }
}

/* === Нижняя навигация как в приложении Instagram === */
.nav-bottom-mobile{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:52px;
  background:#fff;
  border-top:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:1050;
}
body.theme-dark .nav-bottom-mobile{
  background:#000;
  border-color:#111827;
}
.nav-item-mobile{
  flex:1;
  text-align:center;
  padding-top:4px;
}
.nav-icon-mobile{
  display:inline-flex;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
}
.nav-icon-mobile svg{
  width:22px;
  height:22px;
}
@media (min-width: 768px){
  .nav-bottom-mobile{
    display:none;
  }
}

/* небольшой отступ снизу под панель на мобилке */
@media (max-width: 767.98px){
  .app-shell{
    padding-bottom:72px;
  }
}
/* === Profile layout refinements (Instagram-like) === */
.profile-page{
  width:100%;
  margin:0 auto;
}

.profile-header{
  display:flex;
  gap:32px;
  padding:32px 16px 16px;
  align-items:flex-start;
}

.profile-avatar-wrap{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
}

.profile-avatar-lg{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
}

.profile-main{
  flex:1;
  min-width:0;
}

.profile-username-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}

.profile-username-row h1{
  font-size:1.5rem;
  margin:0;
  font-weight:400;
}

.profile-edit-btn{
  padding:4px 12px;
  font-size:.85rem;
}

.profile-stats{
  display:flex;
  gap:24px;
  margin-bottom:8px;
  font-size:.9rem;
}

.profile-stat strong{
  font-weight:600;
}

.profile-bio{
  font-size:.9rem;
  margin-top:4px;
}

.profile-bio .profile-name{
  font-weight:600;
}

.profile-grid{
  border-top:1px solid #e5e7eb;
  padding-top:16px;
}

.profile-tabs{
  display:flex;
  justify-content:center;
  gap:60px;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:24px;
  border-top:1px solid #dbdbdb;
}


.profile-tab-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.profile-tab-icon svg{
  width:12px;
  height:12px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
}
.profile-tab{
  border:0;
  background:none;
  padding:14px 0 10px;
  margin:0;
  color:#8e8e8e;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}

.profile-tab:focus{
  outline:none;
}

.profile-tab.active{
  color:#262626;
}

.profile-tab.active::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:#262626;
}


.profile-tabs span.active{
  font-weight:600;
}

/* Mobile profile layout */
@media (max-width: 767.98px){
  .profile-header{
    flex-direction:column;
    align-items:stretch;
    padding:16px 16px 8px;
  }
  .profile-avatar-wrap{
    justify-content:flex-start;
  }
  .profile-username-row{
    justify-content:flex-start;
  }
  .profile-stats{
    justify-content:space-between;
  }
}

/* Profile edit avatar */
.profile-avatar-edit img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
}

/* Registration / login username availability colors */
#usernameHelp{
  transition:color .15s ease;
}

/* Guest vs auth: minor spacing */
.navbar-inst-right .btn-primary{
  padding-inline:14px;
}

/* Ensure bottom nav is visible on mobile */
.nav-bottom-mobile{
  background:#fff;
}
body.theme-dark .nav-bottom-mobile{
  background:#000;
}

/* Desktop top navbar layout */
.navbar-inst{
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  position:sticky;
  top:0;
  z-index:1030;
}
body.theme-dark .navbar-inst{
  background:#000;
  border-color:#111827;
}
.navbar-inst-inner{
  width:100%;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.navbar-inst .brand-link{
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  color:inherit;
}
.navbar-inst-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.nav-top-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  color:#262626;
}
.nav-top-icon svg{
  width:100%;
  height:100%;
}
.nav-top-icon.active{
  color:#111;
}

.navbar-inst-right{
  display:flex;
  align-items:center;
  gap:16px;
}
.navbar-inst-right .btn{
  font-size:.85rem;
}

/* On small screens hide center links (есть нижняя панель) */
@media (max-width: 767.98px){
  .navbar-inst-inner{
    padding-inline:12px;
  }
  .navbar-inst-center{
    display:none !important;
  }
}
/* Rework top navbar layout to be closer to Instagram */
.navbar-inst{
  position:sticky;
  top:0;
  z-index:1030;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
body.theme-dark .navbar-inst{
  background:#000;
  border-color:#111827;
}

.navbar-inst-inner{
  width:100%;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.navbar-inst-left .logo {
  font-family: "Gothic A1", sans-serif;
  font-weight: 300;        /* Light */
  font-size: 1.4rem;
  text-decoration: none;
  color: inherit;
  letter-spacing: 0.3px;   /* чтобы было похоже на Avant Garde */
}


.navbar-inst-center{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:.9rem;
}

.navbar-inst-center a{
  text-decoration:none;
  color:inherit;
}
.navbar-inst-center a.active{
  font-weight:600;
}

.navbar-inst-right{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:.85rem;
}

.navbar-inst-profile{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
}

.navbar-inst-profile .avatar-small{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}

@media (max-width: 767.98px){
  .navbar-inst-inner{
    padding:8px 12px;
  }
  .navbar-inst-center{
    display:none;
  }
  .navbar-inst-right-text{
    display:none;
  }
}

/* Square tiles for videos in profile/search grids */
.profile-grid-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* === Bottom mobile nav — Instagram-like === */
.nav-bottom-mobile{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:52px;
  background:#fff;
  border-top:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:1050;
}
body.theme-dark .nav-bottom-mobile{
  background:#000;
  border-color:#111827;
}
.nav-item-mobile{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:#111827;
  padding-top:4px;
}
body.theme-dark .nav-item-mobile{
  color:#e5e7eb;
}
.nav-icon-mobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-icon-mobile svg{
  width:24px;
  height:24px;
}
.nav-item-mobile.active{
  color:#000;
}
body.theme-dark .nav-item-mobile.active{
  color:#f9fafb;
}
.nav-item-mobile.active svg{
  stroke-width:1.8;
}
@media (min-width:768px){
  .nav-bottom-mobile{
    display:none;
  }
}
/* extra bottom padding for pages so nav does not overlap content */
@media (max-width:767.98px){
  .app-shell{
    padding-bottom:72px;
  }
}


/* Override grid media to behave like Instagram thumbnails */
.profile-grid-media{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}


/* Your Story circle (+) */
.story-circle-wrap.your-story .story-circle {
  border: 2px solid #dbdbdb;
}
.story-badge-add{
  background:#0095f6;
}
body.theme-dark .story-badge-add{
  background:#3797f0;
}

.story-strip-arrow{border:none;background:transparent;cursor:pointer;font-size:16px;padding:2px 6px;border-radius:999px;line-height:1;}
.story-strip-arrow:hover{background:rgba(0,0,0,.04);}
body.theme-dark .story-strip-arrow:hover{background:rgba(255,255,255,.06);}

.post-actions-row{padding:8px 16px 4px;}
.post-action-icon{border:none;background:transparent;cursor:pointer;padding:0;margin-right:8px;display:inline-flex;align-items:center;justify-content:center;}
.post-action-icon:last-child{margin-right:0;}
.post-action-icon svg{width:24px;height:24px;stroke:#262626;fill:none;stroke-width:1.8;}
.btn-like svg.icon-heart{fill:none;}
.btn-like.liked svg.icon-heart{fill:#ed4956;stroke:#ed4956;}
body.theme-dark .post-action-icon svg{stroke:#f5f5f5;}
.post-likes{padding:0 16px;font-size:.9rem;font-weight:600;margin-bottom:4px;}
.post-caption-wrap{padding:0 16px 2px;font-size:.9rem;}
.post-caption-text{white-space:pre-line;}
.caption-more-btn{border:none;background:transparent;color:#8e8e8e;font-size:.85rem;padding:0;margin-left:4px;cursor:pointer;}
.post-comments-link{border:none;background:transparent;padding:0 16px;font-size:.85rem;color:#8e8e8e;text-align:left;cursor:pointer;}
.post-comments-link:hover{text-decoration:underline;}
.post-time{padding:0 16px 10px;font-size:.7rem;color:#8e8e8e;text-transform:uppercase;letter-spacing:.02em;}

.post-views{font-size:.8rem;color:#8e8e8e;}
.post-views .icon-eye{width:18px;height:18px;}
.post-views-count{min-width:18px;text-align:left;}

/* корректируем размер иконки комментариев */
.post-action-icon svg.icon-comment{width:24px;height:24px;}


.comment-list{
  font-size:.9rem;
  margin-top:.25rem;
}
.comment-block{
  padding:4px 0;
}
.comment-row{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}
.comment-body{
  flex:1;
}
.comment-name{
  font-weight:600;
  margin-right:4px;
}
.comment-text{
  display:inline;
  white-space:pre-line;
}
.comment-meta{
  margin-top:2px;
}
.comment-meta .btn{
  font-size:.8rem;
}
.dot-separator{
  margin:0 4px;
}
.comment-view-replies-row{
  padding-left:40px;
  padding-top:2px;
}
.comment-view-replies-row .btn{
  font-size:.8rem;
}
.comment-replies{
  padding-left:40px;
  padding-top:2px;
}
.comment-reply .comment-add{
  border-top:1px solid rgba(148,163,184,.35);
  padding:8px 12px;
  margin-top:0;
}

.comment-form-pill{
  margin:0;
}

.comment-input-row{
  display:flex;
  align-items:center;
  background:#fafafa;
  border-radius:22px;
  border:1px solid #dbdbdb;
  padding:6px 12px;
}

.comment-input-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  overflow:hidden;
  background:#e5e7eb;
  flex-shrink:0;
  margin-right:8px;
}

.comment-input-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

.comment-input-field{
  border:none;
  background:transparent;
  resize:none;
  outline:none;
  flex:1;
  font-size:.9rem;
  padding:4px 0;
}

.comment-input-field::placeholder{
  color:#9ca3af;
}

.comment-submit-link{
  border:none;
  background:none;
  font-size:.9rem;
  font-weight:600;
  margin-left:8px;
  color:rgba(0,149,246,.4);
  cursor:default;
  padding:0;
}

.comment-submit-link.is-active{
  color:#0095f6;
  cursor:pointer;
}

.comment-submit-link:disabled{
  pointer-events:none;
}

.comment-feature-banner{
  margin-top:8px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fafafa;
  font-size:.875rem;
}

.comment-feature-inner{
  display:flex;
  align-items:flex-start;
  padding:10px 12px;
}

.comment-feature-icon{
  margin-right:8px;
  margin-top:2px;
}

.comment-feature-icon-circle{
  display:block;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}

.comment-feature-text{
  color:#111827;
}

.comment-feature-text .comment-feature-brand{
  font-weight:600;
  margin-right:4px;
}

.comment-feature-text strong{
  font-weight:600;
}

.comment-feature-close{
  margin-left:auto;
  border:none;
  background:none;
  padding:0;
  font-size:1rem;
  line-height:1;
  color:#9ca3af;
  cursor:pointer;
}

.comment-feature-close:hover{
  color:#6b7280;
}

.comment-feature-banner + .comment-add{
  margin-top:6px;
}
.comment-emojis{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 12px 6px;
}
.comment-emoji{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
  transition:transform .12s ease, filter .12s ease;
}
.comment-emoji:hover{
  transform:scale(1.18);
  filter:brightness(1.1);
}
.btn-like-comment{
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  margin-left:8px;
  display:flex;
  align-items:center;
}
.btn-like-comment .like-icon{
  font-size:1rem;
}
.btn-like-comment.is-liked .like-icon{
  color:#ef4444;
}


.comment-avatar-clickable{
  border:none;
  padding:0;
  background:none;
}
.comment-avatar-clickable:focus{
  outline:none;
}


.comment-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:#e5e7eb;
}
.comment-avatar img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}
.comment-avatar-story{
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  padding:2px;
}
.comment-avatar-story img{
  background:#fff;
}
.comment-avatar-clickable{
  border:none;
  padding:0;
  background:none;
}
.comment-avatar-clickable:focus{
  outline:none;
}


/* --- Feed v1.1: карусель медиа и большой лайк --- */

.post-carousel {
  position: relative;
  overflow: hidden;
}

.post-carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

.post-carousel-item {
  flex: 0 0 100%;
}

.post-carousel-item img,
.post-carousel-item video {
  width: 100%;
  display: block;
  object-fit: cover;
}

.post-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.post-carousel-arrow-prev {
  left: 8px;
}

.post-carousel-arrow-next {
  right: 8px;
}

.post-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 3;
}

.post-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.5);
}

.post-carousel-dot.is-active {
  background: #fff;
}

/* Большое сердечко по двойному тапу */
.card-post-like-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-post-like-heart-icon {
  font-size: 96px;
  line-height: 1;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 16px rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.card-post-like-heart-icon.is-visible {
  opacity: 1;
  transform: scale(1);
}

body.theme-dark .post-carousel-arrow {
  background: rgba(0,0,0,0.6);
}


/* --- Stories v1.2: удержание = пауза с затемнением UI и прогресса --- */
.story-viewer.story-hold .story-header,
.story-viewer.story-hold .story-footer,
.story-viewer.story-hold .story-reactions {
  opacity: 0;
  pointer-events: none;
}

.story-viewer.story-hold .story-progress-segment::after {
  opacity: 0.3;
}

/* небольшой отклик для быстрых реакций */
.story-reaction-btn.sending {
  transform: translateY(-2px) scale(1.1);
}


/* --- Feed v1.3: иконка комментария и состояние "Сохранено" --- */
.icon {
  width: 24px;
  height: 24px;
}

.post-action-icon {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-save-post.saved .icon-bookmark path {
  fill: #000;
}

body.theme-dark .btn-save-post.saved .icon-bookmark path {
  fill: #fff;
}


/* --- Profile highlights (актуальные сторис) --- */
.profile-highlights-inner {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0;
}

.profile-highlight-circle {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.profile-highlight-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  border: 2px solid #ffb347;
}

.profile-highlight-title {
  font-size: .75rem;
  color: #4b5563;
}

body.theme-dark .profile-highlight-title {
  color: #e5e7eb;
}


/* --- Search & Explore --- */
.search-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 0;
}

.search-account-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.search-account-username {
  font-weight: 600;
  font-size: .9rem;
  color: inherit;
}

.search-account-name {
  font-size: .8rem;
  color: #6b7280;
}

body.theme-dark .search-account-name {
  color: #9ca3af;
}

.search-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.7);
  font-size: .8rem;
  text-decoration: none;
}

.search-tag-count {
  font-size: .75rem;
  opacity: .8;
}


/* сохранённые посты — подсветка закладки */
.post-action-icon.btn-save-post.saved .icon-bookmark path {
  fill: #000;
}
body.theme-dark .post-action-icon.btn-save-post.saved .icon-bookmark path {
  fill: #fff;
}


/* аватарка в ленте с градиентным кольцом, если есть сторис */
.avatar-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 2px;
}

.avatar-ring-has-story {
  background: conic-gradient(from 180deg, #f58529, #dd2a7b, #8134af, #515bd4, #f58529);
}

.avatar-ring .avatar-small {
  border-radius: 50%;
  border: 2px solid #fff;
}

body.theme-dark .avatar-ring .avatar-small {
  border-color: #000;
}


/* === InstaBlog v1.4 FIX: media carousel, video, stories, mobile nav === */

/* Post media container + carousel */
.card-post-media{
  position:relative;
  background:transparent;
  overflow:hidden;
}
.card-post-media-item{
  display:none;
}
.card-post-media-item.is-active{
  display:block;
}
/* Полное фото: блок подстраивается по высоте изображения */
.card-post-media img,
.card-post-media video{
  width:100%;
  height:auto;
  max-height:none;
  display:block;
  object-fit:unset;
  background:transparent;
}

/* Carousel controls */
.card-post-media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.card-post-media-nav::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
}
.card-post-media-nav.prev{
  left:8px;
}
.card-post-media-nav.prev::before{
  transform:rotate(-135deg);
}
.card-post-media-nav.next{
  right:8px;
}
.card-post-media-nav.next::before{
  transform:rotate(45deg);
}

.card-post-media-dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
}
.card-post-media-dots .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
}
.card-post-media-dots .dot.is-active{
  background:#fff;
}

/* Stories ring + blue plus badge */
.story-circle-wrap{
  position:relative;
  width:82px;
  flex:0 0 auto;
  text-align:center;
  font-size:.75rem;
  cursor:pointer;
}
.story-circle{
  position:relative;
  width:76px;
  height:76px;
  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-badge{
  position:absolute;
  right:4px;
  bottom:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#0095f6;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  border:2px solid #fff;
}
.story-badge-add span{
  line-height:1;
  margin-top:-1px;
}

/* Mobile top navbar: show only Direct airplane */
.nav-top-direct{
  display:none;
}
.nav-top-direct svg{
  width:24px;
  height:24px;
}

/* On small screens hide other icons + avatar, keep only airplane */
@media (max-width: 767.98px){
  .navbar-inst-right .nav-top-icon,
  .navbar-inst-right .navbar-inst-profile,
  .navbar-inst-right .navbar-inst-right-text{
    display:none;
  }
  .navbar-inst-right .nav-top-direct{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}


/* Instagram-like form fields with status icons */
.insta-field{
  position:relative;
}
.insta-field .form-control{
  padding-right:48px;
}
.insta-status-icon{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #dbdbdb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#8e8e8e;
  background-color:#fff;
  opacity:0;
  transition:opacity .15s ease, border-color .15s ease, color .15s ease;
}
.insta-status-icon.visible{
  opacity:1;
}
.insta-status-icon.ok{
  border-color:#16a34a;
  color:#16a34a;
}
.insta-status-icon.error{
  border-color:#dc2626;
  color:#dc2626;
}

/* password show/hide button */
.insta-field-password .form-control{
  padding-right:90px;
}
.insta-show-pass{
  position:absolute;
  right:36px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  font-size:12px;
  font-weight:500;
  color:#262626;
  cursor:pointer;
  padding:0;
}
.insta-show-pass:focus{
  outline:none;
}

/* VK button */
.btn-vk{
  background-color:#2787f5;
  border-color:#2787f5;
  color:#fff;
}
.btn-vk:hover{
  background-color:#1f6fd0;
  border-color:#1f6fd0;
  color:#fff;
}


/* Settings (profile / password / notifications) layout */
.page-profile-settings{
  background-color:#fafafa;
}

.settings-container{
  max-width:930px;
  margin:32px auto;
}

.settings-layout{
  display:flex;
  gap:24px;
}

.settings-sidebar{
  width:240px;
  border:1px solid #dbdbdb;
  border-radius:3px;
  background-color:#fff;
}

.settings-nav{
  padding:8px 0;
}

.settings-nav-link{
  display:block;
  padding:10px 16px;
  font-size:14px;
  color:#262626;
  text-decoration:none;
  border-left:2px solid transparent;
}

.settings-nav-link:hover{
  background-color:#fafafa;
}

.settings-nav-link.active{
  font-weight:600;
  border-left-color:#262626;
}

.settings-content{
  flex:1;
  border:1px solid #dbdbdb;
  border-radius:3px;
  background-color:#fff;
  padding:24px 32px 32px;
}

.settings-content-header img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
}

.settings-avatar-circle{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
}

.settings-sidebar-mobile{
  border:1px solid #dbdbdb;
  border-radius:3px;
  background-color:#fff;
}

.settings-sidebar-mobile .settings-nav-link{
  padding:10px 12px;
}

@media (max-width: 767.98px){
  .settings-layout{
    flex-direction:column;
  }
  .settings-sidebar{
    display:none;
  }
}


/* Profile grid overlay with likes & comments (Instagram 2025 style) */
.profile-grid-item{
  position:relative;
  display:block;
}
.profile-grid-media{
  position:relative;
  overflow:hidden;
}
.profile-grid-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  opacity:0;
  transition:opacity .2s ease-in-out;
}
.profile-grid-meta{
  display:flex;
  align-items:center;
  gap:18px;
  color:#fff;
  font-weight:600;
  letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
.profile-grid-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.profile-grid-meta-icon{
  width:18px;
  height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.profile-grid-meta-icon-like{
  /* simple heart icon */
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color:#fff;
}
.profile-grid-meta-icon-comments{
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color:#fff;
}

/* Hover behavior: desktop */
@media (min-width: 768px){
  .profile-grid-item:hover .profile-grid-overlay{
    opacity:1;
  }
}

/* Mobile: overlay всегда видно, но смещено вниз как в Instagram */
@media (max-width: 767.98px){
  .profile-grid-overlay{
    opacity:1;
    align-items:flex-end;
    padding-bottom:6px;
    background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  }
  .profile-grid-meta{
    gap:12px;
    font-size:.8rem;
  }
}


/* === Search page (accounts, tags, posts) === */
.search-page{
  max-width:960px;
}
.search-form .form-control{
  border-radius:999px 0 0 999px;
  padding-left:1.1rem;
}
.search-form .btn{
  border-radius:0 999px 999px 0;
}
.search-section{
  margin-bottom:2rem;
}
.search-section h2{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
}

.search-accounts-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.search-account-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.35rem .5rem;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
.search-account-row:hover{
  background:#f3f4f6;
}
body.theme-dark .search-account-row:hover{
  background:#111827;
}
.search-account-avatar img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}
.search-account-username{
  font-weight:600;
  font-size:.9rem;
}
.search-account-name{
  font-size:.8rem;
  color:#6b7280;
}
body.theme-dark .search-account-name{
  color:#9ca3af;
}

.search-tags-list{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.search-tag-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.35rem .5rem;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
.search-tag-row:hover{
  background:#f3f4f6;
}
body.theme-dark .search-tag-row:hover{
  background:#111827;
}
.search-tag-name{
  font-weight:500;
}
.search-tag-count{
  font-size:.8rem;
  color:#6b7280;
}

.search-card{
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.search-card-thumb{
  position:relative;
  padding-top:100%;
}
.search-card-thumb-inner{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.search-card-video-icon{
  position:absolute;
  right:6px;
  bottom:6px;
  font-size:.75rem;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:#fff;
}

/* center search page */
.search-page .container{
  max-width:960px;
}


/* post caption layout */

.post-caption-full{
  margin-top:.5rem;
}

.post-caption-line{
  display:flex;
  align-items:baseline;
  gap:.35rem;
}

.post-caption-text{
  display:inline;
}

.post-caption-meta{
  margin-top:.35rem;
  font-size:.75rem;
  color:#9ca3af;
}

.post-comments-link{
  display:inline-block;
  margin-bottom:2px;
  color:inherit;
  text-decoration:none;
}

.post-comments-link:hover{
  text-decoration:underline;
}

.post-caption-date{
  font-size:.75rem;
}



/* Single post page footer layout: likes + caption в одну колонку, как в Instagram */
.card-post-footer-single{
  display:block;
  padding:12px 16px 12px;
}
.card-post-footer-single .post-actions{
  margin-bottom:6px;
}
.card-post-footer-single .post-caption-wrap{
  padding:0;
}
.post-caption-hashtags{
  padding:0 16px 0;
  font-size:.9rem;
  margin-top:2px;
}


/* ===== Desktop UI scale: чуть крупнее, как в Instagram 2025 ===== */
@media (min-width: 1200px){
  /* базовый размер шрифта */
  html{
    font-size: 17px;
  }

  /* чуть шире центральный контейнер */
  .app-shell{
    max-width: 1180px !important;
  }

  /* лента шире, правая колонка чуть уже */
  .feed-grid{
    grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr);
    gap: 28px;
  }

  /* немного увеличим паддинги внутри карточек постов */
  .card-post-header,
  .card-post-footer{
    padding: 14px 20px;
  }
  .card-post-body{
    padding: 0 20px 14px;
  }

  /* шрифт статусов/подписей/вспомогательного текста чуть крупнее */
  .badge-counter,
  .post-caption-full,
  .profile-sidebar .profile-bio,
  .story-strip-card,
  .settings-sidebar,
  .settings-sidebar-mobile{
    font-size: 0.95rem;
  }
}


/* Deleted profile state (account removed by owner) */
.profile-bio-deleted{
  margin-top:8px;
}
.profile-deleted-title{
  font-weight:600;
}
.profile-deleted-text{
  font-size:.9rem;
  color:#8e8e8e;
}


/* Direct share paper plane icon (posts/feed) */
.btn-share-direct {
  border: none;
  background: transparent;
  padding: 0 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-share-direct:focus {
  outline: none;
}

.icon-paper-plane {
  width: 18px;
  height: 18px;
  display: block;
}


/* RUUGRAM Stories: полное фото, авто-высота */
.story-media-frame{
  position:relative;
  padding-top:0;
  overflow:hidden;
  background:#000;
}
.story-media-frame img,
.story-media-frame video{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:unset;
  display:block;
}

/* === RUUGRAM HIGHLIGHTS: hide placeholders + bigger padding === */

/* скрыть placeholder-кружки */
.profile-highlight-circle-placeholder {
    display: none !important;
}

/* увеличить внутренние отступы блока */
.profile-highlights {
    padding: 20px 16px !important;
}

/* увеличить расстояние между кружками */
.profile-highlights-inner {
    gap: 20px !important;
}

/* сделать круги немного крупнее */
.profile-highlight-avatar,
.profile-highlight-avatar-placeholder {
    width: 88px !important;
    height: 88px !important;
}

/* подпись сделать чуть жирнее и крупнее */
.profile-highlight-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}