/* ===== شريط تنقل التطبيق: 3 أقسام + زر "المزيد" + ورقة سفلية — مشترك بين كل الصفحات ===== */
.app-nav { --mobile-nav-items: 4; }

/* زر "المزيد" (ثلاث نقاط عمودية) داخل الشريط */
.nav-more-btn { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0; background: none; color: #718793; font: inherit; font-size: 8px; font-weight: 600; cursor: pointer; }
.nav-more-btn > i { width: 32px; height: 29px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; transition: .2s; }
.nav-more-btn[aria-expanded="true"] { color: var(--tertiary); }
.nav-more-btn[aria-expanded="true"] > i { color: var(--tertiary); background: var(--violet-soft); }

/* الورقة السفلية المنسدلة */
.nav-sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(5,38,56,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; backdrop-filter: blur(4px); }
.nav-sheet-overlay.is-open { opacity: 1; visibility: visible; }
.nav-sheet {
    position: fixed; z-index: 61; right: 0; left: 0; bottom: 0;
    padding: 12px 16px calc(22px + env(safe-area-inset-bottom));
    background: var(--white); border-radius: 24px 24px 0 0; box-shadow: 0 -14px 44px rgba(6,62,91,.22);
    transform: translateY(115%); visibility: hidden; transition: transform .32s cubic-bezier(.22,1,.36,1), visibility .32s ease;
}
.nav-sheet.is-open { transform: translateY(0); visibility: visible; }
.nav-sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: #d7e3e8; margin: 2px auto 12px; }
.nav-sheet h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.nav-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nav-sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; }
.nav-sheet-grid a:active { transform: scale(.97); }
.ns-ico { position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; font-size: 23px; color: #fff; }
.ns-ico.tone-teal { background: linear-gradient(140deg, #4fd1c5, #15966f); }
.ns-ico.tone-amber { background: linear-gradient(140deg, #ffb84d, #e07d13); }
.ns-ico.tone-red { background: linear-gradient(140deg, #f87171, #d64c5d); }
.ns-ico.tone-blue { background: linear-gradient(140deg, #37bfd0, #0e72ad); }