/**
 * MyOstad — UI Fixes v2.0
 * ─────────────────────────────────────────────────────────────
 * رفع اشکالات ظاهری:
 * 1. Stories Bar — کلاس‌های جدید mo-story-*
 * 2. Sidebar — طراحی بهتر، جداکننده، آواتار
 * 3. Desktop Layout — پس‌زمینه مرکزی، سایه اپ
 * 4. Modal/Sheet Centering — مطمئن‌شدن از موقعیت مرکزی
 * 5. بهبود کلی رابط لاگین‌شده
 */

@layer base, theme, accent, design, layout, comp, public_css, auth, rtl, components, utilities, ui_fixes;

@layer ui_fixes {

/* ═══════════════════════════════════════════════════════════════
   ۱. DESKTOP SHELL — اپ در مرکز با background زیبا
   ═══════════════════════════════════════════════════════════════ */

body:not(.mo-guest-mode) {
  background: #030812;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 100%, rgba(99,102,241,0.06) 0%, transparent 50%);
}

/* اپ در مرکز با سایه زیبا در دسکتاپ */
@media (min-width: 640px) {
  .myostad-main,
  #myostad-main {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05),
      0 24px 80px rgba(0,0,0,0.6),
      0 8px 32px rgba(0,0,0,0.4);
    border-radius: 20px 20px 0 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ۲. STORIES BAR — کلاس‌های جدید (views-home.js)
   ═══════════════════════════════════════════════════════════════ */

.mo-home-stories-bar {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  background: var(--surface-0, rgba(255,255,255,0.02));
}
.mo-home-stories-bar::-webkit-scrollbar { display: none; }

/* دکمه افزودن استوری */
.mo-story-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mo-story-add:hover { transform: scale(1.05); }

.mo-story-add__circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--surface-2, rgba(255,255,255,0.09));
  border: 2px dashed var(--border-mid, rgba(255,255,255,0.13));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-400, #3b82f6);
  transition: all 0.15s ease;
}
.mo-story-add:hover .mo-story-add__circle {
  background: rgba(37,99,235,0.1);
  border-color: var(--navy-400, #3b82f6);
}

.mo-story-add span {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* آیتم استوری */
.mo-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mo-story-item:hover { transform: scale(1.05); }

/* حلقه رنگی دور آواتار */
.mo-story-item__ring {
  padding: 2.5px;
  background: linear-gradient(135deg, #f5cc6a, #e855aa, #3b82f6);
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.mo-story-item__ring.is-seen {
  background: var(--border-mid, rgba(255,255,255,0.15));
}

.mo-story-item__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--navy-950, #050c1a);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mo-story-item__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mo-story-item__initial {
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
}

.mo-story-item__name {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  max-width: 62px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* لایت مود */
[data-theme="light"] .mo-home-stories-bar {
  background: rgba(240,245,255,0.6);
  border-bottom-color: rgba(15,32,68,0.08);
}
[data-theme="light"] .mo-story-add__circle {
  background: rgba(15,32,68,0.05);
  border-color: rgba(15,32,68,0.15);
}
[data-theme="light"] .mo-story-add span,
[data-theme="light"] .mo-story-item__name {
  color: rgba(10,22,50,0.5);
}
[data-theme="light"] .mo-story-item__avatar {
  border-color: #f0f5ff;
}

/* ═══════════════════════════════════════════════════════════════
   ۳. SIDEBAR — طراحی ارتقاء‌یافته
   ═══════════════════════════════════════════════════════════════ */

/* پنل سایدبار با gradient بهتر */
.mo-sidebar__panel {
  background: linear-gradient(
    170deg,
    #0c1a35 0%,
    #091224 50%,
    #060d1e 100%
  ) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
}

/* User snippet */
.mo-sidebar__user-snippet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(52px + env(safe-area-inset-top)) 20px 18px !important;
  background: linear-gradient(
    160deg,
    rgba(37,99,235,0.08) 0%,
    rgba(0,0,0,0) 60%
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  position: relative;
}

/* آواتار wrap با حلقه آنلاین */
.mo-sidebar__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.mo-sidebar__online-dot {
  position: absolute;
  bottom: 1px; left: 1px;
  width: 11px; height: 11px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #091224;
}

/* آواتار placeholder با نام */
.mo-sidebar__user-snippet .mo-avatar--init {
  font-size: 1rem !important;
  font-weight: 800;
  background: linear-gradient(135deg, var(--navy-500, #2563eb), var(--navy-600, #1d4ed8)) !important;
}

/* اطلاعات کاربر */
.mo-sidebar__user-info { flex: 1; min-width: 0; }
.mo-sidebar__user-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-sidebar__user-role {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  font-weight: 500;
}

/* دکمه بستن */
.mo-sidebar__close {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  transition: all 0.15s;
}
.mo-sidebar__close:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
  color: #fca5a5;
}

/* منو */
.mo-sidebar__menu { flex: 1; padding: 8px 0; list-style: none; margin: 0; }

/* جداکننده */
.mo-sidebar__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0.07) 80%,
    transparent 100%
  );
  margin: 6px 0;
}

/* عنوان بخش */
.mo-sidebar__section-title {
  padding: 10px 20px 4px;
  font-size: 0.625rem;
  font-weight: 800;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* آیتم منو */
.mo-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 3px solid transparent;
  position: relative;
}
.mo-sidebar__item:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  border-right-color: rgba(255,255,255,0.1);
}
.mo-sidebar__item.active {
  background: rgba(37,99,235,0.1);
  color: white;
  border-right-color: var(--navy-400, #3b82f6);
}

/* آیکون منو — با رنگ تیره‌ای */
.mo-sidebar__item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  color: rgba(255,255,255,0.6);
}
.mo-sidebar__item:hover .mo-sidebar__item-icon {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.mo-sidebar__item.active .mo-sidebar__item-icon {
  background: rgba(37,99,235,0.18);
  color: var(--navy-400, #3b82f6);
}

/* متن منو */
.mo-sidebar__item-text {
  flex: 1;
  font-size: 0.925rem;
  font-weight: 600;
}

/* فلش RTL */
.mo-sidebar__item-arrow {
  color: rgba(255,255,255,0.18);
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
  /* فلش را برعکس کن برای RTL (سمت چپ = بازگشت، سمت راست = جلو) */
  transform: scaleX(-1);
}
.mo-sidebar__item:hover .mo-sidebar__item-arrow {
  color: rgba(255,255,255,0.35);
  transform: scaleX(-1) translateX(-2px);
}

/* footer سایدبار */
.mo-sidebar__footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Theme row در footer */
.mo-sidebar__theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
}

/* Toggle Switch */
.mo-toggle-switch {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.mo-toggle-switch.is-on {
  background: var(--navy-500, #2563eb);
  border-color: var(--navy-400, #3b82f6);
}
.mo-toggle-switch__knob {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.mo-toggle-switch.is-on .mo-toggle-switch__knob {
  right: auto;
  left: 2px;
  background: white;
}

/* ═══════════════════════════════════════════════════════════════
   ۴. BOTTOM SHEET / MODAL — مرکزی‌سازی بهتر
   ═══════════════════════════════════════════════════════════════ */

/* Overlay ای که sheet‌ها روی آن قرار می‌گیرند */
.sheet-overlay,
[id$="__overlay"] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: calc(var(--z-modal, 1000) - 2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-overlay.open,
[id$="__overlay"].open { opacity: 1; pointer-events: all; }

/* bottom-sheet پوزیشن‌بندی صحیح */
.bottom-sheet {
  position: fixed;
  bottom: -110%;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  max-width: var(--max-app, 560px);
  background: var(--navy-900, #0a1628) !important;
  border-radius: var(--r-xl, 28px) var(--r-xl, 28px) 0 0 !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: none;
  z-index: var(--z-modal, 1000);
  transition: bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow:
    0 -4px 40px rgba(0,0,0,0.5),
    0 -1px 0 rgba(255,255,255,0.06);
}
.bottom-sheet.open { bottom: 0; }

/* Handle */
.sheet-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 12px auto 8px;
  flex-shrink: 0;
}

/* Sheet Title */
.sheet-title {
  font-size: 1rem;
  font-weight: 800;
  padding: 4px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  color: rgba(255,255,255,0.92);
}

/* Sheet body — قابل اسکرول */
.sheet-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* لایت مود */
[data-theme="light"] .bottom-sheet {
  background: #ffffff !important;
  border-color: rgba(15,32,68,0.1);
}
[data-theme="light"] .sheet-handle { background: rgba(15,32,68,0.15); }
[data-theme="light"] .sheet-title { color: rgba(10,22,50,0.92); }

/* ═══════════════════════════════════════════════════════════════
   ۵. HOME VIEW — بهبود composer box و کلی‌سازی
   ═══════════════════════════════════════════════════════════════ */

.mo-view-home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Feed spacing */
.mo-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Post card — حاشیه‌دار در دسکتاپ */
@media (min-width: 480px) {
  .mo-post-card {
    margin: 8px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.07)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ۶. TOPBAR — بهبود جزئیات
   ═══════════════════════════════════════════════════════════════ */

.mo-topbar {
  /* shimmer بالای topbar */
  background: rgba(5,12,26,0.90) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Logo در topbar */
.mo-topbar__brand-text,
.mo-topbar__logo-text {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

/* آیکون برند */
.mo-topbar__brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   ۷. AVATAR — init placeholder بهتر
   ═══════════════════════════════════════════════════════════════ */

.mo-avatar--placeholder,
.mo-avatar--init {
  background: linear-gradient(135deg, var(--navy-500, #2563eb), var(--navy-700, #1a3060)) !important;
  color: white;
  font-weight: 800;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   ۸. SETTINGS PAGE — بهبود کارت‌ها
   ═══════════════════════════════════════════════════════════════ */

.mo-settings-section {
  margin: 12px;
  border-radius: 16px;
  background: var(--surface-0, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  overflow: hidden;
}
.mo-settings-section-title {
  padding: 14px 18px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.mo-settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.mo-settings-row:last-child { border-bottom: none; }
.mo-settings-row:hover { background: var(--surface-1, rgba(255,255,255,0.04)); }
.mo-settings-row__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,0.07));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.6);
}
.mo-settings-row__body { flex: 1; min-width: 0; }
.mo-settings-row__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  display: block;
}
.mo-settings-row__desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
  display: block;
}
.mo-settings-row--danger { color: #fca5a5 !important; }
.mo-settings-row--danger:hover { background: rgba(239,68,68,0.08) !important; }
.mo-settings-row--danger .mo-settings-row__label { color: #fca5a5 !important; }

/* لایت مود settings */
[data-theme="light"] .mo-settings-section {
  background: rgba(255,255,255,0.9);
  border-color: rgba(15,32,68,0.08);
}
[data-theme="light"] .mo-settings-section-title { color: rgba(10,22,50,0.35); }
[data-theme="light"] .mo-settings-row__label { color: rgba(10,22,50,0.88); }
[data-theme="light"] .mo-settings-row__desc { color: rgba(10,22,50,0.38); }
[data-theme="light"] .mo-settings-row__icon {
  background: rgba(15,32,68,0.06);
  color: rgba(10,22,50,0.55);
}
[data-theme="light"] .mo-settings-row:hover { background: rgba(15,32,68,0.03); }

/* ═══════════════════════════════════════════════════════════════
   ۹. COLOR PICKER — settings
   ═══════════════════════════════════════════════════════════════ */

.mo-color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0 8px;
}
.mo-color-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}
.mo-color-swatch:hover { transform: scale(1.12); }
.mo-color-swatch.is-active {
  border-color: white;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.mo-color-swatch.is-active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════
   ۱۰. BOTTOM BAR — بهبود ظاهری
   ═══════════════════════════════════════════════════════════════ */

.mo-bottom-bar,
.mo-bottom-bar-wrap .mo-bottom-bar {
  background: rgba(6, 12, 26, 0.96) !important;
  backdrop-filter: blur(36px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 28px !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
}

/* نشانه فعال — طلایی زیباتر */
.mo-bottom-bar__item--active .mo-bottom-bar__icon::after {
  box-shadow: 0 0 14px rgba(232,184,75,0.8) !important;
}

/* دکمه post در وسط */
.mo-bottom-bar__post-btn {
  box-shadow:
    0 8px 24px rgba(212,160,23,0.5),
    0 0 0 5px rgba(212,160,23,0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ۱۱. PROFILE PAGE — قهرمان بهتر
   ═══════════════════════════════════════════════════════════════ */

.mo-profile-hero {
  display: flex;
  gap: 16px;
  padding: 20px 16px;
  align-items: flex-start;
}

.mo-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.mo-profile-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid var(--border-mid, rgba(255,255,255,0.13));
  object-fit: cover;
  display: block;
}

.mo-profile-avatar-edit-btn {
  position: absolute;
  bottom: 0; left: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy-500, #2563eb);
  border: 2px solid var(--navy-950, #050c1a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  color: white;
  transition: background 0.15s;
}
.mo-profile-avatar-edit-btn:hover { background: var(--navy-400, #3b82f6); }

.mo-online-dot {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 12px; height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--navy-950, #050c1a);
}

.mo-profile-text { flex: 1; min-width: 0; }
.mo-profile-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.mo-profile-username {
  font-size: 0.825rem;
  color: var(--navy-400, #3b82f6);
  margin: 0 0 6px;
}
.mo-profile-bio {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0 0 10px;
}

/* Stats */
.mo-profile-stats {
  display: flex;
  gap: 20px;
  margin: 10px 0;
}
.mo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mo-stat strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}
.mo-stat span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.42);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   ۱۲. GLOBAL SEARCH MODAL
   ═══════════════════════════════════════════════════════════════ */

#mo-global-search-modal {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-app, 560px);
  height: 100dvh;
  z-index: calc(var(--z-modal, 1000) + 10);
  background: rgba(5,12,26,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

/* ═══════════════════════════════════════════════════════════════
   ۱۳. ANIMATIONS — برای آیتم‌های لود‌شده
   ═══════════════════════════════════════════════════════════════ */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

} /* end @layer ui_fixes */


/* ═══════════════════════════════════════════════════════════════
   🔠 TYPOGRAPHY UPGRADE v2.1 — فونت و تایپوگرافی
   ═══════════════════════════════════════════════════════════════ */

/* ── بهترین رندرینگ فونت وزیرمتن در همه مرورگرها ── */
html, body, #myostad-app, .myostad-main, .myostad-app-body {
  font-family: 'Vazirmatn', 'Tahoma', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ── همه عناصر متنی ── */
button, input, textarea, select, label,
.mo-topbar, .mo-sidebar, .mo-content,
.mo-bottombar, .mo-sheet, [class*="mo-"] {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 TOPBAR — لوگو و هدر زیباتر
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix لوگو: رنگ‌های درست در هر دو حالت تم ── */
.mo-topbar {
  background: var(--surface-0, rgba(5,12,26,0.92)) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
  padding: 0 16px;
  height: 58px;
  display: flex;
  align-items: center;
}

[data-theme="light"] .mo-topbar {
  background: rgba(255,255,255,0.88) !important;
  border-bottom-color: rgba(0,33,74,0.08) !important;
}

/* ── لوگوی رنگی در Topbar ── */
.mo-topbar__brand span,
.mo-topbar__brand-text,
.mo-topbar__logo-text {
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #818cf8 60%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

/* ── Fix hardcoded رنگ لوگو SVG در app-shell ── */
.mo-topbar__brand > div > span,
.mo-topbar__brand span[style*="color:#00214A"],
.mo-topbar__brand span[style*="color:#EE6541"] {
  color: unset !important;
  -webkit-text-fill-color: unset !important;
}

/* اعمال gradient روی متن لوگو حتی اگه inline style داشته باشه */
.mo-topbar__brand > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mo-topbar__brand > div > span:last-child {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(135deg, var(--primary, #3b82f6), #818cf8, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SVG لوگو در topbar: تطبیق با تم ── */
.mo-topbar__brand svg path:first-child {
  fill: var(--text-high, #f1f5ff) !important;
}

[data-theme="light"] .mo-topbar__brand svg path:first-child {
  fill: #00214A !important;
}

/* ═══════════════════════════════════════════════════════════════
   📝 POST CARDS — خوانایی و ظاهر بهتر
   ═══════════════════════════════════════════════════════════════ */

/* ── عنوان پست ── */
.mo-post-card__title,
.mo-card__title,
[class*="post-card"] h2,
[class*="post-card"] h3 {
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.015em !important;
  color: var(--text-high) !important;
}

/* ── محتوای پست ── */
.mo-post-card__excerpt,
.mo-post-card__body,
[class*="post-card__content"],
[class*="post-card__text"] {
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
  color: var(--text-mid) !important;
  font-weight: 400 !important;
}

/* ── اسم کاربر در کارت ── */
.mo-post-card__author,
.mo-post-card__name,
[class*="post-card__author"] {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
}

/* ── تاریخ/زمان ── */
.mo-post-card__time,
[class*="post-card__time"],
[class*="post-card__date"] {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-low) !important;
  letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   🏠 HOME VIEW — تایپوگرافی صفحه خانه
   ═══════════════════════════════════════════════════════════════ */

/* ── عنوان صفحه home ── */
.mo-home-title,
.mo-view-title,
[class*="home__title"],
[class*="feed__title"] {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  color: var(--text-high) !important;
}

/* ── سکشن‌های گروه‌بندی ── */
.mo-section-title,
.mo-home-section-title,
[class*="section-title"] {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-low) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🔔 NOTIFICATIONS & BADGES — وضوح بهتر
   ═══════════════════════════════════════════════════════════════ */

.mo-notif-title,
.mo-notif__title,
[class*="notif__title"] {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}

.mo-notif-body,
[class*="notif__body"],
[class*="notif__text"] {
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: var(--text-mid) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🧭 BOTTOM BAR — لیبل‌ها
   ═══════════════════════════════════════════════════════════════ */

.mo-bottombar__label,
.mo-bar-label,
[class*="bottombar__label"],
[class*="bar-item__label"] {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* ═══════════════════════════════════════════════════════════════
   💬 MESSAGES / CHAT — بهتر خوانده شود
   ═══════════════════════════════════════════════════════════════ */

.mo-msg-bubble,
.mo-message__body,
[class*="msg__text"],
[class*="message__text"] {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ⚙️ SETTINGS VIEW — تایپوگرافی تنظیمات
   ═══════════════════════════════════════════════════════════════ */

.mo-settings-row__label,
[class*="settings__label"],
[class*="settings-row__title"] {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-high) !important;
}

.mo-settings-row__desc,
[class*="settings__desc"],
[class*="settings-row__subtitle"] {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  line-height: 1.55 !important;
  margin-top: 3px !important;
}

/* ── گروه تنظیمات header ── */
.mo-settings-section-title,
[class*="settings__section-title"] {
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--primary, #3b82f6) !important;
  margin-bottom: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   👤 PROFILE — تایپوگرافی پروفایل
   ═══════════════════════════════════════════════════════════════ */

.mo-profile-name,
[class*="profile__name"],
[class*="profile-hero__name"] {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  color: var(--text-high) !important;
}

.mo-profile-username,
[class*="profile__username"],
[class*="profile-hero__username"] {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-low) !important;
  letter-spacing: 0 !important;
}

.mo-profile-bio,
[class*="profile__bio"] {
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  color: var(--text-mid) !important;
}

/* ── آمار پروفایل (followers, posts) ── */
.mo-profile-stat__num,
[class*="profile-stat__num"],
[class*="profile__count"] {
  font-size: 1.375rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--text-high) !important;
}

.mo-profile-stat__label,
[class*="profile-stat__label"],
[class*="profile__count-label"] {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-low) !important;
  letter-spacing: 0.03em !important;
  margin-top: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   🔘 BUTTONS — تایپوگرافی دکمه‌ها
   ═══════════════════════════════════════════════════════════════ */

.mo-btn,
.mo-button,
[class*="mo-btn"],
button.primary,
button.secondary {
  font-family: 'Vazirmatn', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── دکمه primary ── */
.mo-btn--primary,
[class*="btn-primary"],
.mo-cta-btn {
  font-size: 0.9375rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   📊 SPLASH SCREEN — بهتر و زیباتر
   ═══════════════════════════════════════════════════════════════ */

.myostad-splash {
  background: linear-gradient(160deg, #050c1a 0%, #0a1428 60%, #050c1a 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

[data-theme="light"] .myostad-splash {
  background: linear-gradient(160deg, #f0f4ff 0%, #e8eeff 60%, #f0f4ff 100%) !important;
}

/* لوگوی splash ── fix رنگ برای دارک مود */
.myostad-splash__logo {
  animation: mo-splash-enter 0.6s cubic-bezier(0.34,1.2,0.64,1) both !important;
}

@keyframes mo-splash-enter {
  from { opacity:0; transform: scale(0.85) translateY(10px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.myostad-splash__logo svg path:first-child {
  fill: rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .myostad-splash__logo svg path:first-child {
  fill: #00214A !important;
}

/* متن زیر لوگوی splash */
.myostad-splash__logo div {
  background: linear-gradient(135deg, var(--primary, #3b82f6), #818cf8, #c084fc) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
  margin-top: 16px !important;
}

/* رنگ inline span ها رو override کن */
.myostad-splash__logo div span {
  color: unset !important;
  -webkit-text-fill-color: unset !important;
}

.myostad-splash__spinner {
  margin: 28px auto 16px !important;
  width: 36px !important; height: 36px !important;
  border: 3px solid rgba(255,255,255,0.1) !important;
  border-top-color: var(--primary, #3b82f6) !important;
  border-radius: 50% !important;
  animation: mo-spin 0.8s linear infinite !important;
}

[data-theme="light"] .myostad-splash__spinner {
  border-color: rgba(0,33,74,0.1) !important;
  border-top-color: var(--primary, #3b82f6) !important;
}

.myostad-splash__text {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

[data-theme="light"] .myostad-splash__text {
  color: rgba(0,33,74,0.4) !important;
}

@keyframes mo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   ✨ MICRO-IMPROVEMENTS — جزئیات ریز
   ═══════════════════════════════════════════════════════════════ */

/* اعداد فارسی در دیتالیست‌ها */
.mo-count, .mo-num,
[class*="__count"],
[class*="__num"] {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Placeholder متن‌ها */
::placeholder {
  font-family: 'Vazirmatn', sans-serif !important;
  font-weight: 400 !important;
  opacity: 0.5 !important;
}

} /* end @layer ui_fixes */