/* ================================================
   Sngine PixPik — Custom CSS (cleaned)
   Части 1–6. Вставлять по порядку.
   ================================================ */

/* ─── STYLE #0: БАЗОВОЕ ─── */
a, .data-content .name a, .text-link, .post-stats-alt, .post-stats .fa,
.side-nav > li.active > a, .navbar-container .data-content .name a { color: #1c1c1c; }
.header-icon, .header-icon * { color: #2C2D2E !important;  }
/* ОТКЛЮЧЕНО
body.night-mode .header-icon,
body.night-mode .header-icon * {
  color: #E1E3E6 !important;
}
*/
.action-icon, .action-icon * { color: #575757 !important; fill: #575757 !important; }
body.night-mode .action-icon, body.night-mode .action-icon * { color: #fafafa !important; fill: #fafafa !important; }

.ftabs-wrapper { border-radius: 25px !important; }

/* Модальные окна */
.modal-dialog { margin: 1.75rem auto !important; max-width: 500px !important; }
.modal-content { border-radius: 16px !important; overflow: hidden; }
.modal-body { padding: 24px !important; }
.modal-header { padding: 20px 24px !important; }
.modal-footer { padding: 16px 24px !important; justify-content: flex-end !important; }
.modal-body .form-control { padding: 14px 16px !important; border-radius: 10px !important; font-size: 18px !important; }
.modal-footer .btn { padding: 12px 28px !important; border-radius: 10px !important; font-size: 15px !important; }

/* Виджет wg */
.wg-stat-item {
  background: #f8f9fa; border-radius: 14px; padding: 12px 6px 10px;
  text-align: center; text-decoration: none !important; transition: all 0.2s ease;
  border: 1px solid transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 80px;
  cursor: pointer; overflow: hidden;
}
.wg-stat-label {
  font-size: 10px; color: #999; margin-top: 2px; font-weight: 500;
  display: block !important; word-wrap: break-word; overflow-wrap: break-word;
  hyphens: auto; max-width: 100%; line-height: 1.1; text-align: center;
}
.wg-btn {
  text-decoration: none !important; border-radius: 12px; padding: 10px 8px;
  font-size: 13px; font-weight: 600; display: flex; align-items: center;
  justify-content: center; gap: 4px; transition: all 0.2s ease;
  text-align: center; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
@media (max-width: 480px) {
  .wg-stat-label { font-size: 9px; }
  .wg-btn { font-size: 12px; padding: 8px 6px; }
  .wg-balance-card { padding: 12px 10px; }
  .wg-balance-amount { font-size: 18px; }
}
@media (max-width: 360px) {
  .wg-stat-label { font-size: 8px; }
  .wg-btn { font-size: 11px; padding: 6px 4px; }
}

/* Лайтбокс как в ВК — только ПК */
@media (min-width: 768px) {
  .lightbox {
    display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 40px 20px !important;
  }
  .lightbox-container {
    display: flex !important; flex-direction: row !important;
    max-width: 950px !important; width: auto !important;
    max-height: 85vh !important; margin: 0 auto !important;
    border-radius: 12px !important; overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  }
  .lightbox-preview {
    flex: 1 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    background: #000 !important; max-height: 85vh !important;
  }
  .lightbox-preview img {
    max-width: 100% !important; max-height: 85vh !important;
    object-fit: contain !important;
  }
  .lightbox-data {
    width: 340px !important; min-width: 340px !important;
    background: #fff !important; border-left: 1px solid #e0e0e0 !important;
    overflow-y: auto !important; max-height: 85vh !important;
  }
}

/* Fancybox 3 — рабочий */
.fancybox-container { z-index: 99999 !important; }
.fancybox-bg { background: rgba(0, 0, 0, 0.92) !important; }
.fancybox-toolbar {
  position: fixed !important; top: 12px !important; right: 14px !important;
  display: flex !important; gap: 6px !important; background: transparent !important;
}
.fancybox-button {
  background: rgba(0, 0, 0, 0.45) !important; border-radius: 8px !important;
  width: 38px !important; height: 38px !important; color: #e1e3e6 !important;
  padding: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.fancybox-button:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
.fancybox-button svg { fill: currentColor !important; }
.fancybox-infobar {
  position: fixed !important; top: 14px !important; left: 50% !important;
  transform: translateX(-50%) !important; margin: 0 !important;
  font-size: 13px !important; font-weight: 500 !important; color: #fff !important;
  background: rgba(0, 0, 0, 0.45) !important; padding: 5px 12px !important;
  border-radius: 20px !important; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); white-space: nowrap !important;
  z-index: 99999 !important; transition: opacity 0.25s ease !important;
}
@media (min-width: 769px) {
  .fancybox-infobar { opacity: 0 !important; }
  .fancybox-container:hover .fancybox-infobar { opacity: 1 !important; }
}
@media (max-width: 768px) {
  .fancybox-infobar { opacity: 0.9 !important; font-size: 12px !important; padding: 4px 10px !important; }
}
.fancybox-navigation .fancybox-arrow {
  position: fixed !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important; height: 64px !important;
  border-radius: 6px !important; background: rgba(0, 0, 0, 0.35) !important;
  color: #e1e3e6 !important; opacity: 1 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.fancybox-navigation .fancybox-arrow--left { left: 16px !important; }
.fancybox-navigation .fancybox-arrow--right { right: 16px !important; }
.fancybox-navigation .fancybox-arrow:hover {
  background: rgba(255, 255, 255, 0.25) !important; color: #fff !important;
}
.fancybox-navigation .fancybox-arrow::after { background-size: 26px !important; }
@media (max-width: 768px) {
  .fancybox-navigation { display: none !important; }
  .fancybox-toolbar { top: 8px !important; right: 10px !important; gap: 4px !important; }
  .fancybox-button { width: 34px !important; height: 34px !important; padding: 7px !important; }
}
.fancybox-thumbs { background: rgba(0, 0, 0, 0.85) !important; }
.fancybox-thumbs__list a::before {
  border: 2px solid #e74c3c !important; border-radius: 6px !important;
}
.fancybox-thumbs__list a.fancybox-thumbs-active::before {
  border-color: #e74c3c !important;
}
.fancybox-container, .fancybox-slide,
.fancybox-content, .fancybox-content img {
  touch-action: none !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}

/* Стрелки карусели VK */
@media (min-width: 992px) {
  .vk-carousel-btn, .vk-carousel-prev, .vk-carousel-next {
    opacity: 0 !important; visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }
  .vk-photo-container:hover .vk-carousel-btn,
  .vk-photo-container:hover .vk-carousel-prev,
  .vk-photo-container:hover .vk-carousel-next,
  .post:hover .vk-carousel-btn,
  .post:hover .vk-carousel-prev,
  .post:hover .vk-carousel-next {
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Кнопки действий поста */
.post-actions .action-btn .action-icon,
.post-actions .action-btn i,
.post-actions .action-btn .action-icon * {
  color: #a1a1a1 !important; fill: #1c1e21 !important; font-size: 20px !important;
}

/* Виджет блогов */
.blogs-widget .post-media-meta .title {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
  line-height: 1.3; height: calc(1.3em * 3);
}
.blogs-widget .post-media-meta .text {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
  line-height: 1.4; height: calc(1.4em * 2);
}
.blogs-widget .post-media-meta .info {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.no-data-home { display: none !important; }
.footer-bottom-bar-links > .footer-fab-link > a.dropdown { top: 6px !important; }

/* Мобильное меню */
@media (max-width: 767px) {
  .sg-offcanvas-sidebar {
    width: 80% !important; max-width: 360px !important;
    min-width: 280px !important; height: 100vh !important;
    overflow-y: auto !important; overscroll-behavior: contain !important;
    background: #fff !important; position: fixed !important;
    top: 0 !important; left: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important; z-index: 9999 !important;
    border-radius: 0 25px 25px 0 !important; pointer-events: auto !important;
  }
  .sg-offcanvas.open .sg-offcanvas-sidebar,
  .sg-offcanvas.active .sg-offcanvas-sidebar,
  .sg-offcanvas.show .sg-offcanvas-sidebar,
  .sg-offcanvas.sg-offcanvas-active .sg-offcanvas-sidebar {
    transform: translateX(0) !important;
  }
  .sg-offcanvas-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; z-index: 9998 !important;
    background: rgba(0, 0, 0, 0.3) !important; opacity: 0 !important;
    pointer-events: none !important; transition: opacity 0.3s ease !important;
  }
  .sg-offcanvas.open .sg-offcanvas-overlay,
  .sg-offcanvas.active .sg-offcanvas-overlay,
  .sg-offcanvas.show .sg-offcanvas-overlay,
  .sg-offcanvas.sg-offcanvas-active .sg-offcanvas-overlay {
    opacity: 1 !important; pointer-events: auto !important;
  }
  body.sg-offcanvas-active {
    overflow: visible !important; height: auto !important;
    position: static !important; width: auto !important;
    top: auto !important; left: auto !important; bottom: auto !important;
    right: auto !important; padding: 0 !important; margin: 0 !important;
  }
  .sg-offcanvas-sidebar { will-change: transform; }
}

/* Reels */
.reels-wrapper {
  position: fixed !important; top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important; width: 100vw !important;
  height: 100vh !important; height: 100dvh !important;
  z-index: 999999 !important;
}
.reels-wrapper video,
.reels-wrapper .plyr video,
.reels-wrapper .reel-video-wrapper video {
  width: auto !important; max-width: 100% !important;
  height: 100% !important; max-height: 100vh !important;
  object-fit: contain !important; margin: 0 auto !important;
}
.reels-wrapper .reel-container,
.reels-wrapper .reel-video-wrapper,
.reels-wrapper .plyr {
  height: 100% !important; max-height: 100vh !important;
  aspect-ratio: 9 / 16 !important; margin: 0 auto !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; background: #000 !important;
}
.reels-wrapper .reel-container {
  flex-direction: row !important; width: 100vw !important;
  height: 100vh !important; position: relative !important;
  overflow: hidden !important;
}
.reels-wrapper .reel-video-wrapper,
.reels-wrapper .reel-video-container {
  position: relative !important; width: auto !important;
  flex-shrink: 0 !important;
}
.reels-wrapper .plyr__video-wrapper {
  height: 100% !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  position: relative !important;
}
.reels-wrapper .plyr {
  width: 100% !important; height: 100% !important; position: relative !important;
}
.reels-wrapper .plyr .plyr__control--overlaid,
.reel-video-wrapper .plyr .plyr__control--overlaid,
.reels-wrapper button[data-plyr="play"].plyr__control--overlaid {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important; margin: 0 !important;
  z-index: 40 !important;
}
.reels-wrapper .video-controlls {
  position: absolute !important; right: 12px !important; left: auto !important;
  bottom: 80px !important; transform: none !important; z-index: 50 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 12px !important;
  width: 60px !important; pointer-events: auto !important;
}
@media (min-width: 992px) {
  .reels-wrapper .video-controlls {
    right: calc(50% - (100vh * 9 / 16 / 2) + 16px) !important;
  }
}
.reel-container.post {
  border: none !important; box-shadow: none !important;
  outline: none !important; background: transparent !important; padding: 0 !important;
}
.reels-custom-header, .reels-header {
  position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100% !important; z-index: 1000000 !important;
  pointer-events: none !important;
}
.reels-custom-header *, .reels-header * { pointer-events: auto !important; }
.reels-wrapper .reel-container .js_reels-create-modal-btn,
.reels-wrapper .reel-container button[onclick*="site_path"] {
  display: none !important; visibility: hidden !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Reels: стрелки на ПК */
@media (min-width: 992px) {
  .reels-wrapper .reel-prev-btn, .reels-wrapper .reel-next-btn,
  .reels-wrapper .js_reel-prev-btn, .reels-wrapper .js_reel-next-btn {
    position: fixed !important; right: 40px !important; left: auto !important;
    z-index: 99999 !important; margin: 0 !important; padding: 0 !important;
    width: 50px !important; height: 50px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; cursor: pointer !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(0, 0, 0, 0.4) !important; border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.2s ease !important;
  }
  .reels-wrapper .reel-prev-btn, .reels-wrapper .js_reel-prev-btn {
    top: calc(50% - 55px) !important; bottom: auto !important;
  }
  .reels-wrapper .reel-next-btn, .reels-wrapper .js_reel-next-btn {
    top: calc(50% + 15px) !important; bottom: auto !important;
  }
  .reels-wrapper .reel-prev-btn:hover, .reels-wrapper .reel-next-btn:hover {
    color: #fff !important; background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.1) !important;
  }
}
@media screen and (max-width: 991px) {
  .reels-wrapper .reel-prev-btn, .reels-wrapper .reel-next-btn,
  .reels-wrapper .js_reel-prev-btn, .reels-wrapper .js_reel-next-btn,
  .reel-container .reel-prev-btn, .reel-container .reel-next-btn,
  .reel-prev-btn, .reel-next-btn, .js_reel-prev-btn, .js_reel-next-btn {
    display: none !important; visibility: hidden !important;
    opacity: 0 !important; width: 0 !important; height: 0 !important;
    pointer-events: none !important; position: absolute !important;
    left: -9999px !important;
  }
}

/* Reels: текст */
.reels-wrapper .reel-footer, .reels-wrapper .reel-footer *,
.reels-wrapper .reel-details, .reels-wrapper .reel-details *,
.reels-wrapper .reel-caption, .reels-wrapper .reel-caption *,
.reels-wrapper .post-text, .reels-wrapper .post-text * {
  color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.reels-wrapper .reel-footer a, .reels-wrapper .reel-details a,
.reels-wrapper .post-text a {
  color: #ffffff !important; font-weight: 600;
  text-decoration: none !important;
}
.reels-wrapper .reel-footer a:hover, .reels-wrapper .reel-details a:hover,
.reels-wrapper .post-text a:hover {
  text-decoration: underline !important; opacity: 0.85;
}

/* Reels: комментарии */
.reels-wrapper .reel-comments-wrapper {
  position: absolute !important; right: 0 !important; top: 0 !important;
  height: 100vh !important; width: 360px !important; max-width: 90vw !important;
  z-index: 999999999 !important;
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  pointer-events: auto !important;
}
.reels-wrapper .reel-container.comments-shown .reel-comments-wrapper {
  transform: translateX(0) !important;
}
.reel-comments-wrapper .reel-comments-header {
  position: relative !important; display: flex !important;
  flex-direction: row !important; align-items: center !important;
  justify-content: space-between !important; padding: 12px 16px !important;
  width: 100% !important; box-sizing: border-box !important;
  background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important;
  z-index: 2147483640 !important;
}
.reel-comments-wrapper .reel-comments-title {
  order: 1 !important; margin: 0 !important;
  font-size: 15px !important; font-weight: 700 !important; color: #111 !important;
}
.reel-comments-wrapper .reel-comments-close,
.reel-comments-close {
  order: 2 !important; position: relative !important;
  margin-left: auto !important; z-index: 2147483647 !important;
  cursor: pointer !important; pointer-events: auto !important;
  user-select: none !important; -webkit-user-select: none !important;
}
.reel-comments-wrapper .lightbox-post > div > .post,
.reel-comments-wrapper .lightbox-post .post-header,
.reel-comments-wrapper .lightbox-post .post-meta,
.reel-comments-wrapper .lightbox-post .post-title,
.reel-comments-wrapper .lightbox-post .post-actions,
.reel-comments-wrapper .lightbox-post .post-stats,
.reel-comments-wrapper .lightbox-post .post-text,
.reel-comments-wrapper .lightbox-post [class*="post-header"],
.reel-comments-wrapper .lightbox-post .close,
.reel-comments-wrapper .lightbox-post button.close,
.reel-comments-wrapper .lightbox-post [data-dismiss] { display: none !important; }
.reel-comments-wrapper .post-body {
  height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
}
.reel-comments-wrapper .js_reels-create-modal-btn,
.reel-comments-header .js_reels-create-modal-btn { display: none !important; }
.reel-comments-wrapper .comment_form {
  display: flex !important; align-items: center !important;
  gap: 8px !important; width: 100% !important;
}
.reel-comments-wrapper .comment_form textarea {
  white-space: pre-wrap !important; word-break: normal !important;
}
.reel-comments-wrapper:not([style*="display: none"]) ~ * .reels-create-btn,
.reel-comments-wrapper:not([style*="display: none"]) ~ .reels-create-btn,
.reel-container:has(.reel-comments-wrapper:not([style*="display: none"])) .reels-create-btn {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}

/* Zuck.js плеер */
.zuck-story-reply-box {
  position: absolute; bottom: 25px; left: 50%;
  transform: translateX(-50%); width: 90%; max-width: 420px;
  z-index: 99999; display: flex; flex-direction: column;
  align-items: center; gap: 10px; pointer-events: auto;
}
.zuck-story-emojis {
  display: flex; justify-content: space-around; align-items: center;
  width: 100%; background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 7px 14px; border-radius: 30px;
}
.zuck-story-emojis span {
  font-size: 24px; cursor: pointer; transition: transform 0.15s ease;
  user-select: none;
}
.zuck-story-emojis span:hover { transform: scale(1.35); }
.zuck-story-emojis span:active { transform: scale(0.9); }
.zuck-story-input-wrap {
  display: flex; align-items: center; width: 100%; position: relative;
}
.zuck-story-input {
  width: 100%; background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 25px;
  padding: 10px 48px 10px 18px; color: #fff !important;
  font-size: 14px; outline: none;
}
.zuck-story-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.zuck-story-send-btn {
  position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%); width: 32px; height: 32px;
  border-radius: 50%; border: none;
  background: linear-gradient(145deg, #e74c3c, #c0392b);
  color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 13px;
}

/* Reels Actions (мобильные) */
@media (max-width: 768px) {
  .video-controlls .reel-actions, .reel-actions {
    position: relative !important; right: 12px !important;
    left: auto !important; transform: none !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important;
  }
  @media (display-mode: standalone), (display-mode: fullscreen) {
    .video-controlls .reel-actions, .reel-actions {
      transform: translateX(-18px) !important;
    }
  }
  .reel-actions .post-avatar {
    position: relative !important; display: flex !important;
    justify-content: center !important; align-items: center !important;
    margin-bottom: 20px !important; width: 48px !important; height: 48px !important;
  }
  .reel-actions .post-avatar-picture {
    position: relative !important; width: 48px !important;
    height: 48px !important; margin: 0 !important;
    border-radius: 50% !important;
  }
  .reel-actions .post-avatar .follow-btn-small {
    position: absolute !important; bottom: -8px !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important; margin: 0 !important;
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; max-width: 22px !important;
    border-radius: 50% !important; background: #fe2c55 !important;
    border: 2px solid #ffffff !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important; font-size: 0 !important; z-index: 10 !important;
  }
  .reel-actions .post-avatar .follow-btn-small i {
    font-size: 11px !important; line-height: 1 !important;
    color: #ffffff !important; margin: 0 !important; display: block !important;
  }
  .reel-actions .reel-action-btn {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important;
    margin-bottom: 14px !important;
  }
}

/* Post Body Flex */
.post-body {
  display: flex !important; flex-direction: column !important;
  height: 100% !important;
}
.post-body .post-header .post-author {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: middle !important;
}

.post-body .post-header .post-title {
  display: inline !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: middle !important;
}

/* Story reactions */
.story-emojis-list {
  left: auto !important; right: 25px !important; top: 50% !important;
  bottom: auto !important; transform: translateY(-50%) !important;
  z-index: 2147483647 !important; display: flex !important;
  visibility: visible !important; opacity: 1 !important;
}
@media (max-width: 768px) {
  .story-emojis-list {
    left: auto !important; right: 10px !important; top: 50% !important;
    bottom: auto !important; transform: translateY(-50%) !important;
    padding: 10px 6px 8px 6px !important; gap: 12px !important;
  }
  .story-emojis-list .js_story_react { font-size: 24px !important; }
}
.story-prev, .story-next, .story-btn-prev, .story-btn-next,
.stories-modal .prev, .stories-modal .next,
[class*="story-arrow"], [class*="story-nav"] {
  display: none !important; visibility: hidden !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Чат */
.card-header.with-icon,
*:not(style):not(script):not(html):not(head):not(body):not(meta):not(title):not(link).card-header.with-icon {
  background: #ffffff !important; background-color: #ffffff !important;
  background-image: none !important; color: #1c1e21 !important;
  border-bottom: 1px solid #eef2f5 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 18px !important; min-height: 56px !important;
}
.card-header.with-icon .row .col-xl-8,
.card-header.with-icon .row .col-xl-8 *,
.card-header.with-icon .svg-container.main-icon svg path,
.card-header.with-icon .svg-container.main-icon svg g path {
  color: #1c1e21 !important; fill: #e74c3c !important;
}
.card-header.with-icon .row .col-xl-8 { color: #1c1e21 !important; font-weight: 600 !important; }
.card-header.with-icon .btn-light.js_chat-new,
.card-header.with-icon .js_chat-new {
  background: #f0f2f5 !important; border: none !important;
  border-radius: 50% !important; width: 36px !important; height: 36px !important;
  padding: 0 !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  transition: background 0.2s ease !important;
}
.card-header.with-icon .btn-light.js_chat-new:hover,
.card-header.with-icon .js_chat-new:hover { background: #e4e6eb !important; }
.card-header.with-icon .btn-light.js_chat-new svg path,
.card-header.with-icon .js_chat-new svg path { fill: #e74c3c !important; }
.panel-messages .card-header .btn.btn-light svg path {
  fill: #65676b !important; transition: fill 0.15s ease !important;
}
.panel-messages .card-header .btn.btn-light:hover svg path { fill: #e74c3c !important; }

.panel-messages .card-header img,
.panel-messages .card-header .avatar img,
.panel-messages .card-header .rounded-circle,
.panel-messages .card-header .js_chat-user-avatar,
.panel-messages .card-header [class*="avatar"] img,
.panel-messages .card-header .col-auto img {
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; max-width: 34px !important;
  min-height: 34px !important; max-height: 34px !important;
  border-radius: 50% !important; border: 2px solid #f0f2f5 !important;
  object-fit: cover !important;
}
.panel-messages .card-header .avatar,
.panel-messages .card-header [class*="avatar"] {
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; max-width: 34px !important;
  min-height: 34px !important; max-height: 34px !important;
  border-radius: 50% !important; overflow: hidden !important; flex: 0 0 34px !important;
}
.panel-messages .card-header .h5,
.panel-messages .card-header h5,
.panel-messages .card-header strong,
.panel-messages .card-header .js_chat-user-name,
.panel-messages .card-header .js_username {
  color: #1c1e21 !important; font-size: 15px !important;
  font-weight: 600 !important; margin: 0 !important; padding: 0 !important;
}
.panel-messages .card-header .text-success,
.panel-messages .card-header small,
.panel-messages .card-header .js_chat-online-status {
  color: #94a3b8 !important; font-size: 12px !important;
}
.panel-messages .card-header .btn-light,
.panel-messages .card-header .js_delete-conversation,
.panel-messages .card-header .js_chat-settings,
.panel-messages .card-header .dropdown-toggle {
  background: #f0f2f5 !important; border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important; color: #55585d !important;
  padding: 4px 8px !important; border-radius: 50% !important;
}
.panel-messages .card-header .btn-light:hover,
.panel-messages .card-header .js_delete-conversation:hover {
  background: #fee2e2 !important;
}
.panel-messages .card-header svg path,
.panel-messages .card-header .btn-light svg path { fill: #55585d !important; }

.panel-messages, .panel-messages.card, div.panel-messages {
  display: flex !important; flex-direction: column !important;
  background: #ffffff !important; border-radius: 0 0 14px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: none !important; overflow: hidden !important;
  height: auto !important; min-height: 300px !important;
  max-height: calc(100vh - 160px) !important; flex: 1 1 auto !important;
}
.panel-messages .card-body,
.panel-messages > .card-body,
div.panel-messages .card-body {
  background: #ffffff !important; background-color: #ffffff !important;
  background-image: none !important; padding: 12px 14px !important;
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-height: 0 !important;
  height: auto !important; overflow: hidden !important;
  position: relative !important;
}
.panel-messages .card-body::before,
.panel-messages .card-body::after {
  content: none !important; display: none !important;
  background: none !important; background-image: none !important;
}
.panel-messages .slimScrollDiv, .panel-messages > .slimScrollDiv {
  flex: 1 1 auto !important; height: auto !important;
  min-height: 150px !important; max-height: none !important;
  display: flex !important; flex-direction: column !important;
  width: 100% !important; overflow: hidden !important;
}
.panel-messages .chat-conversations,
.panel-messages > .slimScrollDiv > .chat-conversations {
  flex: 1 1 auto !important; height: auto !important;
  min-height: 150px !important; max-height: none !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  width: 100% !important; scroll-behavior: smooth !important;
  padding-bottom: 4px !important;
}
.panel-messages .slimScrollBar,
.panel-messages .slimScrollRail { display: none !important; }

.conversation {
  display: flex !important; align-items: flex-end !important;
  width: 100% !important; margin-bottom: 6px !important;
}
.conversation .conversation-user {
  flex: 0 0 32px !important; width: 32px !important;
  height: 32px !important; margin-right: 8px !important;
}
.conversation .conversation-user img {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important; object-fit: cover !important;
}
.conversation .conversation-body {
  max-width: 65% !important; width: auto !important;
  display: flex !important; flex-direction: column !important;
}
.conversation.right { justify-content: flex-end !important; }
.conversation.right .conversation-body {
  align-items: flex-end !important; margin-left: auto !important;
}
.conversation:not(.right) .conversation-body {
  align-items: flex-start !important; margin-right: auto !important;
}
.conversation .conversation-body .text {
  max-width: 100% !important; width: fit-content !important;
  font-size: 14px !important; line-height: 1.4 !important;
  padding: 8px 14px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  word-break: break-word !important;
}
.conversation.right .conversation-body .text,
.conversation.right .conversation-body .text.js_chat-color-me,
.conversation.right .text {
  background: linear-gradient(135deg, #eeffde 0%, #d4f0b4 100%) !important;
  color: #111111 !important; border-radius: 16px 16px 4px 16px !important;
  padding: 8px 14px !important; border: none !important;
}
.conversation:not(.right) .conversation-body .text,
.conversation:not(.right) .text {
  background: linear-gradient(135deg, #d4e7ff 0%, #b8d4f0 100%) !important;
  color: #111111 !important; border-radius: 16px 16px 16px 4px !important;
  padding: 8px 14px !important; border: none !important;
}
.conversation .conversation-body .time {
  font-size: 11px !important; color: rgba(0, 0, 0, 0.45) !important;
  margin-top: 2px !important;
}
.conversation.right .conversation-body .time { text-align: right !important; }
.conversation-body img:not(.conversation-user-avatar) {
  max-width: 250px !important; max-height: 280px !important;
  border-radius: 12px !important;
}

.conversation-body {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; width: 100% !important;
}
.message-content-wrapper {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; width: 100% !important;
}
.conversation-body .text {
  display: block !important; width: 100% !important; order: 1 !important;
}
.conversation-body .img-wrapper,
.conversation-body .js_lightbox-nodata img,
.conversation-body .chat-message-photo img {
  display: block !important; width: 100% !important;
  max-width: 100% !important; order: 2 !important;
  margin-top: 6px !important;
}
.conversation.right .conversation-body { align-items: flex-end !important; }
.conversation.right .message-content-wrapper { align-items: flex-end !important; }
.conversation.right .conversation-body .text { text-align: right !important; }
.conversation-body .js_lightbox-nodata {
  display: block !important; width: 100% !important;
}
.conversation-body .js_lightbox-nodata img {
  display: block !important; width: 100% !important; max-width: 100% !important;
}
.conversation-body .clearfix {
  display: block !important; width: 100% !important;
}

.message-deleted {
  font-style: italic; color: #999; padding: 4px 0; font-size: 13px;
}
.message-deleted i { margin-right: 5px; font-size: 12px; }

.conversation.right .conversation-body .text a,
.conversation.right .text a,
.conversation:not(.right) .conversation-body .text a,
.conversation:not(.right) .text a {
  color: #0055cc !important; text-decoration: underline !important;
  font-weight: 500 !important;
}
.conversation .conversation-body .text a:hover {
  color: #003399 !important; text-decoration: underline !important;
}
.conversation .conversation-body .text a:visited { color: #663399 !important; }

.panel-messages .chat-form {
  margin: 8px 0 0 0 !important; padding: 6px 12px 6px 14px !important;
  background: #ffffff !important; border-radius: 22px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  flex: 0 0 auto !important; display: flex !important;
  align-items: flex-end !important; gap: 8px !important;
}
.panel-messages .chat-form-message {
  flex: 1 1 auto !important; min-width: 0 !important;
}
.panel-messages .chat-form-message textarea {
  display: block !important; width: 100% !important;
  field-sizing: content !important; min-height: 24px !important;
  max-height: 140px !important; padding: 4px 0 !important;
  line-height: 20px !important; font-size: 15px !important;
  border: none !important; outline: none !important;
  background: transparent !important; resize: none !important;
  overflow-y: auto !important;
}
.panel-messages .x-form-tools {
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 0 !important; margin: 0 !important;
  list-style: none !important; flex: 0 0 auto !important;
}
.panel-messages .x-form-tools li {
  list-style: none !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important; flex: 0 0 auto !important;
  width: auto !important; height: auto !important;
}
.panel-messages .x-form-tools li:not(.x-form-tools-post) i {
  color: #707579 !important; font-size: 20px !important;
  line-height: 1 !important; display: inline-block !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
}
.panel-messages .x-form-tools-post i {
  color: #ffffff !important; background: #e74c3c !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; border-radius: 50% !important;
  font-size: 13px !important; transition: transform 0.15s ease !important;
}
.panel-messages .x-form-tools-post:hover i {
  transform: scale(1.06) !important; background: #c0392b !important;
}
.panel-messages .x-form-tools-colors,
.panel-messages .js_chat-colors-menu-toggle { display: none !important; }

@media (max-width: 767px) {
  .panel-messages {
    min-height: 200px !important; max-height: calc(100vh - 120px) !important;
  }
  .panel-messages .card-header img,
  .panel-messages .card-header .avatar img {
    width: 28px !important; height: 28px !important;
    min-width: 28px !important; max-width: 28px !important;
    min-height: 28px !important; max-height: 28px !important;
  }
  .panel-messages .card-header {
    padding: 6px 12px !important; min-height: 48px !important;
  }
  .card-header.with-icon {
    padding: 8px 12px !important; min-height: 48px !important;
  }
  .conversation .conversation-body { max-width: 85% !important; }
  .panel-messages .x-form-tools li:not(.x-form-tools-post) i {
    font-size: 18px !important;
  }
}
@media (max-width: 480px) {
  .panel-messages {
    min-height: 150px !important; max-height: calc(100vh - 100px) !important;
  }
  .panel-messages .card-header img,
  .panel-messages .card-header .avatar img {
    width: 24px !important; height: 24px !important;
    min-width: 24px !important; max-width: 24px !important;
    min-height: 24px !important; max-height: 24px !important;
  }
  .conversation .conversation-body .text {
    font-size: 13px !important; padding: 6px 12px !important;
  }
  .panel-messages .card-header .h5,
  .panel-messages .card-header strong { font-size: 13px !important; }
  .panel-messages .x-form-tools li:not(.x-form-tools-post) i {
    font-size: 16px !important;
  }
}

/* Запрет выделения в чате */
.chat-conversations .conversation,
.chat-conversations .conversation *,
.chat-conversations .conversation-body,
.chat-conversations .conversation-body .text,
.chat-conversations .text,
.message-context-menu, .message-context-menu * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.panel-messages .chat-form-message textarea,
.panel-messages .chat-form-message textarea * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.conversation a, .conversation a * {
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.conversation::selection, .conversation *::selection {
  background: transparent !important; color: inherit !important;
}
.conversation::-webkit-selection, .conversation *::-webkit-selection {
  background: transparent !important; color: inherit !important;
}
/* ─── STYLE #1: ONE-LINE POST FOOTER ─── */
.post-stats, .post .post-stats, li .post-stats { display: none !important; }
.post .post-actions .post-actions-stats,
.post-actions .post-actions-stats { display: contents !important; }
.post .post-actions .pas-item, .post-actions .pas-item {
  flex: 1 !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  gap: 6px !important; padding: 10px 4px !important;
  min-height: 40px !important; border-right: 1px solid #e4e6eb !important;
  color: #65676b !important; font-size: 13px !important;
  font-weight: 600 !important; white-space: nowrap !important;
}
.post-actions .pas-item:last-child { border-right: none !important; }
.post-actions svg.action-icon,
.post-actions .action-icon svg { width: 20px !important; height: 20px !important; }
.post-actions i.action-icon { font-size: 20px !important; line-height: 1 !important; }
.post-actions .pas-item i { font-size: 20px !important; color: #65676b !important; }
body.night-mode .post-actions .pas-item,
body.night-mode .post-actions .pas-item i { color: #9aa8b6 !important; }
@media (max-width: 575.98px) {
  .post-actions .pas-item { font-size: 12px !important; padding: 10px 2px !important; }
  .post-actions svg.action-icon,
  .post-actions .action-icon svg { width: 18px !important; height: 18px !important; }
  .post-actions i.action-icon,
  .post-actions .pas-item i { font-size: 18px !important; }
  .post-actions .post-actions-stats > .pas-item[data-url*="who_reviews"],
  .post .post-actions .pas-item[data-url*="who_reviews"],
  .post-actions .pas-item[data-url*="reviews"],
  .post-actions .pas-item.pointer[data-url*="who_reviews"],
  .post-actions-stats .pas-item[data-url*="who_reviews"],
  .post .post-actions-stats .pas-item[data-url*="who_reviews"] {
    display: none !important; visibility: hidden !important;
    width: 0 !important; height: 0 !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    border: none !important; overflow: hidden !important;
    flex: none !important;
  }
  .post-actions .action-btn .reaction-btn-name,
  .post-actions .action-btn span.d-none { display: none !important; }
  .post .post-actions .action-btn,
  .post-actions .action-btn { gap: 0 !important; padding: 10px 2px !important; }
}

.listing-white-card {
  background: #fff; border: 1px solid #eef0f2; border-radius: 16px;
  padding: 18px 20px 20px; margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
@media (max-width: 575.98px) {
  .listing-white-card { padding: 14px 14px 16px; border-radius: 14px; }
}

/* ─── STYLE #2: CUSTOM FEED ─── */
.middle-feed { flex: 1; margin: 0; max-width: 680px; }

/* Quick Links */
.quick-links-wrapper {
  --quick-link-red: #e74c3c; --quick-link-red-dark: #c0392b;
  --quick-link-bg: #f1f3f5; --quick-link-width: 86px; --quick-link-gap: 10px;
  display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: 16px; padding: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06); margin-bottom: 20px; overflow: hidden;
}
.quick-links-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.quick-links-track {
  display: flex; gap: var(--quick-link-gap); overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
  -ms-overflow-style: none;
}
.quick-links-track::-webkit-scrollbar { display: none; }
.quick-link-item {
  flex: 0 0 var(--quick-link-width); width: var(--quick-link-width);
  height: 70px; background: var(--quick-link-bg); border-radius: 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; text-decoration: none;
  color: #333; transition: background-color 0.2s ease, color 0.2s ease,
  box-shadow 0.2s ease, transform 0.2s ease; user-select: none;
}
.quick-link-item:hover {
  background: #e2e6ea; text-decoration: none; transform: translateY(-1px);
}
.quick-link-item > i {
  font-size: 20px; color: var(--quick-link-red);
  margin-bottom: 5px; line-height: 1;
}
.quick-link-item .title {
  max-width: 100%; padding: 0 5px; font-size: 14px;
  font-weight: 700; color: #333; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-link-item .subtitle {
  max-width: 100%; padding: 0 5px; font-size: 11px;
  font-weight: 600; color: #888; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-link-item.active {
  background: linear-gradient(145deg, var(--quick-link-red), var(--quick-link-red-dark));
  color: #fff; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.28);
}
.quick-link-item.active > i,
.quick-link-item.active .title { color: #fff; }
.quick-link-item.active .subtitle { color: rgba(255,255,255,0.9); }
.quick-links-nav {
  width: 45px; height: 45px; border-radius: 50%; border: 0;
  background: linear-gradient(145deg, var(--quick-link-red), var(--quick-link-red-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex: 0 0 45px; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.28);
  cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease;
}
.quick-links-nav:hover { transform: scale(1.05); }
.quick-links-nav.is-hidden { display: none; }
.quick-links-nav:disabled {
  opacity: 0.45; cursor: default; transform: none; box-shadow: none;
}
@media (max-width: 576px) {
  .quick-links-wrapper {
    --quick-link-width: 78px; border-radius: 14px; padding: 8px; gap: 8px;
  }
  .quick-link-item { height: 64px; border-radius: 16px; }
  .quick-link-item .title { font-size: 12px; }
  .quick-link-item .subtitle { font-size: 10px; }
  .quick-links-nav { width: 38px; height: 38px; flex-basis: 38px; }
}

/* Create Post (Publisher) */
.x-form.publisher.create-post {
  background: #fff; border-radius: 16px; padding: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  margin-bottom: 20px; border: none !important;
}
#publisher-box .publisher-avatar {
  width: 45px !important; height: 45px !important;
  border-radius: 50% !important; margin-right: 15px !important;
  object-fit: cover !important;
}
#publisher-box.publisher .publisher-message.create-top {
  display: block !important; position: relative !important;
  padding: 16px 16px 12px 74px !important; min-height: 0 !important;
  height: auto !important; overflow: visible !important;
  flex: 0 0 auto !important;
}
#publisher-box.publisher .publisher-message.create-top .publisher-avatar {
  position: absolute !important; left: 16px !important; top: 16px !important;
  right: auto !important; bottom: auto !important; float: none !important;
  margin: 0 !important; width: 42px !important; height: 42px !important;
  padding: 0 !important; border: 3px solid #e74c3c !important;
  border-radius: 50% !important; object-fit: cover !important;
  box-sizing: border-box !important; z-index: 2 !important;
}
#publisher-box.publisher .publisher-message.create-top .colored-text-wrapper {
  width: 100% !important; min-width: 0 !important;
  margin-left: 0 !important; padding-left: 0 !important;
}
#publisher-box.publisher .publisher-message.create-top .quill-editor,
#publisher-box.publisher .publisher-message.create-top .ql-container,
#publisher-box.publisher .publisher-message.create-top textarea {
  width: 100% !important; height: auto !important; overflow: visible !important;
}
#publisher-box.publisher .publisher-message.create-top .ql-editor,
#publisher-box.publisher .publisher-message.create-top textarea {
  min-height: 84px !important; max-height: 220px !important;
  overflow-y: auto !important;
}
#publisher-box .publisher-message.create-top .colored-text-wrapper {
  flex: 1; padding-left: 0 !important;
}
#publisher-box .publisher-message.create-top .quill-editor,
#publisher-box .publisher-message.create-top .ql-container {
  width: 100%; border: none !important; background: #f0f2f5 !important;
  border-radius: 16px !important; outline: none; min-height: 90px !important;
}
#publisher-box .publisher-message.create-top .ql-editor {
  padding: 12px 16px !important; min-height: 90px !important;
  line-height: 22px !important; font-size: 15px !important;
  color: #333 !important;
}
#publisher-box .publisher-message.create-top .ql-editor.ql-blank::before {
  left: 16px !important; top: 12px !important;
  font-style: normal !important; color: #8f939c !important;
}
.publisher-message.create-top textarea {
  width: 100%; border: none !important; background: #f0f2f5 !important;
  padding: 12px 16px !important; border-radius: 16px !important;
  outline: none; min-height: 90px !important; resize: none !important;
}
.publisher-tools-tabs { display: none !important; }
.create-actions {
  display: flex; justify-content: space-around; margin-top: 12px;
  border-top: 1px solid #eee; padding-top: 10px;
}
.create-actions > div {
  flex: 1; display: flex; justify-content: center; align-items: center;
  gap: 8px; padding: 8px 0; border-radius: 8px; cursor: pointer;
  color: #555; font-weight: 500; transition: background 0.2s;
}
.create-actions > div:hover { background: #f0f2f5; }
.create-actions .main-icon, .create-actions .main-icon path,
.create-actions .main-icon circle, .create-actions .main-icon polygon,
.create-actions .main-icon rect { fill: #e74c3c !important; }
#publisher-box .publisher-footer { padding: 0 15px 15px 15px !important; }
#publisher-box .publisher-footer-options { padding: 10px 0 !important; }
#publisher-box .publisher-footer-options .form-table-row {
  margin-bottom: 20px !important; display: flex; align-items: center;
}
#publisher-box .publisher-footer-options .avatar {
  background: none !important; width: 32px; height: 32px; margin-right: 15px !important;
}
#publisher-box .publisher-footer-options .avatar svg {
  width: 28px !important; height: 28px !important;
}
#publisher-box .publisher-footer-options .form-label {
  font-size: 16px !important; font-weight: 700 !important;
  color: #4a5568 !important; margin-bottom: 4px !important;
}
#publisher-box .publisher-footer-options .form-text {
  font-size: 14px !important; color: #718096 !important;
}
#publisher-box .publisher-footer-options .switch {
  width: 54px !important; height: 30px !important;
}
#publisher-box .publisher-footer-options .slider.round {
  border-radius: 34px !important; background-color: #cbd5e1 !important;
}
#publisher-box .publisher-footer-options .slider:before {
  height: 22px !important; width: 22px !important; left: 4px !important;
  bottom: 4px !important; background-color: white !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
#publisher-box .publisher-footer-options input:checked + .slider {
  background-color: #e74c3c !important;
}
#publisher-box .publisher-footer-options input:checked + .slider:before {
  transform: translateX(24px) !important;
}
#publisher-box .publisher-footer-buttons {
  display: block !important; padding: 0 !important;
}

/* Stories Styling */
.card.stories-wrapper-container {
  border: none !important; background: transparent !important;
  box-shadow: none !important; margin-bottom: 20px;
}
.card.stories-wrapper-container .card-header {
  display: flex !important; align-items: center; justify-content: space-between;
  border-bottom: none !important; padding: 10px 0 !important;
  background: transparent !important;
}
.card.stories-wrapper-container .card-body { padding: 0 !important; }
#stories {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
#stories::-webkit-scrollbar { display: none; }
#stories .story, #stories .add-story {
  border-radius: 16px !important; overflow: hidden !important;
  width: 110px !important; height: 180px !important;
  min-width: 110px !important; position: relative;
  transition: transform 0.25s ease; box-sizing: border-box !important;
}
#stories .story:hover, #stories .add-story:hover { transform: translateY(-4px); }
#stories .add-story {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
#stories .story:not(.seen) {
  border: none !important; outline: none !important;
  padding: 0 !important;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.25) !important;
}
#stories .story.seen {
  border: none !important; outline: none !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
#stories .story a.item-link {
  display: block; width: 100%; height: 100%; position: relative;
  text-decoration: none; border: none !important;
  padding: 0 !important; margin: 0 !important;
}
#stories .story .item-preview {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1; display: block; border: none !important;
  padding: 0 !important; margin: 0 !important;
}
#stories .story .item-preview img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border: none !important;
  padding: 0 !important; margin: 0 !important;
}
#stories .story.seen .item-preview img {
  filter: grayscale(15%) blur(0.5px) brightness(0.85) !important;
  opacity: 0.75 !important;
}
#stories .story .story-avatar {
  position: absolute; top: 10px; left: 10px; width: 36px; height: 36px;
  border-radius: 50%; border: 2px solid #fff !important;
  background: #fff; padding: 0; z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
#stories .story.seen .story-avatar {
  opacity: 0.7 !important; border-color: #cbd5e1 !important;
}
#stories .story .story-avatar img {
  width: 100% !important; height: 100% !important;
  border-radius: 50%; object-fit: cover;
}
#stories .story .story-count {
  position: absolute !important; top: 10px !important; right: 10px !important;
  background: #e74c3c !important; color: #fff !important;
  font-size: 10px !important; font-weight: 800 !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  padding: 0 !important; z-index: 4 !important;
}
#stories .story .info {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  z-index: 3; margin: 0; padding: 0;
}
#stories .story .info .name {
  color: #fff !important; font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
#stories .story.seen .info .name { opacity: 0.7 !important; }
#stories .add-story .img {
  width: 100% !important; height: 100% !important;
  background-size: cover; background-position: center;
}
#stories .add-story .add {
  position: absolute !important; top: 58% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #fff !important; color: #e74c3c;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #e74c3c !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 2;
}
#stories .add-story .add i { color: #e74c3c !important; }
#stories .add-story { border: none !important; }
[dir="RTL"] #stories .story .story-avatar { right: 10px !important; left: auto !important; }
[dir="RTL"] #stories .story .story-count { left: 10px !important; right: auto !important; }
[dir="RTL"] #stories .story .info { right: 10px !important; left: 10px !important; text-align: right !important; }

/* Sidebar Widgets */
.js_sticky-sidebar .card {
  background: #fff !important; border-radius: 20px !important;
  padding: 10px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  margin-bottom: 20px !important; border: none !important;
}
.js_sticky-sidebar .card-header {
  background: transparent !important; border-bottom: none !important;
  font-weight: 800 !important; font-size: 18px !important;
  color: #000 !important; padding: 15px 15px 5px !important;
}
.js_sticky-sidebar .card-header .fa-user-plus {
  color: #e74c3c !important; font-size: 20px !important; font-weight: 900 !important;
}
.js_sticky-sidebar .feeds-item { border: none !important; padding: 10px 0 !important; }
.js_sticky-sidebar .data-avatar img { border-radius: 50% !important; }
.js_sticky-sidebar .data-content .name a {
  font-weight: 800 !important; color: #2d3748 !important; font-size: 16px !important;
}
.js_sticky-sidebar .data-content div {
  color: #a0aec0 !important; font-size: 14px !important; font-weight: 500 !important;
}

.right-sidebar .suggestion-card .card-body.with-list { padding: 0 10px 8px !important; }
.right-sidebar .suggestion-card .card-body.with-list ul {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
}
.right-sidebar .suggestion-card .feeds-item {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.right-sidebar .suggestion-card .data-container {
  min-height: 48px !important; padding: 3px 0 !important;
  gap: 8px !important; align-items: center !important;
}
.right-sidebar .suggestion-card .data-avatar img {
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; min-height: 36px !important;
}
.right-sidebar .suggestion-card .data-content { gap: 6px !important; }
.right-sidebar .suggestion-card .data-content .mt5 { margin-top: 0 !important; }
.right-sidebar .suggestion-card .data-content .name,
.right-sidebar .suggestion-card .data-content .name a {
  font-size: 13px !important; line-height: 1.25 !important;
}
.right-sidebar .suggestion-card .data-content > div:not(.mt5):not(.float-end) {
  font-size: 11px !important; line-height: 1.2 !important; margin-top: 0 !important;
}
.right-sidebar .suggestion-card .btn-custom-add,
.right-sidebar .suggestion-card .js_like-page,
.right-sidebar .suggestion-card .js_unlike-page {
  min-width: 58px !important; height: 28px !important;
  padding: 0 12px !important; font-size: 11.5px !important;
}

/* Сайдбар: виджеты в стиле PixPik PRO — белые */
.card.bg-indigo, .card.bg-teal, .card.bg-red {
  background: #fff !important; color: #1a1a2e !important;
  min-height: 0 !important; overflow: hidden !important;
  border: 1px solid #eef0f2 !important; border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 20px !important;
}
.card.bg-indigo .card-header, .card.bg-teal .card-header, .card.bg-red .card-header {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 10px !important;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: transparent !important;
}
.card.bg-indigo .card-header h6, .card.bg-teal .card-header h6,
.card.bg-red .card-header h6 {
  order: 1 !important; margin: 0 !important; color: #1a1a2e !important;
  font-size: 15px !important; font-weight: 800 !important;
  line-height: 1.2 !important; display: flex !important;
  align-items: center !important; gap: 10px !important;
  min-width: 0 !important;
}
.card.bg-indigo .card-header .float-end, .card.bg-teal .card-header .float-end,
.card.bg-red .card-header .float-end {
  order: 2 !important; margin-left: auto !important; flex: 0 0 auto !important;
}
.card.bg-indigo .card-header a, .card.bg-teal .card-header a,
.card.bg-red .card-header a {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; min-height: 28px !important;
  padding: 5px 12px !important; border-radius: 99px !important;
  background: #fff5f5 !important; color: #e74c3c !important;
  border: 1px solid #fecdd3 !important;
  font-weight: 700 !important; font-size: 12px !important;
  text-decoration: none !important; transition: all 0.15s ease !important;
}
.card.bg-indigo .card-header a:hover, .card.bg-teal .card-header a:hover,
.card.bg-red .card-header a:hover {
  background: #e74c3c !important; color: #fff !important;
  border-color: #e74c3c !important;
}
.card.bg-indigo .card-header .svg-container,
.card.bg-teal .card-header .svg-container,
.card.bg-red .card-header .svg-container {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; width: 34px !important;
  height: 34px !important; margin: 0 !important;
  border-radius: 10px !important; background: #fff5f5 !important;
  color: #e74c3c !important; fill: #e74c3c !important; flex: 0 0 auto !important;
}
.card.bg-indigo .card-header .svg-container svg,
.card.bg-teal .card-header .svg-container svg,
.card.bg-red .card-header .svg-container svg,
.card.bg-indigo .card-header .svg-container path,
.card.bg-teal .card-header .svg-container path,
.card.bg-red .card-header .svg-container path,
.card.bg-indigo .card-header .svg-container circle,
.card.bg-teal .card-header .svg-container circle,
.card.bg-red .card-header .svg-container circle,
.card.bg-indigo .card-header .svg-container rect,
.card.bg-teal .card-header .svg-container rect,
.card.bg-red .card-header .svg-container rect,
.card.bg-indigo .card-header .svg-container polygon,
.card.bg-teal .card-header .svg-container polygon,
.card.bg-red .card-header .svg-container polygon {
  fill: #e74c3c !important; color: #e74c3c !important;
  width: 18px !important; height: 18px !important;
}
.card.bg-indigo .card-body, .card.bg-teal .card-body, .card.bg-red .card-body {
  padding: 14px 18px 16px !important;
}
.card.bg-indigo .hi24-promo-list, .card.bg-teal .hi24-promo-list,
.card.bg-red .hi24-promo-list {
  display: flex !important; flex-direction: row !important;
  gap: 12px !important; margin: 0 !important; padding: 0 !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.card.bg-indigo .hi24-promo-list::-webkit-scrollbar,
.card.bg-teal .hi24-promo-list::-webkit-scrollbar,
.card.bg-red .hi24-promo-list::-webkit-scrollbar { display: none !important; }
.card.bg-indigo .hi24-promo-list .user-box,
.card.bg-teal .hi24-promo-list .user-box,
.card.bg-red .hi24-promo-list .user-box {
  width: calc((100% - 24px) / 3) !important;
  min-width: calc((100% - 24px) / 3) !important;
  max-width: calc((100% - 24px) / 3) !important;
  min-height: 74px !important; margin: 0 !important;
  padding: 0 !important; opacity: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 7px !important; text-align: center !important;
  border-radius: 0 !important; color: #1a1a2e !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.card.bg-indigo .hi24-promo-list .user-box:hover,
.card.bg-teal .hi24-promo-list .user-box:hover,
.card.bg-red .hi24-promo-list .user-box:hover {
  background: transparent !important; color: #e74c3c !important;
  opacity: 0.9 !important; transform: translateY(-1px) !important;
}
.card.bg-indigo .hi24-promo-list .user-box img,
.card.bg-teal .hi24-promo-list .user-box img,
.card.bg-red .hi24-promo-list .user-box img {
  width: 54px !important; height: 54px !important;
  min-width: 54px !important; min-height: 54px !important;
  margin: 0 !important; border-radius: 50% !important;
  object-fit: cover !important; background: #f1f5f9 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.card.bg-indigo .hi24-promo-list .user-box .name,
.card.bg-teal .hi24-promo-list .user-box .name,
.card.bg-red .hi24-promo-list .user-box .name {
  width: 100% !important; min-width: 0 !important;
  margin: 0 !important; color: #1a1a2e !important;
  font-size: 12px !important; font-weight: 700 !important;
  line-height: 1.15 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
.card.bg-indigo .hi24-promo-list .user-box:hover .name,
.card.bg-teal .hi24-promo-list .user-box:hover .name,
.card.bg-red .hi24-promo-list .user-box:hover .name {
  color: #e74c3c !important;
}
[dir="RTL"] .hi24-promo-list .user-box { text-align: right !important; }
[dir="RTL"] .card.bg-indigo .card-header .float-end,
[dir="RTL"] .card.bg-teal .card-header .float-end,
[dir="RTL"] .card.bg-red .card-header .float-end {
  margin-right: auto !important; margin-left: 0 !important;
}
.card.bg-indigo .trending-item, .card.bg-teal .trending-item,
.card.bg-red .trending-item {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 12px !important;
  min-height: 37px !important; margin-bottom: 8px !important;
  padding: 9px 12px !important; border-radius: 11px !important;
  color: #1a1a2e !important; background: #f8fafc !important;
  border: 1px solid #eef0f2 !important;
  text-decoration: none !important; transition: all 0.15s ease !important;
}
.card.bg-indigo .trending-item:hover, .card.bg-teal .trending-item:hover,
.card.bg-red .trending-item:hover {
  background: #fff !important; border-color: #e74c3c !important;
  transform: translateX(3px) !important;
}
.card.bg-indigo .trending-item:last-child,
.card.bg-teal .trending-item:last-child,
.card.bg-red .trending-item:last-child { margin-bottom: 0 !important; }
.card.bg-indigo .trending-item .hash, .card.bg-teal .trending-item .hash,
.card.bg-red .trending-item .hash {
  color: #1a1a2e !important; font-size: 13px !important;
  font-weight: 700 !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.card.bg-indigo .trending-item:hover .hash,
.card.bg-teal .trending-item:hover .hash,
.card.bg-red .trending-item:hover .hash { color: #e74c3c !important; }
.card.bg-indigo .trending-item .frequency,
.card.bg-teal .trending-item .frequency,
.card.bg-red .trending-item .frequency {
  color: #94a3b8 !important; background: transparent !important;
  border-radius: 0 !important; padding: 0 !important;
  font-size: 11px !important; font-weight: 600 !important;
  white-space: nowrap !important;
}
.card.bg-indigo #blogs-carousel .post-media.list,
.card.bg-teal #blogs-carousel .post-media.list,
.card.bg-red #blogs-carousel .post-media.list { margin: 0 !important; }
.card.bg-indigo #blogs-carousel .post-media-meta,
.card.bg-teal #blogs-carousel .post-media-meta,
.card.bg-red #blogs-carousel .post-media-meta { padding: 10px 4px 0 !important; }
.card.bg-indigo #blogs-carousel .post-media-meta .title,
.card.bg-teal #blogs-carousel .post-media-meta .title,
.card.bg-red #blogs-carousel .post-media-meta .title {
  color: #1a1a2e !important; font-size: 14px !important;
  font-weight: 800 !important; line-height: 1.35 !important;
}
.card.bg-indigo #blogs-carousel .post-media-meta .text,
.card.bg-teal #blogs-carousel .post-media-meta .text,
.card.bg-red #blogs-carousel .post-media-meta .text,
.card.bg-indigo #blogs-carousel .post-media-meta .info,
.card.bg-teal #blogs-carousel .post-media-meta .info,
.card.bg-red #blogs-carousel .post-media-meta .info {
  color: #6b7280 !important; font-size: 12px !important;
}

/* BLOGS CAROUSEL — ТЁМНАЯ ТЕМА */
body.night-mode .card.bg-indigo #blogs-carousel .post-media-meta .title,
body.night-mode .card.bg-teal #blogs-carousel .post-media-meta .title,
body.night-mode .card.bg-red #blogs-carousel .post-media-meta .title {
  color: #f0f0f0 !important;
}
body.night-mode .card.bg-indigo #blogs-carousel .post-media-meta .text,
body.night-mode .card.bg-teal #blogs-carousel .post-media-meta .text,
body.night-mode .card.bg-red #blogs-carousel .post-media-meta .text,
body.night-mode .card.bg-indigo #blogs-carousel .post-media-meta .info,
body.night-mode .card.bg-teal #blogs-carousel .post-media-meta .info,
body.night-mode .card.bg-red #blogs-carousel .post-media-meta .info {
  color: #b0b3b8 !important;
}
body.night-mode .card.bg-indigo,
body.night-mode .card.bg-teal,
body.night-mode .card.bg-red {
  background: #242526 !important; border-color: #3a3b3c !important;
  color: #e4e6eb !important;
}
body.night-mode .card.bg-indigo .card-header,
body.night-mode .card.bg-teal .card-header,
body.night-mode .card.bg-red .card-header {
  background: transparent !important; border-bottom-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* Feed stats row */
.post .post-stats {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 10px 18px !important;
  margin: 0 24px !important; padding: 11px 0 12px !important;
  border-bottom: 1px solid #e5e7eb !important; color: #222 !important;
  font-size: 14px !important; line-height: 1.35 !important;
}
.post .post-stats > .float-start, .post .post-stats > .float-end {
  float: none !important; margin: 0 !important;
}
.post .post-stats > .float-end {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; justify-content: flex-start !important;
  gap: 10px 20px !important;
}
.post .post-stats > .float-end > span.pointer:not(.x-hidden) {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; margin-left: 0 !important;
  color: #222 !important; font-size: 14px !important;
  font-weight: 500 !important; white-space: nowrap !important;
}
.post .post-stats > .float-end > span.x-hidden { display: none !important; }
.post .post-stats .fa, .post .post-stats .fas, .post .post-stats .far {
  color: #ef4b3f !important; font-size: 20px !important;
  line-height: 1 !important; margin: 0 !important;
}
.post .post-stats .reactions-stats {
  display: inline-flex !important; align-items: center !important;
}
@media (max-width: 575.98px) {
  .post .post-stats {
    margin: 0 16px !important; gap: 8px 12px !important;
    font-size: 13px !important;
  }
  .post .post-stats > .float-end { gap: 8px 14px !important; }
  .post .post-stats > .float-end > span.pointer:not(.x-hidden) {
    font-size: 13px !important;
  }
  .post .post-stats .fa, .post .post-stats .fas, .post .post-stats .far {
    font-size: 18px !important;
  }
}

/* Custom Add/Like Buttons */
.btn-custom-add {
  background: #e74c3c !important; color: #fff !important;
  border-radius: 24px !important; padding: 6px 20px !important;
  font-weight: 700 !important; font-size: 14px !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2) !important;
}
.btn-custom-add:hover { background: #c0392b !important; color: #fff !important; }
.btn-custom-like {
  background: #e74c3c !important; color: #fff !important;
  border-radius: 20px !important; padding: 4px 16px !important;
  font-weight: 600 !important; font-size: 13px !important;
  border: none !important;
}
.btn-custom-like:hover { background: #c0392b !important; color: #fff !important; }

/* GLOBAL & PROFILE RED THEME OVERRIDES */
:root { --link-color: #e74c3c; --plyr-color-main: #e74c3c; }
.btn-primary, .bg-primary, .badge-primary {
  background-color: #e74c3c !important;
  border-color: #e74c3c !important; color: #fff !important;
}
.btn-primary:hover {
  background-color: #c0392b !important; border-color: #c0392b !important;
}
.progress-bar-info { background-color: #e74c3c !important; }
.profile-tabs-wrapper a.active {
  color: #e74c3c !important; border-bottom-color: #e74c3c !important;
}
.verified-badge svg path, .verified-badge svg circle,
.verified-badge svg polygon, .verified-badge svg rect {
  fill: #e74c3c !important;
}
.main-icon, .main-icon *, .x-form-tools { color: #636363 !important; }
.content-tabs>ul>li.active>a {
  color: #e74c3c !important; border-bottom-color: #e74c3c !important;
}
@media (max-width: 767.98px) {
  .main-header > .container > .row > .col-5,
  .main-header > .container-fluid > .row > .col-5 {
    padding-right: 0 !important;
  }
}

/* ФИКС: посты не сдвигаются вправо */
.post, .post-body, .post .post-header, .post .post-replace,
.post .post-actions, .post .post-footer {
  max-width: 100% !important; box-sizing: border-box !important;
}
@media (max-width: 767.98px) {
  .middle-feed {
    max-width: 100% !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important;
  }
  .middle-feed > .post, .middle-feed .post,
  .js_posts_stream > ul > li, .js_posts_stream .post {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .middle-feed .post-body { overflow: visible !important; }
  .middle-feed, .middle-feed > div, .js_posts_stream > ul {
    overflow-x: visible !important;
  }
}
/* ─── STYLE #3: МОБИЛЬНАЯ ШАПКА / RUTUBE / ССЫЛКИ / МОДАЛКИ / ФИЛЬМЫ ─── */
@media (max-width: 767.98px) {
  .mobile-header, .mobile-header.d-block.d-md-none {
    position: fixed !important; top: 0 !important; left: 0 !important;
    right: 0 !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; z-index: 1001 !important;
    padding-left: 16px !important; padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  body { padding-top: 80px !important; }
  .main-wrapper { padding-top: 0 !important; }
  body > .main-wrapper:first-child { padding-top: 0 !important; }
  .main-wrapper > .container, .main-wrapper > .container-fluid,
  .container, .container-fluid {
    padding-left: 10px !important; padding-right: 10px !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .sg-offcanvas-sidebar, .sg-offcanvas-mainbar, .middle-feed,
  .right-sidebar, [class*="col-"] {
    padding-left: 10px !important; padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  .middle-feed .card, .js_posts_stream .card, .post,
  .post-body, .js_posts_stream > ul > li {
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .js_posts_stream > ul {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* RuTube-видео на всю ширину */
.post:has(iframe[src*="rutube.ru"]) .post-meta {
  padding-right: 0 !important; padding-left: 0 !important;
}
.post:has(iframe[src*="rutube.ru"]) .post-meta .mt10.plr15 {
  width: 100% !important; max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  box-sizing: border-box !important;
}
.post:has(iframe[src*="rutube.ru"]) .embed-iframe-wrapper {
  position: relative; width: 100% !important; max-width: 100% !important;
  height: 0; padding-bottom: 56.25%; overflow: hidden;
  border-radius: 12px; background: #000; margin: 0 !important;
}
.post:has(iframe[src*="rutube.ru"]) .embed-iframe-wrapper iframe {
  position: absolute; top: 0; left: 0; width: 100% !important;
  height: 100% !important; border: 0; border-radius: 12px;
}

/* Красивое оформление ссылок в постах — pill-стиль */
.post-text a[href^="http"]:not(.js_lightbox):not(.post-avatar-picture):not([class*="btn"]):not([class*="hashtag"]),
.post-description a[href^="http"]:not([class*="btn"]):not([class*="hashtag"]),
.comment-text a[href^="http"]:not([class*="btn"]):not([class*="hashtag"]),
.message-text a[href^="http"]:not([class*="btn"]):not([class*="hashtag"]),
.__feeds_post-text a[href^="http"]:not([class*="btn"]):not([class*="hashtag"]) {
  display: inline-flex !important; align-items: center !important;
  gap: 10px !important; max-width: 100% !important;
  padding: 7px 14px !important; margin: 4px 3px !important;
  background: #fff5f5 !important; color: #e74c3c !important;
  border: 1px solid #fecdd3 !important; border-radius: 99px !important;
  font-weight: 600 !important; font-size: 13px !important;
  line-height: 1.4 !important; text-decoration: none !important;
  word-break: break-all !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
  vertical-align: middle !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}
.post-text a[href^="http"]:not([class*="hashtag"])::before,
.post-description a[href^="http"]:not([class*="hashtag"])::before,
.comment-text a[href^="http"]:not([class*="hashtag"])::before,
.message-text a[href^="http"]:not([class*="hashtag"])::before,
.__feeds_post-text a[href^="http"]:not([class*="hashtag"])::before {
  content: '🔗' !important; font-size: 12px !important;
  flex-shrink: 0 !important; opacity: 0.85 !important;
  margin-right: 2px !important;
}
.post-text a[href^="http"]:hover, .post-description a[href^="http"]:hover,
.comment-text a[href^="http"]:hover, .message-text a[href^="http"]:hover,
.__feeds_post-text a[href^="http"]:hover {
  background: #e74c3c !important; color: #fff !important;
  border-color: #e74c3c !important; transform: translateY(-1px) !important;
}
body.night-mode .post-text a[href^="http"],
html[data-theme="dark"] .post-text a[href^="http"],
body.night-mode .comment-text a[href^="http"],
body.night-mode .post-description a[href^="http"] {
  background: #2c2c2e !important; color: #e74c3c !important;
  border-color: #3a3a3c !important;
}
body.night-mode .post-text a[href^="http"]:hover,
html[data-theme="dark"] .post-text a[href^="http"]:hover {
  background: #e74c3c !important; color: #fff !important;
  border-color: #e74c3c !important;
}
@media (max-width: 575.98px) {
  .post-text a[href^="http"], .post-description a[href^="http"],
  .comment-text a[href^="http"] {
    font-size: 12px !important; padding: 6px 11px !important;
    gap: 8px !important;
  }
  .post-text a[href^="http"]::before,
  .post-description a[href^="http"]::before { font-size: 10px !important; }
}

/* МОДАЛКА: инструкция по цифровым товарам */
.digital-help-modal .modal-dialog { max-width: 420px; margin: 0.5rem auto; }
.digital-help-modal .modal-content {
  border: none; border-radius: 20px; overflow: hidden;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.digital-help-modal .modal-body {
  padding: 24px 22px 22px; max-height: calc(100vh - 40px);
  overflow-y: auto; scrollbar-width: none;
}
.digital-help-modal .modal-body::-webkit-scrollbar { display: none; }
.digital-help-modal .btn-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  background: #eef0f2; border-radius: 50%;
  width: 32px; height: 32px; opacity: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background-image: none; transition: background 0.15s ease;
}
.digital-help-modal .btn-close:hover { background: #dfe3e8; }
.dhm-icon-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.dhm-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.35);
}
.dhm-icon i { color: #fff; font-size: 24px; }
.dhm-title {
  text-align: center; font-weight: 800; color: #1a1a2e;
  margin: 0 0 4px; font-size: 19px; letter-spacing: -0.3px;
  line-height: 1.25;
}
.dhm-subtitle {
  text-align: center; color: #9aa0a6; font-size: 13px; margin: 0 0 16px;
}
.dhm-highlight {
  background: linear-gradient(135deg, #fff9e6, #ffefc2);
  border: 1px solid #ffe08a; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; text-align: center;
}
.dhm-highlight-emoji { font-size: 20px; margin-bottom: 4px; line-height: 1; }
.dhm-highlight-title {
  font-weight: 800; color: #8a6d00; font-size: 14px; margin-bottom: 4px;
}
.dhm-highlight-text { color: #a07d1a; font-size: 12px; line-height: 1.4; }
.dhm-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dhm-step {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 10px 12px; min-height: 46px;
}
.dhm-num {
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 800; font-size: 13px;
}
.dhm-step-text { font-size: 13px; line-height: 1.35; font-weight: 600; }
.dhm-step-1 { background: #f0fdf4; border: 1px solid #bbf7d0; }
.dhm-step-1 .dhm-num { background: linear-gradient(135deg, #10b981, #059669); }
.dhm-step-1 .dhm-step-text { color: #166534; }
.dhm-step-2 { background: #eff6ff; border: 1px solid #bfdbfe; }
.dhm-step-2 .dhm-num { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.dhm-step-2 .dhm-step-text { color: #1e40af; }
.dhm-step-3 { background: #faf5ff; border: 1px solid #e9d5ff; }
.dhm-step-3 .dhm-num { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.dhm-step-3 .dhm-step-text { color: #6b21a8; }
.dhm-step-4 { background: #fef2f2; border: 1px solid #fecaca; }
.dhm-step-4 .dhm-num { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.dhm-step-4 .dhm-step-text { color: #991b1b; }
.dhm-step-5 { background: #fefce8; border: 1px solid #fde68a; }
.dhm-step-5 .dhm-num { background: linear-gradient(135deg, #eab308, #ca8a04); }
.dhm-step-5 .dhm-step-text { color: #854d0e; }
.dhm-step-6 { background: #f0f9ff; border: 1px solid #bae6fd; }
.dhm-step-6 .dhm-num { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.dhm-step-6 .dhm-step-text { color: #075985; }
.dhm-go-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; border: none; border-radius: 12px;
  padding: 14px; font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.35);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dhm-go-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(231, 76, 60, 0.45);
  color: #fff; text-decoration: none;
}
@media (max-width: 575.98px) {
  .digital-help-modal .modal-dialog { max-width: 100%; margin: 0.25rem auto; padding: 0 8px; }
  .digital-help-modal .modal-content { border-radius: 18px; }
  .digital-help-modal .modal-body { padding: 18px 16px 16px; }
  .digital-help-modal .btn-close { top: 10px; right: 10px; width: 28px; height: 28px; }
  .dhm-icon-wrap { margin-bottom: 10px; }
  .dhm-icon { width: 50px; height: 50px; }
  .dhm-icon i { font-size: 20px; }
  .dhm-title { font-size: 17px; }
  .dhm-subtitle { font-size: 12px; margin-bottom: 12px; }
  .dhm-highlight { padding: 12px 14px; margin-bottom: 12px; }
  .dhm-highlight-emoji { font-size: 18px; }
  .dhm-highlight-title { font-size: 13px; }
  .dhm-highlight-text { font-size: 11.5px; }
  .dhm-steps { gap: 6px; margin-bottom: 12px; }
  .dhm-step { padding: 8px 10px; min-height: 42px; gap: 9px; border-radius: 10px; }
  .dhm-num { width: 26px; height: 26px; font-size: 12px; }
  .dhm-step-text { font-size: 12px; }
  .dhm-go-btn { padding: 12px; font-size: 14px; border-radius: 11px; }
}
@media (max-width: 360px) {
  .digital-help-modal .modal-body { padding: 16px 12px 14px; }
  .dhm-title { font-size: 15.5px; }
  .dhm-step-text { font-size: 11.5px; }
  .dhm-go-btn { font-size: 13px; padding: 11px; }
}

/* Мобильная адаптация страницы фильма */
@media (max-width: 768px) {
  .mvd-card {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 12px !important;
    box-sizing: border-box !important; border-radius: 16px !important;
    overflow: hidden !important;
  }
  .mvd-header {
    flex-direction: column !important; align-items: center !important;
    text-align: center !important; gap: 12px !important;
    padding: 0 0 14px !important;
  }
  .mvd-poster-small {
    width: 140px !important; height: 200px !important;
    object-fit: cover !important; border-radius: 12px !important;
    margin: 0 auto !important;
  }
  .mvd-title {
    font-size: 18px !important; line-height: 1.3 !important;
    word-wrap: break-word !important; overflow-wrap: break-word !important;
    text-align: center !important; margin: 0 !important;
  }
  .mvd-meta {
    font-size: 13px !important; text-align: center !important;
    flex-wrap: wrap !important; gap: 4px !important;
    justify-content: center !important;
  }
  .mvd-media, .mvd-media iframe, .mvd-media video,
  .mvd-media .plyr, .mvd-media .ratio {
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; border-radius: 12px !important;
    overflow: hidden !important;
  }
  .mvd-media .plyr__video-wrapper, .mvd-media .plyr__video-embed {
    padding-bottom: 56.25% !important; height: 0 !important;
    position: relative !important; width: 100% !important;
  }
  .mvd-media .plyr__video-wrapper iframe,
  .mvd-media .plyr__video-embed iframe {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; border: 0 !important;
  }
  .mvd-description {
    font-size: 14px !important; line-height: 1.5 !important;
    word-wrap: break-word !important; overflow-wrap: break-word !important;
    padding: 12px 0 !important; margin: 0 !important;
  }
  .mvd-info-row {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 4px !important; padding: 8px 0 !important;
  }
  .mvd-info-label { font-size: 12px !important; font-weight: 600 !important; }
  .mvd-info-value {
    font-size: 13px !important; word-wrap: break-word !important;
  }
  .mvd-genre-tags { flex-wrap: wrap !important; gap: 6px !important; }
  .mvd-genre-tag { font-size: 11px !important; padding: 4px 10px !important; }
  .mvd-share {
    flex-direction: column !important; align-items: center !important;
    gap: 10px !important; padding-top: 12px !important;
  }
  .mvd-share-btns {
    flex-wrap: wrap !important; justify-content: center !important;
    gap: 8px !important;
  }
  .mv-wrap { flex-direction: column !important; gap: 12px !important; }
  .mv-sidebar { width: 100% !important; position: static !important; order: -1 !important; }
  .mv-category-list {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; gap: 8px !important;
    padding: 8px 4px !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mv-category-list::-webkit-scrollbar { display: none !important; }
  .mv-category-item {
    flex: 0 0 auto !important; padding: 8px 14px !important;
    font-size: 13px !important; white-space: nowrap !important;
  }
  .mv-main { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 400px) {
  .mvd-title { font-size: 16px !important; }
  .mvd-poster-small { width: 120px !important; height: 170px !important; }
  .mvd-media, .mvd-description { border-radius: 10px !important; }
}

/* Хлебные крошки + кнопка "Назад" на странице фильма */
.mvd-crumbs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 4px 14px; margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9; flex-wrap: wrap;
}
.mvd-crumbs-nav {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #94a3b8; min-width: 0;
  flex: 1 1 auto; overflow: hidden;
}
.mvd-crumbs-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #64748b !important; text-decoration: none !important;
  font-weight: 600; padding: 4px 8px; border-radius: 8px;
  transition: all 0.15s ease; white-space: nowrap;
}
.mvd-crumbs-nav a:hover { color: #e74c3c !important; background: #fff5f5; }
.mvd-crumbs-nav a i { font-size: 12px; color: #e74c3c; }
.mvd-crumbs-sep { font-size: 9px !important; color: #cbd5e1; flex-shrink: 0; }
.mvd-crumbs-current {
  color: #1a1a2e; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; min-width: 0;
}
.mvd-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; background: #fff5f5;
  color: #e74c3c !important; border: 1px solid #fecdd3;
  font-weight: 700; font-size: 13px; text-decoration: none !important;
  transition: all 0.15s ease; flex-shrink: 0; white-space: nowrap;
}
.mvd-back-btn:hover {
  background: #e74c3c; color: #fff !important;
  border-color: #e74c3c; transform: translateX(-2px);
}
.mvd-back-btn i { font-size: 12px; transition: transform 0.15s ease; }
.mvd-back-btn:hover i { transform: translateX(-2px); }
@media (max-width: 575.98px) {
  .mvd-crumbs { padding: 0 0 12px; gap: 8px; }
  .mvd-crumbs-nav { font-size: 12px; gap: 4px; }
  .mvd-crumbs-nav a { padding: 3px 6px; }
  .mvd-crumbs-nav a span, .mvd-crumbs-nav a {
    max-width: 90px; overflow: hidden; text-overflow: ellipsis;
  }
  .mvd-crumbs-current { max-width: 120px; }
  .mvd-back-btn { padding: 7px 10px; font-size: 12px; }
  .mvd-back-btn span { display: none; }
  .mvd-back-btn i { font-size: 14px; }
}

/* Кнопки "Поделиться" для фильмов */
.mvd-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: #fff !important; font-size: 18px;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.mvd-share-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  filter: brightness(1.1); color: #fff !important;
}
.mvd-share-btn i { line-height: 1; }
.mvd-share-btn.vk { background: #4C75A3; }
.mvd-share-btn.vk:hover { background: #3d6189; }
.mvd-share-btn.ok { background: #EE8208; }
.mvd-share-btn.ok:hover { background: #d17006; }
.mvd-share-btn.max { background: linear-gradient(135deg, #6D28D9, #4F46E5); }
.mvd-share-btn.max:hover { background: linear-gradient(135deg, #5B21B6, #4338CA); }
.mvd-share-btn.tg { background: #29A9EB; }
.mvd-share-btn.tg:hover { background: #1c8ec8; }
@media (max-width: 575.98px) {
  .mvd-share-btn { width: 38px; height: 38px; font-size: 16px; }
}

/* ИКОНКА BOOSTED — поверх всех элементов карточки */
.post.boosted .boosted-icon,
.post.promoted .boosted-icon,
.post .boosted-icon {
  z-index: 99999 !important; isolation: isolate !important;
}
.post.boosted .post-header, .post.promoted .post-header,
.post.boosted .post-body, .post.promoted .post-body {
  z-index: 1 !important; position: relative !important;
}
.post.boosted, .post.promoted {
  position: relative !important; z-index: 1 !important;
  overflow: visible !important;
}

/* ─── STYLE #6: REACTIONS-STATS ─── */
.reactions-stats {
  display: inline-flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 6px !important;
  padding: 0 !important; background: transparent !important;
}
.reactions-stats > .reactions-stats-item, .reactions-stats-item {
  float: none !important; margin: 0 !important;
  margin-left: 0 !important; padding: 4px 10px 4px 6px !important;
  background: rgba(0,0,0,0.06) !important; border-radius: 20px !important;
  box-shadow: none !important; display: inline-flex !important;
  align-items: center !important; gap: 4px !important;
  position: static !important; z-index: auto !important;
  min-height: 28px !important; line-height: 1 !important;
  transition: background 0.15s ease !important; cursor: pointer !important;
}
.reactions-stats > .reactions-stats-item:hover, .reactions-stats-item:hover {
  background: rgba(0,0,0,0.12) !important;
}
.reactions-stats > .reactions-stats-item .emoji, .reactions-stats-item .emoji {
  width: 20px !important; height: 20px !important;
  border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; overflow: visible !important;
  transition: none !important;
}
.reactions-stats > .reactions-stats-item .emoji img,
.reactions-stats-item .emoji img {
  width: 100% !important; height: 100% !important;
  display: block !important; margin: 0 !important;
}
.post-header-reactions-badge .reactions-stats:hover .reactions-stats-item .emoji {
  transform: none !important; box-shadow: none !important;
}
.reactions-stats-item .reaction-count {
  font-size: 13px !important; font-weight: 600 !important;
  color: inherit !important; margin: 0 !important;
  padding: 0 !important; line-height: 1 !important;
}
body.night-mode .reactions-stats > .reactions-stats-item,
body.night-mode .reactions-stats-item {
  background: rgba(255,255,255,0.08) !important;
}
body.night-mode .reactions-stats > .reactions-stats-item:hover,
body.night-mode .reactions-stats-item:hover {
  background: rgba(255,255,255,0.14) !important;
}
body.night-mode .reactions-stats-item .emoji { box-shadow: none !important; }

/* ─── STYLE #9: ПРЕЛОАДЕР ─── */
#site-preloader {
  position: fixed; inset: 0; z-index: 999999; background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#site-preloader.hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.preloader-content {
  text-align: center; color: #1a1a2e;
  animation: preloaderFadeIn 0.6s ease-out;
}
@keyframes preloaderFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.preloader-logo {
  position: relative; width: 120px; height: 120px;
  margin: 0 auto 24px; display: flex;
  align-items: center; justify-content: center;
}
.preloader-logo img {
  max-width: 80px; max-height: 80px; border-radius: 18px;
  z-index: 2; position: relative;
  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.15);
}
.preloader-spinner { display: none !important; }
.preloader-text {
  font-size: 26px; font-weight: 800; letter-spacing: -0.3px;
  margin-bottom: 6px; color: #1a1a2e;
}
.preloader-subtitle {
  font-size: 14px; font-weight: 500; color: #94a3b8; margin-bottom: 20px;
}
.preloader-dots { display: flex; justify-content: center; gap: 8px; }
.preloader-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e74c3c; opacity: 0.3;
  animation: preloaderDot 1.4s ease-in-out infinite;
}
.preloader-dots span:nth-child(1) { animation-delay: 0s; }
.preloader-dots span:nth-child(2) { animation-delay: 0.2s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes preloaderDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.3); }
}
body.night-mode #site-preloader,
html[data-theme="dark"] #site-preloader { background: #1c1c1e; }
body.night-mode .preloader-text,
html[data-theme="dark"] .preloader-text { color: #ffffff; }

/* ─── STYLE #10: ПОСТЕР ФИЛЬМА / РЕЙТИНГ ─── */
.mvd-header {
  display: flex !important; align-items: flex-start !important;
  gap: 24px !important; padding: 20px !important;
  background: #ffffff !important; border-radius: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.mvd-poster-small {
  width: 220px !important; height: 320px !important;
  min-width: 220px !important; max-width: 220px !important;
  object-fit: cover !important; border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  display: block !important; transition: transform 0.25s ease !important;
}
.mvd-poster-small:hover { transform: scale(1.02) !important; }
.mvd-title-section {
  flex: 1 1 auto !important; min-width: 0 !important;
  padding-top: 10px !important;
  display: flex !important; flex-direction: column !important;
  justify-content: flex-start !important;
}
.mvd-title {
  font-size: 28px !important; line-height: 1.25 !important;
  font-weight: 800 !important; color: #1a1a2e !important;
  margin: 0 0 12px !important; word-wrap: break-word !important;
}
.mvd-meta {
  font-size: 15px !important; color: #64748b !important;
  display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; align-items: center !important;
}
.mvd-meta span { display: inline-flex !important; align-items: center !important; }
@media (max-width: 768px) {
  .mvd-header {
    flex-direction: column !important; align-items: center !important;
    text-align: center !important; padding: 16px !important;
    gap: 16px !important;
  }
  .mvd-poster-small {
    width: 160px !important; height: 230px !important;
    min-width: 160px !important; max-width: 160px !important;
  }
  .mvd-title { font-size: 20px !important; text-align: center !important; }
  .mvd-meta { font-size: 13px !important; justify-content: center !important; }
}
@media (max-width: 400px) {
  .mvd-poster-small {
    width: 130px !important; height: 190px !important;
    min-width: 130px !important; max-width: 130px !important;
  }
  .mvd-title { font-size: 18px !important; }
}

/* Описание рядом с постером */
.mvd-description-top {
  margin-top: 16px !important; font-size: 14px !important;
  line-height: 1.6 !important; color: #475569 !important;
  max-height: 180px !important; overflow-y: auto !important;
  padding-right: 8px !important; word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  scrollbar-width: thin; scrollbar-color: #e74c3c #f1f5f9;
}
.mvd-description-top::-webkit-scrollbar { width: 5px; }
.mvd-description-top::-webkit-scrollbar-track {
  background: #f1f5f9; border-radius: 4px;
}
.mvd-description-top::-webkit-scrollbar-thumb {
  background: #e74c3c; border-radius: 4px;
}
@media (max-width: 768px) {
  .mvd-description-top {
    max-height: none !important; overflow: visible !important;
    font-size: 13px !important; margin-top: 12px !important;
    text-align: left !important;
  }
}

/* Рейтинг фильма — звёзды */
.mvd-rating {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding: 12px 16px;
  background: #f8fafc; border-radius: 14px;
  border: 1px solid #eef2f5; flex-wrap: wrap;
}
.mvd-rating-stars {
  display: flex; gap: 4px; font-size: 22px; line-height: 1;
}
.mvd-rating-stars i {
  color: #cbd5e1; cursor: pointer;
  transition: all 0.15s ease; padding: 2px;
}
.mvd-rating-stars i:hover, .mvd-rating-stars i.hover {
  color: #f59e0b; transform: scale(1.15);
}
.mvd-rating-stars i.active {
  color: #f59e0b;
  text-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.mvd-rating-info {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 14px; color: #64748b; flex-wrap: wrap;
}
.mvd-rating-avg { font-size: 18px; font-weight: 800; color: #1a1a2e; }
.mvd-rating-count { font-size: 13px; color: #94a3b8; }
.mvd-rating-hint {
  font-size: 13px; color: #94a3b8; font-weight: 500;
  margin-left: auto; transition: color 0.2s ease;
}
.mvd-rating-hint.success { color: #10b981; }
@media (max-width: 575.98px) {
  .mvd-rating { padding: 10px 12px; gap: 10px; }
  .mvd-rating-stars { font-size: 20px; gap: 2px; }
  .mvd-rating-avg { font-size: 16px; }
  .mvd-rating-hint {
    margin-left: 0; width: 100%;
    text-align: center; font-size: 12px;
  }
}
.mvd-rating-guest { background: #f8fafc; border-color: #eef2f5; }
.mvd-rating-stars-static { display: flex; gap: 4px; font-size: 22px; }
.mvd-rating-stars-static i { color: #cbd5e1; }
.mvd-rating-stars-static i.fa-solid { color: #f59e0b; }
/* ─── STYLE #13: БЛОГ-КАРТОЧКА ─── */
.modern-blog-card {
  display: flex !important; flex-direction: column !important;
  background: #fff !important; border-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important; height: 100% !important;
  text-decoration: none !important; color: inherit !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.modern-blog-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
.modern-blog-card-img {
  display: block !important; width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative !important; overflow: hidden !important;
  border-radius: 0 !important; margin-bottom: 0 !important;
}
.modern-blog-badge {
  position: absolute !important; top: 10px !important; left: 10px !important;
  background-color: rgba(0, 0, 0, 0.6) !important; color: #fff !important;
  padding: 4px 8px !important; border-radius: 4px !important;
  font-size: 12px !important; font-weight: 600 !important;
  z-index: 2 !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.modern-blog-card-body {
  padding: 16px !important; display: flex !important;
  flex-direction: column !important; flex: 1 1 auto !important;
}
.modern-blog-title {
  margin-bottom: 8px !important; line-height: 1.3 !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: #1a1a1a !important;
}
.modern-blog-text {
  margin-bottom: 12px !important; color: #555 !important;
  font-size: 14px !important; line-height: 1.4 !important;
}
.modern-blog-author {
  display: flex !important; align-items: center !important;
  gap: 10px !important; margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #f0f0f0 !important;
}
.modern-blog-author img,
.modern-blog-author > img,
.modern-blog-card .modern-blog-author img {
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; max-width: 36px !important;
  min-height: 36px !important; max-height: 36px !important;
  border-radius: 50% !important; object-fit: cover !important;
  display: block !important; flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
.modern-blog-author-info {
  display: flex !important; flex-direction: column !important;
  min-width: 0 !important; flex: 1 1 auto !important;
  overflow: hidden !important;
}
.modern-blog-author-name {
  font-size: 13px !important; font-weight: 600 !important;
  color: #1a1a1a !important; overflow: hidden !important;
  text-overflow: ellipsis !important; white-space: nowrap !important;
  line-height: 1.2 !important;
}
.modern-blog-date {
  font-size: 12px !important; color: #888 !important;
  line-height: 1.2 !important; margin-top: 2px !important;
}
.modern-blog-card-footer {
  padding: 0 16px 16px !important; margin-top: auto !important;
}
.modern-blog-read-btn {
  background: #e74c3c !important; color: #fff !important;
  padding: 8px 16px !important; border-radius: 8px !important;
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; font-weight: 600 !important;
  font-size: 13px !important; transition: background 0.2s ease !important;
  text-decoration: none !important;
}
.modern-blog-read-btn:hover { background: #c0392b !important; }
.d-flex.flex-wrap.mx-0 > [class*="col-"] {
  padding-left: 10px !important; padding-right: 10px !important;
  margin-bottom: 20px !important;
}
.d-flex.flex-wrap.mx-0 {
  margin-left: -10px !important; margin-right: -10px !important;
}

/* FIX: Картинка поста не выходит за пределы карточки */
.post, .post-body, .post-media,
.post-media-image-wrapper, .post-media-image {
  overflow: hidden !important; max-width: 100% !important;
}
.post img, .post-media img, .post-media-image img, .post-body img {
  max-width: 100% !important; width: 100% !important;
  height: auto !important; display: block !important;
  object-fit: cover !important; border-radius: 0 !important;
}
.post-media-image-wrapper > div, .post-media-image > div {
  max-width: 100% !important; background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* FIX: Компактные виджеты в правой колонке */
@media (max-width: 991px) {
  .col-lg-4 .card, .col-xl-4 .card, .col-md-4 .card { border-radius: 14px !important; }
  .col-lg-4 .card-body, .col-xl-4 .card-body, .col-md-4 .card-body {
    padding: 10px 12px !important;
  }
  .col-lg-4 .card-header, .col-xl-4 .card-header, .col-md-4 .card-header {
    padding: 8px 12px !important;
  }
  .col-lg-4 .card-header, .col-lg-4 .card-header strong,
  .col-lg-4 .card-header .h6, .col-lg-4 .heading-small,
  .col-lg-4 .section-title {
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: -0.1px !important;
  }
  .col-lg-4 .card-header svg, .col-lg-4 .card-header .main-icon,
  .col-lg-4 .card-header i {
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; max-width: 22px !important;
    min-height: 22px !important; max-height: 22px !important;
  }
  .col-lg-4 .btn, .col-lg-4 .btn-primary, .col-lg-4 .btn-danger,
  .col-lg-4 .btn-light, .col-lg-4 a.btn {
    font-size: 11px !important; font-weight: 600 !important;
    padding: 4px 10px !important; border-radius: 20px !important;
    letter-spacing: 0 !important;
  }
  .col-lg-4 .circled-user-box .name, .col-lg-4 .user-box .name,
  .col-lg-4 .card-body .name, .col-lg-4 .card-body .user-name {
    font-size: 11px !important; font-weight: 600 !important;
    color: #1a1a2e !important; letter-spacing: -0.1px !important;
  }
  html[data-theme="dark"] .col-lg-4 .circled-user-box .name,
  body.night-mode .col-lg-4 .circled-user-box .name,
  body.dark-mode .col-lg-4 .circled-user-box .name { color: #fff !important; }
  .col-lg-4 .circled-user-box img, .col-lg-4 .user-box img,
  .col-lg-4 .card-body img {
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; max-width: 44px !important;
    min-height: 44px !important; max-height: 44px !important;
  }
  .col-lg-4 .circled-user-box { margin-bottom: 8px !important; }
  .col-lg-4 .card-header {
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 8px !important;
  }
  html[data-theme="dark"] .col-lg-4 .card-header,
  body.night-mode .col-lg-4 .card-header,
  body.dark-mode .col-lg-4 .card-header {
    border-bottom-color: #2a2a3e !important;
  }
  .col-lg-4 .card-body a { font-size: 11px !important; }
}

/* FIX: Заголовки виджетов в правом сайдбаре (h6) */
.col-lg-4 h6.pb0, .col-md-4 h6.pb0, .col-xl-4 h6.pb0,
.sg-offcanvas-sidebar h6.pb0, h6.pb0 {
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: -0.1px !important; color: #1a1a2e !important;
  margin: 0 !important; padding: 0 !important;
  line-height: 1.3 !important; display: flex !important;
  align-items: center !important; gap: 6px !important;
}
html[data-theme="dark"] h6.pb0, body.night-mode h6.pb0,
body.dark-mode h6.pb0 { color: #ffffff !important; }
h6.pb0 .svg-container {
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; max-width: 18px !important;
  min-height: 18px !important; max-height: 18px !important;
  flex-shrink: 0 !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
}
h6.pb0 .svg-container svg {
  width: 100% !important; height: 100% !important; display: block !important;
}
h6.pb0 + .float-end .btn, h6.pb0 + .btn,
.card-header .btn.float-end, .card-header a.btn.float-end,
.card-header button.btn.float-end {
  font-size: 11px !important; font-weight: 600 !important;
  padding: 4px 10px !important; border-radius: 20px !important;
  letter-spacing: 0 !important;
}
h6.pb0 .btn, h6.pb0 a.btn, .card-header .btn-primary {
  font-size: 11px !important; font-weight: 600 !important;
  padding: 4px 10px !important; border-radius: 20px !important;
}

/* Обложка — ВЫСОТА */
.profile-cover-wrapper {
  width: 100% !important; max-width: 100% !important;
  height: 300px !important; min-height: 300px !important;
  max-height: 300px !important; position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 16px 16px !important;
  display: block !important; margin: 0 !important;
  padding: 0 !important; box-sizing: border-box !important;
}
.profile-cover-wrapper img,
.profile-cover-wrapper .js_position-cover-cropped,
.profile-cover-wrapper .js_position-cover-full {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 0 16px 16px !important;
}

/* Стили для уведомлений */
.js_live-requests .counter.red {
  background: #e74c3c !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important;
  padding: 2px 5px !important; border-radius: 10px !important;
  min-width: 16px !important; text-align: center !important;
  line-height: 1.2 !important;
}
.js_live-requests > a { position: relative !important; }
.js_live-requests .counter.red {
  position: absolute !important; top: -4px !important; right: -8px !important;
}
.js_live-requests .btn-primary,
.js_live-requests .js_friend-accept {
  background: #e74c3c !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  padding: 6px 12px !important; font-size: 12px !important;
  font-weight: 700 !important;
}
.js_live-requests .btn-danger,
.js_live-requests .js_friend-decline {
  background: #f0f2f5 !important; color: #444 !important;
  border: 1px solid #dde0e8 !important; border-radius: 8px !important;
  padding: 5px 10px !important; font-size: 12px !important;
  font-weight: 700 !important;
}

html { overflow-y: scroll !important; }

/* ─── STYLE #14: САЙДБАР PIXPIK ─── */
/* ── Контейнер — мягкая светлая подложка, скруглённые углы ── */
.main-side-nav-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 8px 6px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.main-side-nav-card .card-body {
  padding: 0 !important;
  background: transparent !important;
}
.main-side-nav > li {
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  border-radius: 0 !important;
}
.main-side-nav > li > a, .main-side-nav ul li a,
.main-side-nav .collapse ul li a {
  display: flex !important; align-items: center !important;
  gap: 18px !important; padding: 16px 22px !important;
  margin: 0 !important; color: #2c2d2e !important;
  font-size: 15.5px !important; font-weight: 500 !important;
  line-height: 1.3 !important; text-decoration: none !important;
  background: transparent !important; border-radius: 0 !important;
  transition: color .15s ease !important; min-height: 56px !important;
  box-sizing: border-box !important; position: relative !important;
}
.main-side-nav > li > a:hover, .main-side-nav ul li a:hover,
.main-side-nav .collapse ul li a:hover {
  background: transparent !important; color: #000 !important;
}
.main-side-nav > li > a:hover .main-icon svg,
.main-side-nav > li > a:hover .main-icon svg *,
.main-side-nav > li > a:hover .main-icon path,
.main-side-nav ul li a:hover .main-icon svg,
.main-side-nav ul li a:hover .main-icon svg * {
  stroke: #2c2d2e !important; color: #2c2d2e !important;
}
.main-side-nav > li.active > a,
.main-side-nav > li > a[aria-expanded="true"],
.main-side-nav .collapse ul li.active a {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
.main-side-nav .main-icon, .main-side-nav .main-icon svg,
.main-side-nav > li > a > svg, .main-side-nav ul li a > svg {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; max-width: 26px !important;
  max-height: 26px !important; flex-shrink: 0 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; margin: 0 !important;
  padding: 0 !important; background: transparent !important;
}
.main-side-nav .main-icon svg, .main-side-nav .main-icon svg *,
.main-side-nav .main-icon path, .main-side-nav .main-icon line,
.main-side-nav .main-icon polyline, .main-side-nav .main-icon polygon,
.main-side-nav .main-icon circle, .main-side-nav .main-icon ellipse,
.main-side-nav .main-icon rect, .main-side-nav .main-icon g {
  fill: none !important; stroke: #8a8f98 !important;
  color: #8a8f98 !important; stroke-width: 1.6 !important;
}
.main-side-nav > li.active > a .main-icon svg,
.main-side-nav > li.active > a .main-icon svg *,
.main-side-nav > li.active > a .main-icon path,
.main-side-nav > li > a[aria-expanded="true"] .main-icon svg,
.main-side-nav > li > a[aria-expanded="true"] .main-icon svg *,
.main-side-nav > li > a[aria-expanded="true"] .main-icon path,
.main-side-nav .collapse ul li.active a .main-icon svg,
.main-side-nav .collapse ul li.active a .main-icon svg *,
.main-side-nav .collapse ul li.active a .main-icon path {
  stroke: #2c2d2e !important; color: #2c2d2e !important;
  fill: none !important;
}
.main-side-nav > li > a > i.fa, .main-side-nav > li > a > i.fas,
.main-side-nav > li > a > i.far, .main-side-nav > li > a > i.fa-solid {
  color: #8a8f98 !important; font-size: 22px !important;
  width: 26px !important; height: 26px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; text-align: center !important;
}
.main-side-nav > li.active > a > i.fa,
.main-side-nav > li.active > a > i.fas,
.main-side-nav > li.active > a > i.far,
.main-side-nav > li.active > a > i.fa-solid { color: #2c2d2e !important; }
.main-side-nav a[data-bs-toggle="collapse"]::after {
  margin-left: auto !important; font-size: 12px !important;
  color: #b0b3b8 !important; opacity: 1 !important;
}
.main-side-nav > li > a[aria-expanded="true"]::after { color: #8a8f98 !important; }
.main-side-nav .collapse ul {
  padding: 0 !important; margin: 0 !important;
  list-style: none !important; background: transparent !important;
  border: none !important;
}
.main-side-nav .collapse ul li {
  margin: 0 !important; background: transparent !important; border: none !important;
}
.main-side-nav .collapse ul li a {
  padding: 14px 22px 14px 60px !important;
  margin: 0 !important; font-size: 14.5px !important;
  color: #4a5568 !important; min-height: 50px !important;
}
.main-side-nav .collapse ul li a:hover { color: #000 !important; }
.main-side-nav .collapse ul li.active a {
  color: #000 !important; font-weight: 600 !important;
}
.main-side-nav > li.pkb-nav-section {
  padding: 22px 22px 10px !important; margin: 0 !important;
  background: transparent !important; border-radius: 0 !important;
  border-top: 1px solid #f0f2f5 !important; border-bottom: none !important;
  color: #939393 !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: .6px !important;
  text-transform: uppercase !important; cursor: default !important;
  user-select: none !important;
}
.main-side-nav > li.pkb-nav-section:first-child {
  border-top: none !important; padding-top: 8px !important;
}
.sidebar-badge {
  margin-left: auto !important; background: #f0f2f5 !important;
  color: #8a8f98 !important; font-size: 12px !important;
  font-weight: 600 !important; padding: 2px 8px !important;
  border-radius: 10px !important; min-width: 22px !important;
  height: 20px !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  line-height: 1 !important; box-sizing: border-box !important;
}
.main-side-nav > li.active > a .sidebar-badge,
.main-side-nav > li > a[aria-expanded="true"] .sidebar-badge {
  background: #e4e6eb !important; color: #2c2d2e !important;
}
.main-side-nav > li > a img.mr10 {
  width: 26px !important; height: 26px !important;
  object-fit: contain !important; margin: 0 !important;
  padding: 0 !important; border-radius: 0 !important;
  background: transparent !important; opacity: .75 !important;
}
#sidebar-competitions-item.active > a,
#sidebar-dating-item.active > a,
#sidebar-competitions-item > a[aria-expanded="true"] {
  background: transparent !important; color: #000 !important;
  font-weight: 700 !important;
}
#sidebar-competitions-item.active > a .main-icon svg,
#sidebar-competitions-item.active > a .main-icon svg *,
#sidebar-dating-item.active > a .main-icon svg,
#sidebar-dating-item.active > a .main-icon svg *,
#sidebar-competitions-item > a[aria-expanded="true"] .main-icon svg,
#sidebar-competitions-item > a[aria-expanded="true"] .main-icon svg * {
  stroke: #2c2d2e !important; fill: none !important;
}
.main-side-nav > li > a:focus,
.main-side-nav > li > a:focus-visible,
.main-side-nav > li > a:active {
  outline: none !important; box-shadow: none !important;
}
.main-side-nav .main-icon svg, .main-side-nav .main-icon svg *,
.main-side-nav .main-icon path, .main-side-nav > li > a > svg,
.main-side-nav > li > a > svg * {
  stroke: #8a8f98 !important; fill: none !important; color: #8a8f98 !important;
}
.main-side-nav > li.active > a .main-icon svg,
.main-side-nav > li.active > a .main-icon svg *,
.main-side-nav > li.active > a .main-icon path {
  stroke: #2c2d2e !important; color: #2c2d2e !important; fill: none !important;
}
@media (max-width: 991px) {
  .main-side-nav > li > a, .main-side-nav ul li a {
    padding: 14px 18px !important; min-height: 52px !important;
    font-size: 15px !important; gap: 16px !important;
  }
  .main-side-nav .collapse ul li a {
    padding: 12px 18px 12px 52px !important;
    font-size: 14px !important; min-height: 46px !important;
  }
  .main-side-nav > li.pkb-nav-section {
    padding: 18px 18px 8px !important;
  }
}
@media (max-width: 767px) {
  .footer-bottom-bar { z-index: 10000 !important; }
  .sg-offcanvas-sidebar, .mv-nav-drawer, .mv-nav-drawer-panel {
    z-index: 9999 !important; padding-bottom: 80px !important;
    box-sizing: border-box !important;
  }
  .main-side-nav { padding-bottom: 90px !important; }
}

/* Сайдбар — НОЧНОЙ РЕЖИМ */
body.night-mode .main-side-nav-card {
  background: #242526 !important; border-color: #3a3b3c !important;
}
body.night-mode .main-side-nav-card .card-body,
body.night-mode .main-side-nav,
body.night-mode .main-side-nav > li {
  background: transparent !important; border: none !important;
}
body.night-mode .main-side-nav > li > a,
body.night-mode .main-side-nav ul li a,
body.night-mode .main-side-nav .collapse ul li a { color: #e1e3e6 !important; }
body.night-mode .main-side-nav > li > a:hover,
body.night-mode .main-side-nav > li:not(.ptb5) > a:hover,
body.night-mode .main-side-nav ul li a:hover,
body.night-mode .main-side-nav .collapse ul li a:hover {
  background: #3a3b3c !important; color: #ffffff !important;
}
body.night-mode .main-side-nav > li.active > a,
body.night-mode .main-side-nav > li > a[aria-expanded="true"],
body.night-mode .main-side-nav .collapse ul li.active a {
  background: #3a3b3c !important; color: #ffffff !important;
  font-weight: 600 !important;
}
body.night-mode .main-side-nav > li.active > a:hover,
body.night-mode .main-side-nav > li > a[aria-expanded="true"]:hover {
  background: #4a4b4c !important;
}
body.night-mode .main-side-nav .main-icon,
body.night-mode .main-side-nav > li > a .main-icon,
body.night-mode .main-side-nav > li > a i.main-icon,
body.night-mode .main-side-nav > li > a > svg,
body.night-mode .main-side-nav > li > a > i.main-icon {
  background-color: transparent !important; fill: none !important;
  stroke: #b0b3b8 !important; color: #b0b3b8 !important;
}
body.night-mode .main-side-nav .main-icon svg,
body.night-mode .main-side-nav .main-icon svg *,
body.night-mode .main-side-nav .main-icon path,
body.night-mode .main-side-nav .main-icon line,
body.night-mode .main-side-nav .main-icon polyline,
body.night-mode .main-side-nav .main-icon polygon,
body.night-mode .main-side-nav .main-icon circle,
body.night-mode .main-side-nav .main-icon ellipse,
body.night-mode .main-side-nav .main-icon rect,
body.night-mode .main-side-nav .main-icon g,
body.night-mode .main-side-nav > li > a > svg,
body.night-mode .main-side-nav > li > a > svg *,
body.night-mode .main-side-nav > li > a > svg path,
body.night-mode .main-side-nav ul li a > svg,
body.night-mode .main-side-nav ul li a > svg * {
  fill: none !important; stroke: #b0b3b8 !important; color: #b0b3b8 !important;
}
body.night-mode .main-side-nav > li > a:hover .main-icon,
body.night-mode .main-side-nav > li > a:hover .main-icon svg,
body.night-mode .main-side-nav > li > a:hover .main-icon svg *,
body.night-mode .main-side-nav > li > a:hover .main-icon path,
body.night-mode .main-side-nav > li > a:hover .main-icon line,
body.night-mode .main-side-nav > li > a:hover .main-icon polyline,
body.night-mode .main-side-nav > li > a:hover .main-icon polygon,
body.night-mode .main-side-nav > li > a:hover .main-icon circle,
body.night-mode .main-side-nav > li > a:hover .main-icon ellipse,
body.night-mode .main-side-nav > li > a:hover .main-icon rect,
body.night-mode .main-side-nav > li > a:hover .main-icon g,
body.night-mode .main-side-nav > li > a:hover > svg,
body.night-mode .main-side-nav > li > a:hover > svg *,
body.night-mode .main-side-nav ul li a:hover .main-icon,
body.night-mode .main-side-nav ul li a:hover .main-icon svg,
body.night-mode .main-side-nav ul li a:hover .main-icon svg *,
body.night-mode .main-side-nav ul li a:hover .main-icon path {
  fill: none !important; stroke: #ffffff !important; color: #ffffff !important;
}
body.night-mode .main-side-nav > li.active > a .main-icon,
body.night-mode .main-side-nav > li.active > a .main-icon svg,
body.night-mode .main-side-nav > li.active > a .main-icon svg *,
body.night-mode .main-side-nav > li.active > a .main-icon path,
body.night-mode .main-side-nav > li.active > a .main-icon line,
body.night-mode .main-side-nav > li.active > a .main-icon polyline,
body.night-mode .main-side-nav > li.active > a .main-icon polygon,
body.night-mode .main-side-nav > li.active > a .main-icon circle,
body.night-mode .main-side-nav > li.active > a .main-icon ellipse,
body.night-mode .main-side-nav > li.active > a .main-icon rect,
body.night-mode .main-side-nav > li.active > a .main-icon g,
body.night-mode .main-side-nav > li > a[aria-expanded="true"] .main-icon,
body.night-mode .main-side-nav > li > a[aria-expanded="true"] .main-icon svg,
body.night-mode .main-side-nav > li > a[aria-expanded="true"] .main-icon svg *,
body.night-mode .main-side-nav > li > a[aria-expanded="true"] .main-icon path,
body.night-mode .main-side-nav .collapse ul li.active a .main-icon,
body.night-mode .main-side-nav .collapse ul li.active a .main-icon svg,
body.night-mode .main-side-nav .collapse ul li.active a .main-icon svg *,
body.night-mode .main-side-nav .collapse ul li.active a .main-icon path {
  fill: none !important; stroke: #ffffff !important; color: #ffffff !important;
}
body.night-mode .main-side-nav > li > a > i.fa,
body.night-mode .main-side-nav > li > a > i.fas,
body.night-mode .main-side-nav > li > a > i.far,
body.night-mode .main-side-nav > li > a > i.fa-solid {
  color: #b0b3b8 !important;
}
body.night-mode .main-side-nav > li > a:hover > i.fa,
body.night-mode .main-side-nav > li > a:hover > i.fas { color: #ffffff !important; }
body.night-mode .main-side-nav > li.active > a > i.fa,
body.night-mode .main-side-nav > li.active > a > i.fas { color: #ffffff !important; }
body.night-mode .main-side-nav a[data-bs-toggle="collapse"]::after {
  color: #8a8d91 !important; border-color: #8a8d91 !important;
}
body.night-mode .main-side-nav > li > a[aria-expanded="true"]::after,
body.night-mode .main-side-nav > li.active > a[data-bs-toggle="collapse"]::after {
  color: #ffffff !important; border-color: #ffffff !important;
}
body.night-mode .main-side-nav .collapse ul li a { color: #8a8d91 !important; }
body.night-mode .main-side-nav .collapse ul li a:hover {
  color: #ffffff !important; background: #3a3b3c !important;
}
body.night-mode .main-side-nav .collapse ul li.active a {
  color: #ffffff !important; background: #3a3b3c !important;
}
body.night-mode .main-side-nav > li.pkb-nav-section {
  color: #6d6d6d !important; border-top-color: #3a3b3c !important;
}
body.night-mode .sidebar-badge {
  background: #3a3b3c !important; color: #b0b3b8 !important;
}
body.night-mode .main-side-nav > li.active > a .sidebar-badge,
body.night-mode .main-side-nav > li > a[aria-expanded="true"] .sidebar-badge {
  background: #4a4b4c !important; color: #e1e3e6 !important;
}
body.night-mode .main-side-nav img { border-color: transparent !important; }

/* ─── STYLE #16: FTABS + STORIES ─── */
.ftabs-wrapper {
  background: #fff; border-radius: 50px; padding: 8px;
  display: flex; align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid #eef0f2; margin-bottom: 12px; position: relative;
}
.ftabs-viewport { overflow: hidden; flex: 1; }
.ftabs-track {
  display: flex; gap: 10px;
  transition: transform .5s cubic-bezier(0.25,1,0.5,1);
  will-change: transform;
}
.ftabs-item {
  width: 82px; min-width: 82px; height: 70px; background: #f1f3f5;
  border-radius: 18px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, transform .1s ease;
  user-select: none; flex-shrink: 0; padding: 4px 6px; text-align: center;
}
.ftabs-item:hover { background: #e9edf0; }
.ftabs-item:active { transform: scale(0.96); }
.ftabs-item i { font-size: 19px; color: #e74c3c; margin-bottom: 5px; line-height: 1; }
.ftabs-title {
  font-size: 13px; font-weight: 700; color: #333; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftabs-sub {
  font-size: 10px; font-weight: 500; color: #8a9199;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftabs-item.active {
  background: #e74c3c; box-shadow: 0 4px 12px rgba(231,76,60,0.35);
}
.ftabs-item.active i, .ftabs-item.active .ftabs-title { color: #fff; }
.ftabs-item.active .ftabs-sub { color: rgba(255,255,255,0.9); }
.ftabs-nav {
  width: 42px; height: 42px; min-width: 42px; border-radius: 50%; border: none;
  background: #e74c3c; color: #fff; font-size: 15px; cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  flex-shrink: 0; box-shadow: 0 4px 10px rgba(231,76,60,0.3);
  transition: background-color .2s, transform .15s;
}
.ftabs-nav:hover { background: #c0392b; transform: scale(1.06); }
.ftabs-prev { margin-right: 8px; }
.ftabs-next { margin-left: 8px; }
.ftabs-nav.ftabs-hidden { display: none; }
[dir="RTL"] .ftabs-prev i, [dir="RTL"] .ftabs-next i { transform: scaleX(-1); }
@media (max-width: 575px) {
  .ftabs-wrapper { border-radius: 22px; padding: 7px; }
  .ftabs-item { width: 74px; min-width: 74px; height: 64px; }
  .ftabs-nav { width: 38px; height: 38px; min-width: 38px; }
}

/* Сторис — единый стиль с карточками */
body .stories-wrapper-container,
body.card.stories-wrapper-container,
body.night-mode .stories-wrapper-container,
body.night-mode.card.stories-wrapper-container {
  background: var(--bg-card, var(--card-bg, #242526)) !important;
  border: 1px solid var(--border-color, #3a3b3c) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  margin-bottom: 12px !important; overflow: hidden !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
body .stories-wrapper-container .card-body,
body .stories-wrapper-container .stories-wrapper,
body .stories-wrapper-container #stories,
body .stories-wrapper-container #stories.stories,
body.night-mode .stories-wrapper-container .card-body,
body.night-mode .stories-wrapper-container .stories-wrapper,
body.night-mode .stories-wrapper-container #stories,
body.night-mode .stories-wrapper-container #stories.stories {
  background: transparent !important; border-radius: 12px !important;
  overflow: hidden !important;
}
/* ─── STYLE #39: WG-PROFILE-CARD ─── */
.wg-profile-card {
  background: #ffffff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f2f5; padding: 14px 12px 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 100%; width: 100%; margin: 0 auto 20px;
  position: relative; box-sizing: border-box;
}
html[data-theme="dark"] .wg-profile-card,
body.night-mode .wg-profile-card,
body.dark-mode .wg-profile-card {
  background: #1c1c1e; border-color: #2c2c2e;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.wg-edit-btn-top {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; background: #f8f9fa; border: none;
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s ease;
  text-decoration: none; z-index: 5;
}
.wg-edit-btn-top:hover { background: #e9ecef; transform: scale(1.05); }
.wg-edit-btn-top svg { width: 13px; height: 13px; color: #4a4a4a; }
html[data-theme="dark"] .wg-edit-btn-top,
body.night-mode .wg-edit-btn-top,
body.dark-mode .wg-edit-btn-top { background: #2c2c2e; }
html[data-theme="dark"] .wg-edit-btn-top svg,
body.night-mode .wg-edit-btn-top svg,
body.dark-mode .wg-edit-btn-top svg { color: #b0b3b8; }

.wg-avatar-wrapper {
  position: relative; width: 70px; height: 70px; margin: 0 auto 8px;
}
.wg-avatar-ring {
  width: 70px; height: 70px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, #e74c3c, #e67e22);
  display: flex; align-items: center; justify-content: center;
}
.wg-avatar-ring img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; border: 2px solid #fff;
}
html[data-theme="dark"] .wg-avatar-ring img,
body.night-mode .wg-avatar-ring img,
body.dark-mode .wg-avatar-ring img { border-color: #1c1c1e; }

.wg-user-name {
  text-align: center; font-size: 15px; font-weight: 700;
  color: #1a1a2e; margin-bottom: 2px; line-height: 1.2;
}
html[data-theme="dark"] .wg-user-name,
body.night-mode .wg-user-name,
body.dark-mode .wg-user-name { color: #fff; }
.wg-user-handle {
  text-align: center; font-size: 11px; color: #888;
  margin-bottom: 10px; line-height: 1.2;
}

.wg-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5px; margin-bottom: 10px;
}
.wg-stat-item {
  background: #f8f9fa; border-radius: 10px; padding: 7px 3px 6px;
  text-align: center; text-decoration: none !important;
  transition: all 0.2s ease; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 58px; cursor: pointer; overflow: hidden;
}
.wg-stat-item:hover {
  border-color: #4a4a4a; transform: translateY(-2px);
}
html[data-theme="dark"] .wg-stat-item,
body.night-mode .wg-stat-item,
body.dark-mode .wg-stat-item { background: #2c2c2e; }
html[data-theme="dark"] .wg-stat-item:hover,
body.night-mode .wg-stat-item:hover,
body.dark-mode .wg-stat-item:hover { border-color: #b0b3b8; }
.wg-stat-icon {
  width: 26px; height: 26px; margin: 0 auto 3px;
  background: #fff; border-radius: 8px; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04); flex-shrink: 0;
}
html[data-theme="dark"] .wg-stat-icon,
body.night-mode .wg-stat-icon,
body.dark-mode .wg-stat-icon { background: #1c1c1e; }
.wg-stat-icon svg { width: 13px; height: 13px; color: #4a4a4a; }
html[data-theme="dark"] .wg-stat-icon svg,
body.night-mode .wg-stat-icon svg,
body.dark-mode .wg-stat-icon svg { color: #b0b3b8; }
.wg-stat-value {
  font-size: 14px; font-weight: 700; color: #1a1a2e;
  line-height: 1.1; display: block !important;
}
html[data-theme="dark"] .wg-stat-value,
body.night-mode .wg-stat-value,
body.dark-mode .wg-stat-value { color: #fff; }
.wg-stat-label {
  font-size: 9px; color: #999; margin-top: 1px;
  font-weight: 500; display: block !important;
  word-wrap: break-word; overflow-wrap: break-word;
  line-height: 1.1; text-align: center;
}

.wg-balance-card {
  background: linear-gradient(135deg, #fff8e1 0%, #ffeeba 50%, #ffe8a3 100%);
  border: 1px solid #ffe4a0; border-radius: 12px;
  padding: 10px 12px; position: relative; overflow: hidden;
}
.wg-balance-card::before {
  content: ''; position: absolute; top: -15px; right: -15px;
  width: 60px; height: 60px; background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}
html[data-theme="dark"] .wg-balance-card,
body.night-mode .wg-balance-card,
body.dark-mode .wg-balance-card {
  background: linear-gradient(135deg, #3a3520 0%, #2c2818 100%);
  border-color: #4a4028;
}
html[data-theme="dark"] .wg-balance-card::before,
body.night-mode .wg-balance-card::before,
body.dark-mode .wg-balance-card::before { background: rgba(255, 255, 255, 0.08); }
.wg-balance-label {
  font-size: 10px; color: #8a6d1f; font-weight: 700;
  margin-bottom: 2px; position: relative; z-index: 1;
  text-transform: uppercase; letter-spacing: 0.5px;
}
html[data-theme="dark"] .wg-balance-label,
body.night-mode .wg-balance-label,
body.dark-mode .wg-balance-label { color: #c9a84a; }
.wg-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1; gap: 8px;
}
.wg-balance-amount {
  font-size: 18px; font-weight: 800; color: #1c1e21;
  letter-spacing: -0.3px; display: block !important; line-height: 1.1;
}
html[data-theme="dark"] .wg-balance-amount,
body.night-mode .wg-balance-amount,
body.dark-mode .wg-balance-amount { color: #fff; }

.wg-coins-icon { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.wg-coin {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  animation: wgFloat 2.5s ease-in-out infinite;
}
.wg-coin-red {
  background: linear-gradient(135deg, #ffb800, #e6a500);
  z-index: 2; position: relative; animation-delay: 0s;
}
.wg-coin-orange {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  margin-left: -8px; z-index: 1; position: relative; animation-delay: 0.6s;
}
.wg-coin svg {
  width: 12px; height: 12px; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
@keyframes wgFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.wg-points-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #27ae60; color: #fff; font-size: 10px;
  font-weight: 600; padding: 3px 8px; border-radius: 14px;
  margin-top: 6px; position: relative; z-index: 1;
  cursor: pointer; text-decoration: none;
}
.wg-points-badge:hover { background: #219a52; text-decoration: none; }
html[data-theme="dark"] .wg-points-badge,
body.night-mode .wg-points-badge,
body.dark-mode .wg-points-badge { background: #27ae60; color: #fff; }
html[data-theme="dark"] .wg-points-badge:hover,
body.night-mode .wg-points-badge:hover,
body.dark-mode .wg-points-badge:hover { background: #219a52; }
.wg-points-badge svg { width: 10px; height: 10px; }

.wg-balance-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin-top: 8px; position: relative; z-index: 1;
}
.wg-btn {
  text-decoration: none !important; border-radius: 8px;
  padding: 7px 6px; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 3px; transition: all 0.2s ease; text-align: center;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0;
}
.wg-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.wg-btn-send {
  background: #4a4a4a; color: #fff !important; border: none;
  box-shadow: 0 3px 10px rgba(74,74,74,0.25);
}
.wg-btn-send:hover {
  background: #2c2d2e; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(74,74,74,0.35);
}
html[data-theme="dark"] .wg-btn-send,
body.night-mode .wg-btn-send,
body.dark-mode .wg-btn-send { background: #b0b3b8; color: #1c1e21 !important; }
html[data-theme="dark"] .wg-btn-send:hover,
body.night-mode .wg-btn-send:hover,
body.dark-mode .wg-btn-send:hover { background: #e1e3e6; }
.wg-btn-topup {
  background: #fff; color: #1a1a2e !important;
  border: 1.5px solid #e4e6eb;
}
.wg-btn-topup:hover {
  border-color: #4a4a4a; color: #1c1e21 !important;
  transform: translateY(-1px);
}
html[data-theme="dark"] .wg-btn-topup,
body.night-mode .wg-btn-topup,
body.dark-mode .wg-btn-topup {
  background: #2c2c2e; color: #fff !important; border-color: #3a3a3c;
}
html[data-theme="dark"] .wg-btn-topup:hover,
body.night-mode .wg-btn-topup:hover,
body.dark-mode .wg-btn-topup:hover { border-color: #b0b3b8; color: #fff !important; }

@media (max-width: 767px) { .wg-profile-card { display: none !important; } }

@media (max-width: 480px) {
  .wg-profile-card { padding: 12px 10px 10px; }
  .wg-avatar-wrapper { width: 60px; height: 60px; }
  .wg-avatar-ring { width: 60px; height: 60px; }
  .wg-user-name { font-size: 14px; }
  .wg-balance-amount { font-size: 16px; }
  .wg-stats-grid { gap: 4px; }
  .wg-stat-item { padding: 6px 3px 5px; min-height: 52px; }
  .wg-stat-icon { width: 24px; height: 24px; }
  .wg-stat-icon svg { width: 12px; height: 12px; }
  .wg-stat-value { font-size: 13px; }
  .wg-stat-label { font-size: 8px; }
  .wg-balance-card { padding: 8px 10px; }
  .wg-coin { width: 22px; height: 22px; }
  .wg-coin svg { width: 10px; height: 10px; }
  .wg-btn { font-size: 10px; padding: 6px 8px; }
}

/* ─── STYLE #40: TRENDING WIDGET ─── */
.pixpik-trending-widget {
  background: #fff; border: 1px solid #eef0f2; border-radius: 20px;
  padding: 18px 20px 14px; margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pixpik-trending-widget:hover {
  box-shadow: 0 14px 40px rgba(231, 76, 60, 0.08);
}
.pt-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.pt-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: #fff5f5; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.pt-icon svg, .pt-icon-svg, .pt-icon-svg * {
  fill: #e74c3c !important; width: 18px; height: 18px;
}
.pt-title {
  font-size: 16px; font-weight: 800; color: #1a1a2e;
  margin: 0; line-height: 1.2;
}
.pt-body { display: flex; flex-direction: column; gap: 6px; }
.pt-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 12px; background: #f8fafc;
  border: 1px solid #eef0f2; border-radius: 11px;
  text-decoration: none !important; transition: all 0.15s ease;
}
.pt-item:hover {
  background: #fff; border-color: #e74c3c; transform: translateX(3px);
}
.pt-hash {
  font-size: 13.5px; font-weight: 700; color: #1a1a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-item:hover .pt-hash { color: #e74c3c; }
.pt-freq {
  font-size: 11.5px; font-weight: 600; color: #94a3b8;
  white-space: nowrap; flex-shrink: 0;
}
html[data-theme="dark"] .pixpik-trending-widget,
body.night-mode .pixpik-trending-widget,
body.dark-mode .pixpik-trending-widget {
  background: #242526; border-color: #3a3b3c;
}
html[data-theme="dark"] .pt-title,
body.night-mode .pt-title,
body.dark-mode .pt-title { color: #f0f0f0; }
html[data-theme="dark"] .pt-hash,
body.night-mode .pt-hash,
body.dark-mode .pt-hash { color: #e4e6eb; }
html[data-theme="dark"] .pt-item,
body.night-mode .pt-item,
body.dark-mode .pt-item { background: #2a2b2c; border-color: #3a3b3c; }
html[data-theme="dark"] .pt-header,
body.night-mode .pt-header,
body.dark-mode .pt-header { border-bottom-color: #3a3b3c; }
html[data-theme="dark"] .pt-item:hover,
body.night-mode .pt-item:hover,
body.dark-mode .pt-item:hover { background: #3a2626; border-color: #e74c3c; }
html[data-theme="dark"] .pt-item:hover .pt-hash,
body.night-mode .pt-item:hover .pt-hash,
body.dark-mode .pt-item:hover .pt-hash { color: #ffffff; }
html[data-theme="dark"] .pt-freq,
body.night-mode .pt-freq,
body.dark-mode .pt-freq { color: #8a8d91; }
@media (max-width: 575.98px) {
  .pixpik-trending-widget { padding: 14px 14px 12px; border-radius: 16px; }
  .pt-icon { width: 30px; height: 30px; }
  .pt-title { font-size: 15px; }
  .pt-item { padding: 8px 10px; }
  .pt-hash { font-size: 13px; }
  .pt-freq { font-size: 11px; }
}

/* ─── STYLE #41: WEATHER WIDGET ─── */
.sb-weather {
  background: transparent; border: none; border-radius: 0;
  padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0; width: 100%; position: relative; overflow: hidden;
  cursor: default; box-shadow: none; color: #1a1a2e; box-sizing: border-box;
}
html[data-theme="dark"] .sb-weather,
body.night-mode .sb-weather,
body.dark-mode .sb-weather,
.theme-dark .sb-weather {
  background: transparent; color: #ffffff; box-shadow: none;
}
.sb-weather-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
html[data-theme="dark"] .sb-weather-header,
body.night-mode .sb-weather-header,
body.dark-mode .sb-weather-header { border-bottom-color: #2c2c2e; }
.sb-weather-city {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 6px; background: #f8fafc; padding: 3px 8px;
  border-radius: 99px; border: 1px solid #eef0f2;
}
html[data-theme="dark"] .sb-weather-city,
body.night-mode .sb-weather-city,
body.dark-mode .sb-weather-city {
  background: #2c2c2e; border-color: #3a3a3c; color: #b0b0b3;
}
.sb-weather-temp {
  font-size: 32px; font-weight: 800; line-height: 1;
  letter-spacing: -1px; color: #1a1a2e; margin-bottom: 2px;
}
.sb-weather-temp sup {
  font-size: 14px; font-weight: 500; color: #94a3b8;
  margin-left: 1px; vertical-align: super;
}
html[data-theme="dark"] .sb-weather-temp,
body.night-mode .sb-weather-temp,
body.dark-mode .sb-weather-temp { color: #ffffff; }
html[data-theme="dark"] .sb-weather-temp sup,
body.night-mode .sb-weather-temp sup,
body.dark-mode .sb-weather-temp sup { color: #8e8e93; }
.sb-weather-desc {
  font-size: 12px; color: #64748b; font-weight: 500; line-height: 1.3;
}
html[data-theme="dark"] .sb-weather-desc,
body.night-mode .sb-weather-desc,
body.dark-mode .sb-weather-desc { color: #b0b0b3; }
.sb-weather-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #fff5f5, #ffe4e6);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  box-shadow: 0 3px 10px rgba(231, 76, 60, 0.12);
}
html[data-theme="dark"] .sb-weather-icon,
body.night-mode .sb-weather-icon,
body.dark-mode .sb-weather-icon {
  background: linear-gradient(135deg, #2c2c2e, #3a3a3c);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.sb-weather-details {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
html[data-theme="dark"] .sb-weather-details,
body.night-mode .sb-weather-details,
body.dark-mode .sb-weather-details { border-top-color: #2c2c2e; }
.sb-weather-details span {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; background: #f8fafc;
  border: 1px solid #eef0f2; border-radius: 8px;
  padding: 6px 3px; font-size: 9px; color: #94a3b8;
  font-weight: 600; text-align: center; line-height: 1.2;
}
.sb-weather-details span b {
  font-size: 11px; color: #1a1a2e; font-weight: 800; display: block;
}
html[data-theme="dark"] .sb-weather-details span,
body.night-mode .sb-weather-details span,
body.dark-mode .sb-weather-details span {
  background: #2c2c2e; border-color: #3a3a3c; color: #8e8e93;
}
html[data-theme="dark"] .sb-weather-details span b,
body.night-mode .sb-weather-details span b,
body.dark-mode .sb-weather-details span b { color: #ffffff; }
.sb-weather-updated {
  font-size: 9px; color: #cbd5e1; margin-top: 8px;
  text-align: right; font-weight: 500; letter-spacing: 0.2px;
}
html[data-theme="dark"] .sb-weather-updated,
body.night-mode .sb-weather-updated,
body.dark-mode .sb-weather-updated { color: #6a6a6e; }
@media (max-width: 575.98px) {
  .sb-weather { padding: 0; }
  .sb-weather-temp { font-size: 28px; }
  .sb-weather-temp sup { font-size: 12px; }
  .sb-weather-icon { width: 40px; height: 40px; font-size: 20px; }
  .sb-weather-desc { font-size: 11px; }
  .sb-weather-details { gap: 4px; margin-top: 8px; padding-top: 8px; }
  .sb-weather-details span { padding: 5px 2px; font-size: 8px; border-radius: 6px; }
  .sb-weather-details span b { font-size: 10px; }
}

/* ─── STYLE #42: VYNCE REELS WIDGET ─── */
.vynce-reels-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
html[data-theme="dark"] .vynce-reels-header,
body.night-mode .vynce-reels-header,
body.dark-mode .vynce-reels-header { border-bottom-color: #2a2a3e; }
.vynce-reels-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: #1a1a2e;
}
html[data-theme="dark"] .vynce-reels-title,
body.night-mode .vynce-reels-title,
body.dark-mode .vynce-reels-title { color: #ffffff; }
.vynce-reels-title::before {
  content: '🎬'; width: 26px; height: 26px;
  border-radius: 8px; background: #fff5f5;
  display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; flex-shrink: 0;
}
html[data-theme="dark"] .vynce-reels-title::before,
body.night-mode .vynce-reels-title::before,
body.dark-mode .vynce-reels-title::before { background: #2c2c2e; }
.vynce-reels-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 4px 10px; border-radius: 99px;
  background: #ffebee; color: #f44336 !important;
  font-weight: 700; font-size: 11px; text-decoration: none !important;
  transition: all 0.15s ease; white-space: nowrap;
}
.vynce-reels-link:hover { background: #f44336; color: #fff !important; }
html[data-theme="dark"] .vynce-reels-link,
body.night-mode .vynce-reels-link,
body.dark-mode .vynce-reels-link { background: #2c2c2e; color: #f44336 !important; }
html[data-theme="dark"] .vynce-reels-link:hover,
body.night-mode .vynce-reels-link:hover,
body.dark-mode .vynce-reels-link:hover { background: #f44336; color: #fff !important; }
.vynce-reels-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
}
.vynce-reel-item {
  position: relative; display: block; border-radius: 8px;
  overflow: hidden; aspect-ratio: 9/16; background: #111;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.15s ease;
}
.vynce-reel-item:hover { transform: translateY(-2px); }
html[data-theme="dark"] .vynce-reel-item,
body.night-mode .vynce-reel-item,
body.dark-mode .vynce-reel-item { background: #2c2c2e; }
.vynce-reel-thumb {
  width: 100%; height: 100%; background-size: cover;
  background-position: center; display: block;
}
.vynce-reel-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 26px; height: 26px;
  border-radius: 50%; background: rgba(244, 67, 54, 0.95);
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 10px;
  pointer-events: none; box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.vynce-reel-play i { margin-left: 1px; }
.vynce-reel-views {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0, 0, 0, 0.65); color: #fff;
  font-size: 9px; font-weight: 600; padding: 2px 5px;
  border-radius: 4px; display: flex; align-items: center;
  gap: 3px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vynce-reels-empty {
  padding: 16px; text-align: center; color: #94a3b8;
  font-size: 12px; grid-column: 1 / -1;
}

/* ─── STYLE #43: PIXPIK PRO WIDGET + POPUP ─── */
.pixpik-pro-widget {
  background: transparent; border: none; border-radius: 0;
  padding: 0; max-width: 100%; width: 100%;
  position: relative; overflow: visible; box-sizing: border-box;
  cursor: pointer; transition: none; box-shadow: none;
  color: #1a1a2e; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.pixpik-pro-widget:hover { transform: none; box-shadow: none; }
.pixpik-pro-widget > * { position: relative; z-index: 1; }
.pixpik-pro-widget .pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 30px; margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
}
.pixpik-pro-widget .pro-title {
  font-size: 16px; font-weight: 800; margin: 0 0 2px;
  color: #1a1a2e; line-height: 1.2;
}
.pixpik-pro-widget .pro-subtitle {
  font-size: 11px; color: #94a3b8; margin: 0 0 10px; line-height: 1.3;
}
.pixpik-pro-widget .pro-features {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.pixpik-pro-widget .pro-features li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 8px; font-size: 11.5px;
  font-weight: 600; color: #1a1a2e;
  border: 1.5px solid transparent; transition: transform 0.15s ease;
}
.pixpik-pro-widget .pro-features li:hover { transform: translateX(2px); }
.pixpik-pro-widget .pro-features li:nth-child(1) { background: #f0fdf4; border-color: #86efac; }
.pixpik-pro-widget .pro-features li:nth-child(2) { background: #eff6ff; border-color: #93c5fd; }
.pixpik-pro-widget .pro-features li:nth-child(3) { background: #fdf4ff; border-color: #e9d5ff; }
.pixpik-pro-widget .pro-features li::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 10px;
}
.pixpik-pro-widget .pro-features li:nth-child(1)::before {
  content: '⚡'; background: linear-gradient(135deg, #10b981, #059669);
}
.pixpik-pro-widget .pro-features li:nth-child(2)::before {
  content: '💳'; background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.pixpik-pro-widget .pro-features li:nth-child(3)::before {
  content: '★'; background: linear-gradient(135deg, #a855f7, #7e22ce);
}
.pixpik-pro-widget .pro-price {
  font-size: 20px; font-weight: 800; color: #1a1a2e;
  display: flex; align-items: baseline; gap: 3px; margin-bottom: 8px;
}
.pixpik-pro-widget .pro-price span {
  font-size: 11px; font-weight: 400; color: #94a3b8;
}
.pixpik-pro-widget .pro-cta {
  display: block; margin-top: 2px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; font-size: 12px; font-weight: 800;
  padding: 10px 16px; border-radius: 10px;
  text-decoration: none; border: none; cursor: pointer;
  text-align: center; width: 100%; transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(231, 76, 60, 0.3); letter-spacing: 0.2px;
}
.pixpik-pro-widget .pro-cta:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4); color: #fff;
}
.pixpik-pro-widget .pro-cta:active { transform: translateY(0); }

.pixpik-popup-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 99999; justify-content: center; align-items: center;
  padding: 16px; animation: pixpikFadeIn 0.25s ease;
}
.pixpik-popup-overlay.active { display: flex; }
@keyframes pixpikFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pixpikSlideUp {
  from { transform: translateY(24px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.pixpik-popup {
  background: #fff; border-radius: 20px; max-width: 420px;
  width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 20px 20px 16px; position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: pixpikSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box; color: #1a1a2e;
}
.pixpik-popup::-webkit-scrollbar { width: 4px; }
.pixpik-popup::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pixpik-popup .popup-close {
  position: absolute; top: 12px; right: 12px;
  background: #f1f5f9; border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex;
  align-items: center; justify-content: center;
  color: #64748b; font-size: 14px; cursor: pointer;
  transition: all 0.2s;
}
.pixpik-popup .popup-close:hover {
  background: #fee2e2; color: #e11d48; transform: rotate(90deg);
}
.pixpik-popup .popup-badge {
  display: inline-block;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; font-size: 9px; font-weight: 700;
  text-transform: uppercase; padding: 3px 12px;
  border-radius: 30px; margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
}
.pixpik-popup .popup-title {
  font-size: 17px; font-weight: 800; margin: 0 0 2px;
  color: #1a1a2e; line-height: 1.25;
}
.pixpik-popup .popup-subtitle {
  font-size: 12px; color: #94a3b8; margin: 0 0 12px; line-height: 1.4;
}
.pixpik-tabs {
  display: flex; gap: 5px; margin-bottom: 12px;
  background: #f1f5f9; border-radius: 11px; padding: 3px;
}
.pixpik-tab-btn {
  flex: 1; padding: 7px 0; border: none; border-radius: 8px;
  background: transparent; color: #64748b; font-size: 11.5px;
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.pixpik-tab-btn .tab-icon {
  font-size: 14px; display: block; margin-bottom: 1px;
}
.pixpik-tab-btn.active {
  background: #fff; color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pixpik-tab-btn.active[data-package="bronze"] { color: #cd7f32; }
.pixpik-tab-btn.active[data-package="silver"] { color: #8a8a8a; }
.pixpik-tab-btn.active[data-package="gold"]   { color: #f1c40f; }
.pixpik-package-card { display: none; animation: pixpikFadeIn 0.25s ease; }
.pixpik-package-card.active { display: block; }
.pixpik-package-card .package-price {
  font-size: 22px; font-weight: 800; color: #1a1a2e;
  margin-bottom: 10px; display: flex; align-items: baseline; gap: 4px;
}
.pixpik-package-card .package-price span {
  font-size: 11px; font-weight: 400; color: #94a3b8;
}
.pixpik-package-card .package-features {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
}
.pixpik-package-card .package-features li {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 8px; font-size: 11px;
  font-weight: 600; color: #1a1a2e; background: #f8fafc;
  border: 1px solid #eef0f2; line-height: 1.3;
}
.pixpik-package-card .package-features li::before {
  content: '✓'; flex-shrink: 0; width: 15px; height: 15px;
  border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pixpik-package-card .package-desc {
  font-size: 10.5px; color: #64748b; margin-bottom: 10px;
  line-height: 1.45; background: #f8fafc;
  padding: 8px 10px; border-radius: 9px;
}
.pixpik-popup .popup-btn {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; font-size: 12.5px; font-weight: 800;
  padding: 10px 0; border-radius: 10px;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(231, 76, 60, 0.3); letter-spacing: 0.2px;
}
.pixpik-popup .popup-btn:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4); color: #fff;
}

body.night-mode .pixpik-pro-widget .pro-title,
body.night-mode .pixpik-pro-widget .pro-price { color: #ffffff !important; }
body.night-mode .pixpik-pro-widget .pro-subtitle { color: #94a3b8 !important; }
body.night-mode .pixpik-pro-widget .pro-features li { color: #e4e6eb !important; }
body.night-mode .pixpik-pro-widget .pro-features li:nth-child(1) {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
body.night-mode .pixpik-pro-widget .pro-features li:nth-child(2) {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
body.night-mode .pixpik-pro-widget .pro-features li:nth-child(3) {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}
body.night-mode .pixpik-popup {
  background: #1a1a2e !important; color: #e4e6eb !important;
}
body.night-mode .pixpik-popup::-webkit-scrollbar-thumb { background: #4a4b4c !important; }
body.night-mode .pixpik-popup .popup-close {
  background: #2a2a3e !important; color: #b0b3b8 !important;
}
body.night-mode .pixpik-popup .popup-close:hover {
  background: #3a2626 !important; color: #e74c3c !important;
}
body.night-mode .pixpik-popup .popup-title { color: #ffffff !important; }
body.night-mode .pixpik-popup .popup-subtitle { color: #94a3b8 !important; }
body.night-mode .pixpik-tabs { background: #2a2a3e !important; }
body.night-mode .pixpik-tab-btn { color: #94a3b8 !important; }
body.night-mode .pixpik-tab-btn.active {
  background: #1a1a2e !important; color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.night-mode .pixpik-package-card .package-price { color: #ffffff !important; }
body.night-mode .pixpik-package-card .package-price span { color: #94a3b8 !important; }
body.night-mode .pixpik-package-card .package-features li {
  color: #e4e6eb !important; background: #2a2a3e !important;
  border-color: #3a3a4e !important;
}
body.night-mode .pixpik-package-card .package-desc {
  background: #2a2a3e !important; color: #cbd5e1 !important;
}
@media (max-width: 600px) {
  .pixpik-pro-widget { padding: 0; }
  .pixpik-pro-widget .pro-title { font-size: 15px; }
  .pixpik-pro-widget .pro-price { font-size: 18px; }
  .pixpik-pro-widget .pro-cta { font-size: 11.5px; padding: 9px 14px; }
  .pixpik-popup {
    padding: 18px 16px 14px; border-radius: 18px;
    max-width: 96%; max-height: 90vh;
  }
  .pixpik-popup .popup-title { font-size: 16px; }
  .pixpik-package-card .package-price { font-size: 20px; }
  .pixpik-tab-btn { font-size: 11px; padding: 6px 0; }
  .pixpik-package-card .package-features {
    grid-template-columns: 1fr 1fr; gap: 3px 6px;
  }
  .pixpik-package-card .package-features li {
    font-size: 10px; padding: 4px 7px; gap: 5px;
  }
  .pixpik-package-card .package-features li::before {
    width: 13px; height: 13px; font-size: 8px;
  }
  .pixpik-package-card .package-desc { font-size: 10px; padding: 7px 9px; }
  .pixpik-popup .popup-btn { font-size: 12px; padding: 9px 0; }
}

/* ─── STYLE #44: VYNCE GOODS BOX ─── */
.vynce-goods-box {
  display: block; background: transparent; border: none;
  border-radius: 0; padding: 0; margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 100%; width: 100%; box-sizing: border-box; box-shadow: none;
}
html[data-theme="dark"] .vynce-goods-box,
body.night-mode .vynce-goods-box,
body.dark-mode .vynce-goods-box { background: transparent; }
.vynce-goods-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
html[data-theme="dark"] .vynce-goods-header,
body.night-mode .vynce-goods-header,
body.dark-mode .vynce-goods-header { border-bottom-color: #2c2c2e; }
.vynce-goods-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: #1a1a2e;
}
html[data-theme="dark"] .vynce-goods-title,
body.night-mode .vynce-goods-title,
body.dark-mode .vynce-goods-title { color: #ffffff; }
.vynce-goods-title::before {
  content: '🛒'; width: 26px; height: 26px;
  border-radius: 8px; background: #fff5f5;
  display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; flex-shrink: 0;
}
html[data-theme="dark"] .vynce-goods-title::before,
body.night-mode .vynce-goods-title::before,
body.dark-mode .vynce-goods-title::before { background: #2c2c2e; }
.vynce-goods-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 4px 10px; border-radius: 99px;
  background: #fff5f5; color: #e74c3c !important;
  border: 1px solid #fecdd3; font-weight: 700;
  font-size: 11px; text-decoration: none !important; white-space: nowrap;
}
.vynce-goods-link:hover {
  background: #e74c3c; color: #fff !important; border-color: #e74c3c;
}
html[data-theme="dark"] .vynce-goods-link,
body.night-mode .vynce-goods-link,
body.dark-mode .vynce-goods-link {
  background: #2c2c2e; border-color: #3a3a3c; color: #e74c3c !important;
}
html[data-theme="dark"] .vynce-goods-link:hover,
body.night-mode .vynce-goods-link:hover,
body.dark-mode .vynce-goods-link:hover {
  background: #e74c3c; color: #fff !important;
}
.vynce-goods-slider {
  position: relative; overflow: hidden; width: 100%; border-radius: 10px;
}
.vynce-goods-track {
  display: flex; flex-wrap: nowrap;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%; align-items: stretch;
}
.vynce-goods-item {
  flex: 0 0 100% !important; min-width: 100% !important;
  max-width: 100% !important; box-sizing: border-box;
  display: flex; flex-direction: column;
  text-decoration: none !important; color: inherit !important;
  border-radius: 10px; overflow: hidden;
  background: #f8fafc; border: 1px solid #eef0f2; height: auto;
}
.vynce-goods-item:hover { border-color: #e74c3c; }
html[data-theme="dark"] .vynce-goods-item,
body.night-mode .vynce-goods-item,
body.dark-mode .vynce-goods-item { background: #2c2c2e; border-color: #3a3a3c; }
.vynce-goods-img {
  width: 100%; height: 130px; background-size: cover;
  background-position: center; display: block;
  background-color: #e9edf2; flex-shrink: 0;
}
.vynce-goods-info {
  padding: 10px 12px 12px; display: flex;
  flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0;
}
.vynce-goods-name {
  font-size: 13px; font-weight: 800; line-height: 1.25;
  color: #1a1a2e; margin: 0; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
html[data-theme="dark"] .vynce-goods-name,
body.night-mode .vynce-goods-name,
body.dark-mode .vynce-goods-name { color: #ffffff; }
.vynce-goods-cat {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px;
}
.vynce-goods-price {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: 800; color: #10b981;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  padding: 4px 10px; border-radius: 99px; margin-top: auto; line-height: 1;
}
html[data-theme="dark"] .vynce-goods-price,
body.night-mode .vynce-goods-price,
body.dark-mode .vynce-goods-price {
  background: #1e3a2a; border-color: #10b981; color: #34d399;
}
.vynce-goods-nav {
  display: flex; justify-content: center; gap: 5px; margin-top: 10px;
}
.vynce-goods-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #e2e8f0; border: none; padding: 0;
  cursor: pointer; transition: all 0.25s ease;
}
html[data-theme="dark"] .vynce-goods-dot,
body.night-mode .vynce-goods-dot,
body.dark-mode .vynce-goods-dot { background: #3a3a3c; }
.vynce-goods-dot.active {
  background: #e74c3c; width: 18px; border-radius: 4px;
}
@media (max-width: 575.98px) {
  .vynce-goods-box { padding: 0; overflow: visible !important; }
  .vynce-goods-header { margin-bottom: 8px; padding-bottom: 6px; }
  .vynce-goods-title { font-size: 12px; gap: 6px; }
  .vynce-goods-title::before { width: 22px; height: 22px; font-size: 11px; }
  .vynce-goods-link { font-size: 10px; padding: 3px 8px; min-height: 22px; }
  .vynce-goods-slider {
    border-radius: 8px; padding: 0 !important; margin: 0 !important;
    overflow: hidden !important; width: 100% !important;
  }
  .vynce-goods-track {
    display: flex !important; flex-wrap: nowrap !important;
    width: 100% !important; gap: 0 !important; margin: 0 !important;
    padding: 0 !important; align-items: stretch !important;
  }
  .vynce-goods-item {
    flex: 0 0 100% !important; min-width: 100% !important;
    max-width: 100% !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 8px; box-sizing: border-box !important;
    overflow: hidden; display: flex; flex-direction: column;
  }
  .vynce-goods-img {
    height: 140px !important; min-height: 140px !important;
    max-height: 140px !important; flex-shrink: 0;
  }
  .vynce-goods-info { padding: 10px 12px 12px; gap: 2px; flex: 1 1 auto; min-height: 0; }
  .vynce-goods-name {
    font-size: 13px; line-height: 1.25; min-height: 32px;
    -webkit-line-clamp: 2;
  }
  .vynce-goods-cat { font-size: 9px; letter-spacing: 0.3px; }
  .vynce-goods-price { font-size: 12px; padding: 4px 10px; margin-top: 6px; }
  .vynce-goods-nav { margin-top: 8px; gap: 4px; }
  .vynce-goods-dot { width: 5px; height: 5px; }
  .vynce-goods-dot.active { width: 16px; }
}
@media (max-width: 360px) {
  .vynce-goods-img {
    height: 120px !important; min-height: 120px !important;
    max-height: 120px !important;
  }
  .vynce-goods-info { padding: 8px 10px 10px; }
  .vynce-goods-name { font-size: 12px; min-height: 29px; }
  .vynce-goods-price { font-size: 11px; padding: 3px 8px; }
}
.card:has(.vynce-goods-box), .card-body:has(.vynce-goods-box),
.card:has(#vynceTrack), .card-body:has(#vynceTrack) {
  overflow: visible !important; height: auto !important; max-height: none !important;
}

/* ─── STYLE #45: PIXPIK TOP MOVIES ─── */
.card > #pixpikTopMovies, .card > .js_top-movies-widget,
.card #pixpikTopMovies {
  box-shadow: none !important; border: none !important;
  background: transparent !important; margin: 0 !important;
  padding: 0 !important; border-radius: 0 !important;
}
#pixpikTopMovies {
  background: transparent; border: none; border-radius: 0;
  padding: 0; margin: 0; box-shadow: none; color: #1a1a2e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: none; box-sizing: border-box;
}
#pixpikTopMovies:hover { box-shadow: none; }
html[data-theme="dark"] #pixpikTopMovies,
body.night-mode #pixpikTopMovies,
body.dark-mode #pixpikTopMovies {
  background: transparent; border-color: transparent; color: #fff;
}
.pixpik-top-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
html[data-theme="dark"] .pixpik-top-head,
body.night-mode .pixpik-top-head,
body.dark-mode .pixpik-top-head { border-bottom-color: #2a2a3e; }
.pixpik-top-title-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: #1a1a2e;
}
html[data-theme="dark"] .pixpik-top-title-head,
body.night-mode .pixpik-top-title-head,
body.dark-mode .pixpik-top-title-head { color: #fff; }
.pixpik-top-title-head::before {
  content: '🏆'; width: 26px; height: 26px;
  border-radius: 8px; background: #fff5f5;
  display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; flex-shrink: 0;
}
html[data-theme="dark"] .pixpik-top-title-head::before,
body.night-mode .pixpik-top-title-head::before,
body.dark-mode .pixpik-top-title-head::before { background: #2c2c2e; }
.pixpik-top-all {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 4px 10px; border-radius: 99px;
  background: #ffebee; color: #f44336 !important;
  font-weight: 700; font-size: 11px;
  text-decoration: none !important; transition: all 0.15s ease;
  white-space: nowrap;
}
.pixpik-top-all:hover { background: #f44336; color: #fff !important; }
html[data-theme="dark"] .pixpik-top-all,
body.night-mode .pixpik-top-all,
body.dark-mode .pixpik-top-all { background: #2c2c2e; color: #f44336 !important; }
html[data-theme="dark"] .pixpik-top-all:hover,
body.night-mode .pixpik-top-all:hover,
body.dark-mode .pixpik-top-all:hover { background: #f44336; color: #fff !important; }
.pixpik-top-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
}
.pixpik-top-item {
  position: relative; display: block; border-radius: 8px;
  overflow: hidden; aspect-ratio: 9 / 16; background: #111;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease;
}
.pixpik-top-item:hover { transform: translateY(-2px); }
html[data-theme="dark"] .pixpik-top-item,
body.night-mode .pixpik-top-item,
body.dark-mode .pixpik-top-item { background: #2c2c2e; }
.pixpik-top-thumb {
  width: 100%; height: 100%; background-size: cover;
  background-position: center; display: block;
}
.pixpik-top-rank {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.pixpik-top-rank.is-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.5);
}
.pixpik-top-rating {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 5px;
  display: flex; align-items: center; gap: 2px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.pixpik-top-star { color: #fbbf24; font-size: 8px; }
.pixpik-top-label { display: none !important; }
.pixpik-top-loading {
  display: flex; justify-content: center; align-items: center; padding: 30px 0;
}
.pixpik-top-spinner {
  width: 24px; height: 24px; border: 3px solid #f1f5f9;
  border-top-color: #e74c3c; border-radius: 50%;
  animation: pixpikTopSpin 0.8s linear infinite;
}
@keyframes pixpikTopSpin { to { transform: rotate(360deg); } }
.pixpik-top-empty {
  padding: 16px; text-align: center; color: #94a3b8;
  font-size: 12px; grid-column: 1 / -1;
}
.pixpik-top-empty-icon { font-size: 28px; margin-bottom: 6px; }
.pixpik-top-empty-title {
  font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 3px;
}
html[data-theme="dark"] .pixpik-top-empty-title,
body.night-mode .pixpik-top-empty-title,
body.dark-mode .pixpik-top-empty-title { color: #fff; }
.pixpik-top-empty-text { font-size: 11px; color: #94a3b8; line-height: 1.3; }
@media (max-width: 575.98px) {
  #pixpikTopMovies { padding: 0; }
  .pixpik-top-title-head { font-size: 12px; }
  .pixpik-top-title-head::before { width: 24px; height: 24px; font-size: 12px; }
  .pixpik-top-grid { gap: 4px; }
  .pixpik-top-rank { width: 18px; height: 18px; font-size: 9px; top: 3px; left: 3px; }
  .pixpik-top-rating { font-size: 8px; padding: 2px 4px; top: 3px; right: 3px; }
}

/* ─── STYLE #46: BLOGS PLUGIN ─── */
.main-side-nav li.active a[href*="?view=blogs"] {
  color: #e74c3c !important;
  background: linear-gradient(145deg, #fff5f5, #ffecec) !important;
  border-radius: 12px !important; font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px #ffecec !important;
}
.main-side-nav li.active a[href*="?view=blogs"] .main-icon,
.main-side-nav li.active a[href*="?view=blogs"] .main-icon svg,
.main-side-nav li.active a[href*="?view=blogs"] .main-icon path {
  fill: #e74c3c !important;
}
a[href*="blogs?view=new"].btn-primary {
  background: linear-gradient(145deg, #e74c3c, #c0392b) !important;
  border-color: #c0392b !important; color: #fff !important;
}
a[href*="blogs?view=new"].btn-primary:hover {
  background: linear-gradient(145deg, #c0392b, #a52b20) !important;
  border-color: #a52b20 !important;
}
.blog-category, a.blog-category {
  background: #ffecec !important; color: #e74c3c !important;
}
.post-media-meta .title[href*="/blogs/"] { color: #e74c3c !important; }
.post-media-meta .info a { color: #e74c3c !important; }
.post-author { color: #e74c3c !important; }

.blogs-widget .card-header,
.blogs-widget .card-header a,
.blogs-widget .card-header .float-end a { color: #1a1a2e !important; }
.blogs-widget .card-header .float-end a { color: #e74c3c !important; }
.blogs-widget .card-body .post-media-meta .title,
.blogs-widget .card-body .post-media-meta a.title { color: #1a1a2e !important; }
.blogs-widget .card-body .post-media-meta .title:hover,
.blogs-widget .card-body .post-media-meta a.title:hover { color: #e74c3c !important; }
.blogs-widget .card-body .post-media-meta .text { color: #64748b !important; }
.blogs-widget .card-body .post-media-meta .info,
.blogs-widget .card-body .post-media-meta .info span { color: #94a3b8 !important; }
.blogs-widget .card-body .post-media-meta .info a {
  color: #e74c3c !important; text-decoration: underline;
}
.blogs-widget .card-body .post-media.list,
.blogs-widget .card-body .post-media,
.blogs-widget .card-body .carousel-item {
  background: transparent !important; box-shadow: none !important;
}






/* ─── STYLE #51: MINI AUDIO PLAYER ─── */
#mini-audio-player {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%); background: #1c1e21;
  border-radius: 60px; padding: 8px 20px 8px 12px;
  display: none; align-items: center; gap: 12px;
  z-index: 99999; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border: 1px solid #333; backdrop-filter: blur(8px);
  background: rgba(28,30,33,0.92); max-width: 95%;
}
#mini-audio-player .ap-vinyl {
  width: 40px; height: 40px; flex-shrink: 0; position: relative;
}
#mini-audio-player .ap-vinyl .vinyl-outer {
  width: 100%; height: 100%; border-radius: 50%;
  position: relative; box-shadow: 0 0 20px rgba(231,76,60,0.3);
  transition: box-shadow 1s ease, border-color 1s ease;
  background: #1a1a1a; border: 3px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
#mini-audio-player .ap-vinyl .vinyl-inner {
  width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden; will-change: transform;
}
#mini-audio-player .ap-vinyl .vinyl-inner img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}
#mini-audio-player .ap-vinyl.spin .vinyl-inner {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#mini-audio-player .ap-vinyl.glow .vinyl-outer {
  animation: neonGlow 4s ease-in-out infinite;
}
@keyframes neonGlow {
  0% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.7), 0 0 50px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.6); }
  20% { box-shadow: 0 0 30px rgba(255, 165, 0, 0.8), 0 0 60px rgba(255, 165, 0, 0.4); border-color: rgba(255, 165, 0, 0.6); }
  40% { box-shadow: 0 0 30px rgba(255, 255, 0, 0.8), 0 0 60px rgba(255, 255, 0, 0.4); border-color: rgba(255, 255, 0, 0.6); }
  60% { box-shadow: 0 0 30px rgba(0, 255, 0, 0.8), 0 0 60px rgba(0, 255, 0, 0.4); border-color: rgba(0, 255, 0, 0.6); }
  80% { box-shadow: 0 0 30px rgba(0, 150, 255, 0.8), 0 0 60px rgba(0, 150, 255, 0.4); border-color: rgba(0, 150, 255, 0.6); }
  100% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.7), 0 0 50px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.6); }
}
#mini-audio-player .ap-equalizer {
  display: flex; align-items: center; gap: 2px; height: 20px; flex-shrink: 0;
}
#mini-audio-player .ap-equalizer span {
  display: block; width: 3px; height: 4px; background: #e74c3c;
  border-radius: 2px; transition: height 0.1s ease;
  animation: eqAnim 0.5s ease-in-out infinite alternate;
  animation-play-state: paused;
}
#mini-audio-player .ap-equalizer span:nth-child(1) { animation-delay: 0.0s; }
#mini-audio-player .ap-equalizer span:nth-child(2) { animation-delay: 0.1s; }
#mini-audio-player .ap-equalizer span:nth-child(3) { animation-delay: 0.2s; }
#mini-audio-player .ap-equalizer span:nth-child(4) { animation-delay: 0.3s; }
#mini-audio-player .ap-equalizer span:nth-child(5) { animation-delay: 0.4s; }
#mini-audio-player .ap-equalizer span:nth-child(6) { animation-delay: 0.5s; }
#mini-audio-player .ap-equalizer span:nth-child(7) { animation-delay: 0.6s; }
#mini-audio-player .ap-equalizer span:nth-child(8) { animation-delay: 0.7s; }
#mini-audio-player .ap-equalizer span:nth-child(9) { animation-delay: 0.8s; }
@keyframes eqAnim {
  0% { height: 4px; }
  100% { height: 18px; }
}
#mini-audio-player .ap-equalizer.active span { animation-play-state: running; }
#mini-audio-player .ap-info {
  color: #fff; font-size: 13px; font-weight: 500;
  max-width: 100px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#mini-audio-player .ap-info small {
  display: block; font-weight: 400; font-size: 11px; color: #aaa;
}
#mini-audio-player .ap-marquee {
  max-width: 120px; overflow: hidden; white-space: nowrap;
  color: #e74c3c; font-size: 12px; font-weight: 600;
}
#mini-audio-player .ap-marquee span {
  display: inline-block; padding-left: 100%;
  animation: marquee 12s linear infinite;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
#mini-audio-player .ap-controls { display: flex; align-items: center; gap: 4px; }
#mini-audio-player .ap-controls button {
  background: none; border: none; color: #fff; font-size: 16px;
  cursor: pointer; padding: 4px 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: 0.2s; width: 30px; height: 30px;
}
#mini-audio-player .ap-controls button:hover { background: rgba(255,255,255,0.1); }
#mini-audio-player .ap-controls .play-btn {
  background: #e74c3c; width: 32px; height: 32px; font-size: 13px;
}
#mini-audio-player .ap-controls .play-btn:hover {
  background: #c0392b; transform: scale(1.05);
}
#mini-audio-player .ap-close { color: #666; font-size: 14px; padding: 0 4px; }
#mini-audio-player .ap-close:hover { color: #fff; }
#mini-audio-player .ap-progress-wrap { display: flex; align-items: center; gap: 6px; }
#mini-audio-player .ap-progress-wrap input[type="range"] {
  width: 60px; height: 3px; -webkit-appearance: none;
  appearance: none; background: #444; border-radius: 4px; outline: none;
}
#mini-audio-player .ap-progress-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: #e74c3c; cursor: pointer;
}
#mini-audio-player .ap-progress-wrap .time {
  color: #888; font-size: 11px; min-width: 30px;
}
#mini-audio-player .ap-volume-wrap { display: flex; align-items: center; gap: 4px; }
#mini-audio-player .ap-volume-wrap input[type="range"] {
  width: 50px; height: 3px; -webkit-appearance: none;
  appearance: none; background: #444; border-radius: 4px; outline: none;
}
#mini-audio-player .ap-volume-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e74c3c; cursor: pointer;
}
#mini-audio-player .ap-volume-wrap i { color: #888; font-size: 14px; }
@media (max-width: 600px) {
  #mini-audio-player {
    bottom: 65px; padding: 6px 12px 6px 8px; border-radius: 40px;
    gap: 6px; max-width: 98%;
  }
  #mini-audio-player .ap-vinyl { width: 30px; height: 30px; }
  #mini-audio-player .ap-equalizer { height: 16px; gap: 1.5px; }
  #mini-audio-player .ap-equalizer span { width: 2px; }
  @keyframes eqAnim {
    0% { height: 3px; }
    100% { height: 14px; }
  }
  #mini-audio-player .ap-info { max-width: 60px; font-size: 10px; }
  #mini-audio-player .ap-progress-wrap input[type="range"] { width: 30px; }
  #mini-audio-player .ap-marquee { max-width: 60px; font-size: 9px; }
  #mini-audio-player .ap-controls button { width: 24px; height: 24px; font-size: 12px; }
  #mini-audio-player .ap-controls .play-btn { width: 26px; height: 26px; font-size: 11px; }
  #mini-audio-player .ap-progress-wrap .time { font-size: 9px; min-width: 20px; }
  #mini-audio-player .ap-volume-wrap input[type="range"] { width: 30px; }
}
/* ─── PIKABU: ПИЛЮЛИ РЕАКЦИЙ ─── */
.pkb-reactions-row {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 6px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #f0f2f5 !important;
  background: #fff !important;
}
.pkb-react-pill {
  display: inline-flex !important; align-items: center !important;
  justify-content: flex-start !important; flex: 0 0 auto !important;
  width: auto !important; min-width: 62px !important;
  max-width: none !important; height: 32px !important;
  padding: 0 12px 0 8px !important; margin: 0 !important;
  gap: 6px !important; background: #f0f2f5 !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 16px !important; cursor: pointer !important;
  font-family: inherit !important; box-sizing: border-box !important;
  position: relative !important; overflow: hidden !important;
  transition: background .15s, transform .1s, border-color .15s !important;
}
.pkb-react-pill:hover {
  background: #e4e6eb !important; transform: scale(1.04) !important;
}
.pkb-react-pill.active {
  background: #e7f3ff !important; border-color: #2787F5 !important;
}
.pkb-react-pill.active .pkb-react-count { color: #2787F5 !important; }
.pkb-react-pill .emoji, .pkb-react-pill .inline-emoji,
.pkb-react-pill .no_animation, .pkb-react-pill .pkb-react-emoji {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; position: static !important;
  float: none !important; width: 20px !important; height: 20px !important;
  min-width: 20px !important; min-height: 20px !important;
  max-width: 20px !important; max-height: 20px !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: none !important;
  flex-shrink: 0 !important; overflow: visible !important;
  top: auto !important; left: auto !important; right: auto !important;
  bottom: auto !important; transform: none !important;
}
.pkb-react-pill .emoji img, .pkb-react-pill .inline-emoji img,
.pkb-react-pill .pkb-react-emoji img, .pkb-react-pill img {
  display: block !important; position: static !important;
  float: none !important; width: 20px !important; height: 20px !important;
  min-width: 20px !important; min-height: 20px !important;
  max-width: 20px !important; max-height: 20px !important;
  margin: 0 !important; padding: 0 !important;
  object-fit: contain !important; opacity: 1 !important;
  visibility: visible !important; filter: none !important;
  background: none !important; border: none !important;
  top: auto !important; left: auto !important; right: auto !important;
  bottom: auto !important; transform: none !important;
}
.pkb-react-pill .pkb-react-count {
  font-size: 13px !important; font-weight: 700 !important;
  color: #4b515d !important; line-height: 1 !important;
  min-width: 12px !important; text-align: center !important;
  flex-shrink: 0 !important; pointer-events: none !important;
  user-select: none !important; position: static !important; margin: 0 !important;
}

/* ФИНАЛЬНЫЕ ФИКСЫ ПАНЕЛИ ДЕЙСТВИЙ ПИКАБУ */
.post .post-reactions, .post .reactions-stats,
.post > .reactions-wrapper, .post-body > .reactions-wrapper,
.post-body > .reactions-stats, .js_post-reactions-stats,
.inline-emoji:not(.pkb-react-pill .inline-emoji) { display: none !important; }
.post .inline-emoji { display: none !important; }
.post .pkb-react-pill .inline-emoji, .post .pkb-react-pill .emoji {
  display: inline-flex !important; visibility: visible !important;
  opacity: 1 !important;
}
.pkb-actions {
  display: flex !important; align-items: center !important;
  justify-content: flex-start !important; gap: 4px !important;
  padding: 6px 12px !important;
  border-top: 1px solid #f0f2f5 !important;
  background: #fff !important; width: 100% !important;
  box-sizing: border-box !important;
}
.pkb-actions .pkb-action-btn {
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; max-width: 40px !important;
  flex: 0 0 40px !important; padding: 0 !important;
  margin: 0 !important; background: transparent !important;
  border: none !important; border-radius: 10px !important;
  color: #65676b !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important; outline: none !important;
  box-shadow: none !important; position: relative !important;
}
.pkb-actions .pkb-action-btn:hover {
  background: #f0f2f5 !important; color: #1c1e21 !important;
}
.pkb-actions .pkb-action-btn svg {
  width: 20px !important; height: 20px !important;
  stroke: currentColor !important; fill: none !important;
}
.pkb-actions .pkb-rating-inline {
  display: inline-flex !important; align-items: center !important;
  margin-left: auto !important; padding: 2px 6px !important;
  background: #f0f2f5 !important; border-radius: 20px !important;
  height: 32px !important; gap: 2px !important;
  flex: 0 0 auto !important; box-sizing: border-box !important;
  outline: none !important;
}
.pkb-actions button, .pkb-actions .pkb-m-vote-btn,
.pkb-actions .pkb-action-btn, .pkb-reactions-row .pkb-react-pill,
.pkb-react-pill button, .pkb-actions button:focus,
.pkb-actions button:active, .pkb-actions button:focus-visible {
  outline: none !important; outline-offset: 0 !important;
  border: none !important; box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.pkb-actions .pkb-m-vote-btn {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; max-width: 26px !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: none !important;
  border-radius: 50% !important; color: #768390 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; cursor: pointer !important;
  outline: none !important; box-shadow: none !important;
  flex: 0 0 26px !important;
}
.pkb-actions .pkb-m-vote-btn:hover {
  background: #e4e6eb !important; color: #1c1e21 !important;
}
.pkb-actions .pkb-m-vote-btn i {
  font-size: 12px !important; line-height: 1 !important;
  color: inherit !important; pointer-events: none !important;
}
.pkb-actions .pkb-m-vote-btn.up.active {
  color: #2da44e !important; background: rgba(45, 164, 78, 0.14) !important;
}
.pkb-actions .pkb-m-vote-btn.down.active {
  color: #cf222e !important; background: rgba(207, 34, 46, 0.14) !important;
}
.pkb-actions .pkb-m-score {
  font-size: 13px !important; font-weight: 800 !important;
  color: #444c56 !important; min-width: 22px !important;
  text-align: center !important; line-height: 1 !important;
  padding: 0 2px !important;
}
.pkb-actions .pkb-m-score.pos { color: #2da44e !important; }
.pkb-actions .pkb-m-score.neg { color: #cf222e !important; }
.pkb-actions > .action-btn:not(.pkb-action-btn):not(.pkb-hidden-btn),
.pkb-actions > .reactions-wrapper:not(.pkb-hidden-btn),
.pkb-actions > .reactions-wrapper.pkb-hidden-btn { display: none !important; }
.pkb-c-karma {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  margin-left: 6px; background: #f0f2f5;
  color: #8c929c; line-height: 1; vertical-align: middle;
}
.pkb-c-karma.positive { color: #2da44e; background: rgba(45, 164, 78, 0.1); }
.pkb-c-karma.negative { color: #cf222e; background: rgba(207, 34, 46, 0.1); }
body.night-mode .pkb-c-karma { background: #3a3b3c; color: #b0b3b8; }
body.night-mode .pkb-c-karma.positive { color: #2da44e; background: rgba(45, 164, 78, 0.15); }
body.night-mode .pkb-c-karma.negative { color: #cf222e; background: rgba(207, 34, 46, 0.15); }

/* КАРМА (пикабу) — НОЧНОЙ РЕЖИМ */
body.night-mode .pkb-mobile-rating-capsule,
body.night-mode .pkb-mobile-rating-capsule * {
  background: #2c2d2e !important; border-color: #3a3b3c !important;
}
body.night-mode .pkb-m-vote-btn {
  background: transparent !important; color: #b0b3b8 !important;
  border: none !important;
}
body.night-mode .pkb-m-vote-btn:hover {
  background: #3a3b3c !important; color: #ffffff !important;
}
body.night-mode .pkb-m-vote-btn.up.active {
  color: #2da44e !important; background: rgba(45, 164, 78, 0.15) !important;
}
body.night-mode .pkb-m-vote-btn.down.active {
  color: #cf222e !important; background: rgba(207, 34, 46, 0.15) !important;
}
body.night-mode .pkb-m-score, body.night-mode .pkb-m-score.pos,
body.night-mode .pkb-m-score.neg { color: #ffffff !important; }
body.night-mode .pkb-m-score.pos { color: #2da44e !important; }
body.night-mode .pkb-m-score.neg { color: #cf222e !important; }
body.night-mode .pkb-rating-inline { background: #2c2d2e !important; }
body.night-mode .pkb-rating-inline .pkb-m-vote-btn { color: #b0b3b8 !important; }
body.night-mode .pkb-rating-inline .pkb-m-score { color: #ffffff !important; }

/* МЕТА-СТРОКА ПОСТА */
.post-time {
  font-size: 13px !important; color: #8c929c !important;
  margin-top: 8px !important; line-height: 1.4 !important;
}
.post-time .pkb-post-time-item {
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 14px; color: inherit; font-weight: 500;
  vertical-align: middle;
}
.post-time .pkb-post-time-item i { font-size: 13px; color: #8c929c; opacity: 0.85; }
.post-time .pkb-post-time-item a { color: inherit !important; text-decoration: none !important; }
body.night-mode .post-time, body.night-mode .post-time .pkb-post-time-item,
body.night-mode .post-time .pkb-post-time-item i { color: #b0b3b8 !important; }
@media (max-width: 575.98px) {
  .post-time {
    font-size: 12px !important; gap: 12px !important; padding: 0 14px !important;
  }
  .post-time .pkb-post-time-item i { font-size: 13px !important; }
}
.pkb-post-title {
  font-size: 21px; font-weight: 700; line-height: 1.35;
  color: #1c1e21; margin: 12px 0 8px; padding: 0 16px;
}
@media (max-width: 767.98px) {
  .pkb-post-title {
    font-size: 18px; margin: 10px 0 6px; padding: 0 14px;
  }
}

/* Панель действий блога — единый ряд */
.post-actions.pkb-actions {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 8px !important; row-gap: 10px !important;
}
.pkb-reactions-row {
  display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; gap: 4px !important;
  margin: 10px 0 8px !important; overflow-x: auto !important;
  overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; max-width: 100% !important;
  width: 100% !important; box-sizing: border-box !important;
  padding: 2px 0 !important;
}
.pkb-reactions-row::-webkit-scrollbar { display: none !important; }
.single-blog-content, .single-blog-content .blog-wrapper,
.single-blog-content .post { overflow: hidden !important; max-width: 100% !important; }
.pkb-reactions-row .pkb-react-pill { flex: 0 0 auto !important; white-space: nowrap !important; }
.pkb-reactions-row .pkb-react-pill:has(.pkb-react-count[style*="display: none"]) {
  padding: 0 !important; gap: 0 !important; width: 34px !important;
  min-width: 34px !important; justify-content: center !important;
}
@media (max-width: 768px) {
  .pkb-reactions-row {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 4px !important; margin: 10px 0 8px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; max-width: 100% !important;
    width: 100% !important; box-sizing: border-box !important;
  }
  .pkb-reactions-row::-webkit-scrollbar { display: none !important; }
  .pkb-reactions-row .pkb-react-pill {
    flex: 0 0 auto !important; min-width: 34px !important;
    height: 32px !important; padding: 0 8px 0 6px !important;
    gap: 2px !important; border-radius: 16px !important;
  }
  .pkb-reactions-row .pkb-react-pill .emoji,
  .pkb-reactions-row .pkb-react-pill .emoji img {
    width: 16px !important; height: 16px !important;
  }
  .pkb-reactions-row .pkb-react-pill .pkb-react-count {
    font-size: 11px !important; min-width: 8px !important;
  }
  .pkb-reactions-row .pkb-react-pill:has(.pkb-react-count[style*="display: none"]) {
    padding: 0 !important; gap: 0 !important;
    width: 32px !important; justify-content: center !important;
  }
}
body.night-mode .pkb-reactions-row .pkb-react-pill {
  background: #3a3b3c !important; border-color: #4a4b4c !important;
}
body.night-mode .pkb-reactions-row .pkb-react-pill:hover {
  background: #4a4b4c !important;
}
body.night-mode .pkb-reactions-row .pkb-react-pill.active {
  background: #1e3a5f !important; border-color: #2787F5 !important;
}
body.night-mode .pkb-reactions-row .pkb-react-pill .pkb-react-count {
  color: #e4e6eb !important;
}

/* ─── ТЁМНАЯ ТЕМА: ИКОНКИ (.main-icon) ─── */
body.night-mode .main-icon,
body.night-mode .main-icon *,
body.night-mode .x-form-tools .main-icon,
body.night-mode .x-form-tools .main-icon *,
body.night-mode .main-icon svg,
body.night-mode .main-icon svg *,
body.night-mode .main-icon path,
body.night-mode .main-icon path *,
body.night-mode .x-form-tools .main-icon svg,
body.night-mode .x-form-tools .main-icon svg *,
body.night-mode .x-form-tools .main-icon path { fill: none !important; }
body.night-mode .main-icon,
body.night-mode .main-icon svg,
body.night-mode .main-icon svg *,
body.night-mode .main-icon path,
body.night-mode .main-icon line,
body.night-mode .main-icon polyline,
body.night-mode .main-icon polygon,
body.night-mode .main-icon circle,
body.night-mode .main-icon rect,
body.night-mode .main-icon ellipse,
body.night-mode .main-icon g,
body.night-mode .x-form-tools .main-icon svg,
body.night-mode .x-form-tools .main-icon svg *,
body.night-mode .x-form-tools .main-icon path {
  stroke: #b0b3b8 !important; color: #b0b3b8 !important;
}

/* ИКОНКА 18+ — светлая заливка */
body.night-mode .main-icon svg[viewBox="0 0 512 512"] path,
body.night-mode .main-icon svg[viewBox="0 0 512 512"] path[fill],
body.night-mode .main-icon svg[viewBox="0 0 512 512"] path[fill="#EB0100"],
body.night-mode .main-icon svg[viewBox="0 0 512 512"] path[fill="#eb0100"] {
  fill: #b0b3b8 !important; stroke: none !important;
}
body.night-mode .main-icon svg[viewBox="0 0 512 512"] g,
body.night-mode .main-icon svg[viewBox="0 0 512 512"] g * {
  fill: #b0b3b8 !important; stroke: none !important;
}
body.night-mode .main-icon svg[viewBox="0 0 512 512"] { fill: #b0b3b8 !important; }

/* ─── DUMMY PUBLISHER — НОЧНОЙ РЕЖИМ ─── */
body.night-mode .dummy-publisher-actions .dummy-publisher-btn,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn *,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg *,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn path,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn line,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn circle,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn rect,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn polygon,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn polyline,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn g,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn i {
  color: #b0b3b8 !important; fill: none !important; stroke: #b0b3b8 !important;
}
body.night-mode .dummy-publisher-actions .dummy-publisher-btn { color: #e4e6eb !important; }
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover *,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover svg,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover svg *,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover path {
  color: #ffffff !important; stroke: #ffffff !important; fill: none !important;
}
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg [fill="#e74c3c"],
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg [fill="#dc3545"],
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg [fill="red"],
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg [stroke="#e74c3c"],
body.night-mode .dummy-publisher-actions .dummy-publisher-btn svg [stroke="#dc3545"] {
  fill: #b0b3b8 !important; stroke: #b0b3b8 !important; color: #b0b3b8 !important;
}
body.night-mode .dummy-publisher-actions .dummy-publisher-btn i.fa,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn i.fas,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn i.far,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn i.fa-solid {
  color: #b0b3b8 !important;
}
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover i.fa,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover i.fas,
body.night-mode .dummy-publisher-actions .dummy-publisher-btn:hover i.far {
  color: #ffffff !important;
}
body.night-mode .dummy-publisher-actions { border-top-color: #3a3b3c !important; }

/* ─── ФОТО В ПОСТАХ — от края до края ─── */
.post .custom-single-photo,
.group-page .custom-single-photo,
.page-container .custom-single-photo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
  /* Без aspect-ratio — контейнер примет размеры фото */
}

.post .custom-single-photo img,
.group-page .custom-single-photo img,
.page-container .custom-single-photo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;               /* ← фото в своих пропорциях */
  max-height: 720px !important;          /* ← ограничение, чтобы не растягивалось на весь экран */
  object-fit: contain !important;        /* ← вписано целиком */
  margin: 0 auto !important;
  border-radius: 0 !important;
}

/* Тёмная тема — фон не нужен, оставляем прозрачным */
body.night-mode .post .custom-single-photo,
body.night-mode .group-page .custom-single-photo,
body.night-mode .page-container .custom-single-photo {
  background-color: transparent !important;
}



/* ─── BOOSTED ICON ─── */
.post.boosted, .post.promoted,
.post.boosted .post-body, .post.promoted .post-body {
  overflow: visible !important;
}
.post.boosted .boosted-icon,
.post.promoted .boosted-icon,
.post .boosted-icon {
  z-index: 99999 !important; isolation: isolate !important;
}
.post.boosted .post-header,
.post.promoted .post-header {
  z-index: 1 !important; position: relative !important;
}

/* ================================================
   иконка в шаке
   ================================================ */



/* Скрываем текст "добавил(а) новый пост" и стрелочку, оставляем только группу */
.post-body .post-header .post-meta .post-title {
  font-size: 0 !important;   /* скрываем текст, но не ссылки */
}

.post-body .post-header .post-meta .post-title a,
.post-body .post-header .post-meta .post-title .verified-badge,
.post-body .post-header .post-meta .post-title .post-title,
.post-body .post-header .post-meta .post-title svg {
  font-size: initial !important;   /* возвращаем нормальный размер ссылкам */
}

/* Скрываем стрелочку-шеврон */
.post-body .post-header .post-meta .post-title > i.fa-chevron-right {
  display: none !important;
}

/* Возвращаем нормальный размер для иконок (svg) */
.post-body .post-header .post-meta .post-title .svg-container {
  font-size: 14px !important;
}

/* Возвращаем размер для ссылки на группу */
.post-body .post-header .post-meta .post-title a {
  font-size: 14px !important;
}

/* Отступ у текста поста, если он идёт ПОСЛЕ медиа */
.post .post-text,
.group-page .post-text,
.page-container .post-text {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 15px !important;      /* ← если текст должен быть с боковыми отступами */
}


@media (max-width: 768px) {
    /* Убираем возможные конфликты */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Хедер фиксируем наверху */
    .navbar, header, #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }
    
    /* Отступ для контента под хедером */
    .main-wrapper {
        padding-top: 70px !important; /* <-- ПОДСТАВЬТЕ РЕАЛЬНУЮ ВЫСОТУ ХЕДЕРА */
    }
}

/* ===== ФИКС: активная вкладка «Меню» — иконка не должна исчезать ===== */

/* Светлая тема — активная «Меню» */
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon *,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg * {
  fill: #8a8f98 !important;
  stroke: #8a8f98 !important;
  color: #8a8f98 !important;
}

/* Тёмная тема — активная «Меню» */
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon *,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg * {
  fill: #b0b3b8 !important;
  stroke: #b0b3b8 !important;
  color: #b0b3b8 !important;
}

/* ===== ФИКС: активная вкладка «Меню» в СВЕТЛОЙ теме ===== */

/* Иконка (три полоски) — видимая, серая */
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon *,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg * {
  fill: #8a8f98 !important;
  stroke: #8a8f98 !important;
  color: #8a8f98 !important;
  background: transparent !important;
}

/* Подпись «Меню» — красная (как вы хотите) */
body .footer-bottom-bar-links > .footer-menu-link.active > a .title {
  color: #e74c3c !important;
}

/* Точка под «Меню» — красная */
body .footer-bottom-bar-links > .footer-menu-link.active::after {
  background: #e74c3c !important;
}


/* ===== ФИКС: активная «Меню» — иконка не исчезает ===== */

/* Светлая тема */
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon *,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg,
body .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg * {
  fill: #8a8f98 !important;
  stroke: #8a8f98 !important;
  color: #8a8f98 !important;
}
body .footer-bottom-bar-links > .footer-menu-link.active > a .title {
  color: #6a6a6b !important;
}

/* Тёмная тема */
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon *,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg,
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .header-icon svg * {
  fill: #b0b3b8 !important;
  stroke: #b0b3b8 !important;
  color: #b0b3b8 !important;
}
body.night-mode .footer-bottom-bar-links > .footer-menu-link.active > a .title {
  color: #e74c3c !important;
}

/* Убираем маркер Bootstrap у нашей кнопки меню поста */
.float-end.dropdown > a.dropdown-toggle::after,
.post-header .dropdown > a.dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.float-end.dropdown > a.dropdown-toggle:focus,
.float-end.dropdown > a.dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Убираем «каретку» у триггера */
.dropdown-toggle-no-caret::after {
  display: none !important;
}

/* Меню в /menu — карточка */
@media (max-width: 767px) {
  .vk-avatar-dropdown .vk-menu-dropdown {
    min-width: 320px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 0;
    margin-top: 6px;
  }

  body.night-mode .vk-avatar-dropdown .vk-menu-dropdown {
    background: #1c1e22;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }

  .vk-menu-dropdown .user-dropdown-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
  }

  .vk-menu-dropdown .user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .vk-menu-dropdown .user-dropdown-name {
    font-size: 15px;
    font-weight: 700;
  }

  .vk-menu-dropdown .user-dropdown-handle {
    font-size: 13px;
    color: #8a8f98;
    margin-top: 2px;
  }

  .vk-menu-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
  }

  .vk-menu-dropdown .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  body.night-mode .vk-menu-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .vk-menu-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 6px 0;
    border: none;
  }

  body.night-mode .vk-menu-dropdown .dropdown-divider {
    background: rgba(255, 255, 255, 0.06);
  }

  .vk-menu-dropdown .dropdown-item-value {
    margin-left: auto;
    font-weight: 700;
    color: #e74c3c;
  }

  .vk-menu-dropdown .upgrade-pro-new {
    margin-left: auto;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
  }

  .vk-menu-dropdown .theme-segmented-control {
    display: flex;
    width: 100%;
    background: #ebedf0;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
  }

  body.night-mode .vk-menu-dropdown .theme-segmented-control {
    background: #2a2d33;
  }

  .vk-menu-dropdown .theme-seg-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #65676b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .vk-menu-dropdown .theme-seg-btn.active {
    background: #fff;
    color: #1c1e21;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  body.night-mode .vk-menu-dropdown .theme-seg-btn.active {
    background: #3a3d42;
    color: #e4e6eb;
  }
}

@media (max-width: 767px) {

  /* Меню — растягиваем на всю ширину экрана */
  .vk-avatar-dropdown .vk-menu-dropdown {
    /* Позиция — под аватаркой, слева на всю ширину */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    
    /* Ширина — по экрану минус отступы */
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;

    /* Не обрезать содержимое */
    overflow: visible !important;
    max-height: none !important;

    /* Отступы и вид */
    margin: 8px 0 0 0 !important;
    padding: 6px 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    z-index: 9999 !important;
  }

  body.night-mode .vk-avatar-dropdown .vk-menu-dropdown {
    background: #1c1e22 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Пункты меню — на всю ширину */
  .vk-menu-dropdown .dropdown-item,
  .vk-menu-dropdown .user-dropdown-profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Иконки — фиксированная ширина */
  .vk-menu-dropdown .main-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Переключатель тем — на всю ширину */
  .vk-menu-dropdown .theme-segmented-control {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vk-menu-dropdown .theme-seg-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}


  

  /* ============ 4. Меню профиля ============ */
  .vk-avatar-dropdown .vk-menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;

    overflow: visible !important;
    max-height: none !important;
    z-index: 99999 !important;
  }

  body.night-mode .vk-avatar-dropdown .vk-menu-dropdown {
    background: #1c1e22 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Непрозрачная подложка — чтобы погода не просвечивала */
  .vk-menu-dropdown::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
  }

  /* ============ 5. Родители не обрезают меню ============ */
  .vk-header-bar,
  .vk-header-left,
  .vk-menu-card,
  .vk-page-container {
    overflow: visible !important;
  }

  /* ============ 6. Погода — не налезает ============ */
  /* Если туча всё равно поверх — уменьшаем её z-index */
  .vk-page-container .vk-weather-widget,
  .vk-page-container .weather-widget {
    position: relative !important;
    z-index: 1 !important;
  }

@media (max-width: 767.98px) {
  /* Меню из аватара — на всю ширину экрана */
  .dropdown-menu.show,
  .dropdown-menu-end.show,
  .action-dropdown-menu.show {
    position: fixed !important;
    top: 72px !important;          /* под шапкой */
    left: 12px !important;         /* отступ слева */
    right: 12px !important;        /* отступ справа */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 180px) !important;   /* под нижним баром */
    overflow-y: auto !important;
    z-index: 999999 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transform: none !important;
  }

  /* Убираем возможный сдвиг через translate */

  .dropdown-menu.show,
  .dropdown-menu-end.show,
  .action-dropdown-menu.show {
    position: fixed !important;
    top: 60px !important;            /* ближе к шапке */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    /* Динамическая высота — учитывает и адресную строку, и нижний бар */
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999999 !important;
    border-radius: 14px !important;
    transform: none !important;
    /* Внутренний скролл всегда виден */
    padding-bottom: 20px !important;
  }
}


/* ============================================================
   Иконки в шапке — разделяем по типам
   ============================================================ */

/* --- Тип 1: ЗАЛИВНЫЕ (fill=#111) — «+» создать, уведомления --- */

/* Светлая тема */
.mobile-icon-link svg,
.mobile-icon-link svg path,
.mobile-icon-link svg circle,
.mobile-icon-link svg rect,
.header-icon svg,
.header-icon svg path,
.header-icon svg circle,
.header-icon svg rect,
.desktop-icon-link svg,
.desktop-icon-link svg path,
.icon-btn svg,
.icon-btn svg path,
.apps-btn svg,
.apps-btn svg path {
  fill: #111111 !important;
  stroke: none !important;
}

/* Тёмная тема — светлая заливка */
body.night-mode .mobile-icon-link svg,
body.night-mode .mobile-icon-link svg path,
body.night-mode .header-icon svg,
body.night-mode .header-icon svg path,
body.night-mode .desktop-icon-link svg,
body.night-mode .desktop-icon-link svg path,
body.night-mode .icon-btn svg,
body.night-mode .icon-btn svg path,
body.night-mode .apps-btn svg,
body.night-mode .apps-btn svg path,
[data-theme="dark"] .mobile-icon-link svg,
[data-theme="dark"] .mobile-icon-link svg path,
[data-theme="dark"] .header-icon svg,
[data-theme="dark"] .header-icon svg path,
[data-theme="dark"] .desktop-icon-link svg,
[data-theme="dark"] .icon-btn svg {
  fill: #e4e6eb !important;
  stroke: none !important;
}


/* --- Тип 2: КОНТУРНЫЕ (fill=none stroke=currentColor) — домик, чат --- */
/* Возвращаем их родной цвет — просто через color, не трогая fill/stroke */
.desktop-home-link,
.desktop-home-link svg,
.desktop-home-link svg path,
.desktop-home-link svg polyline,
.header-icon.active,
.header-icon.active svg,
.header-icon.active svg path,
.header-icon.active svg polyline {
  color: #111111 !important;
}

body.night-mode .desktop-home-link,
body.night-mode .desktop-home-link svg,
body.night-mode .desktop-home-link svg path,
body.night-mode .desktop-home-link svg polyline,
body.night-mode .header-icon.active,
body.night-mode .header-icon.active svg,
body.night-mode .header-icon.active svg path,
[data-theme="dark"] .desktop-home-link,
[data-theme="dark"] .desktop-home-link svg,
[data-theme="dark"] .header-icon.active svg {
  color: #e4e6eb !important;
}


/* --- Ховер для всех --- */
.mobile-icon-link:hover svg,
.mobile-icon-link:hover svg path,
.header-icon:hover svg,
.header-icon:hover svg path,
.desktop-icon-link:hover svg,
.desktop-icon-link:hover svg path,
.desktop-home-link:hover,
.desktop-home-link:hover svg,
.desktop-home-link:hover svg path,
.header-icon.active:hover,
.header-icon.active:hover svg,
.header-icon.active:hover svg path {
  fill: #e74c3c !important;
  stroke: #e74c3c !important;
  color: #e74c3c !important;
}

/* ============================================================
   Домик (Главная) и Чат — контурные, а не заливные
   ============================================================ */

/* Светлая тема */
.desktop-home-link svg,
.desktop-home-link svg *,
.desktop-home-link svg path,
.desktop-home-link svg polyline,
.desktop-home-link svg circle,
.desktop-home-link svg rect,
.header-icon.active svg,
.header-icon.active svg *,
.header-icon.active svg path,
.header-icon.active svg polyline,
.header-icon.active svg circle,
.mobile-icon-link svg,
.mobile-icon-link svg *,
.mobile-icon-link svg path,
.mobile-icon-link svg polyline,
.mobile-icon-link svg circle,
.mobile-icon-link svg rect {
  fill: none !important;
  stroke: #65676b !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Тёмная тема — светлая обводка */
body.night-mode .desktop-home-link svg,
body.night-mode .desktop-home-link svg *,
body.night-mode .desktop-home-link svg path,
body.night-mode .desktop-home-link svg polyline,
body.night-mode .header-icon.active svg,
body.night-mode .header-icon.active svg *,
body.night-mode .header-icon.active svg path,
body.night-mode .header-icon.active svg polyline,
body.night-mode .mobile-icon-link svg,
body.night-mode .mobile-icon-link svg *,
body.night-mode .mobile-icon-link svg path,
body.night-mode .mobile-icon-link svg circle,
[data-theme="dark"] .desktop-home-link svg,
[data-theme="dark"] .desktop-home-link svg path,
[data-theme="dark"] .desktop-home-link svg polyline,
[data-theme="dark"] .header-icon.active svg,
[data-theme="dark"] .header-icon.active svg path,
[data-theme="dark"] .mobile-icon-link svg,
[data-theme="dark"] .mobile-icon-link svg path {
  fill: none !important;
  stroke: #e4e6eb !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Ховер — красный контур */
.desktop-home-link:hover svg,
.desktop-home-link:hover svg path,
.desktop-home-link:hover svg polyline,
.header-icon.active:hover svg,
.header-icon.active:hover svg path,
.mobile-icon-link:hover svg,
.mobile-icon-link:hover svg path {
  fill: none !important;
  stroke: #e74c3c !important;
}
/* Чат — на все состояния */
.icon-btn[class*="chat"] svg,
.icon-btn[class*="chat"] svg path,
.js_header-chat svg,
.js_header-chat svg path,
.dropdown.js_live-messages > a svg,
.dropdown.js_live-messages > a svg path {
  fill: none !important;
  stroke: #65676b !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.night-mode .dropdown.js_live-messages > a svg,
body.night-mode .dropdown.js_live-messages > a svg path {
  fill: none !important;
  stroke: #e4e6eb !important;
}

/* Мобильный сайдбар — скрыт по умолчанию, показывается только при .active */
@media (max-width: 767.98px) {
  .sg-offcanvas-sidebar {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #fff !important;
    overflow-y: auto !important;
    transition: transform 0.3s ease !important;
    transform: translateX(-100%) !important;
  }
  
  body.night-mode .sg-offcanvas-sidebar {
    background: #242526 !important;
  }
  
  /* Показываем только когда Sngine навешивает .active */
  .sg-offcanvas.active .sg-offcanvas-sidebar,
  .sg-offcanvas-sidebar.active {
    display: block !important;
    transform: translateX(0) !important;
  }
  
  /* Затемнение фона при открытом меню */
  .sg-offcanvas.active::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
  }
}

/* ============================================================
   DAYTIME MESSAGE — лёгкая косметика + цветные иконки
   ============================================================ */

/* Карточка */
.daytime_message {
    padding: 12px 40px 12px 14px !important;
    margin: 10px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease !important;
}

.daytime_message:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Иконка — фиксированный размер */
.daytime_message > svg,
.daytime_message > img,
.daytime_message svg.svg-icon,
.daytime_message .daytime-icon svg,
.daytime_message .daytime-icon-svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: inline-block !important;
    transform-origin: center center !important;
}

/* Заголовок */
.daytime_message strong,
.daytime_message b {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}

/* Описание */
.daytime_message p,
.daytime_message span {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* Кнопка закрытия */
.daytime_message .js_daytime-remover,
.daytime_message .close {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
}

.daytime_message .js_daytime-remover:hover,
.daytime_message .close:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}



/* ============================================================
   DAYTIME ICON — цвет и вращение (только утро)
   ============================================================ */

.daytime-icon-svg {
    display: inline-block;
    transform-origin: center center;
    /* Дефолт — красный */
    color: #e74c3c;
    stroke: #e74c3c;
    transition: color 0.3s ease, stroke 0.3s ease;
    /* БЕЗ анимации — она ниже, только для утра */
}

/* --- УТРО: цвет + вращение --- */
.daytime-icon-svg.daytime-morning {
    color: #f39c12;
    stroke: #f39c12;
    animation: daytimeSpin 20s linear infinite;
}

body.night-mode .daytime-icon-svg.daytime-morning {
    color: #fbbf24;
    stroke: #fbbf24;
}

/* --- ПОЛДЕНЬ: цвет, БЕЗ вращения --- */
.daytime-icon-svg.daytime-noon {
    color: #e74c3c;
    stroke: #e74c3c;
    animation: none;
}

body.night-mode .daytime-icon-svg.daytime-noon {
    color: #ff6a61;
    stroke: #ff6a61;
}

/* --- ВЕЧЕР: цвет, БЕЗ вращения --- */
.daytime-icon-svg.daytime-evening {
    color: #6d28d9;
    stroke: #6d28d9;
    animation: none;
}

body.night-mode .daytime-icon-svg.daytime-evening {
    color: #a78bfa;
    stroke: #a78bfa;
}

/* --- Тёмная тема — базовый цвет --- */
body.night-mode .daytime-icon-svg {
    color: #ff6a61;
    stroke: #ff6a61;
}

/* --- Анимация --- */
@keyframes daytimeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   ПЛАНШЕТ ВЕРТИКАЛЬНО (768–991px) — как на телефоне
   Нижнее меню, без сайдбара, лента на всю ширину
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* 1. Скрываем ЛЕВЫЙ сайдбар полностью */
  body .sg-offcanvas-sidebar,
  body .col-md-4.col-lg-3.sg-offcanvas-sidebar,
  body .left-sidebar,
  body .main-side-nav-card,
  body .sg-offcanvas > .row > .sg-offcanvas-sidebar {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
  }

  /* 2. Основной контейнер — на всю ширину */
  body .sg-offcanvas-mainbar,
  body .col-md-8.col-lg-9.sg-offcanvas-mainbar,
  body .sg-offcanvas > .row > .sg-offcanvas-mainbar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 3. Внутренний .row — лента на всю ширину */
  body .sg-offcanvas-mainbar > .row > .middle-feed {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 4. Правый сайдбар — под лентой, на всю ширину, скрыт по умолчанию */
  body .sg-offcanvas-mainbar > .row > .right-sidebar {
    display: none !important;
  }

  /* 5. Контейнер — без ограничений */
  body .main-wrapper > .container,
  body .main-wrapper > .container-fluid,
  body .sg-offcanvas .container,
  body .sg-offcanvas .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 6. Сторис, публикатор, табы — на всю ширину */
  body .stories-wrapper-container,
  body .ftabs-wrapper,
  body .dummy-publisher-trigger,
  body .pkb-reactions-row,
  body .js_posts_stream,
  body .js_posts_stream > ul,
  body .js_posts_stream > ul > li,
  body .js_posts_stream .post {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 7. НИЖНЕЕ МЕНЮ — показываем на планшете (только вертикально) */
  body .footer-bottom-bar,
  body .footer-bottom-bar.d-block.d-md-none,
  body .sg-bottom-bar,
  body .mobile-bottom-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background: #fff !important;
  }

  body.night-mode .footer-bottom-bar,
  body.night-mode .sg-bottom-bar {
    background: #242526 !important;
  }

  /* 8. Отступ снизу под нижнее меню, чтобы контент не перекрывался */
  body {
    padding-bottom: 70px !important;
  }

  /* 9. Скрываем "мобильную" шапку и оставляем десктопную */
  body .mobile-header {
    display: none !important;
  }
  body .desktop-header {
    display: flex !important;
  }
}

/* ============================================================
   ПЛАНШЕТ (768–991px) — страницы БЕЗ ленты на всю ширину
   Розыгрыши, знакомства, поиск и т.п.
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* 1. Главный контейнер без сайдбара — 100% ширины */
  body .sg-offcanvas-mainbar,
  body .col-md-8.col-lg-9.sg-offcanvas-mainbar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 auto !important;
  }

  /* 2. Если внутри mainbar один центральный блок — на всю ширину */
  body .sg-offcanvas-mainbar > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 3. Все контейнеры карточек внутри — на всю ширину */
  body .sg-offcanvas-mainbar .card,
  body .sg-offcanvas-mainbar .card-body,
  body .sg-offcanvas-mainbar .container,
  body .sg-offcanvas-mainbar .container-fluid,
  body .sg-offcanvas-mainbar .mv-wrap,
  body .sg-offcanvas-mainbar .movies-wrapper,
  body .sg-offcanvas-mainbar .dating-wrapper,
  body .sg-offcanvas-mainbar .giveaways-wrapper,
  body .sg-offcanvas-mainbar .contests-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 4. Если это страница с узкой сеткой — растягиваем */
  body .sg-offcanvas-mainbar .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  /* 5. Модалка/контент знакомств — на всю ширину */
  body .dating-container,
  body .dating-card,
  body .dating-profile-card,
  body .swipe-container,
  body .swipe-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 6. Универсальный сброс отступов для mainbar без сайдбара */
  body .sg-offcanvas-mainbar:only-child,
  body .sg-offcanvas-mainbar:not(:has(~ .right-sidebar)) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

/* ============================================================
   ТЁМНАЯ ТЕМА — читаемые светлые кнопки для гостей
   (Войти / Регистрация в шапке)
   ============================================================ */

/* Кнопка btn-light в тёмной теме — тёмный текст */
body.night-mode .btn-light,
body.night-mode a.btn-light,
body.night-mode button.btn-light,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] a.btn-light {
    background-color: #ffffff !important;
    border-color: #e4e6eb !important;
    color: #1c1e21 !important;
    font-weight: 600 !important;
}

body.night-mode .btn-light:hover,
body.night-mode a.btn-light:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] a.btn-light:hover {
    background-color: #e4e6eb !important;
    color: #1c1e21 !important;
}

/* На случай если тема красит ссылки внутри btn через `a` */
body.night-mode a.btn-light,
body.night-mode a.btn-light:visited,
body.night-mode a.btn-light:hover,
body.night-mode a.btn-light:focus,
html[data-theme="dark"] a.btn-light,
html[data-theme="dark"] a.btn-light:visited,
html[data-theme="dark"] a.btn-light:hover {
    color: #1c1e21 !important;
    text-decoration: none !important;
}

/* Чтобы кнопка «Войти» тоже оставалась контрастной */
body.night-mode .btn-primary,
body.night-mode a.btn-primary {
    color: #ffffff !important;
}

body.night-mode a.btn-light {
    color: #1c1e21 !important;
}