/* Force the nav-tree to fit within the offcanvas width and
                           never trigger horizontal overflow. Combined with the
                           modern-ui.css scroll rules on .offcanvas-body this
                           gives a clean vertical-only scroll. */
                        #nav-tree { padding: 0; margin: 0; list-style: none; max-width: 100%; }
                        #nav-tree li { list-style: none; max-width: 100%; }
                        #nav-tree a, #nav-tree span, #nav-tree div { min-width: 0; }

                        /* Account / identity card. 2026-07-21 rev2: three
                           full-width stacked buttons (Subscribe / My Sub /
                           Log out) — the earlier compact icon-only logout
                           read as decoration, not an action. overflow:hidden
                           on the card also clips any inherited Bootstrap
                           dropdown chevron (::after) that was leaking to
                           the right edge in the founder's screenshot. */
                        .mx-menu-account {
                            background: linear-gradient(135deg, #eef2ff, #ede9fe);
                            border: 1px solid #c7d2fe;
                            border-radius: 12px;
                            padding: 12px;
                            margin: 0 0 12px;
                            box-sizing: border-box;
                            list-style: none;
                            overflow: hidden;
                        }
                        /* Kill any dropdown-toggle chevron the .mx-menu-account
                           LI might inherit from ancestor nav-item styles. */
                        .mx-menu-account::after,
                        .mx-menu-account::before,
                        .mx-menu-account.dropdown-toggle::after,
                        .mx-menu-account > .dropdown-toggle::after { content: none !important; display: none !important; }
                        .mx-menu-account-row {
                            display: flex; align-items: center; gap: 10px;
                            min-width: 0;
                        }
                        .mx-menu-avatar {
                            width: 40px; height: 40px; border-radius: 50%;
                            background: #1e40af; color: #fff;
                            display: inline-flex; align-items: center; justify-content: center;
                            font-size: 18px; flex-shrink: 0;
                        }
                        .mx-menu-user { flex: 1 1 auto; min-width: 0; overflow: hidden; }
                        .mx-menu-user-name {
                            font-weight: 700; font-size: 14px; color: #1e293b;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                            line-height: 1.25;
                        }
                        .mx-menu-user-tier { font-size: 11px; margin-top: 3px; }
                        .mx-tier-badge {
                            display: inline-block; padding: 2px 8px; border-radius: 999px;
                            font-weight: 700; font-size: 10px; letter-spacing: 0.2px;
                            white-space: nowrap;
                        }
                        .mx-tier-vip     { background: #fef3c7; color: #78350f; }
                        .mx-tier-sub     { background: #dcfce7; color: #166534; }
                        .mx-tier-grace   { background: #fee2e2; color: #7f1d1d; }
                        .mx-tier-trial   { background: #dbeafe; color: #1e40af; }
                        .mx-tier-free    { background: #f1f5f9; color: #475569; }
                        /* Stacked full-width action buttons */
                        .mx-menu-account-actions {
                            display: flex; flex-direction: column; gap: 6px;
                            margin-top: 12px; min-width: 0;
                        }
                        .mx-account-btn {
                            display: flex; align-items: center; justify-content: center; gap: 8px;
                            width: 100%; box-sizing: border-box;
                            padding: 9px 12px; border-radius: 8px;
                            text-decoration: none;
                            font-size: 13px; font-weight: 600;
                            border: 1px solid #cbd5e1; background: #fff; color: #1e293b;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                            transition: background .15s, color .15s, border-color .15s;
                        }
                        .mx-account-btn:hover { background: #eef2ff; color: #1e40af; }
                        .mx-account-btn-primary { background: #1e40af; color: #fff; border-color: #1e40af; }
                        .mx-account-btn-primary:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
                        .mx-account-btn-logout {
                            background: #fff; color: #b91c1c; border-color: #fca5a5;
                        }
                        .mx-account-btn-logout:hover { background: #fee2e2; color: #7f1d1d; border-color: #f87171; }
                        .mx-account-btn i { flex-shrink: 0; }

                        /* Guest card (not signed in) */
                        .mx-menu-guest {
                            text-align: center;
                            background: linear-gradient(135deg, #eef2ff, #ede9fe);
                            border: 1px solid #c7d2fe;
                            border-radius: 12px;
                            padding: 14px 12px;
                            margin: 0 0 12px;
                            box-sizing: border-box;
                        }
                        .mx-guest-title { font-weight: 700; font-size: 14px; color: #1e3a8a; }
                        .mx-guest-sub { font-size: 12px; color: #475569; margin: 3px 0 10px; }
                        .mx-signin-btn {
                            display: inline-flex; align-items: center; gap: 8px;
                            padding: 8px 16px; background: #1e40af; color: #fff;
                            border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;
                        }
                        .mx-signin-btn:hover { background: #1e3a8a; color: #fff; }

                        /* Section header */
                        .mx-menu-section {
                            font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
                            color: #64748b; text-transform: uppercase;
                            padding: 4px 4px; margin: 12px 0 4px;
                        }

                        /* Menu items */
                        .mx-menu-item { margin: 0 0 2px; max-width: 100%; }
                        .mx-menu-link {
                            display: flex; align-items: center; gap: 10px;
                            padding: 8px 10px; border-radius: 8px;
                            text-decoration: none; color: #1e293b;
                            font-size: 14px; font-weight: 500;
                            min-width: 0;
                        }
                        .mx-menu-link:hover { background: #eef2ff; color: #1e40af; }
                        .mx-menu-link span {
                            flex: 1 1 auto; min-width: 0;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                        }
                        .mx-menu-icon {
                            width: 18px; text-align: center; flex-shrink: 0;
                            font-size: 14px; color: #64748b;
                        }
                        .mx-menu-link:hover .mx-menu-icon { color: #1e40af; }

                        /* Toggle row (Marathi) */
                        .mx-menu-toggle {
                            display: flex; align-items: center; gap: 10px;
                            padding: 8px 10px; margin: 0 0 2px;
                            min-width: 0;
                        }
                        .mx-menu-toggle-label { font-size: 14px; color: #1e293b; }
                        .mx-menu-toggle-sub { font-size: 11px; color: #64748b; margin-top: 1px; }

                        /* 2026-08-24: Government Portals in-place collapse (option C).
                           Uses <details><summary> so it works without any JS. */
                        .mx-menu-expandable { list-style: none; }
                        .mx-menu-details { width: 100%; }
                        .mx-menu-details > summary.mx-menu-details-summary {
                            list-style: none; cursor: pointer;
                            display: flex; align-items: center; gap: 10px;
                            padding: 8px 10px; border-radius: 8px;
                            font-size: 14px; font-weight: 500; color: #1e293b;
                        }
                        .mx-menu-details > summary.mx-menu-details-summary::-webkit-details-marker { display: none; }
                        .mx-menu-details > summary.mx-menu-details-summary:hover {
                            background: #eef2ff; color: #1e40af;
                        }
                        .mx-menu-details > summary.mx-menu-details-summary:hover .mx-menu-icon { color: #1e40af; }
                        .mx-menu-details-chev {
                            margin-left: auto; font-size: 10px; color: #94a3b8;
                            transition: transform 0.2s ease;
                        }
                        .mx-menu-details[open] > summary .mx-menu-details-chev { transform: rotate(180deg); color: #1e40af; }
                        .mx-menu-sublist {
                            list-style: none; padding: 4px 0 6px 0; margin: 4px 0 4px 18px;
                            border-left: 2px solid #e5e7eb;
                        }
                        .mx-menu-sublink {
                            display: flex; align-items: center; gap: 10px;
                            padding: 6px 10px 6px 12px; text-decoration: none;
                            color: #334155; font-size: 13px; border-radius: 6px;
                            line-height: 1.3;
                        }
                        .mx-menu-sublink:hover { background: #f1f5f9; color: #1e40af; }
                        .mx-menu-sublink img { flex-shrink: 0; border-radius: 3px; object-fit: contain; }
                        .mx-menu-sublink em {
                            color: #64748b; font-size: 11px; font-style: normal;
                            font-weight: 400; margin-left: 4px;
                        }
                        .mx-menu-sublink:hover em { color: #6366f1; }

                        /* Collapsible submenus (Rules / Regulations) using native <details> */
                        .mx-menu-collapsible { list-style: none; }
                        .mx-menu-collapsible details { margin: 0; }
                        .mx-menu-collapsible summary {
                            list-style: none; cursor: pointer;
                        }
                        .mx-menu-collapsible summary::-webkit-details-marker { display: none; }
                        .mx-menu-collapsible summary::marker { content: ''; }
                        .mx-menu-summary { user-select: none; }
                        .mx-menu-chevron {
                            font-size: 11px; color: #94a3b8;
                            transition: transform 0.2s ease;
                            flex-shrink: 0; margin-left: auto;
                        }
                        .mx-menu-collapsible details[open] > summary .mx-menu-chevron {
                            transform: rotate(180deg);
                        }
                        .mx-menu-count {
                            display: inline-block;
                            background: #e2e8f0; color: #475569;
                            font-size: 10px; font-weight: 700;
                            padding: 1px 7px; border-radius: 999px;
                            margin-left: 4px; vertical-align: middle;
                        }
                        .mx-menu-sublist {
                            list-style: none; padding: 4px 0 8px 4px; margin: 0;
                            border-left: 2px solid #e2e8f0; margin-left: 12px;
                        }
                        .mx-menu-sublist li { list-style: none; }
                        .mx-menu-sublink {
                            display: flex; align-items: center; gap: 8px;
                            padding: 6px 8px 6px 10px; border-radius: 6px;
                            text-decoration: none; color: #334155;
                            font-size: 12.5px; line-height: 1.35;
                            min-width: 0;
                        }
                        .mx-menu-sublink:hover { background: #eef2ff; color: #1e40af; }
                        .mx-menu-sublink span {
                            flex: 1 1 auto; min-width: 0;
                            overflow: hidden; text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            white-space: normal;
                        }
                        .mx-menu-subicon {
                            width: 16px; flex-shrink: 0;
                            font-size: 13px; text-align: center;
                        }