.avatar-letter {
 width: 36px; height: 36px; border-radius: 50%; background: #1877f2; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; 
}

.post-menu-dropdown .danger-item {
 color: #e41e3f; 
}

.post-content {
 padding: 10px 16px; font-size: .95rem; line-height: 1.6; color: var(--text-primary); word-break: break-word; 
}

.post-images {
 padding: 0 16px; 
}

.post-images img {
 width: 100%; border-radius: var(--r-md); margin-bottom: 8px; cursor: pointer; 
}

.post-image-grid {
 display: grid; gap: 4px; padding: 0 16px; 
}

.post-image-grid img {
 width: 100%; border-radius: var(--r-sm); cursor: pointer; object-fit: cover; 
}

.post-reactions-summary:hover {
 background: var(--bg-hover); 
}

.post-comments-count {
 cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: background .12s; 
}

.post-comments-count:hover {
 background: var(--bg-hover); 
}

.post-share-count {
 cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: background .12s; 
}

.post-share-count:hover {
 background: var(--bg-hover); 
}

.post-action-label {
 font-size: .88rem; 
}

.reactions-popup.show {
 display: flex; 
}

/* Live stream */
.post-live-container iframe {
 width: 100% !important; aspect-ratio: 16/9 !important; display: block !important; 
}

/* ═══════════════════════════════════════
   COMPOSER — Clean & Inviting
   ═══════════════════════════════════════ */
.composer {

  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom:10px;
  padding:10px;
  transition: box-shadow var(--t-normal), border-color var(--t-normal);

}

.composer:focus-within {

  box-shadow: var(--shadow-md);
  border-color: var(--c-primary-soft);

}

.composer-header {

  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);

}

.composer-header .post-avatar {

  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;

}

.composer-input {

  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--text-primary);
  outline: none;
  overflow-y: auto;
  line-height: 1.55;
  word-break: break-word;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  background: transparent;

}

.composer-input:empty:before {

  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;

}

.composer-input:focus {
 background: var(--bg-secondary); 
}

.composer-divider {

  height: 1px;
  background: var(--border-light);
  margin: var(--space-sm) var(--space-lg);

}

.composer-options {

  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  flex-wrap: wrap;

}

.composer-opt {

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: var(--r-full);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);

}

.composer-opt:hover {

  background: var(--bg-secondary);
  color: var(--text-primary);

}

.composer-opt i {
 font-size: .95rem; 
}

.composer-link-input {

  flex: 1;
  min-width: 150px;
  padding: 8px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-full);
  font-size: .85rem;
  color: var(--text-primary);
  background: var(--bg-secondary);
  outline: none;
  transition: all var(--t-fast);

}

.composer-link-input:focus {

  border-color: var(--c-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);

}

.composer-link-input::placeholder {
 color: var(--text-tertiary); 
}

/* Media preview */
.image-preview {

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0 var(--space-lg) var(--space-md);

}

.image-preview img {

  max-height: 180px;
  border-radius: var(--r-md);
  border: 2px solid var(--border-light);
  object-fit: cover;
  transition: border-color var(--t-fast);

}

.image-preview img:hover {
 border-color: var(--c-primary-soft); 
}

/* Composer options row */
.composer-options-row {

  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 6px 14px;
  flex-wrap: wrap;

}

.composer-options-row label {

  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .83rem;
  color: var(--text-secondary);
  cursor: pointer;

}

.composer-options-row label select,
.composer-options-row label input[type="text"] {

  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: .82rem;
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast);

}

.composer-options-row label select:focus,
.composer-options-row label input[type="text"]:focus {

  border-color: var(--c-primary);

}

.composer-options-row .tags-input {
 flex: 1; min-width: 120px; 
}

/* الشريط الرئيسي */
.c-bar {

  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 8px 6px 6px;
  border-radius: 28px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-light);
  transition: border-color .2s, box-shadow .2s;

}

/* ── زر + ── */
.c-plus-wrap {
 position: relative; flex-shrink: 0; margin-top: auto;
}

.c-plus-btn {

  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background:transparent;
  color: var(--text-secondary);
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .2s;
  

}

.c-plus-btn:hover {
  transform: scale(1.05); 
}

.c-plus-btn.active {
 transform: rotate(45deg);  
}

/* قائمة + */
.c-plus-dropdown {

  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 200;
  min-width: 190px;
  padding: 6px;
  overflow: hidden;

}

.c-plus-dropdown.open {
 display: block; animation: fadeUp .2s var(--ease-out); 
}

.c-plus-item {

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-primary);
  border-radius: 12px;
  transition: background .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: inherit;
  font-family: inherit;

}

.c-plus-item:hover {
 background: var(--bg-secondary); 
}

.c-plus-item i {
 font-size: 1.05rem; width: 22px; text-align: center; 
}

.c-plus-divider {
 height: 1px; background: var(--border-light); margin: 4px 8px; 
}

/* ── حقل الإدخال ── */
.c-input-wrap {
 flex: 1; min-width: 0; 
}

.c-input-wrap .composer-input {

  background: transparent !important;
  border-radius: 0;
  padding: 8px 12px;
  min-height: 108px;
  max-height: 220px;
  font-size: .92rem;
  line-height: 1.5;

}

/* ── أدوات اليمين ── */
.c-tools {
 display: flex; align-items: center; gap: 6px; flex-shrink: 0;margin-top: auto; 
}

.c-tools-wrap {
 position: relative; 
}

.c-tool-btn {

  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .2s;

}

.c-tool-btn:hover {
 background: var(--border-default); color: var(--text-primary); 
}

.c-tool-btn.active {
 background: var(--c-primary-light); color: var(--c-primary); transform: rotate(90deg); 
}

/* قائمة الأدوات */
.c-tools-dropdown {

  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 200;
  min-width: 230px;
  padding: 8px;
  overflow: hidden;

}

.c-tools-dropdown.open {
 display: block; animation: fadeUp .2s var(--ease-out); 
}

/* صف في قائمة الأدوات */
.c-tool-row {

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s;

}

.c-tool-row:hover {
 background: var(--bg-secondary); 
}

.c-tool-label {
 display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-primary); 
}

.c-tool-label i {
 width: 18px; text-align: center; 
}

/* Toggle Switch */
.c-toggle {
 position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; 
}

.c-toggle input {
 opacity: 0; width: 0; height: 0; 
}

.c-toggle-slider {

  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-default);
  border-radius: 24px;
  transition: background .25s;

}

.c-toggle-slider::before {

  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);

}

.c-toggle input:checked + .c-toggle-slider {
 background: var(--c-primary); 
}

.c-toggle input:checked + .c-toggle-slider::before {
 transform: translateX(18px); 
}

/* أزرار الرابط والتاجات */
.c-tool-action-btn {

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text-primary);
  border-radius: 12px;
  transition: background .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: inherit;
  font-family: inherit;

}

.c-tool-action-btn:hover {
 background: var(--bg-secondary); 
}

.c-tool-action-btn i:first-child {
 width: 18px; text-align: center; 
}

.c-tool-chevron {
 margin-inline-start: auto; font-size: .7rem; color: var(--text-tertiary); transition: transform .2s; 
}

/* ── زر الإرسال ── */
.c-send-btn {

  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-size: .92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
  flex-shrink: 0;

}

.c-send-btn:hover {
 background: #2563eb; transform: scale(1.06); box-shadow: 0 4px 14px rgba(37,99,235,.35); 
}

.c-send-btn:disabled {
 opacity: .6; cursor: not-allowed; transform: none; 
}

/* ── لوحات التوسع (رابط / تاجات) ── */
.c-expand-panel {

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 52px;
  animation: fadeUp .2s var(--ease-out);

}

.c-expand-panel input {

  flex: 1;
  border: none;
  background: transparent;
  font-size: .88rem;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;

}

.c-expand-panel input::placeholder {
 color: var(--text-tertiary); 
}

.c-expand-close {

  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;

}

.c-expand-close:hover {
 background: var(--c-danger-light); color: var(--c-danger); 
}

/* ── Emoji Panel ── */
.c-emoji-panel {

  display: none;
  position: absolute;
  top: calc(85%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 250;
  width: 293px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;

}

.c-emoji-panel.open {
 display: block; animation: fadeUp .2s var(--ease-out); 
}

.c-emoji-cat-label {
 font-size: .72rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .5px; padding: 8px 4px 4px; 
}

.c-emoji-cat {
 display: flex; flex-wrap: wrap; gap: 2px; padding-bottom: 6px; 
}

.c-emoji-btn {

  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .12s;

}

.c-emoji-btn:hover {
 background: var(--bg-secondary); transform: scale(1.15); 
}

/* Override: إخفاء العناصر القديمة داخل الكومبوزر الجديد */
#mainComposer .composer-header,
#mainComposer .composer-divider,
#mainComposer .composer-options,
#mainComposer .composer-options-row {
 display: none !important; 
}

#mainComposer .image-preview {
 padding: 8px 16px 4px 52px; 
}

#mainComposer .upload-progress-wrap {
 margin: 0 12px 8px; border-radius: 12px; 
}

/* Dark mode overrides */
body.dark .c-bar {
 background: var(--bg-secondary); border-color: var(--border-default); 
}

body.dark .c-plus-btn {
 background: var(--c-primary); 
}

body.dark .c-tool-btn {
 background: var(--bg-tertiary); 
}

body.dark .c-tools-dropdown,
body.dark .c-plus-dropdown,
body.dark .c-emoji-panel {
 background: var(--bg-elevated); border-color: var(--border-default); 
}

body.dark .c-toggle-slider {
 background: var(--border-default); 
}

body.dark .c-expand-close {
 background: var(--bg-tertiary); color: var(--text-tertiary); 
}

/* Responsive */
@media (max-width: 600px) {

  .c-bar { border-radius: 20px; padding: 5px 6px 5px 5px; }
  .c-plus-btn { width: 34px; height: 34px; font-size: .95rem; }
  .c-send-btn { width: 34px; height: 34px; font-size: .85rem; }
  .c-tool-btn { width: 32px; height: 32px; font-size: .85rem; }
  .c-input-wrap .composer-input { padding: 6px 8px; font-size: .88rem; }
  .c-tools-dropdown { min-width: 210px; right: -8px; }
  .c-plus-dropdown { min-width: 170px; }
  .c-emoji-panel { width: 280px; max-height: 260px; }
  .c-expand-panel { padding-left: 46px; }

}

/* ═══════════════════════════════════════
   POSTS — Cards with Elegance
   ═══════════════════════════════════════ */
.feed {
 display: flex; flex-direction: column; gap: var(--space-lg); 
}

.post {

  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light);
  transition: all var(--t-normal);

}

.post:hover {
 box-shadow: var(--shadow-sm); 
}

.post-pinned {

  border-color: rgba(217,119,6,0.25);

}

.post-pinned:hover {

  box-shadow: 0 0 0 1px rgba(217,119,6,0.15), var(--shadow-sm);

}

.pin-badge {

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--c-warning-light);
  color: var(--c-warning);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  margin: 0 auto;
  letter-spacing: 0.01em;

}

.pin-badge i {
 font-size: .72rem; 
}

.post-header {

  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);

}

.post-avatar {

  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;

}

.post-meta {

  flex: 1;
  min-width: 0;

}

.post-author {

  font-weight: 700;
  font-size: .93rem;
  color: var(--text-primary);

}

.owner-tag {
 color: var(--c-primary); font-size: .78rem; margin-left: 4px; 
}

.post-time {

  font-size: .8rem;
  color: var(--text-tertiary);

}

.post-menu-btn {

  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);

}

.post-menu-btn:hover {
 color: var(--text-primary); background: var(--bg-secondary); 
}

.post-body {

  padding: 4px var(--space-xl) var(--space-md);
  font-size: .95rem;
  color: var(--text-primary);
  line-height: 1.65;
  word-wrap: break-word;
  white-space: pre-wrap;

}

/* ═══════════════════════════════════════════════════════════════
   زر "عرض المزيد" للنصوص الطويلة
   ═══════════════════════════════════════════════════════════════ */

.post-body-truncated {
  position: relative;
}

.post-body-truncated .post-body-visible {
  /* النص الظاهر دائماً */
}

.post-body-truncated .post-body-hidden {
  /* النص المخفي — يُعرض عند التوسيع */
  margin-top: 0;
}

/* علامة "..." في نهاية الجزء الظاهر */
.post-body-ellipsis {
  display: inline;
  color: var(--text-tertiary, #65676b);
  font-weight: 600;
  margin-inline-start: 2px;
  user-select: none;
}

/* إخفاء "..." عند التوسيع */
.post-body-expanded .post-body-ellipsis {
  display: none;
}

/* تدرّج خفيف في حافة النص المطوي للإيحاء بوجود المزيد */
.post-body-truncated:not(.post-body-expanded) .post-body-visible {
  position: relative;
}

.post-see-more-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  background: none;
  border: none;
  color: var(--c-primary, #1877f2);
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
  user-select: none;
}

.post-see-more-btn:hover {
  background: var(--c-primary-light, rgba(24, 119, 242, 0.08));
  text-decoration: none;
}

.post-see-more-btn:focus {
  outline: 2px solid var(--c-primary, #1877f2);
  outline-offset: 2px;
}

/* داخل عنوان الفيديو (h1.video-page-title) */
.video-page-title.post-body-truncated .post-see-more-btn {
  font-size: .9rem;
  font-weight: 600;
  margin-top: 8px;
  display: block;
}

/* داخل البوب أب (الخلفية الداكنة) */
.post-popup-body .post-see-more-btn {
  color: #4aa3ff;
}
.post-popup-body .post-see-more-btn:hover {
  background: rgba(74, 163, 255, 0.12);
}

/* Post Image */
.post-image {

  width: 100%;
  max-height: 500px;
  object-fit: cover;
  cursor: pointer;
  transition: filter var(--t-normal);

}

.post-image:hover {
 filter: brightness(0.97); 
}

/* Post Gallery */
.post-gallery {

  position: relative;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  background: #000;

}

.gallery-img {

  width: 100%;
  max-height: 500px;
  object-fit: contain;
  display: block;
  margin: 0 auto;

}

.gallery-prev, .gallery-next {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--t-fast);
  z-index: 5;
  box-shadow: var(--shadow-md);

}

.post-gallery:hover .gallery-prev,
.post-gallery:hover .gallery-next {
 opacity: 1; 
}

.gallery-prev {
 left: var(--space-md); 
}

.gallery-next {
 right: var(--space-md); 
}

.gallery-prev:hover, .gallery-next:hover {
 background: #fff; transform: translateY(-50%) scale(1.05); 
}

.gallery-counter {

  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
  backdrop-filter: blur(4px);

}

/* Link Card */
.link-card {

  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 var(--space-xl) var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--r-md);
  transition: background var(--t-fast);

}

.link-card i {
 font-size: 1.3rem; color: var(--c-primary); 
}

.link-card strong {
 display: block; font-size: .88rem; color: var(--text-primary); 
}

.link-card small {
 color: var(--text-tertiary); font-size: .78rem; word-break: break-all; 
}

/* Stats bar */
.post-stats-bar {

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  font-size: .83rem;
  color: var(--text-tertiary);

}

.stats-right {
 display: flex; gap: var(--space-md); 
}

.post-reactions-summary {
 display: flex; align-items: center; gap: 4px; cursor: default; 
}

.react-emoji {
 font-size: .95rem; line-height: 1; 
}

.react-total-count {
 color: var(--text-tertiary); font-size: .83rem; 
}

.post-comments-count, .post-share-count {

  cursor: pointer;
  transition: color var(--t-fast);

}

.post-comments-count:hover, .post-share-count:hover {
 color: var(--c-primary); 
}

/* Post actions */
.post-actions {

  display: flex;
  align-items: center;
  padding: 2px var(--space-md);
  gap: 2px;

}

.post-action {

  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t-fast);
  flex: 1;
  justify-content: center;
  text-decoration: none;

}

.post-action:hover {
 background: var(--bg-secondary); color: var(--c-primary); 
}

.post-action.reacted {
 color: var(--c-primary); 
}

.post-action.reacted i {
 animation: pop .3s var(--ease-spring); 
}

@keyframes pop {

  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }

}

.current-react-emoji {
 font-size: 1rem; 
}

/* Post Filter Bar */
.post-filter-bar {

  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border-radius: var(--r-full);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);

}

.filter-btn {

  padding: 7px 16px;
  border: none;
  border-radius: var(--r-full);
  background: none;
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);

}

.filter-btn:hover {
 background: var(--bg-secondary); color: var(--text-primary); 
}

.filter-btn.active {
 background: var(--c-primary); color: #fff; 
}

/* Post Privacy Badge */
.post-privacy-badge {

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);

}

.post-privacy-badge.private {

  background: var(--c-warning-light);
  color: var(--c-warning);
  border: 1px solid rgba(217,119,6,0.2);

}

/* ═══════════════════════════════════════
   REACTIONS POPUP
   ═══════════════════════════════════════ */
.reaction-wrap {
 position: relative; flex: 1; display: flex; justify-content: center; 
}

.reactions-popup {

  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border-radius: var(--r-full);
  padding: 8px 14px;
  box-shadow: var(--shadow-lg);
  display: none;
  gap: 4px;
  z-index: 30;
  border: 1px solid var(--border-default);
  white-space: nowrap;

}

.reactions-popup.visible {
 display: flex; animation: reacPop .25s var(--ease-spring); 
}

@keyframes reacPop {

  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

}

.reaction-opt {

  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform .15s var(--ease-spring);
  padding: 4px 5px;
  line-height: 1;
  border-radius: var(--r-full);

}

.reaction-opt:hover {
 transform: scale(1.4) translateY(-4px); 
}

.reaction-opt.active {
 transform: scale(1.2); 
}

/* ═══════════════════════════════════════
   PHOTOS — Grid
   ═══════════════════════════════════════ */
.photo-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;

}

.photo-item {

  position: relative;
  aspect-ratio: 1/1.618;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;

}

.photo-item img {

  
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);

}

.photo-item:hover img {
 transform: scale(1.06); 
}

.photo-item-overlay {

  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-xl);
  padding-bottom: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal);

}

.photo-item:hover .photo-item-overlay,
.photo-item.touched .photo-item-overlay {
 opacity: 1; 
}

.photo-item-stat {

  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);

}

.photo-item-stat i {
 font-size: .95rem; 
}

.photo-item-stat .fa-heart {
 color: #fff; 
}

/* ═══════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════ */
.lightbox {

  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  backdrop-filter: blur(8px);

}

.lightbox.show {
 display: flex; animation: fadeIn .2s ease-out; 
}

.lightbox img {

  max-width: 92%;
  max-height: 90%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  transition: transform .2s ease-out;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;

}

@keyframes fadeIn {

  from { opacity: 0; }
  to { opacity: 1; }

}

/* ═══════════════════════════════════════
   VIDEO THUMBNAIL
   ═══════════════════════════════════════ */
.video-thumb {
 position: relative; background: #000; 
}

.video-thumb video {
 width: 100%; height: 100%; object-fit: cover; display: block; 
}

.video-thumb .video-play-badge {

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  pointer-events: none;
  transition: background var(--t-normal);

}

.video-thumb:hover .video-play-badge {
 background: rgba(0,0,0,0.4); 
}

.video-thumb .video-play-badge i {

  background: rgba(0,0,0,0.55);
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 4px;
  backdrop-filter: blur(4px);

}

/* ═══════════════════════════════════════
   VIDEO LIST (YouTube-style grid)
   ═══════════════════════════════════════ */
.vl-sort-bar {

  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: 4px 0;

}

.vl-sort-btn {

  padding: 7px 18px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-card);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);

}

.vl-sort-btn:hover {
 border-color: var(--c-primary); color: var(--c-primary); 
}

.vl-sort-btn.active {
 background: var(--c-primary); border-color: var(--c-primary); color: #fff; 
}

.vl-list {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) var(--space-lg);

}

.vl-card {

  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
  transition: none;
  padding: 0;
  align-items: stretch;
  background: none;

}

.vl-card:hover .vl-thumb {
 box-shadow: var(--shadow-md); 
}

.vl-thumb {

  position: relative;
  width: 100%;
  min-width: unset;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  transition: box-shadow var(--t-normal);

}

.vl-video {
 width: 100%; height: 100%; object-fit: cover; display: block; 
}

.vl-play-icon {

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  color: #fff;
  font-size: 1.5rem;
  pointer-events: none;
  transition: all var(--t-fast);
  opacity: 0;

}

.vl-card:hover .vl-play-icon {
 background: rgba(0,0,0,0.3); opacity: 1; 
}

.vl-play-icon i {

  background: rgba(0,0,0,0.6);
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 3px;
  backdrop-filter: blur(4px);

}

.vl-duration {

  position: absolute;
  bottom: 6px;
  right: 7px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .3px;
  display: none;

}

.vl-info {

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 2px 4px;
  min-width: 0;

}

.vl-info-text {
 flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; 
}

.vl-title {

  font-size: .88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

}

.vl-title-text {
 display: block; 
}

.vl-more-btn {
 display: none !important; 
}

.vl-meta {

  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--text-tertiary);
  margin-top: 1px;

}

.vl-reactions {
 display: flex; align-items: center; gap: 3px; color: var(--c-danger); 
}

.vl-views {
 display: flex; align-items: center; gap: 3px; color: var(--text-tertiary); 
}

.vl-menu-btn {

  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-full);
  line-height: 1;
  transition: all var(--t-fast);
  flex-shrink: 0;
  margin-top: -1px;

}

.vl-menu-btn:hover {
 background: var(--bg-secondary); 
}

@media(max-width:700px) {
  .vl-list { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }

}

@media(max-width:420px) {

  .vl-list { grid-template-columns: 1fr; gap: var(--space-md); }
  .vl-sort-btn { padding: 5px 12px; font-size: .78rem; }

}

/* Video View Count */
.video-view-count {

  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 2px;
  font-size: .82rem;
  color: var(--text-tertiary);
  line-height: 1;

}

.video-view-count i {
 font-size: .8rem; color: var(--text-tertiary); 
}

/* ═══════════════════════════════════════
   POST VIDEO PLAYER
   ═══════════════════════════════════════ */
.post-video-wrap {

  margin-top: var(--space-sm);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
  position: relative;

}

.post-video {

  width: 100%;
  max-height: 560px;
  display: block;
  background: #000;
  outline: none;

}

.video-view-badge {

  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-full);
  pointer-events: none;
  backdrop-filter: blur(8px);

}

.post-video::-webkit-media-controls-panel {

  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);

}

/* ═══════════════════════════════════════
   POST POPUP (Instagram-style modal)
   ═══════════════════════════════════════ */
.post-popup {

  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  overflow-y: auto;
  backdrop-filter: blur(4px);

}

#loginModal {
 z-index: 2000; 
}

#deleteAccountModal {
 z-index: 2000; 
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(33,33,33,.96);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: .9rem;
    font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
    z-index: 99999;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    line-height: 1.4;
}
.toast.toast-error {
    background: rgba(220,38,38,.96);
}
/* Animate in — showToast() in main.js creates the element fresh each time,
   so we animate from initial state to visible via CSS animation. */
.toast {
    animation: toastSlideIn .25s ease-out forwards;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
body.dark .toast {
    background: rgba(55,55,55,.98);
}
body.dark .toast.toast-error {
    background: rgba(180,30,30,.98);
}

.post-popup.show {
 display: flex; animation: popupFade .25s ease-out; 
}

@keyframes popupFade {
 from { opacity: 0; } to { opacity: 1; } 
}

.post-popup-card {

  position: relative;
  background: #000;
  border-radius: var(--r-lg);
  max-width: 935px;
  width: 90%;
  margin: auto;
  box-shadow: var(--shadow-xl);
  animation: popupSlide .3s var(--ease-out);
  overflow: hidden;

}

@keyframes popupSlide {

  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }

}

.post-popup-close {

  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  transition: all var(--t-fast);

}

.post-popup-close:hover {
 background: rgba(255,255,255,0.25); 
}

.post-popup-body {
 padding: 0; 
}

.post-popup-body .post {

  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #0a0a0a;
  color: #f5f5f5;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "image header"
    "image caption"
    "image comments"
    "image actions"
    "image stats"
    "image commentform";
  max-height: 85vh;

}

.post-popup-body .post-header {

  grid-area: header;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #1a1a1a;

}

.post-popup-body .post-author {
 color: #f5f5f5; 
}

.post-popup-body .post-time {
 color: #666; 
}

.post-popup-body .post-menu-btn {
 color: #888; 
}

.post-popup-body .unified-slider {
 grid-area: image; 
}

.post-popup-body .post-image {

  grid-area: image;
  width: auto;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  background: #000;
  margin: 0;
  border-radius: 0;

}

.post-popup-body .post-actions span {
 display: none; 
}

.post-popup-body .post-gallery {
 grid-area: image; max-height: 85vh; border-radius: 0; margin: 0; 
}

.post-popup-body .gallery-img {
 max-height: 85vh; object-fit: contain; 
}

.post-popup-body .gallery-prev,
.post-popup-body .gallery-next {
 opacity: 1; pointer-events: auto; width: 42px; height: 42px; font-size: 1.2rem; 
}

.post-popup-body .post-action {
 padding: 8px; flex: 0 0 auto; gap: 0; font-size: 1.05rem; 
}

.post-popup-body .post-action-label {
 display: none; 
}

.post-popup-body .post-actions {
 justify-content: flex-start; gap: 4px; 
}

.post-popup-body .reaction-wrap {
 flex: 0 0 auto; 
}

.post-popup-body .post-body {

  grid-area: caption;
  color: #f5f5f5;
  padding: 10px 16px 0;
  margin: 0;
  font-size: .92rem;
  padding-bottom: 10px;

}

.post-popup-body .comments-section {

  grid-area: comments;
  display: flex !important;
  flex-direction: column;
  margin: 0;
  padding: 10px 16px;
  border: none;
  overflow-y: auto;
  min-height: 0;
  transform: scale(0.9);

}

.no-comments-msg {

  margin: auto;
  text-align: center;
  color: #555;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.post-popup-body .comments-section::-webkit-scrollbar {
 width: 4px; 
}

.post-popup-body .comments-section::-webkit-scrollbar-thumb {
 background:transparent!important; border-radius: 10px; 
}

.post-popup-body .comments-section .no-comments-msg {

  margin: auto;
  text-align: center;
  color: #555;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.post-popup-body .comments-section .no-comments-title {
 color: #f5f5f5; font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; 
}

.post-popup-body .comments-section .no-comments-sub {
 color: #666; font-size: .85rem; margin: 0; 
}

.post-popup-body .comment-form {

  grid-area: commentform;
  padding: 10px 16px;
  border-top: 1px solid #1a1a1a;
  margin: 0;

}

.post-popup-body .comment-bubble {
 background: #1a1a1a!important; color: #f5f5f5; padding: 10px 14px; border-radius: 14px 14px 14px 4px; 
}

.post-popup-body .replies-list {
 border-left: 1px solid #222; 
}

.post-popup-body .comment-time,
.post-popup-body .cmt-reply-count,
.post-popup-body .btn-reply-toggle,
.post-popup-body .btn-comment-action {
 color: #666; 
}

.post-popup-body .comment-input {
 background: #1a1a1a; border-color: #2a2a2a; color: #f5f5f5; 
}

.post-popup-body .comment-login-prompt {
 background: #1a1a1a; border-color: #2a2a2a; color: #666; 
}

.post-popup-body .post-action:hover {
 background: #1a1a1a; color: #fff; 
}

.post-popup-body .reactions-popup {
 background: #1a1a1a; border-color: #2a2a2a; 
}

.post-popup-body .post-stats-bar {

  grid-area: stats;
  margin: 0;
  padding: 2px 16px 14px;
  border: none;
  color: #ccc;
  font-weight: 600;
  font-size: .9rem;

}

/* Hide videos/files in popup */
.post-popup-body .vp-wrapper,
.post-popup-body .post-files-list,
.post-popup-body .slider-item video,
.post-popup-body .slider-item:has(video),
.post-popup-body .slider-item:has(.vp-wrapper) {
 display: none !important; 
}

.post-popup-body .post img {
 cursor: default !important; pointer-events: none !important; 
}

.post-popup-body .unified-slider:not(:has(.slider-item img)) {
 display: none !important; 
}

@media (max-width:760px) {

  .post-popup-body .post {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "header"
      "image"
      "caption"
      "actions"
      "stats"
      "comments"
      "commentform";
    max-height: none;
  }
  .post-popup-body .post-image { max-height: 60vh; }
  .post-popup-body .comments-section { max-height: 40vh; }
  .post-popup {padding:0;margin:0}
  .post-popup-card {max-width:101%;width:101%}
  ::-webkit-scrollbar{width: 0px;}
  ::-webkit-scrollbar-thumb {background:transparent !important;}

}

/* ═══════════════════════════════════════
   PRODUCTS
   ═══════════════════════════════════════ */
.product-grid {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); 
}

.product-card {

  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-normal);
  border: 1px solid var(--border-light);
  position: relative;

}

.product-card:hover {
 transform: translateY(-4px); box-shadow: var(--shadow-lg); 
}

.product-img-wrap {
 position: relative; width: 100%; aspect-ratio: 1; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; 
}

.product-img-wrap img {
 max-width: 90%; max-height: 90%; object-fit: contain; 
}

.discount-badge {
 position: absolute; top: 10px; right: 10px; background: var(--c-warning-light); color: var(--c-warning); padding: 4px 10px; border-radius: var(--r-sm); font-size: .75rem; font-weight: 700; 
}

.out-of-stock-badge {
 position: absolute; top: 10px; left: 10px; background: var(--c-danger-light); color: var(--c-danger); padding: 4px 10px; border-radius: var(--r-sm); font-size: .75rem; font-weight: 700; 
}

.out-of-stock-card {
 opacity: .7; pointer-events: auto; 
}

.out-of-stock-card .product-img-wrap::after {
 content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.08); border-radius: var(--r-lg); 
}

.product-info {
 padding: var(--space-md); 
}

.product-title {
 font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
}

.product-pricing {
 display: flex; flex-direction: column; gap: 2px; 
}

.current-price {
 font-size: 1.1rem; font-weight: 800; color: var(--text-primary); 
}

.old-price {
 font-size: .85rem; color: var(--text-tertiary); text-decoration: line-through; 
}
.video-sidebar a {text-decoration:none}
@media (max-width: 1024px) {
        .video-page-main .video-page-title,.video-page-main .video-page-channel-row,.video-page-main .yt-comments{padding:10px}
        
        .video-sidebar {padding:10px!important}
        .video-page-container{padding:0!important;}
.video-page-player {
 border-radius:0!important;
}
.video-page-grid {display:block!important}
    .video-page-main {padding:0!important;margin:0!important}
 .product-grid { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 768px) {
 .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } 
 
 .video-related-card {display:block!important}
 .video-related-thumb {width:auto!important}
 .video-related-info {padding:5px;}

 /* إخفاء أزرار الأسهم على الجوال — السحب (swipe) هو الطريقة الوحيدة */
 .slider-prev, .slider-next { display: none !important; }
 .gallery-prev, .gallery-next { display: none !important; }
}

@media (max-width: 480px) {
        .post-popup-card {width:99%!important;height:85vh!important;border-radius:10px!important}

 .product-grid { grid-template-columns: 1fr; } 
}

/* ═══════════════════════════════════════
   MEDIA PICKER
   ═══════════════════════════════════════ */
.media-btn-wrap {
 position: relative; display: inline-flex; 
}

.media-picker-dropdown {

  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 160px;
  overflow: hidden;

}

.media-picker-dropdown.open {
 display: block; animation: fadeUp .2s var(--ease-out); 
}

.media-picker-item {

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-primary);
  transition: background var(--t-fast);
  white-space: nowrap;

}

.media-picker-item:hover {
 background: var(--bg-secondary); 
}

.media-preview-wrap {
 position: relative; display: inline-block; margin-top: 10px; 
}

.media-preview-wrap img, .media-preview-wrap video {
 max-height: 220px; border-radius: var(--r-md); display: block; 
}

.media-clear-btn {

  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  backdrop-filter: blur(4px);

}

.media-clear-btn:hover {
 background: rgba(0,0,0,0.85); 
}

.attachment-preview-bar {

  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--c-primary-light);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--r-md);
  font-size: .85rem;
  color: var(--c-primary-text);

}

.attachment-preview-bar i {
 color: var(--c-primary); 
}

.attachment-preview-bar span {
 flex: 1; 
}

.upload-progress-wrap {

  display: none;
  margin-top: var(--space-md);
  padding: var(--space-md) 14px;
  background: var(--c-primary-light);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--r-md);

}

.upload-progress-label {

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--c-primary);
  font-weight: 600;
  margin-bottom: 6px;

}

.upload-progress-label .upload-pct {
 font-size: .82rem; font-weight: 700; 
}

.upload-progress-track {
 width: 100%; height: 6px; background: rgba(37,99,235,0.15); border-radius: var(--r-full); overflow: hidden; 
}

.upload-progress-bar {
 height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-primary), #60a5fa); border-radius: var(--r-full); transition: width .2s ease; 
}

.post-attachment-card {

  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: 10px;
  padding: var(--space-md) var(--space-lg);
  background: var(--c-accent-light);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-accent);
  transition: all var(--t-fast);

}

.post-attachment-card:hover {
 background: rgba(139,92,246,0.12); transform: translateY(-1px); 
}

.attachment-icon {
 font-size: 1.6rem; color: var(--c-accent); 
}

.attachment-info {
 display: flex; flex-direction: column; gap: 2px; 
}

.attachment-name {
 font-weight: 600; font-size: .9rem; word-break: break-all; 
}

.attachment-action {
 font-size: .78rem; color: var(--c-accent); display: flex; align-items: center; gap: 4px; 
}

/* ═══════════════════════════════════════
   POST TAGS
   ═══════════════════════════════════════ */
.post-tags {
 display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 6px; 
}

.post-tag {

  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--t-fast);

}

.post-tag:hover {
 background: var(--c-primary-soft); text-decoration: none; 
}

.post-tag i {
 font-size: .7rem; 
}

/* ═══════════════════════════════════════
   PRIVACY BADGE
   ═══════════════════════════════════════ */
.privacy-badge {

  background: var(--c-danger-light);
  color: var(--c-danger);
  display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    margin: 0 auto;
    letter-spacing: 0.01em;

}

/* ═══════════════════════════════════════
   REPORT & STATUS BADGES
   ═══════════════════════════════════════ */
.btn-report-comment {
 background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: .8rem; padding: 4px; transition: color var(--t-fast); 
}

.btn-report-comment:hover {
 background: var(--c-warning-light) !important; color: var(--c-warning) !important; 
}

.report-status {
 display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-full); font-size: .78rem; font-weight: 600; 
}

.report-status.pending {
 background: var(--c-warning-light); color: var(--c-warning); 
}

.report-status.resolved {
 background: var(--c-success-light); color: var(--c-success); 
}

.comment-status-badge {
 padding: 2px 8px; border-radius: var(--r-full); font-size: .75rem; font-weight: 600; margin-inline-end: 6px; 
}

.comment-status-badge.pending {
 background: var(--c-warning-light); color: var(--c-warning); 
}

.comment-status-badge.rejected {
 background: var(--c-danger-light); color: var(--c-danger); 
}

/* ═══════════════════════════════════════
   TAGS PAGE
   ═══════════════════════════════════════ */
.tags-page {
 max-width: 700px; margin: 20px auto; 
}

.tags-page-header {
 text-align: center; margin-bottom: var(--space-xl); 
}

.tags-page-header h2 {
 font-size: 1.5rem; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.02em; 
}

.tags-page-header .tag-name-display {
 color: var(--c-primary); 
}

.tags-grid {
 display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-xl); 
}

.tags-grid a {

  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  background: var(--bg-secondary);
  border-radius: var(--r-full);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: .88rem;
  transition: all var(--t-fast);
  font-weight: 500;
  border: 1px solid var(--border-light);

}

.tags-grid a:hover {
 background: var(--c-primary-light); color: var(--c-primary); border-color: transparent; text-decoration: none; 
}

.tags-grid a.active {
 background: var(--c-primary); color: #fff; border-color: transparent; 
}

/* ═══════════════════════════════════════
   POST MENU (Dropdown)
   ═══════════════════════════════════════ */
.post-menu {
 position: relative; margin-right: auto; margin-left: 0; 
}

.post-menu-dropdown {

  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  display: none;
  z-index: 20;
  overflow: hidden;
  border: 1px solid var(--border-default);
 animation: fadeUp .18s var(--ease-out);

}

.post-menu-dropdown.show {
 display: block; 
}

.post-menu-dropdown button {

  width: 100%;
  text-align: right;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--t-fast);

}

.post-menu-dropdown button i {
 width: 18px; text-align: center; color: var(--text-tertiary); font-size: .88rem; 
}

.post-menu-dropdown button:hover {
 background: var(--bg-secondary); 
}

.post-menu-dropdown button:hover i {
 color: var(--text-primary); 
}

.post-menu-dropdown button.danger-item {
 color: var(--c-danger); 
}

.post-menu-dropdown button.danger-item i {
 color: var(--c-danger); 
}

.post-menu-dropdown button.danger-item:hover {
 background: var(--c-danger-light); 
}

.post-popup-body .post-menu-dropdown {
 background: #1a1a1a; border-color: #2a2a2a; 
}

.post-popup-body .post-menu-dropdown button {
 color: #ccc; 
}

.post-popup-body .post-menu-dropdown button i {
 color: #666; 
}

.post-popup-body .post-menu-dropdown button:hover {
 background: #222; 
}

.post-popup-body .post-menu-dropdown button.danger-item {
 color: #f87171; 
}

.post-popup-body .post-menu-dropdown button.danger-item i {
 color: #f87171; 
}

.post-popup-body .post-menu-dropdown button.danger-item:hover {
 background: rgba(220,38,38,0.15); 
}

/* ═══════════════════════════════════════
   ATTACHMENT CHIPS
   ═══════════════════════════════════════ */
.attachment-chip {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  font-size: .85rem;
  color: var(--text-primary);
  max-width: 160px;
  transition: all var(--t-fast);

}

.attachment-chip i {
 color: var(--text-tertiary); font-size: .9rem; 
}

.attachment-chip:hover {
 border-color: var(--c-primary-soft); background: var(--c-primary-light); 
}

.chip-name {
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; 
}

.chip-remove {

  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  transition: all var(--t-fast);
  font-size: .78rem;

}

.chip-remove:hover {
 background: var(--c-danger-light); color: var(--c-danger); 
}

/* ═══════════════════════════════════════
   UNIFIED SLIDER (Image Carousel)
   ═══════════════════════════════════════ */
.unified-slider {

  position: relative;
  width: 100%;
  background: #000;
  border-radius: 0;
  overflow: hidden;
  margin: 0;

}

.slider-track {

  display: flex;
  transition: transform .3s var(--ease-out);
  width: 100%;

}

.slider-item {

  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  max-height: 600px;

}

.slider-item img {

  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;

}

.slider-item .vp-wrapper {
 width: 100%; 
}

.slider-prev,
.slider-next {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 10;
 transition: all var(--t-fast);
 opacity: 0;

}

.unified-slider:hover .slider-prev,
.unified-slider:hover .slider-next {
 opacity: 1; 
}

.slider-prev:hover,
.slider-next:hover {
 background: rgba(0,0,0,0.75); transform: translateY(-50%) scale(1.05); 
}

.slider-prev {
 left: 10px; 
}

.slider-next {
 right: 10px; 
}

.slider-counter {

  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;

}

.slider-dots {

  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
  z-index: 5;

}
.post-popup-body .slider-dots {display:none}
.slider-dot {

  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  padding: 0;

}

.slider-dot.active {
 background: #fff; transform: scale(1.3); 
}

/* Keep slider-nav as alias for slider-dots */
.slider-nav {
 position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; 
}

/* ═══════════════════════════════════════
   COMPOSER AVATAR & FEELING INPUT
   ═══════════════════════════════════════ */
.composer-avatar {

  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  object-fit: cover;

}

.feeling-input {

  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: .85rem;
  outline: none;
  width: 140px;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--t-fast);

}

.feeling-input:focus {
 border-color: var(--c-primary); 
}

/* ═══════════════════════════════════════
   GALLERY TRACK, DOTS & COUNTER
   ═══════════════════════════════════════ */
.gallery-track {
 display: flex; width: 100%; 
}

.gallery-dots {

  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;

}

.gallery-dot {

  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);

}

.gallery-dot.active {
 background: #fff; transform: scale(1.3); 
}

.album-badge {

  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;

}

/* ═══════════════════════════════════════
   POST FILES LIST
   ═══════════════════════════════════════ */
.post-files-list {

  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm);

}

/* ═══════════════════════════════════════
   VIDEO PAGE (Full Page)
   ═══════════════════════════════════════ */
.video-page-container {
 max-width: 1500px; padding: var(--space-lg) 0; margin: 0 auto; 
}

.video-page-grid {
 display: grid; grid-template-columns: minmax(0,1fr) 460px; gap: 10px; align-items: start; 
}

.video-page-main {
 padding: 6px; padding-top:0px;
}

.video-page-player {
 width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); 
}

.video-page-title {
 font-size: 1.3rem; font-weight: 700; margin: var(--space-lg) 0 var(--space-md); color: var(--text-primary); letter-spacing: -0.01em; 
}

.video-page-channel-row {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);

}

.video-page-channel-info {
 display: flex; align-items: center; gap: 10px; 
}

.video-page-avatar {
 width: 44px; height: 44px; border-radius: var(--r-full); object-fit: cover; font-size: 1rem; font-weight: 700; flex-shrink: 0; 
}

.video-page-channel-text {
 display: flex; flex-direction: column; 
}

.video-page-channel-name {
 font-weight: 700; font-size: .95rem; color: var(--text-primary); display: flex; align-items: center; gap: 5px; 
}

.video-page-follow-btn {
 margin-inline-start: 14px; border-radius: var(--r-full); padding: 8px 18px;     margin-top: 5px;
}

.video-page-actions {
 display: flex; align-items: center; gap: 10px; flex-wrap: wrap; 
}

.video-page-reaction-wrap {
 position: relative; 
}

.video-action-pill {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: var(--r-full);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);

}

.video-action-pill:hover {
 background: var(--bg-tertiary); 
}

.video-action-count {
 font-weight: 700; 
}

/* Video Sidebar */
.video-sidebar {
 min-width: 0; 
}

.video-related-list {
 display: flex; flex-direction: column; gap: var(--space-md); 
}

.video-related-card {
 display: flex; gap: 8px; align-items: flex-start; 
}

.video-related-thumb {

  position: relative;
  width: 248px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;

}

.video-related-video {
 width: 100%; height: 100%; object-fit: cover; display: block; 
}

.video-related-info {
 min-width: 0; flex: 1; padding-top: 2px; 
}

.video-related-title {

  font-size: .97rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  margin-left: 6px;

}

.video-related-channel {
 font-size: .78rem; color: var(--text-secondary); margin-bottom: 2px; 
}

.video-related-meta {
 font-size: .76rem; color: var(--text-tertiary); 
}