html,body{height:100%}body{direction:rtl;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;background:#fff}.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}


/* UX polish */
:root { --pb-accent: #111827; }
.nav-active { color: var(--pb-accent); font-weight: 600; }
.ig-card { border-radius: 18px; }
.ig-shadow { box-shadow: 0 8px 24px rgba(17,24,39,0.08); }

.snap-y { scroll-snap-type: y mandatory; overflow-y: auto; height: calc(100vh - 52px); }
.snap-item { scroll-snap-align: start; height: calc(100vh - 52px); }
.ig-progress { height: 3px; background: rgba(255,255,255,0.22); border-radius: 9999px; overflow:hidden; }
.ig-progress > div { height: 100%; width: 0%; background: #fff; }
  /* حلقه استوری ظریف */
   .story-ring {
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      padding: 2px;
      border-radius: 9999px;
    }
    /* استایل وضعیت فعال ناوبری */
    .nav-active {
      background-color: #f3f4f6;
      border-radius: 18px;
      color: #000 !important;
    }
    .nav-active svg { stroke-width: 2.5px; color: #000; }

    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* تنظیم ارتفاع ناوبری برای جایگذاری بهتر */
    .nav-height { height: 56px; }
    nav a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }