/**
 * Harika Mobile Version Master Stylesheet
 * Strictly matching C:\Users\mrweb\Desktop\harica\mobile version\
 * Design tokens: Editorial Emerald Modernism (primary: #09bf95)
 */

/* Material Symbols Setup */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   DESKTOP (>= 1024px): Strictly hide all mobile-only components
   ========================================================================== */
@media (min-width: 1024px) {
  .harika-mobile-header,
  #drawer-container,
  .harika-mobile-footer,
  #harika-mobile-bottom-nav,
  .harika-mobile-only {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET (< 1024px): Full Mobile Architecture
   ========================================================================== */
@media (max-width: 1023px) {

  /* 1. Hide Desktop Header & Footer Parts & Sidebars */
  .site-header > .harika-topbar,
  .site-header > .harika-header-main,
  .site-header > .harika-ticker-bar,
  .site-footer > .harika-footer-inner,
  .site-footer > .harika-subfooter,
  .harika-desktop-only,
  .harika-sidebar-col,
  .harika-cat-sidebar,
  .harika-single-sidebar {
    display: none !important;
  }

  /* 2. Global Shell & Body Spacing */
  body {
    padding-top: 64px !important;
    padding-bottom: 74px !important;
    background-color: #fbf9f8 !important;
    color: #1b1c1c !important;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important;
    overflow-x: hidden !important;
  }

  .site-header {
    box-shadow: none !important;
    position: static !important;
  }

  .harika-container,
  .harika-cat-body-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .harika-main-grid,
  .harika-editorial-grid,
  .harika-single-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .harika-content-col,
  .harika-cat-feed,
  .harika-single-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .harika-stream-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* 3. Fixed Mobile Header Bar */
  .harika-mobile-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 64px !important;
    z-index: 50 !important;
    background-color: rgba(251, 249, 248, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
  }

  /* 4. Fixed Mobile Bottom Nav */
  .harika-mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 70px !important;
    z-index: 50 !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04) !important;
  }

  /* 5. Mobile Drawer */
  #drawer-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
  }

  #drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(48, 48, 48, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity 0.3s ease-out !important;
  }

  #drawer-panel {
    position: relative !important;
    z-index: 10 !important;
    width: 86% !important;
    max-width: 380px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.3s ease-out !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 6. Mobile Layout Utility Framework (Pure Vanilla CSS) */
  .flex { display: flex !important; }
  .inline-flex { display: inline-flex !important; }
  .grid { display: grid !important; }
  .block { display: block !important; }
  .inline-block { display: inline-block !important; }
  .hidden { display: none !important; }

  .flex-col { flex-direction: column !important; }
  .flex-row { flex-direction: row !important; }
  .flex-wrap { flex-wrap: wrap !important; }
  .items-center { align-items: center !important; }
  .items-start { align-items: flex-start !important; }
  .items-end { align-items: flex-end !important; }
  .items-stretch { align-items: stretch !important; }
  .justify-center { justify-content: center !important; }
  .justify-between { justify-content: space-between !important; }
  .justify-start { justify-content: flex-start !important; }
  .justify-end { justify-content: flex-end !important; }

  .flex-1 { flex: 1 1 0% !important; }
  .shrink-0, .flex-shrink-0 { flex-shrink: 0 !important; }
  .min-w-0 { min-width: 0 !important; }

  /* Grid Columns */
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Gaps */
  .gap-0\.5 { gap: 0.125rem !important; }
  .gap-1 { gap: 0.25rem !important; }
  .gap-1\.5 { gap: 0.375rem !important; }
  .gap-2 { gap: 0.5rem !important; }
  .gap-2\.5 { gap: 0.625rem !important; }
  .gap-3 { gap: 0.75rem !important; }
  .gap-3\.5 { gap: 0.875rem !important; }
  .gap-4 { gap: 1rem !important; }
  .gap-space-xs { gap: 0.25rem !important; }
  .gap-space-sm { gap: 0.5rem !important; }
  .gap-space-md { gap: 1rem !important; }
  .gap-space-lg { gap: 1.5rem !important; }

  /* Widths */
  .w-full { width: 100% !important; }
  .w-screen { width: 100vw !important; }
  .w-auto { width: auto !important; }
  .w-2\.5 { width: 0.625rem !important; }
  .w-3 { width: 0.75rem !important; }
  .w-4 { width: 1rem !important; }
  .w-5 { width: 1.25rem !important; }
  .w-6 { width: 1.5rem !important; }
  .w-7 { width: 1.75rem !important; }
  .w-8 { width: 2rem !important; }
  .w-9 { width: 2.25rem !important; }
  .w-10 { width: 2.5rem !important; }
  .w-11 { width: 2.75rem !important; }
  .w-12 { width: 3rem !important; }
  .w-14 { width: 3.5rem !important; }
  .w-16 { width: 4rem !important; }
  .w-20 { width: 5rem !important; }
  .w-24 { width: 6rem !important; }
  .w-28 { width: 7rem !important; }
  .w-32 { width: 8rem !important; }
  .w-44 { width: 11rem !important; }
  .w-64 { width: 16rem !important; }
  .w-\[72px\] { width: 72px !important; }

  /* Heights */
  .h-full { height: 100% !important; }
  .h-auto { height: auto !important; }
  .h-2\.5 { height: 0.625rem !important; }
  .h-3 { height: 0.75rem !important; }
  .h-4 { height: 1rem !important; }
  .h-5 { height: 1.25rem !important; }
  .h-6 { height: 1.5rem !important; }
  .h-7 { height: 1.75rem !important; }
  .h-8 { height: 2rem !important; }
  .h-9 { height: 2.25rem !important; }
  .h-10 { height: 2.5rem !important; }
  .h-11 { height: 2.75rem !important; }
  .h-12 { height: 3rem !important; }
  .h-14 { height: 3.5rem !important; }
  .h-16 { height: 4rem !important; }
  .h-20 { height: 5rem !important; }
  .h-24 { height: 6rem !important; }
  .h-28 { height: 7rem !important; }
  .h-32 { height: 8rem !important; }
  .h-\[72px\] { height: 72px !important; }

  .min-h-\[44px\] { min-height: 44px !important; }
  .min-h-\[48px\] { min-height: 48px !important; }
  .min-h-\[88px\] { min-height: 88px !important; }

  /* Aspect Ratios */
  .aspect-video,
  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9 !important;
  }
  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10 !important;
  }
  .aspect-square {
    aspect-ratio: 1 / 1 !important;
  }

  /* Image Object Fit & Display */
  .object-cover,
  img.object-cover {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Positioning */
  .relative { position: relative !important; }
  .absolute { position: absolute !important; }
  .fixed { position: fixed !important; }
  .sticky { position: sticky !important; }
  .inset-0 { inset: 0 !important; }
  .top-0 { top: 0 !important; }
  .bottom-0 { bottom: 0 !important; }
  .right-0 { right: 0 !important; }
  .left-0 { left: 0 !important; }
  .top-1 { top: 0.25rem !important; }
  .top-2 { top: 0.5rem !important; }
  .top-3 { top: 0.75rem !important; }
  .bottom-1 { bottom: 0.25rem !important; }
  .bottom-2 { bottom: 0.5rem !important; }
  .bottom-3 { bottom: 0.75rem !important; }
  .right-1 { right: 0.25rem !important; }
  .right-2 { right: 0.5rem !important; }
  .right-3 { right: 0.75rem !important; }
  .left-1 { left: 0.25rem !important; }
  .left-2 { left: 0.5rem !important; }
  .left-3 { left: 0.75rem !important; }
  .z-10 { z-index: 10 !important; }
  .z-20 { z-index: 20 !important; }
  .z-30 { z-index: 30 !important; }
  .z-40 { z-index: 40 !important; }
  .z-50 { z-index: 50 !important; }

  /* Padding */
  .p-1 { padding: 0.25rem !important; }
  .p-1\.5 { padding: 0.375rem !important; }
  .p-2 { padding: 0.5rem !important; }
  .p-2\.5 { padding: 0.625rem !important; }
  .p-3 { padding: 0.75rem !important; }
  .p-3\.5 { padding: 0.875rem !important; }
  .p-4 { padding: 1rem !important; }
  .p-space-sm { padding: 0.5rem !important; }
  .p-space-md { padding: 1rem !important; }
  .p-space-lg { padding: 1.5rem !important; }

  .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
  .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-margin { padding-left: 1rem !important; padding-right: 1rem !important; }

  .py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
  .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
  .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
  .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

  .pt-0\.5 { padding-top: 0.125rem !important; }
  .pt-1 { padding-top: 0.25rem !important; }
  .pt-2 { padding-top: 0.5rem !important; }
  .pt-3 { padding-top: 0.75rem !important; }
  .pt-space-xs { padding-top: 0.25rem !important; }
  .pt-space-sm { padding-top: 0.5rem !important; }
  .pt-space-md { padding-top: 1rem !important; }

  .pb-0\.5 { padding-bottom: 0.125rem !important; }
  .pb-1 { padding-bottom: 0.25rem !important; }
  .pb-2 { padding-bottom: 0.5rem !important; }
  .pb-3 { padding-bottom: 0.75rem !important; }
  .pb-space-xs { padding-bottom: 0.25rem !important; }
  .pb-space-sm { padding-bottom: 0.5rem !important; }
  .pb-space-md { padding-bottom: 1rem !important; }

  .pr-10 { padding-right: 2.5rem !important; }
  .pl-3 { padding-left: 0.75rem !important; }

  /* Margins */
  .mt-1 { margin-top: 0.25rem !important; }
  .mt-1\.5 { margin-top: 0.375rem !important; }
  .mt-2 { margin-top: 0.5rem !important; }
  .mt-3 { margin-top: 0.75rem !important; }
  .mt-auto { margin-top: auto !important; }
  .mb-1 { margin-bottom: 0.25rem !important; }
  .mb-2 { margin-bottom: 0.5rem !important; }
  .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .-mx-margin { margin-left: -1rem !important; margin-right: -1rem !important; }

  /* Borders & Radius */
  .rounded { border-radius: 0.25rem !important; }
  .rounded-md { border-radius: 0.375rem !important; }
  .rounded-lg { border-radius: 0.5rem !important; }
  .rounded-xl { border-radius: 0.75rem !important; }
  .rounded-2xl { border-radius: 1rem !important; }
  .rounded-full { border-radius: 9999px !important; }

  .border { border: 1px solid rgba(0, 0, 0, 0.08) !important; }
  .border-t { border-top: 1px solid #f0eded !important; }
  .border-b { border-bottom: 1px solid #f0eded !important; }
  .border-surface-muted { border-color: #f1f3f5 !important; }
  .border-border-delicate { border-color: #e9ecef !important; }
  .border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }

  /* Shadows */
  .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; }
  .shadow-md { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; }
  .shadow-lg { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important; }
  .shadow-xl { box-shadow: 0 20px 32px rgba(0, 0, 0, 0.16) !important; }

  /* Overflow & Scrolling */
  .overflow-hidden { overflow: hidden !important; }
  .overflow-x-auto { overflow-x: auto !important; }
  .overflow-y-auto { overflow-y: auto !important; }
  .scroll-smooth { scroll-behavior: smooth !important; }
  .no-scrollbar::-webkit-scrollbar { display: none !important; }
  .no-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

  /* Background Colors */
  .bg-surface { background-color: #fbf9f8 !important; }
  .bg-surface-pure { background-color: #ffffff !important; }
  .bg-surface-subtle { background-color: #f9f9f9 !important; }
  .bg-surface-muted { background-color: #f1f3f5 !important; }
  .bg-surface-container { background-color: #f0eded !important; }
  .bg-surface-container-low { background-color: #f5f3f3 !important; }
  .bg-surface-container-lowest { background-color: #ffffff !important; }
  .bg-surface-container-high { background-color: #eae8e7 !important; }
  .bg-surface-container-highest { background-color: #e4e2e2 !important; }
  .bg-inverse-surface { background-color: #303030 !important; }

  .bg-primary { background-color: #09bf95 !important; }
  .bg-primary-subtle { background-color: #e6f9f4 !important; }
  .bg-accent-red-soft { background-color: #e6f9f4 !important; }
  .bg-badge-tech-blue { background-color: #2B6CB0 !important; }

  .bg-black\/30 { background-color: rgba(0, 0, 0, 0.3) !important; }
  .bg-black\/50 { background-color: rgba(0, 0, 0, 0.5) !important; }
  .bg-black\/60 { background-color: rgba(0, 0, 0, 0.6) !important; }
  .bg-black\/70 { background-color: rgba(0, 0, 0, 0.7) !important; }
  .bg-black\/80 { background-color: rgba(0, 0, 0, 0.8) !important; }
  .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }
  .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }

  /* Gradient Overlay */
  .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops, rgba(0,0,0,0.85), transparent)) !important;
  }
  .from-black\/85 { --tw-gradient-from: rgba(0,0,0,0.85); }
  .from-black\/80 { --tw-gradient-from: rgba(0,0,0,0.80); }
  .via-black\/35 { --tw-gradient-stops: rgba(0,0,0,0.85), rgba(0,0,0,0.35), transparent; }
  .to-transparent { --tw-gradient-to: transparent; }

  /* Text Colors */
  .text-primary { color: #09bf95 !important; }
  .text-on-primary { color: #ffffff !important; }
  .text-text-primary { color: #1a1a1a !important; }
  .text-text-secondary { color: #444444 !important; }
  .text-text-muted { color: #868e96 !important; }
  .text-white { color: #ffffff !important; }
  .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
  .text-white\/90 { color: rgba(255, 255, 255, 0.9) !important; }
  .text-badge-tech-blue { color: #2B6CB0 !important; }
  .text-inverse-on-surface { color: #f2f0f0 !important; }

  /* Font Sizes & Line Heights */
  .font-headline-lg-mobile, .text-headline-lg-mobile {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
  }
  .font-headline-md, .text-headline-md {
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
  }
  .font-headline-sm, .text-headline-sm {
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
  }
  .font-body-lg, .text-body-lg {
    font-size: 15px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
  }
  .font-body-md, .text-body-md {
    font-size: 13px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
  }
  .font-body-sm, .text-body-sm {
    font-size: 12px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }
  .font-label-md, .text-label-md {
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }
  .font-label-sm, .text-label-sm {
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
  }
  .font-caption-meta, .text-caption-meta {
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
  }

  .text-\[10px\] { font-size: 10px !important; }
  .text-\[11px\] { font-size: 11px !important; }
  .text-\[12px\] { font-size: 12px !important; }
  .text-\[13px\] { font-size: 13px !important; }
  .text-\[14px\] { font-size: 14px !important; }
  .text-\[16px\] { font-size: 16px !important; }
  .text-\[18px\] { font-size: 18px !important; }
  .text-\[20px\] { font-size: 20px !important; }
  .text-\[22px\] { font-size: 22px !important; }
  .text-\[24px\] { font-size: 24px !important; }
  .text-\[26px\] { font-size: 26px !important; }
  .text-\[34px\] { font-size: 34px !important; }

  .font-medium { font-weight: 500 !important; }
  .font-bold { font-weight: 700 !important; }
  .font-extrabold { font-weight: 800 !important; }

  /* Line Clamp */
  .line-clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Backdrop blur */
  .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* Transitions */
  .transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; }
  .transition-transform { transition: transform 0.2s ease !important; }
  .transition-shadow { transition: box-shadow 0.2s ease !important; }
  .transition-all { transition: all 0.2s ease !important; }

  /* OVERRIDE ANY LEAKED DESKTOP RULES ON MOBILE */
  .harika-feed-thumb-wrap,
  .harika-card-img-wrap,
  .harika-lead-img-wrap {
    width: auto !important;
    height: auto !important;
  }

  /* Specifically for Latest News Feed 3-row card */
  .harika-mobile-feed-card {
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .harika-mobile-feed-card .thumb-box {
    width: 6rem !important;
    height: 6rem !important;
    flex-shrink: 0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background-color: #f0eded !important;
    position: relative !important;
    display: block !important;
  }

  .harika-mobile-feed-card .thumb-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ==========================================================================
     8. CATEGORY ARCHIVE MOBILE STYLES (Screenshot 1 UI-Exact)
     ========================================================================== */
  .harika-category-page {
    padding-top: 0 !important;
  }

  .harika-cat-header-wrap {
    padding: 0.5rem 1rem !important;
    background-color: transparent !important;
  }

  .harika-cat-breadcrumb {
    background-color: #f1f3f5 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 11px !important;
    color: #868e96 !important;
    margin-bottom: 0.75rem !important;
  }

  .harika-cat-breadcrumb a {
    color: #444444 !important;
    text-decoration: none !important;
  }

  .harika-cat-breadcrumb a:hover {
    color: #09bf95 !important;
  }

  .harika-cat-hero-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .harika-cat-title {
    font-size: 20px !important;
    line-height: 32px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
  }

  .harika-cat-metrics {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .harika-cat-metric-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    background-color: #f1f3f5 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #444444 !important;
  }

  /* Subcategory Tabs Horizontal Scroll */
  .harika-subcat-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .harika-subcat-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .harika-subcat-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background-color: #f0eded !important;
    color: #444444 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }

  .harika-subcat-pill.active {
    background-color: #09bf95 !important;
    color: #ffffff !important;
  }

  /* Category Featured Lead Post on Mobile */
  .harika-cat-featured-wrap {
    padding: 0 1rem !important;
    margin-bottom: 1rem !important;
  }

  .harika-cat-lead-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  }

  .harika-cat-lead-visual {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #f0eded !important;
  }

  .harika-cat-lead-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .harika-cat-lead-img-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .harika-cat-lead-badges {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 10 !important;
  }

  .harika-badge-curated {
    background-color: #09bf95 !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .harika-badge-time {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .harika-cat-lead-content {
    padding: 1rem !important;
  }

  .harika-cat-lead-heading {
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0.5rem 0 !important;
  }

  .harika-cat-lead-heading a {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }

  .harika-cat-lead-excerpt {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #444444 !important;
  }

  .harika-cat-lead-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid #f0eded !important;
  }

  .harika-cat-lead-author {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .harika-author-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9999px !important;
  }

  .harika-author-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
  }

  /* Category Article Cards Grid to Horizontal Cards on Mobile */
  .harika-articles-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0 1rem !important;
  }

  .harika-cat-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    align-items: stretch !important;
  }

  .harika-cat-card-img-wrap {
    width: 6rem !important;
    height: 6rem !important;
    flex-shrink: 0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background-color: #f0eded !important;
    position: relative !important;
  }

  .harika-cat-card-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .harika-cat-card-img-link img,
  .harika-cat-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .harika-cat-card-badge {
    display: none !important;
  }

  .harika-cat-card-time {
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .harika-cat-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .harika-cat-card-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 11px !important;
    color: #868e96 !important;
  }

  .harika-cat-card-title {
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 3px 0 !important;
  }

  .harika-cat-card-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }

  .harika-cat-card-title a:hover {
    color: #09bf95 !important;
  }

  .harika-cat-card-excerpt {
    display: none !important;
  }

  .harika-cat-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 4px !important;
    border-top: 1px solid #f0eded !important;
    font-size: 11px !important;
    color: #868e96 !important;
  }

  .harika-cat-card-author {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .harika-card-author-img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 9999px !important;
  }

  .harika-card-author-name {
    font-size: 11px !important;
    color: #444444 !important;
  }

  /* ==========================================================================
     9. SINGLE POST MOBILE STYLES (Screenshot 4 UI-Exact)
     ========================================================================== */
  .harika-single-page {
    padding-top: 0 !important;
  }

  .harika-article-wrap {
    padding: 0 1rem !important;
  }

  .harika-article-header {
    margin-bottom: 1rem !important;
  }

  .harika-article-h1 {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0.5rem 0 !important;
  }

  .harika-article-lead {
    font-size: 13px !important;
    line-height: 22px !important;
    color: #444444 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Single Post Action Bar */
  .harika-single-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 0.75rem !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin: 0.75rem 0 !important;
  }

  .harika-single-img-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    margin: 0.75rem 0 !important;
    position: relative !important;
    background-color: #f0eded !important;
  }

  .harika-single-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .harika-single-img-caption {
    font-size: 11px !important;
    color: #868e96 !important;
    text-align: center !important;
    margin-top: 4px !important;
  }

  /* Single Key Takeaways Box */
  .harika-takeaways-box {
    background-color: #e6f9f4 !important;
    border-right: 4px solid #09bf95 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
  }

  .harika-takeaways-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #09bf95 !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .harika-takeaways-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .harika-takeaways-list li {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #1a1a1a !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .harika-takeaways-list li .icon {
    color: #09bf95 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }

  /* Single Article Content Body */
  .harika-article-body {
    font-size: 15px !important;
    line-height: 28px !important;
    color: #1a1a1a !important;
    text-align: justify !important;
  }

  .harika-article-body p {
    margin-bottom: 1rem !important;
  }

  .harika-article-body blockquote {
    background-color: #f5f3f3 !important;
    padding: 1rem !important;
    border-radius: 1rem !important;
    margin: 1.5rem 0 !important;
    border-right: 4px solid #09bf95 !important;
    position: relative !important;
  }

  .harika-article-body blockquote p {
    font-size: 14px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
    color: #09bf95 !important;
    margin: 0 !important;
  }

  /* Reaction / Social Bar */
  .harika-reaction-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 1rem !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin: 1rem 0 !important;
  }

  /* Author Bio Box */
  .harika-author-bio-card {
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin: 1rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Prev/Next Post Nav */
  .harika-single-nav-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin: 1rem 0 !important;
  }

  .harika-single-nav-card {
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    text-decoration: none !important;
  }

  .harika-nav-dir {
    font-size: 11px !important;
    color: #868e96 !important;
  }

  .harika-nav-heading {
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
  }

  /* Related Posts List on Mobile */
  .harika-related-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .harika-related-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
  }

  .harika-related-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background-color: #f0eded !important;
  }

  .harika-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .harika-related-title {
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
  }
}