#hp-themes {
      scroll-margin-top: 96px;
    }

    /* ---- Homepage navbar: fully transparent ---- */
    .hp-nav,
    [data-theme="dark"] .hp-nav {
      background: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* ---- Homepage buttons (nav + hero + everywhere on the homepage): transparent, border only ---- */
    .homepage-view .btn-primary,
    .homepage-view .btn-success,
    .homepage-view .hp-login-btn,
    .homepage-view .hpx-hero-actions .btn,
    .homepage-view .mmx-public-actions button.primary {
      background: transparent !important;
      color: var(--accent) !important;
      border: 1.5px solid var(--accent) !important;
      box-shadow: none !important;
    }

    .homepage-view .btn-success {
      color: var(--accent2) !important;
      border-color: var(--accent2) !important;
    }

    .homepage-view .btn-primary:hover,
    .homepage-view .hp-login-btn:hover,
    .homepage-view .hpx-hero-actions .btn:hover,
    .homepage-view .mmx-public-actions button.primary:hover {
      background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    }

    .homepage-view .btn-success:hover {
      background: color-mix(in srgb, var(--accent2) 14%, transparent) !important;
    }

    /* ---- After login (the whole app): every card-like div becomes a glass (blur) card —
       no solid fill, just a border, and whatever is behind it shows through, blurred ---- */
    body:not(.show-homepage) .card,
    body:not(.show-homepage) .stat-card,
    body:not(.show-homepage) .premium-card,
    body:not(.show-homepage) .premium-glass-card,
    body:not(.show-homepage) .quick-action-card,
    body:not(.show-homepage) .bazar-duty-card,
    body:not(.show-homepage) .duty-summary-card,
    body:not(.show-homepage) .meal-mini-card,
    body:not(.show-homepage) .member-mobile-card,
    body:not(.show-homepage) .mess-summary-card,
    body:not(.show-homepage) .mf-card,
    body:not(.show-homepage) .mm-billing-card,
    body:not(.show-homepage) .mm-freecard,
    body:not(.show-homepage) .mm-upgrade-card,
    body:not(.show-homepage) .mm3d-table-card,
    body:not(.show-homepage) .mmp-card,
    body:not(.show-homepage) .mmx-card,
    body:not(.show-homepage) .moderator-info-card,
    body:not(.show-homepage) .pro-card,
    body:not(.show-homepage) .pro-qr-card,
    body:not(.show-homepage) .profile-edit-card,
    body:not(.show-homepage) .rent-bulk-action-card,
    body:not(.show-homepage) .rent-preview-card,
    body:not(.show-homepage) .role-choice-card,
    body:not(.show-homepage) .sheet-sync-card,
    body:not(.show-homepage) .sidebar-identity-card,
    body:not(.show-homepage) .access-card,
    body:not(.show-homepage) .auth-card,
    body:not(.show-homepage) .wpop-card,
    body:not(.show-homepage) .chart-box,
    body:not(.show-homepage) .mess-code-box,
    body:not(.show-homepage) .mmx-menu-box,
    body:not(.show-homepage) .mmd-plate,
    body:not(.show-homepage) .mt-tile,
    body:not(.show-homepage) .mf-tile {
      background: color-mix(in srgb, var(--surface) 30%, transparent) !important;
      background-image: none !important;
      border: 1.5px solid var(--border) !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
      backdrop-filter: blur(16px) saturate(1.2) !important;
    }