html body nav#responsiveSidebar.responsive-sidebar {
      --sb-cap: color-mix(in srgb, var(--surface) 94%, transparent);
      --sb-cap-bottom: var(--sb-cap);
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      overscroll-behavior: contain;
    }

    html[data-mm-theme] body nav#responsiveSidebar.responsive-sidebar {
      --sb-cap: color-mix(in srgb, var(--mt-side1, var(--surface)) 94%, transparent);
      --sb-cap-bottom: color-mix(in srgb, var(--mt-side2, var(--surface)) 94%, transparent);
    }

    /* উপরের profile box */
    html body nav#responsiveSidebar .sidebar-top-row,
    html body nav#responsiveSidebar>.sidebar-identity-card,
    html body nav#responsiveSidebar .sidebar-top-row>.sidebar-identity-card:only-child {
      position: sticky !important;
      top: 0 !important;
      z-index: 5;
    }

    html body nav#responsiveSidebar .sidebar-top-row {
      margin: 0 -12px 6px !important;
      padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px 10px !important;
      background: var(--sb-cap) !important;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .45);
    }

    /* desktop-এ top-row "display: contents" থাকে — তখন identity card নিজেই sticky */
    @media (min-width: 901px) {
      html body nav#responsiveSidebar .sidebar-top-row {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      html body nav#responsiveSidebar .sidebar-identity-card {
        position: sticky !important;
        top: 0 !important;
        z-index: 5;
        margin-top: 0 !important;
        box-shadow: 0 -14px 0 0 var(--sb-cap), 0 10px 14px -12px rgba(0, 0, 0, .45) !important;
        background: var(--sb-cap) !important;
      }

      html body nav#responsiveSidebar {
        padding-top: 14px !important;
      }
    }

    /* নিচের plan + Logout box */
    html body nav#responsiveSidebar .mm-sidebar-footer {
      position: sticky !important;
      bottom: 0 !important;
      z-index: 5;
      margin: 10px 0 0 !important;
      padding: 12px 8px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
      border: 0 !important;
      border-top: 1px solid var(--g-border, var(--border)) !important;
      border-radius: 0 !important;
      background: var(--sb-cap-bottom) !important;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, .45) !important;
      flex-shrink: 0;
    }

    html body nav#responsiveSidebar .sidebar-spacer {
      flex: 1 0 8px !important;
      min-height: 8px;
    }

    /* scroll শুধু মাঝের অংশে — সুন্দর পাতলা scrollbar */
    html body nav#responsiveSidebar::-webkit-scrollbar {
      width: 5px;
    }

    html body nav#responsiveSidebar::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--text) 22%, transparent);
      border-radius: 99px;
    }

    html body nav#responsiveSidebar {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
    }

    /* ---------- Homepage story card: image border-এর গায়ে লাগবে না ---------- */
    .homepage-view .mmh-story {
      isolation: isolate;
    }

    .homepage-view .mmh-story-report img {
      right: 22px !important;
      bottom: 22px !important;
      width: min(52%, 300px) !important;
      max-height: calc(100% - 44px);
      object-fit: contain;
      object-position: right bottom;
    }

    .homepage-view .mmh-story :is(img, picture) {
      max-width: calc(100% - 44px);
    }

    .homepage-view .mmh-story-kitchen img,
    .homepage-view .mmh-story-sync img,
    .homepage-view .mmh-story-menu img {
      margin: 0 auto 22px;
      max-height: 320px;
      object-fit: contain;
    }

    @media (max-width: 700px) {
      .homepage-view .mmh-story-report {
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
      }

      .homepage-view .mmh-story-report img {
        position: static !important;
        align-self: flex-end;
        width: min(78%, 300px) !important;
        margin: 0 22px 22px auto;
        opacity: 1 !important;
      }
    }

    /* ---------- Homepage-এর ছোট decorative অংশগুলোর রং ফেরত
       (আগের "border-only" rule এগুলোর background মুছে দিয়েছিল) ---------- */
    .homepage-view :is(.mmh-live-pill, .mmh-sync-node, .mmh-menu-row) {
      background: var(--g-fill-menu) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      backdrop-filter: blur(12px) !important;
    }

    .homepage-view .mmh-trust-icon {
      background: color-mix(in srgb, var(--accent2) 14%, transparent) !important;
    }

    .homepage-view .mmh-bar {
      background: color-mix(in srgb, var(--text) 16%, transparent) !important;
    }

    .homepage-view :is(.hpx-feature-icon) {
      background-image: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
    }

    .homepage-view :is(.mmh-sync-center, .mm-contact-avatar) {
      background-image: linear-gradient(145deg, var(--accent2), var(--accent)) !important;
    }

    .homepage-view .mm-pricebox__save {
      background: color-mix(in srgb, var(--green, #069494) 16%, transparent) !important;
    }

    /* ---------- Sidebar footer: [Mess name + Pro] তার ঠিক নিচে [Logout] — মাঝে কোনো gap নেই ---------- */
    html body nav#responsiveSidebar .mm-sidebar-footer {
      gap: 0 !important;
      padding-top: 8px !important;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    }

    html body nav#responsiveSidebar .mm-sidebar-footer #mmPlanPill {
      display: none !important;
    }

    html body nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-name {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      width: 100% !important;
      height: auto !important;
      min-height: 44px !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 8px 8px 8px 10px !important;
      border: 0 !important;
      border-radius: 12px !important;
      background: transparent !important;
      box-shadow: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      overflow: hidden !important;
      box-sizing: border-box;
      color: var(--text) !important;
      font-weight: 700;
      font-size: .95rem;
    }

    html body nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-icon {
      display: inline-flex !important;
      flex: 0 0 auto;
      width: 20px !important;
      min-width: 20px !important;
      justify-content: center;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 1.1rem;
    }

    html body nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-text {
      display: block !important;
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      white-space: normal !important;
      overflow-wrap: anywhere;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.3;
      text-align: left !important;
      max-width: none !important;
      opacity: 1 !important;
      width: auto !important;
    }

    /* Plan badge — mess name-এর পাশে */
    html body nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-name::after {
      flex: 0 0 auto;
      display: none;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .02em;
      line-height: 1.4;
    }

    html body.plan-pro nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-name::after,
    html body.plan-plus nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-name::after {
      content: "Pro";
      display: inline-block;
      color: #3b2300;
      background: linear-gradient(135deg, #FFD27A, #F59E0B);
    }

    html body.plan-free nav#responsiveSidebar .mm-sidebar-footer .sidebar-mess-name::after {
      content: "Free";
      display: inline-block;
      color: var(--text2);
      background: color-mix(in srgb, var(--text) 10%, transparent);
    }

    html body nav#responsiveSidebar .mm-sidebar-footer .sidebar-logout-btn {
      margin: 0 !important;
      width: 100% !important;
    }