/* ---------- 1) Glass tokens (light + dark) ---------- */
    :root,
    body {
      --g-fill: color-mix(in srgb, var(--surface) 66%, transparent);
      --g-fill-inner: color-mix(in srgb, var(--surface) 52%, transparent);
      --g-fill-menu: color-mix(in srgb, var(--surface) 86%, transparent);
      --g-border: color-mix(in srgb, var(--text) 16%, transparent);
      --g-blur: blur(18px) saturate(1.25);
      --g-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px -18px rgba(15, 23, 42, .35);
      --mmg-fill: var(--g-fill);
      --mmg-fill-nav: var(--g-fill-menu);
      --mmg-fill-strong: color-mix(in srgb, var(--surface) 84%, transparent);
      --mmg-border: var(--g-border);
      --mmg-blur: var(--g-blur);
    }

    [data-theme="dark"],
    [data-theme="dark"] body {
      --g-fill: color-mix(in srgb, var(--surface) 58%, transparent);
      --g-fill-inner: color-mix(in srgb, var(--surface) 46%, transparent);
      --g-fill-menu: color-mix(in srgb, var(--surface) 84%, transparent);
      --g-border: rgba(255, 255, 255, .13);
      --g-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px -20px rgba(0, 0, 0, .7);
    }

    /* ---------- 2) Homepage + login page: সব card/box glass ---------- */
    .homepage-view :is(.hpx-feature-card, .hpx-step, .hpx-about-point, .hpx-about-media,
      .mmh-hero-kpi, .mmh-trustbar-inner, .mmh-product-stage, .mmh-mini-report, .mmh-capability,
      .mmh-story, .mmh-role-card, .mmh-flow, .mmh-flow-step, .mmx-public-showcase, .mmx-public-art-card,
      .mm-allinone, .mm-freecard, .mm-contact-card, .mm-contact-mini, .mm-contact-form, details),
    .auth-screen :is(.auth-card, .auth-feedback),
    body :is(.app-footer) {
      background: var(--g-fill) !important;
      background-image: none !important;
      border: 1.5px solid var(--g-border) !important;
      box-shadow: var(--g-shadow) !important;
      -webkit-backdrop-filter: var(--g-blur) !important;
      backdrop-filter: var(--g-blur) !important;
    }

    /* card-এর ভেতরের box — একটু হালকা glass */
    .homepage-view :is(.mm-pricebox, .mm-allinone__right) {
      background: var(--g-fill-inner) !important;
      border: 1px solid var(--g-border) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      backdrop-filter: blur(10px) !important;
    }

    /* full-width section: হালকা tint (নিচের card-এর blur ঠিক রাখতে section-এ backdrop নেই) */
    .homepage-view>section:not(.mmx-public-showcase) {
      background: color-mix(in srgb, var(--surface) 10%, transparent) !important;
    }

    /* Pricing ribbon-এর রং ফেরত (নইলে light mode-এ সাদা লেখা দেখা যায় না) */
    .homepage-view .mm-allinone .mm-allinone__ribbon {
      background: linear-gradient(90deg, #059669, var(--green, #069494)) !important;
      color: #fff !important;
    }

    .homepage-view .mm-freecard .mm-freecard__ribbon {
      background: color-mix(in srgb, var(--text) 10%, transparent) !important;
      color: var(--text) !important;
    }

    /* ---------- 3) After login: card-এর border/shadow light mode-এ স্পষ্ট ---------- */
    body:not(.show-homepage):not(.show-auth-page) :is(.container, .app-footer) :is(section, .card, .stat-card,
      .premium-card, .premium-glass-card, .quick-action-card, .bazar-duty-card, .duty-summary-card,
      .meal-mini-card, .member-mobile-card, .mess-summary-card, .mobile-card, .filter-card, .print-card,
      .notice-compose-card, .profile-summary-card, .profile-edit-card, .rent-bulk-action-card,
      .rent-preview-card, .role-choice-card, .sheet-sync-card, .moderator-info-card, .access-card,
      .wpop-card, .pro-card, .pro-qr-card, .mf-card, .mf-tile, .mm-billing-card, .mm-freecard,
      .mm-upgrade-card, .mm-allinone, .mm-plan, .mm3d-table-card, .mmp-card, .mmx-card, .mmx-kpi,
      .mmx-due-card, .mmx-menu-box, .mmx-kitchen-hero, .mmx-demo-note, .mmx-asset-showcase, .mmd-hero,
      .mmd-plate, .mt-panel, .mt-tile, .chart-box, .notice-board, .activity-timeline, .table-wrap,
      .toolbar-item),
    body:not(.show-homepage):not(.show-auth-page) .container .tab-panel>:is(div, section) {
      box-shadow: var(--g-shadow) !important;
    }

    body:not(.show-homepage):not(.show-auth-page) .container :is(.mmd-hero, .mmx-kitchen-hero, .mmx-demo-note) {
      background-color: var(--g-fill) !important;
      border: 1.5px solid var(--g-border) !important;
      -webkit-backdrop-filter: var(--g-blur) !important;
      backdrop-filter: var(--g-blur) !important;
    }

    /* Modal popup */
    .modal-overlay .modal {
      background: var(--mmg-fill-strong) !important;
      border: 1.5px solid var(--g-border) !important;
      -webkit-backdrop-filter: var(--g-blur) !important;
      backdrop-filter: var(--g-blur) !important;
    }

    /* ---------- 4) Navbar: blur থাকবে pseudo-element-এ, যাতে ভেতরের dropdown/menu-ও ঠিকমতো blur পায় ---------- */
    .hp-nav,
    .homepage-view .hp-nav,
    [data-theme="dark"] .hp-nav,
    [data-theme="dark"] .homepage-view .hp-nav,
    body:not(.show-homepage) .app-header,
    body:not(.show-homepage) .duty-marquee-navbar {
      background: transparent !important;
      background-image: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-bottom: 1px solid var(--g-border) !important;
    }

    .hp-nav::before,
    body:not(.show-homepage) .app-header::before,
    body:not(.show-homepage) .duty-marquee-navbar::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: var(--g-fill-menu);
      -webkit-backdrop-filter: var(--g-blur);
      backdrop-filter: var(--g-blur);
    }

    .hp-nav,
    body:not(.show-homepage) .app-header,
    body:not(.show-homepage) .duty-marquee-navbar {
      isolation: isolate;
    }

    body:not(.show-homepage) :is(.actions-dropdown, .header-bell-panel),
    body:not(.show-homepage) .mobile-bottom-nav {
      background: var(--g-fill-menu) !important;
      background-image: none !important;
      border: 1px solid var(--g-border) !important;
      -webkit-backdrop-filter: var(--g-blur) !important;
      backdrop-filter: var(--g-blur) !important;
    }

    /* ---------- 5) Homepage / login mobile menu: পেছনে blur ---------- */
    /* 861–1180px-এ link গুলো logo-র ওপর উঠে যেত — তাই এখানেও hamburger menu */
    @media (min-width: 861px) and (max-width: 1180px) {
      .hp-nav .hp-nav-links {
        display: none !important;
      }

      .hp-nav .hp-nav-links.hp-mobile-open {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        box-sizing: border-box;
        padding: 16px 32px 22px;
        gap: 16px;
      }

      .hp-nav .hp-login-btn-desktop {
        display: none !important;
      }

      .hp-nav .hp-login-btn-mobile {
        display: inline-flex !important;
        justify-content: center;
      }

      .hp-nav .hp-nav-toggle {
        display: inline-flex !important;
      }

      .hp-nav .hp-nav-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
      }

      .hp-nav .hp-nav-right {
        margin-left: auto !important;
      }
    }

    @media (max-width: 1180px) {
      .hp-nav-links.hp-mobile-open {
        background: var(--g-fill-menu) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--g-border) !important;
        box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
        backdrop-filter: blur(22px) saturate(1.3) !important;
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
      }

      .hp-nav-links.hp-mobile-open a {
        color: var(--text) !important;
        font-weight: 600;
      }
    }

    /* ---------- 6) App sidebar (mobile/tablet drawer): blur glass ---------- */
    html body nav#responsiveSidebar.responsive-sidebar {
      background: var(--g-fill-menu) !important;
      background-image: none !important;
      border: 1px solid var(--g-border) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
      backdrop-filter: blur(22px) saturate(1.3) !important;
    }

    /* Pro theme চালু থাকলে theme-এর রঙেই glass sidebar */
    html[data-mm-theme] body nav#responsiveSidebar.responsive-sidebar {
      background: linear-gradient(180deg,
          color-mix(in srgb, var(--mt-side1, var(--surface)) 78%, transparent),
          color-mix(in srgb, var(--mt-side2, var(--surface)) 78%, transparent)) !important;
    }

    /* Theme বদলালে .container-এ z-index:1 বসে যায়, তাতে sidebar overlay-এর নিচে পড়ে
       পুরো menu ঝাপসা দেখায় — sidebar খোলা থাকলে সেই stacking সরিয়ে দেওয়া হলো */
    body.sidebar-open .container,
    html[data-mm-theme] body.sidebar-open .container {
      z-index: auto !important;
      transform: none !important;
      filter: none !important;
    }

    body.sidebar-open .responsive-sidebar {
      z-index: 1200 !important;
    }

    .sidebar-overlay {
      background: rgba(8, 12, 22, .28) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      backdrop-filter: blur(4px) !important;
    }

    /* bordered ছোট box গুলোও glass (transparent নয়) */
    html body:not(.show-homepage):not(.show-auth-page) .container .tab-panel :is([class*="table-wrap"], .guest-lock-box,
      .notice-item, .mmx-mini-metric, .duty-summary-mini, .mmx-demo-note, .mmx-person, .mmx-shopping-item,
      .mmx-menu-slot, .mmx-missing-item, .mmd-menu-slot, .mt-probar, .mt-live, .mt-seg) {
      background: var(--g-fill-inner) !important;
      background-image: none !important;
      border: 1px solid var(--g-border) !important;
      -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
      backdrop-filter: blur(12px) saturate(1.2) !important;
    }

    /* ---------- 7) Hamburger: কোনো bg/border নেই, শুধু ৩ লাইন ---------- */
    html body .hp-nav-toggle,
    html body .sidebar-toggle-btn,
    html body .app-header .sidebar-toggle-btn,
    html body.sidebar-open .app-header .sidebar-toggle-btn,
    html body.sidebar-pinned .app-header .sidebar-toggle-btn,
    html body .hp-nav-toggle[aria-expanded="true"],
    html body .hp-nav-toggle:hover,
    html body .app-header .sidebar-toggle-btn:hover {
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      outline: 0;
      box-shadow: none !important;
      color: #fff !important;
    }

    html[data-theme="light"] body .hp-nav-toggle,
    html[data-theme="light"] body .app-header .sidebar-toggle-btn,
    html[data-theme="light"] body.sidebar-open .app-header .sidebar-toggle-btn {
      color: var(--text) !important;
    }

    html body :is(.hp-nav-toggle, .sidebar-toggle-btn) .hamburger-bar {
      background: currentColor !important;
    }

    html body :is(.hp-nav-toggle, .sidebar-toggle-btn):focus-visible {
      outline: 2px solid var(--accent) !important;
      outline-offset: 2px;
    }

    /* ---------- 8) Page-এর উপরের card আর নিচের card একই width ---------- */
    body:not(.show-homepage):not(.show-auth-page) .container .tab-panel .mmx-kitchen-shell,
    body:not(.show-homepage):not(.show-auth-page) .container .tab-panel>:is(div, section):not(.mmd-hero):not(.mmd-eater):has(> :is(.card, .stat-card, .premium-card, .mmp-card, .mmx-card, .mt-panel, .mmd-plate, .mmx-kitchen-hero, .mmx-kitchen-shell, .mmx-kpi-grid, .mmx-content-grid, .mmx-dashboard-food, .mf-card, .mm-billing-card, .table-wrap)) {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body:not(.show-homepage):not(.show-auth-page) .container .tab-panel .mmx-kitchen-shell {
      padding-top: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    body:not(.show-homepage):not(.show-auth-page) .container .tab-panel>* {
      max-width: 100%;
      box-sizing: border-box;
    }

    /* ---------- 9) Responsive: pricing ("দাম মিলবে") ---------- */
    .mm-pricing {
      overflow-x: clip;
    }

    .mm-pricing__head h2 {
      font-size: clamp(22px, 5.6vw, 38px) !important;
      line-height: 1.3 !important;
      overflow-wrap: anywhere;
    }

    .mm-pricing__head p {
      font-size: clamp(13.5px, 3.6vw, 16px) !important;
    }

    .mm-pricing__grid,
    .mm-pricing__grid--stacked {
      width: 100%;
      box-sizing: border-box;
    }

    .mm-allinone__price .js-price {
      font-size: inherit !important;
      font-weight: 800 !important;
      color: var(--text) !important;
    }

    .mm-pricing__grid>*,
    .mm-allinone__body>*,
    .mm-allinone__list li {
      min-width: 0;
    }

    @media (max-width: 1024px) {
      .mm-pricing__grid.mm-pricing__grid--stacked {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 680px !important;
      }
    }

    @media (max-width: 600px) {
      .mm-pricing {
        padding: 52px 14px 64px !important;
      }

      .mm-toggle {
        gap: 8px !important;
        margin-bottom: 28px !important;
      }

      .mm-toggle button {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        flex-wrap: wrap;
        padding: 9px 10px !important;
        font-size: 13px !important;
      }

      .mm-toggle button:first-child {
        flex-basis: 100%;
      }

      .mm-allinone__body {
        padding: 16px !important;
        gap: 14px !important;
      }

      .mm-allinone__ribbon,
      .mm-freecard__ribbon {
        max-width: calc(100% - 28px);
        font-size: 12px !important;
        padding: 7px 14px !important;
        line-height: 1.4;
      }

      .mm-allinone__price {
        font-size: 28px !important;
        flex-wrap: wrap;
      }

      .mm-allinone__right {
        padding: 16px !important;
      }

      .mm-allinone__list {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .mm-allinone:hover,
      .mm-freecard:hover {
        transform: none !important;
      }
    }

    /* ---------- 10) Responsive: "চোখেরও শান্তি" theme showcase ---------- */
    .mmx-public-showcase {
      box-sizing: border-box;
      max-width: calc(100% - 24px);
    }

    .mmx-public-grid>*,
    .mmx-public-art>* {
      min-width: 0;
    }

    .mmx-public-showcase h2 {
      font-size: clamp(22px, 5.4vw, 40px) !important;
      line-height: 1.28 !important;
      overflow-wrap: anywhere;
    }

    .mmx-public-showcase p {
      font-size: clamp(13.5px, 3.6vw, 15px) !important;
    }

    @media (max-width: 1024px) {
      .mmx-public-grid {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .mmx-public-art {
        min-height: 0 !important;
      }

      .mmx-theme-demo-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 600px) {
      .mmx-public-showcase {
        width: calc(100% - 20px) !important;
        margin: 20px auto 44px !important;
        padding: 18px 14px !important;
        border-radius: 22px !important;
      }

      .mmx-theme-demo-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
      }

      .mmx-theme-demo {
        flex: none !important;
        min-height: 58px !important;
      }

      .mmx-public-actions button {
        flex: 1 1 100%;
      }

      .mmx-public-art {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .mmx-public-art img {
        max-height: 200px !important;
      }
    }

    /* ---------- 11) General mobile safety ---------- */
    html,
    body {
      overflow-x: clip;
    }

    img,
    svg,
    video,
    canvas {
      max-width: 100%;
    }

    .homepage-view :is(h1, h2, h3) {
      overflow-wrap: anywhere;
    }

    @media (max-width: 600px) {
      .homepage-view h1 {
        font-size: clamp(26px, 8vw, 36px) !important;
        line-height: 1.25 !important;
      }

      .homepage-view h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.3 !important;
      }

      .homepage-view .mmh-hero-kpi {
        max-width: calc(100% - 8px);
      }

      body:not(.show-homepage):not(.show-auth-page) .container .tab-panel :is(.mmd-hero, .mmx-kitchen-hero) h1 {
        font-size: clamp(24px, 7.5vw, 34px) !important;
      }
    }

    @media (max-width: 440px) {
      .auth-nav .hp-nav-right {
        gap: 6px !important;
      }

      .auth-nav .auth-back-btn {
        font-size: 0 !important;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }

      .auth-nav .auth-back-btn i {
        font-size: 18px !important;
        margin: 0 !important;
      }

      .hp-nav .hp-logo-text {
        white-space: nowrap;
      }
    }

    @media (prefers-reduced-transparency: reduce) {

      .homepage-view :is(.hpx-feature-card, .mm-allinone, .mm-freecard, .mmx-public-showcase),
      html body nav#responsiveSidebar.responsive-sidebar,
      .hp-nav-links.hp-mobile-open {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
    }

    /* Sidebar-এ Admin বাটন দেখাবে না (admin login করলেই admin.html-এ redirect হয়) */
    #mmAdminNavBtn,
    #responsiveSidebar [onclick*="platformAdmin"],
    #tab-platformAdmin {
      display: none !important;
    }