/* ============================================================
   nav.css — نوار ناوبری (Navy / Teal)
   ============================================================ */

.nav{display:flex;gap:2px;padding:0 13px;overflow:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{
  flex:none;display:flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:0;border-bottom:3px solid transparent;
  color:var(--muted);padding:12px 17px;
  font-size:12px;font-weight:700;font-family:inherit;
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
  letter-spacing:-.1px;
}
.nav button:hover{color:var(--p)}
.nav button.active{color:var(--p);border-bottom-color:var(--p)}

.bottom{display:none}

@media(max-width:700px){
  .nav{display:none}
  .bottom{
    position:fixed;display:flex;z-index:60;
    bottom:0;inset-inline:0;
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-top:1px solid rgba(226,232,240,.85);
    justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(10,37,64,.14);
  }

  .bottom button{
    border:0;background:transparent;color:var(--muted);
    font-size:8.5px;font-weight:700;font-family:inherit;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:4px 6px;border-radius:10px;
    transition:color .18s var(--ease), transform .12s var(--ease);
    cursor:pointer;min-width:56px;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom button:active{transform:scale(.94)}

  .bottom .material-symbols-rounded{
    font-size:20px;width:48px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;background:transparent;
    transition:background .18s var(--ease), color .18s var(--ease), font-variation-settings .18s var(--ease);
  }

  .bottom button.active{color:var(--teal-700)}
  .bottom button.active .material-symbols-rounded{
    background:linear-gradient(135deg, var(--tealc), #99F6E4);
    color:var(--teal-700);
    font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
    box-shadow:0 4px 10px -4px rgba(20,184,166,.5);
  }
}

/* ─── FAB ─── */
.fab{
  position:fixed;inset-inline-end:18px;bottom:26px;z-index:70;
  width:58px;height:58px;border-radius:18px;
  background:linear-gradient(135deg, var(--p), var(--p-600));
  color:#fff;border:0;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -8px rgba(10,37,64,.75), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fab:hover{transform:translateY(-2px);box-shadow:0 18px 36px -8px rgba(10,37,64,.85)}
.fab:active{transform:scale(.94)}
.fab .material-symbols-rounded{font-size:28px;font-variation-settings:'FILL' 0,'wght' 500}
.fab.hidden{display:none}

@media(max-width:700px){.fab{bottom:calc(86px + env(safe-area-inset-bottom))}}