@media (max-width: 700px) {
    .mobile-tools-bar { padding: 4px; gap: 4px; border-radius: 16px; grid-template-columns: repeat(5,minmax(0,1fr)); }
    .mobile-tools-bar .mobile-tools-link { box-sizing: border-box; height: 44px; min-height: 44px; padding: 3px 2px; font-size: 10px; border-radius: 11px; }
    .mobile-tools-link > span { white-space: nowrap; }
    .mobile-tools-link img { width: 18px; height: 18px; }
    .mobile-tools-bar ~ .site-footer { padding-bottom: calc(136px + env(safe-area-inset-bottom)); }
    .mobile-tools-bar button.mobile-tools-link { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
    .mobile-tools-bar .mobile-tools-link[aria-expanded="true"] {
        color: var(--gold-dark);
        background: linear-gradient(145deg, rgba(212,175,55,.24), rgba(212,175,55,.1));
        box-shadow: inset 0 0 0 1px var(--border-gold);
    }
    html[data-theme="night"] .mobile-tools-bar .mobile-tools-link[aria-expanded="true"] { color: var(--gold-light); }
}

.mobile-tools-panel,
.mobile-tools-scrim { display: none; }

@media (max-width: 700px) {
    .mobile-tools-panel {
        position: fixed;
        inset: auto 12px var(--mobile-tools-bottom, calc(94px + env(safe-area-inset-bottom))) 12px;
        z-index: 121;
        width: min(420px, calc(100% - 24px));
        max-height: calc(100vh - var(--mobile-tools-bottom, 94px) - max(16px, env(safe-area-inset-top)));
        max-height: calc(100dvh - var(--mobile-tools-bottom, 94px) - max(16px, env(safe-area-inset-top)));
        margin: 0 auto;
        padding: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        scroll-padding-block: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(128,138,158,.36) transparent;
        border: 1px solid rgba(255,255,255,.9);
        border-radius: 28px;
        background: #f5f4f0;
        color: var(--text);
        font-family: Cairo, sans-serif;
        box-shadow: 0 24px 70px rgba(17,24,39,.23), 0 4px 16px rgba(17,24,39,.1), inset 0 1px 0 rgba(255,255,255,.9);
        transform-origin: 0 0;
    }

    .mobile-tools-panel.is-open {
        display: block;
    }

    .mobile-tools-panel:popover-open {
        display: block;
    }

    .mobile-tools-panel--closing { pointer-events: none; }
    .mobile-tools-panel::-webkit-scrollbar { width: 5px; }
    .mobile-tools-panel::-webkit-scrollbar-track { background: transparent; }
    .mobile-tools-panel::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(128,138,158,.36); }

    .mobile-tools-panel::backdrop { background: rgba(12,19,31,.12); }
    .mobile-tools-scrim:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 120;
        padding: 0;
        border: 0;
        background: rgba(12,19,31,.12);
    }

    .mobile-tools-panel__head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
    .mobile-tools-panel__close { position: relative; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(109,115,127,.1); border-radius: 50%; background: rgba(109,115,127,.08); color: var(--text-muted); cursor: pointer; }
    .mobile-tools-panel__close::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
    .mobile-tools-panel__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    .mobile-tools-panel__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .mobile-tools-shortcut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 94px; padding: 11px 6px; border: 1px solid rgba(255,255,255,.65); border-radius: 19px; background: rgba(255,255,255,.54); color: var(--text); text-align: center; text-decoration: none; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; -webkit-tap-highlight-color: transparent; }
    .mobile-tools-shortcut__icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.55); border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 7px rgba(17,24,39,.07); }
    .mobile-tools-shortcut__icon--gold { background: linear-gradient(145deg,#ffe7a0,#f5cc62); }
    .mobile-tools-shortcut__icon--peach { background: linear-gradient(145deg,#ffdbc1,#f5b58e); }
    .mobile-tools-shortcut__icon--purple { background: linear-gradient(145deg,#e8ddff,#cbb5f2); }
    .mobile-tools-shortcut__icon--blue { background: linear-gradient(145deg,#d4e8ff,#a8cdf5); }
    .mobile-tools-shortcut__icon--mint { background: linear-gradient(145deg,#cff1df,#9dd8bf); }
    .mobile-tools-shortcut__icon img { display: block; width: 25px; height: 25px; opacity: 1; filter: none; }
    .mobile-tools-shortcut__label { font-size: 12px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
    .mobile-tools-shortcut[aria-current="page"] { border-color: var(--border-gold); background: rgba(242,202,80,.14); }
    .mobile-tools-shortcut:is(:hover,:focus-visible) { background: rgba(255,255,255,.85); box-shadow: 0 5px 16px rgba(17,24,39,.08); transform: translateY(-2px); }
    .mobile-tools-shortcut:active { transform: scale(.97); }
    .mobile-tools-shortcut:focus-visible,
    .mobile-tools-panel__close:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

    html[data-theme="night"] .mobile-tools-panel { background: #202737; border-color: rgba(255,255,255,.16); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
    html[data-theme="night"] .mobile-tools-panel__close { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.07); }
    html[data-theme="night"] .mobile-tools-shortcut { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.045); }
    html[data-theme="night"] .mobile-tools-shortcut:is(:hover,:focus-visible) { background: rgba(255,255,255,.1); }
    html[data-theme="night"] .mobile-tools-shortcut[aria-current="page"] { border-color: var(--border-gold); background: rgba(242,202,80,.1); }
    html[data-theme="night"] .mobile-tools-shortcut:focus-visible,
    html[data-theme="night"] .mobile-tools-panel__close:focus-visible { outline-color: var(--gold-light); }

    @supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
        .mobile-tools-panel { background: rgba(248,247,243,.88); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
        html[data-theme="night"] .mobile-tools-panel { background: rgba(29,36,51,.9); }
    }
}

@media (max-width: 760px) {
    .urdu-site .localized-mobile-nav { min-height: 56px; transition: transform .2s ease, opacity .2s ease, visibility .2s; }
    .localized-mobile-nav > a, .localized-mobile-nav > details > summary { min-height: 44px; }
    :is(.mobile-tools-bar,.localized-mobile-nav).is-scroll-hidden { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-tools-panel { scroll-behavior: auto; }
    :is(.mobile-tools-bar,.localized-mobile-nav) { transition: none !important; }
    .mobile-tools-shortcut { transition: none; }
    .mobile-tools-shortcut:is(:hover,:focus-visible,:active) { transform: none; }
}
