/* ═══════════════════════════════════════════════════════════════
   MyOstad — App Layout, Navigation & FAB v3.1
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ۱. App Shell
   ══════════════════════════════════════════════════════════════ */
.myostad-main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--max-app);
  margin: 0 auto;
  background: var(--navy-950);
  position: relative;
}

.mo-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--nav-h);
  padding-bottom: calc(var(--fab-h) + 16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════
   ۲. Top Navigation Bar
   ══════════════════════════════════════════════════════════════ */
.mo-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-app);
  height: var(--nav-h);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-5);
  gap: var(--sp-3);
  background: rgba(5, 12, 26, 0.82);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--dur-mid) var(--ease-out);
  padding-top: env(safe-area-inset-top);
}

.mo-topbar.scrolled {
  background: rgba(5, 12, 26, 0.96);
  border-bottom-color: var(--border-mid);
  box-shadow: 0 4px 28px rgba(0,0,0,0.35);
}

/* Logo */
.mo-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.mo-topbar__brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(145deg, var(--navy-500), var(--navy-700));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}
.mo-topbar__brand-icon svg { width: 20px; height: 20px; }

.mo-topbar__brand-text {
  font-size: 1.125rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
}

/* Nav Actions */
.mo-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.mo-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  flex-shrink: 0;
}

.mo-icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-mid);
  color: white;
}

.mo-icon-btn svg { width: 20px; height: 20px; }

.mo-badge {
  position: absolute;
  top: 5px; left: 5px;
  background: var(--danger);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: var(--r-full);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--navy-950);
  line-height: 1;
}

/* Hamburger */
.mo-topbar__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

.mo-topbar__hamburger:hover {
  background: var(--surface-2);
  border-color: var(--border-mid);
}

.menu-bar {
  width: 18px; height: 1.5px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: all var(--dur-mid) var(--ease-out);
  transform-origin: center;
}

.mo-topbar__hamburger[aria-expanded="true"] .menu-bar:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.mo-topbar__hamburger[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mo-topbar__hamburger[aria-expanded="true"] .menu-bar:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ══════════════════════════════════════════════════════════════
   ۳. Hamburger Drawer
   ══════════════════════════════════════════════════════════════ */
.mo-sidebar__overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 30, 0.55);
  /* بدون z-index — مقدار داخل sidebar stacking context توسط تعریف mobile مدیریت میشه */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.mo-sidebar__overlay.open { opacity: 1; pointer-events: all; }

.mo-sidebar__panel {
  position: fixed;
  top: 0; right: -100%;
  width: min(320px, 88vw);
  height: 100dvh;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border-left: 1px solid var(--border-subtle);
  /* z-index بالاتر از topbar (100) و modal-2 (998) */
  z-index: calc(var(--z-modal) - 1); /* 999 */
  isolation: isolate; /* stacking context مستقل */
  display: flex;
  flex-direction: column;
  transition: right var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mo-sidebar.is-open .mo-sidebar__panel { right: 0; }

/* Drawer Header */
.mo-sidebar__user-snippet {
  padding:
    calc(var(--sp-8) + env(safe-area-inset-top))
    var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--surface-0);
}

.mo-sidebar__user-info { flex: 1; min-width: 0; }

.mo-sidebar__user-name {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mo-sidebar__user-role {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
  font-weight: 500;
}

.mo-sidebar__close {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.mo-sidebar__close:hover { background: var(--surface-2); color: white; }

/* Drawer Nav */
.mo-sidebar__menu { flex: 1; padding: var(--sp-3) 0; }

.mo-sidebar__section-title {
  padding: var(--sp-2) var(--sp-5);
  font-size: 0.625rem;
  font-weight: 800;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-2);
}

.mo-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}

.mo-sidebar__item:hover {
  background: var(--surface-1);
  color: white;
}

.mo-sidebar__item.active {
  color: white;
  background: var(--surface-1);
}

.mo-sidebar__item.active::before {
  content: '';
  position: absolute;
  right: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold-400), var(--navy-400));
  border-radius: var(--r-full) 0 0 var(--r-full);
}

.mo-sidebar__item-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.mo-sidebar__item:hover .mo-sidebar__item-icon,
.mo-sidebar__item.active .mo-sidebar__item-icon {
  background: rgba(37,99,235,0.14);
}

.mo-sidebar__item-icon svg { width: 18px; height: 18px; }

.mo-sidebar__item-text {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
}

.mo-sidebar__item-badge {
  background: var(--danger);
  color: white;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: var(--r-full);
  min-width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.mo-sidebar__item-arrow {
  color: rgba(255,255,255,0.25);
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}
.mo-sidebar__item:hover .mo-sidebar__item-arrow { transform: translateX(-3px); }

/* Subscription Banner in Drawer */
.mo-sidebar__sub-banner {
  margin: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg,
    rgba(212,160,23,0.12) 0%,
    rgba(37,99,235,0.08) 100%);
  border: 1px solid rgba(212,160,23,0.22);
  position: relative;
  overflow: hidden;
}

.mo-sidebar__sub-banner::before {
  content: '✨';
  position: absolute;
  top: -10px; left: -10px;
  font-size: 4rem;
  opacity: 0.05;
}

.mo-sidebar__sub-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gold-300);
  margin-bottom: var(--sp-1);
}

.mo-sidebar__sub-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}

/* ══════════════════════════════════════════════════════════════
   ۴. Floating Action Bar (FAB)
   ══════════════════════════════════════════════════════════════ */
.mo-bottom-bar-wrap {
  position: fixed;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--sp-8));
  max-width: calc(var(--max-app) - var(--sp-8));
  z-index: var(--z-fab);
  pointer-events: none;
  transition:
    transform 0.42s var(--ease-out),
    opacity   0.3s  var(--ease-out);
}

.mo-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(8, 16, 34, 0.94);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-2xl);
  padding: var(--sp-2) var(--sp-3);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 3px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  pointer-events: all;
  position: relative;
  overflow: hidden;
}

/* Top shimmer line */
.mo-bottom-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 25%,
    rgba(212,160,23,0.18) 50%,
    rgba(255,255,255,0.12) 75%,
    transparent 100%);
}

/* FAB Items */
.mo-bottom-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: all var(--dur-mid) var(--ease-spring);
  position: relative;
  min-width: 50px;
  text-decoration: none;
  color: rgba(255,255,255,0.42);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mo-bottom-bar__item:hover {
  background: var(--surface-1);
  color: rgba(255,255,255,0.78);
}

.mo-bottom-bar__item--active { color: white; }

/* Icon wrap */
.mo-bottom-bar__icon {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur-mid) var(--ease-spring);
}

.mo-bottom-bar__item:hover   .mo-bottom-bar__icon { transform: translateY(-2px); }
.mo-bottom-bar__item--active  .mo-bottom-bar__icon { transform: translateY(-1px); }

.mo-bottom-bar__icon svg {
  width: 22px; height: 22px;
  transition: all var(--dur-mid) var(--ease-out);
}

/* Active indicator dot */
.mo-bottom-bar__item--active .mo-bottom-bar__icon::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: var(--gold-400);
  border-radius: var(--r-full);
  box-shadow: 0 0 10px rgba(212,160,23,0.6);
  animation: fade-in var(--dur-fast) var(--ease-out);
}

.mo-bottom-bar__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: color var(--dur-fast);
  line-height: 1;
}

.mo-bottom-bar__item--active .mo-bottom-bar__label { color: var(--gold-400); }

/* Center Post Button */
.mo-bottom-bar__post-btn {
  width: 54px; height: 54px;
  background: linear-gradient(145deg, var(--gold-300) 0%, var(--gold-500) 100%);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(212,160,23,0.45),
    0 0 0 4px rgba(212,160,23,0.1);
  transition: all var(--dur-mid) var(--ease-spring);
  flex-shrink: 0;
  position: relative;
  border: none;
}

.mo-bottom-bar__post-btn:hover {
  transform: scale(1.09) translateY(-3px);
  box-shadow:
    0 10px 30px rgba(212,160,23,0.55),
    0 0 0 6px rgba(212,160,23,0.12);
}

.mo-bottom-bar__post-btn:active { transform: scale(0.95); }

.mo-bottom-bar__post-btn svg {
  width: 22px; height: 22px;
  color: var(--navy-950);
}

/* Notification dot on icon */
.mo-bottom-bar__notif {
  position: absolute;
  top: 1px; left: 2px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--navy-900);
  box-shadow: 0 0 6px rgba(239,68,68,0.5);
}

/* ══════════════════════════════════════════════════════════════
   ۵. Page & Section Headers
   ══════════════════════════════════════════════════════════════ */
.page-header {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(5,12,26,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.page-header-back {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
  transition: all var(--dur-fast);
  /* RTL: فلش بازگشت به سمت راست */
  transform: scaleX(-1);
}
.page-header-back:hover { background: var(--surface-2); color: white; }

.page-header-title {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header-actions { display: flex; gap: var(--sp-2); }

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}

.section-title {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.section-title::before {
  content: '';
  width: 4px; height: 18px;
  background: linear-gradient(to bottom, var(--gold-400), var(--navy-500));
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.section-more {
  font-size: 0.8125rem;
  color: var(--navy-400);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.section-more:hover { color: var(--navy-300); }

/* ══════════════════════════════════════════════════════════════
   ۶. Bottom Sheet & Modal
   ══════════════════════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(6px);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }

.bottom-sheet {
  position: fixed;
  bottom: -100%;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  max-width: var(--max-app);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--border-subtle);
  z-index: var(--z-modal);
  transition: bottom var(--dur-slow) var(--ease-out);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.4);
}
.bottom-sheet.open { bottom: 0; }

.sheet-handle {
  width: 40px; height: 4px;
  background: var(--border-mid);
  border-radius: var(--r-full);
  margin: var(--sp-3) auto;
}

.sheet-title {
  font-size: 1rem;
  font-weight: 800;
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}

.sheet-body { padding: var(--sp-4) var(--sp-5); }

/* ══════════════════════════════════════════════════════════════
   ۷. Context Menu
   ══════════════════════════════════════════════════════════════ */
.context-menu {
  position: absolute;
  background: var(--navy-800);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-modal) + 1);
  min-width: 190px;
  overflow: hidden;
  animation: scale-in var(--dur-fast) var(--ease-spring);
  transform-origin: top left;
}

.context-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.78);
  transition: background var(--dur-fast);
}
.context-item:hover  { background: var(--surface-2); color: white; }
.context-item.danger { color: #fca5a5; }
.context-item.danger:hover { background: rgba(239,68,68,0.1); }

.context-divider { height: 1px; background: var(--border-subtle); margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════
   ۸. Empty State
   ══════════════════════════════════════════════════════════════ */
.mo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  gap: var(--sp-4);
}

.mo-empty-state__icon {
  width: 88px; height: 88px;
  background: var(--surface-1);
  border-radius: var(--r-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  border: 1px solid var(--border-subtle);
  animation: float 4s ease-in-out infinite;
}

.mo-empty-state__title {
  font-size: 1.125rem;
  font-weight: 800;
  color: white;
}

.mo-empty-state__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.65;
  max-width: 270px;
}

/* ══════════════════════════════════════════════════════════════
   ۹. Pull to Refresh
   ══════════════════════════════════════════════════════════════ */
.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  transition: height var(--dur-mid) var(--ease-out);
}
.ptr-indicator.pulling { height: 64px; }

.ptr-spinner {
  width: 26px; height: 26px;
  border: 2.5px solid rgba(255,255,255,0.12);
  border-top-color: var(--gold-400);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
/* ══════════════════════════════════════════════════════════════
   [BUGFIX] کلاس‌های مفقود — App Shell، Splash، Toast، Feed
   این بلوک class nameهای HTML/JS را به سیستم طراحی وصل می‌کند
   ══════════════════════════════════════════════════════════════ */

/* ── App Root ────────────────────────────────────────────────── */
.myostad-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--max-app, 480px);
  margin: 0 auto;
  background: var(--navy-950, #050c1a);
  position: relative;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-base, 'Vazirmatn', sans-serif);
}

.myostad-main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--max-app, 480px);
  margin: 0 auto;
  background: var(--navy-950, #050c1a);
  position: relative;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.mo-topbar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--max-app, 480px);
  height: var(--nav-h, 60px);
  z-index: var(--z-sticky, 100);
  display: flex; align-items: center;
  padding: 0 var(--sp-5, 20px) 0 var(--sp-4, 16px);
  gap: var(--sp-3, 12px);
  background: rgba(5,12,26,0.88);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  padding-top: env(safe-area-inset-top);
}

.mo-topbar__hamburger {
  display: flex; flex-direction: column; gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--r-md, 10px);
  background: var(--surface-1, rgba(255,255,255,0.07));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: rgba(255,255,255,0.7);
}

.mo-topbar__brand {
  flex: 1; display: flex; align-items: center;
  gap: var(--sp-2, 8px); min-width: 0;
}

.mo-topbar__logo-text {
  font-size: 1.125rem; font-weight: 900;
  color: white; letter-spacing: -0.02em;
}

.mo-topbar__actions {
  display: flex; align-items: center;
  gap: var(--sp-2, 8px); flex-shrink: 0;
}

.mo-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-md, 10px);
  background: var(--surface-1, rgba(255,255,255,0.07));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  color: rgba(255,255,255,0.65);
  transition: all var(--dur-fast, 0.15s);
}
.mo-icon-btn:hover { background: var(--surface-2); color: white; }
.mo-icon-btn svg { width: 22px; height: 22px; }

.mo-badge {
  position: absolute; top: 5px; left: 5px;
  background: var(--danger, #ef4444);
  color: white; font-size: 0.6rem; font-weight: 800;
  border-radius: var(--r-full, 9999px);
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--navy-950, #050c1a);
  line-height: 1;
}

/* ── Content Area ────────────────────────────────────────────── */
.mo-content {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-top: var(--nav-h, 60px);
  padding-bottom: calc(var(--fab-h, 80px) + 16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Bottom Bar ──────────────────────────────────────────────── */
.mo-bottom-bar {
  position: fixed;
  bottom: calc(var(--sp-4, 16px) + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: calc(var(--max-app, 480px) - 32px);
  z-index: var(--z-fab, 200);
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(8,16,34,0.94);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-2xl, 24px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.mo-bottom-bar__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: var(--r-xl, 16px);
  cursor: pointer; min-width: 50px;
  color: rgba(255,255,255,0.42);
  transition: all var(--dur-mid, 0.22s);
  background: none; border: none;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.mo-bottom-bar__item:hover { background: var(--surface-1); color: rgba(255,255,255,0.78); }
.mo-bottom-bar__item--active { color: white; }
.mo-bottom-bar__item--active .mo-bottom-bar__icon::after {
  content: '';
  position: absolute; bottom: -5px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: var(--gold-400, #e8b84b);
  border-radius: var(--r-full, 9999px);
  box-shadow: 0 0 10px rgba(212,160,23,0.6);
}

.mo-bottom-bar__item--post {
  padding: var(--sp-1, 4px);
}

.mo-bottom-bar__icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform var(--dur-mid, 0.22s);
}
.mo-bottom-bar__icon svg { width: 22px; height: 22px; }

.mo-bottom-bar__label {
  font-size: 0.6rem; font-weight: 700; line-height: 1;
}
.mo-bottom-bar__item--active .mo-bottom-bar__label { color: var(--gold-400, #e8b84b); }

.mo-bottom-bar__post-btn {
  width: 54px; height: 54px;
  background: linear-gradient(145deg, var(--gold-300, #f5cc6a), var(--gold-500, #d4a017));
  border-radius: var(--r-xl, 16px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(212,160,23,0.45), 0 0 0 4px rgba(212,160,23,0.1);
  transition: all var(--dur-mid, 0.22s);
  border: none;
}
.mo-bottom-bar__post-btn:hover { transform: scale(1.09) translateY(-3px); }
.mo-bottom-bar__post-btn svg { width: 22px; height: 22px; color: var(--navy-950, #050c1a); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.mo-sidebar {
  position: fixed; top: 0; right: -100%;
  width: 100%; height: 100dvh;
  /* بالاتر از topbar (100) — از stacking context اون فرار می‌کنیم */
  z-index: calc(var(--z-modal, 1000) - 1); /* 999 */
  pointer-events: none;
  transition: right 0s 0.35s;
}
.mo-sidebar.is-open {
  right: 0; pointer-events: all;
  transition: right 0s;
}

.mo-sidebar__overlay {
  position: absolute; inset: 0;
  background: rgba(8, 14, 30, 0.60);
  /* بلور + بافت برای افکت پس‌زمینه */
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  /* بافت نویز ظریف */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 40%, rgba(59,130,246,0.06) 0%, transparent 60%);
  z-index: 0; /* پنل z-index:1 داره، پس روی overlay قرار می‌گیره */
  opacity: 0; transition: opacity var(--dur-mid, 0.22s);
}
.mo-sidebar.is-open .mo-sidebar__overlay { opacity: 1; }

.mo-sidebar__panel {
  position: absolute;
  top: 0; right: -100%;
  width: min(320px, 88vw); height: 100dvh;
  background: linear-gradient(180deg, var(--navy-900, #0a1628) 0%, var(--navy-950, #050c1a) 100%);
  border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  z-index: 1;
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: right var(--dur-slow, 0.35s) var(--ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.mo-sidebar.is-open .mo-sidebar__panel { right: 0; }

.mo-sidebar__user-snippet {
  padding: calc(var(--sp-8, 32px) + env(safe-area-inset-top)) var(--sp-5, 20px) var(--sp-5, 20px);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background: var(--surface-0, rgba(255,255,255,0.03));
}

.mo-sidebar__menu {
  flex: 1; padding: var(--sp-3, 12px) 0;
  list-style: none; margin: 0;
}

.mo-sidebar__item {
  display: flex; align-items: center; gap: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-5, 20px);
  color: rgba(255,255,255,0.68);
  text-decoration: none; cursor: pointer;
  transition: all var(--dur-fast, 0.15s);
}
.mo-sidebar__item svg { width: 20px; height: 20px; flex-shrink: 0; }
.mo-sidebar__item:hover { background: var(--surface-1); color: white; }
.mo-sidebar__item.active { color: white; background: var(--surface-1); }

.mo-sidebar__footer {
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  padding-bottom: calc(var(--sp-4, 16px) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}

/* ── Splash Screen ───────────────────────────────────────────── */
.myostad-splash {
  position: fixed; inset: 0;
  background: var(--navy-950, #050c1a);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-5, 20px);
  z-index: 9999;
}

.myostad-splash__logo { animation: float 3s ease-in-out infinite; }

.myostad-splash__spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--navy-400, #3b82f6);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.myostad-splash__text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.38);
  font-weight: 500;
}

/* ── Auth Screen ─────────────────────────────────────────────── */
.myostad-auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-950, #050c1a);
  overflow-y: auto;
  padding: var(--sp-6, 24px);
  z-index: 100;
}

/* ── Feed ────────────────────────────────────────────────────── */
.mo-feed { display: flex; flex-direction: column; }

.mo-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-16, 64px) var(--sp-8, 32px);
  text-align: center; gap: var(--sp-4, 16px);
  color: rgba(255,255,255,0.42);
}

.mo-error-state {
  padding: var(--sp-6, 24px); text-align: center;
  color: var(--danger, #ef4444);
  background: rgba(239,68,68,0.08);
  border-radius: var(--r-md, 10px);
  margin: var(--sp-4, 16px);
}

.mo-view-loading {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-16, 64px);
}

.mo-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--navy-400, #3b82f6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Toast Notifications ─────────────────────────────────────── */
#mo-toasts {
  position: fixed; bottom: calc(var(--fab-h, 80px) + 32px);
  left: 50%; transform: translateX(-50%);
  z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2, 8px);
  pointer-events: none; width: calc(100% - 32px);
  max-width: 380px;
}

.mo-toast {
  padding: var(--sp-3, 12px) var(--sp-5, 20px);
  border-radius: var(--r-lg, 14px);
  font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(10px);
  transition: all 0.25s var(--ease-out);
  background: var(--navy-800, #0f2044);
  border: 1px solid var(--border-mid, rgba(255,255,255,0.12));
  color: white; max-width: 100%;
}
.mo-toast.is-visible { opacity: 1; transform: translateY(0); }
.mo-toast--error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #fca5a5; }
.mo-toast--success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.25); color: #6ee7b7; }
.mo-toast--warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
.mo-toast--info { background: var(--navy-800, #0f2044); }

/* ── Avatar ──────────────────────────────────────────────────── */
.mo-avatar {
  border-radius: 50%; object-fit: cover;
  background: var(--surface-2, rgba(255,255,255,0.1));
  flex-shrink: 0;
}
.mo-avatar--md { width: 44px; height: 44px; }
.mo-avatar--sm { width: 32px; height: 32px; }
.mo-avatar--lg { width: 64px; height: 64px; }

/* ── Verified Badge ──────────────────────────────────────────── */
.mo-verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--navy-400, #3b82f6);
  color: white; border-radius: 50%;
  font-size: 0.625rem; font-weight: 900;
  vertical-align: middle; margin-right: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   FIXES v1.0.0 — مودال‌ها، هدر، دارک/لایت مود، آواتار
   ═══════════════════════════════════════════════════════════════ */

/* ── آواتار placeholder ── */
.mo-avatar--init {
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  font-size: .875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-fa, 'Vazirmatn', sans-serif);
}

/* ── کارت پست: هدر ── */
.mo-post-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.mo-post-card__avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
}
.mo-post-card__meta { flex: 1; min-width: 0; }
.mo-post-card__author-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mo-post-card__author {
  font-weight: 700;
  font-size: .9375rem;
  color: rgba(255,255,255,0.92);
}
.mo-post-card__time {
  font-size: .78rem;
  color: rgba(255,255,255,0.42);
  display: block;
  margin-top: 1px;
}
.mo-post-card__header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.mo-post-card__header-actions .mo-bookmark-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  padding: 6px;
  border-radius: 8px;
  transition: color .15s;
}
.mo-post-card__header-actions .mo-bookmark-btn.is-active { color: #f59e0b; }
.mo-post-card__header-actions .mo-bookmark-btn:hover { color: rgba(255,255,255,0.7); }

/* ── مودال‌های داخلی (sub-modals): عرض، backdrop و scroll ── */
#mo-story-modal,
#mo-create-channel-modal,
#mo-comment-panel,
#mo-global-search-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: calc(var(--z-modal, 1000) + 10) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* Backdrop دارک+بلوری برای زیر-مودال‌ها */
#mo-story-modal::before,
#mo-create-channel-modal::before,
#mo-comment-panel::before,
#mo-global-search-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  z-index: 0;
}

/* پنل داخلی: عرض کامل، قابل اسکرول */
#mo-story-modal > div:last-child,
#mo-create-channel-modal > div:last-child,
#mo-global-search-modal {
  max-width: min(var(--max-app, 560px), 100vw);
  width: 100%;
  position: relative;
  z-index: 1;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
  background: var(--navy-900, #0a1628);
  border: 1px solid var(--border-mid, rgba(255,255,255,0.13));
  border-bottom: none;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.6);
}

[data-theme="light"] #mo-story-modal > div:last-child,
[data-theme="light"] #mo-create-channel-modal > div:last-child,
[data-theme="light"] #mo-global-search-modal {
  background: #fff !important;
  border-color: rgba(15,32,68,0.1) !important;
}

/* صفحه تنظیمات: عرض مناسب‌تر */
.mo-settings-page {
  max-width: 100%;
  padding: 0 0 80px;
  /* اسکرول از طریق mo-content انجام میشه */
}
.mo-settings-section {
  margin: 0;
  border-radius: 0;
}

/* page-header روی محتوا نیفتد */
.mo-content .page-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-950, #050c1a);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-fa, 'Vazirmatn', sans-serif);
}
.mo-content .page-header-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  flex: 1;
  margin: 0;
  font-family: inherit;
}
.mo-content .page-header-back {
  background: var(--surface-1, rgba(255,255,255,0.06));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  flex-shrink: 0;
  /* RTL */
  transform: scaleX(-1);
}

/* ── مهتابی (لایت) / آفتابی (دارک) — topbar ── */
[data-theme="light"] .mo-topbar {
  background: rgba(240,245,255,0.92) !important;
  border-bottom-color: rgba(15,32,68,0.1) !important;
}
[data-theme="light"] .mo-topbar__logo-text { color: rgba(10,22,50,0.95); }
[data-theme="light"] .mo-topbar__hamburger {
  background: rgba(15,32,68,0.06);
  border-color: rgba(15,32,68,0.12);
  color: rgba(10,22,50,0.65);
}
[data-theme="light"] .mo-icon-btn {
  background: rgba(15,32,68,0.06);
  border-color: rgba(15,32,68,0.1);
  color: rgba(10,22,50,0.6);
}
[data-theme="light"] .mo-icon-btn:hover { background: rgba(15,32,68,0.1); color: rgba(10,22,50,0.9); }

/* topbar + content در لایت مود */
[data-theme="light"] .myostad-main,
[data-theme="light"] .mo-content { background: #f0f5ff; }
[data-theme="light"] .mo-content .page-header {
  background: #f0f5ff;
  border-bottom-color: rgba(15,32,68,0.1);
}
[data-theme="light"] .mo-content .page-header-title { color: rgba(10,22,50,0.92); }
[data-theme="light"] .mo-content .page-header-back {
  background: rgba(15,32,68,0.06);
  border-color: rgba(15,32,68,0.1);
  color: rgba(10,22,50,0.6);
}

/* کارت‌های پست در لایت مود */
[data-theme="light"] .mo-post-card { background: white; border-color: rgba(15,32,68,0.08); }
[data-theme="light"] .mo-post-card__author { color: rgba(10,22,50,0.92); }
[data-theme="light"] .mo-post-card__time { color: rgba(10,22,50,0.45); }
[data-theme="light"] .mo-post-card__content { color: rgba(10,22,50,0.85); }
[data-theme="light"] .mo-post-card__actions button { color: rgba(10,22,50,0.45); }
[data-theme="light"] .mo-post-card__actions button:hover { color: rgba(10,22,50,0.8); }
[data-theme="light"] .mo-post-card__header-actions .mo-bookmark-btn { color: rgba(10,22,50,0.35); }

/* مودال‌های floating در لایت مود */
[data-theme="light"] #mo-create-channel-modal > div:last-child,
[data-theme="light"] #mo-comment-panel > div:last-child,
[data-theme="light"] #mo-story-modal > div:last-child,
[data-theme="light"] #mo-global-search-modal {
  background: #fff !important;
  color: rgba(10,22,50,0.92) !important;
}

/* bottom bar لایت مود */
[data-theme="light"] .mo-bottom-bar {
  background: rgba(240,245,255,0.95);
  border-top-color: rgba(15,32,68,0.1);
}


/* ═══════════════════════════════════════════════════════════════
   [v3 FIX] Bottom Sheet / Sub-Modal — کامل و اسکرول‌پذیر
   همه ساب‌مودال‌ها از طریق createBottomSheet() ساخته می‌شن
   این CSS فقط fallback و تضمینه
   ═══════════════════════════════════════════════════════════════ */

/* back button: همه جا RTL */
.page-header-back,
.mo-content .page-header-back,
[id$="__close"] {
  transform: scaleX(-1) !important;
}

/* Sheet container */
[id$="__sheet"] {
  max-height: 88dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sheet body: اسکرول */
[id$="__body"] {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* عرض sheet: ~94% از max-app */
@media (max-width: 600px) {
  [id$="__sheet"] {
    width: calc(100% - 12px) !important;
    max-width: 100% !important;
  }
}
@media (min-width: 601px) {
  [id$="__sheet"] {
    width: calc(min(560px, 100vw) * 0.94) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   [FIX] Sub-module Pages — عرض کامل و مناسب
   نوتیفیکیشن، پروفایل، تنظیمات، و بقیه ساب‌ویوها
   ══════════════════════════════════════════════════════════════ */

/* همه view‌های داخل content-area: عرض کامل */
#mo-content-area > div,
.mo-view-home,
.mo-profile-page,
.mo-settings-page,
.mo-bookmarks-page,
.mo-notifications-page,
.mo-classes-page,
.mo-channels-page,
.mo-messages-page {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* section‌های تنظیمات: عرض کامل */
.mo-settings-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* notification items */
.mo-notif-item, .mo-class-card, .mo-channel-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* profile hero: عرض کامل */
.mo-profile-hero {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* profile stats: عرض کامل */
.mo-profile-stats {
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: space-around !important;
}

/* ── dark/light: page-header در ساب‌ویوها ── */
[data-theme="light"] .mo-notifications-page .page-header,
[data-theme="light"] .mo-profile-page .page-header,
[data-theme="light"] .mo-bookmarks-page .page-header,
[data-theme="light"] .mo-classes-page .page-header,
[data-theme="light"] .mo-channels-page .page-header {
  background: #f0f5ff !important;
  color: rgba(10,22,50,0.92) !important;
  border-bottom-color: rgba(15,32,68,0.1) !important;
}

[data-theme="light"] .mo-notifications-page,
[data-theme="light"] .mo-bookmarks-page,
[data-theme="light"] .mo-classes-page,
[data-theme="light"] .mo-channels-page {
  background: #f0f5ff;
}

/* ── light mode: sidebar ── */
[data-theme="light"] .mo-sidebar__panel {
  background: linear-gradient(180deg, #e4ecff 0%, #f0f5ff 100%) !important;
  border-left-color: rgba(15,32,68,0.1) !important;
}
[data-theme="light"] .mo-sidebar__user-name { color: rgba(10,22,50,0.95) !important; }
[data-theme="light"] .mo-sidebar__user-role { color: rgba(10,22,50,0.5) !important; }
[data-theme="light"] .mo-sidebar__item { color: rgba(10,22,50,0.7) !important; }
[data-theme="light"] .mo-sidebar__item:hover { background: rgba(15,32,68,0.06) !important; color: rgba(10,22,50,0.95) !important; }
[data-theme="light"] .mo-sidebar__item.active { background: rgba(37,99,235,0.1) !important; color: var(--primary, #2563eb) !important; }
[data-theme="light"] .mo-sidebar__section-title { color: rgba(10,22,50,0.35) !important; }
[data-theme="light"] .mo-sidebar__footer { border-top-color: rgba(15,32,68,0.1) !important; }

/* ── light mode: complete nav items ── */
[data-theme="light"] .mo-bottom-bar {
  background: rgba(230,240,255,0.96) !important;
  border-color: rgba(15,32,68,0.1) !important;
  box-shadow: 0 -4px 24px rgba(15,32,68,0.1), 0 12px 40px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .mo-bottom-bar::before {
  background: linear-gradient(90deg, transparent, rgba(15,32,68,0.06), transparent) !important;
}
[data-theme="light"] .mo-bottom-bar__item { color: rgba(10,22,50,0.42) !important; }
[data-theme="light"] .mo-bottom-bar__item:hover { background: rgba(15,32,68,0.06) !important; color: rgba(10,22,50,0.78) !important; }
[data-theme="light"] .mo-bottom-bar__item--active { color: rgba(10,22,50,0.92) !important; }

/* ── light mode: icon buttons در topbar ── */
[data-theme="light"] .mo-icon-btn { color: rgba(10,22,50,0.6) !important; }
[data-theme="light"] .mo-menu-bar { background: rgba(10,22,50,0.7) !important; }

/* ── light mode: toast ── */
[data-theme="light"] .mo-toast {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(15,32,68,0.12) !important;
  color: rgba(10,22,50,0.88) !important;
  box-shadow: 0 8px 24px rgba(15,32,68,0.15) !important;
}

/* ── light mode: empty state ── */
[data-theme="light"] .mo-empty-state { color: rgba(10,22,50,0.6) !important; }
[data-theme="light"] .mo-empty-state__title { color: rgba(10,22,50,0.85) !important; }
[data-theme="light"] .mo-empty-state__desc { color: rgba(10,22,50,0.5) !important; }
[data-theme="light"] .mo-empty-state__icon { background: rgba(15,32,68,0.06) !important; border-color: rgba(15,32,68,0.1) !important; }