/* =========================================================
   MatchMate — лента. Оформление + окно «Новый пост».
   ========================================================= */
html body .feed-page{
  --f-panel:rgba(9,13,23,.88);
  --f-surface:rgba(255,255,255,.045);
  --f-line:rgba(255,255,255,.09);
  --f-line-soft:rgba(255,255,255,.06);
  --f-text:#eaf1ff;
  --f-dim:#93a5be;
  --f-accent:#3fd7f5;
  --f-grad:linear-gradient(135deg,#48dcf7 0%,#6f7bff 60%,#9a63ff 100%);
}
html body .feed-page{padding:20px 0 110px !important;background:none !important}
html body .feed-page > .container{
  width:min(760px,100%) !important;margin:0 auto !important;padding:0 16px !important;
  display:flex !important;flex-direction:column !important;gap:14px !important;
}
html body .feed-page .social-mode-switch{
  display:inline-flex !important;align-self:center !important;gap:4px !important;
  margin:0 !important;padding:4px !important;border-radius:14px !important;
  background:var(--f-panel) !important;border:1px solid var(--f-line-soft) !important;box-shadow:none !important;
}
html body .feed-page .social-mode-link{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:38px !important;padding:0 22px !important;border-radius:10px !important;
  color:var(--f-dim) !important;font-size:14px !important;font-weight:700 !important;
  text-decoration:none !important;background:none !important;border:0 !important;
}
html body .feed-page .social-mode-link.active{background:var(--f-grad) !important;color:#04070f !important;font-weight:800 !important}

/* заголовок ленты + кнопка «плюс» */
html body .feed-head{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:12px !important;margin:0 !important;padding:14px 16px !important;
  border-radius:16px !important;
  background:var(--f-panel) !important;border:1px solid var(--f-line-soft) !important;
}
html body .feed-head h1,
html body .feed-page h1{
  margin:0 !important;font-size:22px !important;font-weight:800 !important;
  letter-spacing:-.02em !important;color:var(--f-text) !important;
  background:none !important;-webkit-text-fill-color:var(--f-text) !important;text-shadow:none !important;
}
html body #feed-open-composer{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  height:42px !important;padding:0 18px !important;
  border-radius:12px !important;border:0 !important;cursor:pointer !important;
  background:var(--f-grad) !important;color:#04070f !important;
  font-size:14px !important;font-weight:800 !important;font-family:inherit !important;
  box-shadow:none !important;
}
html body #feed-open-composer .plus{font-size:19px !important;line-height:1 !important;margin-top:-2px !important}

/* карточки постов */
html body .feed-list{display:flex !important;flex-direction:column !important;gap:12px !important;margin:0 !important;padding:0 !important}
html body .feed-item,
html body .feed-post{
  margin:0 !important;padding:14px !important;
  border-radius:16px !important;
  background:var(--f-panel) !important;
  border:1px solid var(--f-line-soft) !important;
  box-shadow:none !important;
}
html body .feed-item-head,
html body .feed-post-head{
  display:flex !important;align-items:center !important;gap:11px !important;margin:0 0 10px !important;
}
html body .feed-item-avatar,
html body .feed-post-avatar,
html body .feed-list img.feed-avatar{
  width:42px !important;height:42px !important;border-radius:13px !important;object-fit:cover !important;flex:none !important;
}
html body .feed-item-body,
html body .feed-post-body,
html body .feed-text{
  margin:0 !important;padding:12px 14px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--f-line-soft) !important;
  font-size:14.5px !important;line-height:1.5 !important;color:#d5e2f3 !important;
}
html body .feed-actions,
html body .feed-item-actions{
  display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;
  margin:10px 0 0 !important;padding:0 !important;
}
html body .feed-actions button,
html body .feed-item-actions button,
html body .feed-actions a{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  height:34px !important;padding:0 13px !important;
  border-radius:10px !important;cursor:pointer !important;
  background:var(--f-surface) !important;
  border:1px solid var(--f-line) !important;
  color:var(--f-text) !important;
  font-size:12.5px !important;font-weight:700 !important;font-family:inherit !important;
  box-shadow:none !important;text-decoration:none !important;
}
html body .feed-actions button:hover,
html body .feed-item-actions button:hover{background:rgba(255,255,255,.1) !important}
html body .feed-actions .danger,
html body .feed-item-actions .danger,
html body .feed-actions button[data-action="delete"]{
  background:rgba(255,91,107,.1) !important;border-color:rgba(255,91,107,.28) !important;color:#ff8095 !important;
}
html body .feed-loading,
html body .feed-empty{
  padding:36px 20px !important;text-align:center !important;
  border-radius:16px !important;
  background:var(--f-panel) !important;border:1px dashed var(--f-line) !important;
  color:var(--f-dim) !important;font-size:14px !important;
}

/* ---------- окно «Новый пост» ---------- */
html body #feed-composer-modal{
  position:fixed !important;inset:0 !important;z-index:1300 !important;
  display:none !important;align-items:center !important;justify-content:center !important;
  padding:70px 16px 90px !important;
}
html body #feed-composer-modal.show{display:flex !important}
html body #feed-composer-modal .fcm-backdrop{
  position:absolute !important;inset:0 !important;
  background:rgba(2,4,10,.8) !important;
  backdrop-filter:blur(8px) !important;
}
html body #feed-composer-modal .fcm-dialog{
  position:relative !important;z-index:2 !important;
  width:100% !important;max-width:560px !important;max-height:100% !important;
  display:flex !important;flex-direction:column !important;
  border-radius:20px !important;overflow:hidden !important;
  background:linear-gradient(180deg,rgba(16,22,38,.98),rgba(8,11,20,.99)) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:0 34px 80px rgba(0,0,0,.6) !important;
}
html body #feed-composer-modal .fcm-head{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:12px !important;flex:none !important;
  padding:13px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
html body #feed-composer-modal .fcm-cancel{
  background:none !important;border:0 !important;padding:0 !important;cursor:pointer !important;
  color:var(--f-dim,#93a5be) !important;font-size:14.5px !important;font-weight:600 !important;font-family:inherit !important;
}
html body #feed-composer-modal .fcm-cancel:hover{color:#eaf1ff !important}
html body #feed-composer-modal .fcm-title{
  font-size:15.5px !important;font-weight:800 !important;color:#eaf1ff !important;
}
html body #feed-composer-modal .fcm-body{
  flex:1 !important;min-height:0 !important;overflow-y:auto !important;padding:16px !important;
}

/* форма внутри окна */
html body #feed-composer-modal .feed-composer{
  display:flex !important;align-items:flex-start !important;gap:12px !important;
  margin:0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;
}
html body #feed-composer-modal .feed-composer-avatar{
  width:42px !important;height:42px !important;border-radius:13px !important;
  object-fit:cover !important;flex:none !important;
}
html body #feed-composer-modal .feed-composer-main{
  flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:12px !important;
}
html body #feed-composer-modal #feed-body{
  width:100% !important;min-height:132px !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#eaf1ff !important;
  font-size:15px !important;line-height:1.5 !important;font-family:inherit !important;
  outline:none !important;resize:vertical !important;
}
html body #feed-composer-modal #feed-body::placeholder{color:rgba(147,165,190,.65) !important}
html body #feed-composer-modal .feed-composer-actions{
  display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important;
  margin:0 !important;padding:0 !important;border:0 !important;
}
html body #feed-composer-modal .feed-attach-btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:38px !important;padding:0 14px !important;
  border-radius:11px !important;cursor:pointer !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#eaf1ff !important;font-size:13px !important;font-weight:700 !important;
}
html body #feed-composer-modal .feed-attach-btn input{display:none !important}
html body #feed-composer-modal #feed-counter{
  font-size:12.5px !important;color:var(--f-dim,#93a5be) !important;
}
html body #feed-composer-modal #feed-submit{
  margin-left:auto !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:40px !important;padding:0 22px !important;
  border-radius:11px !important;border:0 !important;cursor:pointer !important;
  background:var(--f-grad,linear-gradient(135deg,#48dcf7,#9a63ff)) !important;
  color:#04070f !important;font-size:14px !important;font-weight:800 !important;font-family:inherit !important;
  box-shadow:none !important;
}
html body #feed-composer-modal .feed-image-pill{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:8px 10px !important;border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#d5e2f3 !important;font-size:13px !important;
}
html body #feed-composer-modal .feed-image-pill img{
  width:38px !important;height:38px !important;border-radius:9px !important;object-fit:cover !important;
}
html body #feed-composer-modal .feed-image-pill button{
  margin-left:auto !important;width:26px !important;height:26px !important;
  border-radius:8px !important;cursor:pointer !important;
  background:rgba(255,91,107,.12) !important;
  border:1px solid rgba(255,91,107,.3) !important;
  color:#ff8095 !important;
}
/* композер на самой странице больше не нужен */
html body .feed-page > .container > section:has(> #feed-form){display:none !important}
html body .feed-page #feed-form:not(#feed-composer-modal #feed-form){display:none !important}

@media (max-width:640px){
  html body .feed-page{padding:14px 0 100px !important}
  html body .feed-page > .container{padding:0 12px !important;gap:12px !important}
  html body .feed-head{padding:12px 13px !important}
  html body .feed-page h1{font-size:19px !important}
  html body #feed-open-composer{height:40px !important;padding:0 14px !important;font-size:13.5px !important}
  html body #feed-composer-modal{padding:0 !important;align-items:stretch !important}
  html body #feed-composer-modal .fcm-dialog{
    max-width:none !important;height:100dvh !important;max-height:100dvh !important;
    border-radius:0 !important;border:0 !important;
  }
  html body #feed-composer-modal #feed-body{min-height:200px !important}
  html body #feed-composer-modal #feed-submit{width:100% !important;margin:0 !important;height:46px !important}
  html body #feed-composer-modal .feed-composer-actions{gap:8px !important}
}

/* скрытые элементы формы должны оставаться скрытыми */
html body #feed-composer-modal [hidden]{display:none !important}
html body #feed-open-composer{white-space:nowrap !important;flex:none !important}
html body .feed-board-head{
  display:flex !important;align-items:center !important;
  gap:12px !important;flex-wrap:wrap !important;
}
html body .feed-board-head > div:first-child{flex:1 1 auto !important;min-width:0 !important}

/* ---------- плавающая кнопка «Новый пост» ---------- */
html body #feed-open-composer.feed-fab{
  position:fixed !important;
  right:24px !important;
  bottom:104px !important;
  left:auto !important;top:auto !important;
  z-index:1000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  height:52px !important;
  padding:0 22px 0 18px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:16px !important;
  cursor:pointer !important;
  background:linear-gradient(135deg,#48dcf7 0%,#6f7bff 60%,#9a63ff 100%) !important;
  color:#04070f !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  font-family:inherit !important;
  white-space:nowrap !important;
  box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) !important;
  transition:transform .16s ease,box-shadow .16s ease !important;
}
html body #feed-open-composer.feed-fab:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 20px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12) !important;
}
html body #feed-open-composer.feed-fab:active{transform:translateY(0) !important}
html body #feed-open-composer .plus{
  font-size:21px !important;line-height:1 !important;font-weight:800 !important;margin-top:-2px !important;
}
html body #feed-open-composer .label{line-height:1 !important}

/* когда открыто окно — кнопку прячем */
html body #feed-composer-modal.show ~ #feed-open-composer,
html body.nav-open #feed-open-composer.feed-fab{display:none !important}

/* на телефоне — компактный кружок над нижней панелью */
@media (max-width:760px){
  html body #feed-open-composer.feed-fab{
    right:16px !important;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width:56px !important;height:56px !important;
    padding:0 !important;
    border-radius:18px !important;
    gap:0 !important;
  }
  html body #feed-open-composer .label{display:none !important}
  html body #feed-open-composer .plus{font-size:27px !important;margin-top:-2px !important}
}

/* ---------- переключатель Лента/Клипы: одинаково на обеих страницах ---------- */
html body .feed-page > .container,
html body .clips-page > .container{position:relative !important}
html body .feed-page .social-mode-switch,
html body .clips-page .social-mode-switch{
  position:relative !important;
  align-self:center !important;
  margin:0 auto !important;
  display:inline-flex !important;
  gap:4px !important;
  padding:4px !important;
  border-radius:14px !important;
  background:rgba(9,13,23,.88) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
html body .feed-page .social-mode-link,
html body .clips-page .social-mode-link{
  height:38px !important;
  min-width:120px !important;
  padding:0 22px !important;
  border-radius:10px !important;
  font-size:14px !important;font-weight:700 !important;
}
/* стрелка «назад» не сдвигает переключатель */
html body .feed-page .mobile-social-back,
html body .clips-page .mobile-social-back{
  position:absolute !important;
  left:16px !important;top:8px !important;
  z-index:2 !important;
  width:34px !important;height:34px !important;
  display:none !important;
  align-items:center !important;justify-content:center !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#93a5be !important;text-decoration:none !important;
  font-size:18px !important;line-height:1 !important;
}
@media (max-width:760px){
  html body .feed-page .mobile-social-back,
  html body .clips-page .mobile-social-back{display:flex !important}
  html body .feed-page .social-mode-link,
  html body .clips-page .social-mode-link{min-width:104px !important;height:36px !important;padding:0 16px !important}
}

/* переключатель строго по центру независимо от родителя */
html body .feed-page .social-mode-switch,
html body .clips-page .social-mode-switch{
  display:flex !important;
  width:fit-content !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ============ автор и текст поста: ровно и читаемо ============ */
html body .feed-post-head{align-items:center !important;gap:11px !important}
html body .feed-author{
  min-width:0 !important;flex:1 1 auto !important;
  display:flex !important;flex-direction:column !important;gap:3px !important;
}
html body .feed-author-name{
  display:flex !important;align-items:center !important;gap:6px !important;
  min-width:0 !important;max-width:100% !important;
  font-size:14.5px !important;font-weight:700 !important;line-height:1.2 !important;
  color:var(--f-text) !important;
}
html body .feed-author-name .nickname-text{
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
  max-width:100% !important;
}
html body .feed-author > span{
  font-size:12px !important;line-height:1.2 !important;color:var(--f-dim) !important;white-space:nowrap !important;
}
html body .feed-post-stat{
  flex:none !important;margin-left:auto !important;
  display:inline-flex !important;align-items:center !important;gap:5px !important;
  height:28px !important;padding:0 10px !important;
  border-radius:999px !important;
  background:var(--f-surface) !important;
  border:1px solid var(--f-line-soft) !important;
  color:var(--f-dim) !important;font-size:12px !important;font-weight:700 !important;
}
html body .feed-post-text{
  margin:0 !important;padding:0 !important;border:0 !important;background:none !important;
  font-size:14.5px !important;line-height:1.55 !important;color:#dbe6f6 !important;
  overflow-wrap:anywhere !important;word-break:break-word !important;
}
html body .feed-post-text + .feed-post-image{margin-top:10px !important}
html body .feed-post-image{
  display:block !important;width:100% !important;margin:10px 0 0 !important;padding:0 !important;
  border:1px solid var(--f-line-soft) !important;border-radius:14px !important;
  overflow:hidden !important;background:#05070f !important;cursor:zoom-in !important;
}
html body .feed-post-image img{display:block !important;width:100% !important;height:auto !important;max-height:70vh !important;object-fit:cover !important}
@media (max-width:760px){
  html body .feed-author-name{font-size:14px !important}
  html body .feed-post-text{font-size:14px !important}
  html body .feed-post-stat{height:26px !important;padding:0 9px !important;font-size:11.5px !important}
}

/* переключатель Лента/Клипы: всегда по центру, стрелка «назад» его не двигает */
html body .feed-page .feed-shell{position:relative !important}
html body .feed-page .social-mode-switch{
  position:relative !important;
  left:auto !important;right:auto !important;transform:none !important;
  margin-left:auto !important;margin-right:auto !important;
  width:fit-content !important;
}
@media (max-width:760px){
  html body .feed-page .social-mode-switch{
    margin-top:2px !important;margin-bottom:10px !important;
  }
  html body .feed-page .mobile-social-back{top:4px !important;left:10px !important}
}