html,body{overflow-x:hidden;}

:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-height: 64px;
}
/* Ensure content not hidden behind bottom nav */
body.has-bottom-nav main,
body.has-bottom-nav .main,
body.has-bottom-nav .page{
  padding-bottom: calc(var(--nav-height) + 12px + var(--safe-bottom));
}

/* Bottom navigation */
.shafx-bottom-nav{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  z-index: 25050;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,14,28,.75);
  border-top: 1px solid rgba(255,255,255,.08);
  display: none;
}
.shafx-bottom-nav .inner{
  height: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.shafx-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  text-decoration:none;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  border-radius: 12px;
  padding: 8px 6px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.shafx-tab .ico{font-size: 18px; line-height: 1;}
.shafx-tab.active{
  color: var(--primary-gold, #ffcc00);
  background: rgba(255,204,0,.10);
  border: 1px solid rgba(255,204,0,.18);
}

/* Drawer */
.shafx-drawer{
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: min(86vw, 360px);
  z-index: 25060;
  background: rgba(14,18,34,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(105%);
  transition: transform .22s ease;
  border-left: 1px solid rgba(255,255,255,.08);
  padding-top: calc(12px + var(--safe-top));
}
.shafx-drawer.open{ transform: translateX(0); }
.shafx-drawer .head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.shafx-drawer .list{ padding: 10px 10px 18px; }
.shafx-drawer a{
  direction: rtl;
  display:flex; flex-direction: row-reverse; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  margin: 6px 0;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.shafx-drawer a.active{
  background: rgba(255,204,0,.10);
  border-color: rgba(255,204,0,.18);
  color: var(--primary-gold, #ffcc00);
}
.shafx-drawer-backdrop{
  position: fixed;
  inset: 0;
  z-index: 25055;
  background: rgba(0,0,0,.38);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.shafx-drawer-backdrop.open{ opacity:1; pointer-events:auto; }

/* FAB Quick Actions */
.shafx-fab{
  position: fixed;
  right: 14px;
  bottom: calc(var(--nav-height) + 18px + var(--safe-bottom));
  z-index: 25070;
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(52, 143, 255, .85);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
}
.shafx-fab:active{ transform: scale(.98); }

.shafx-sheet{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 25080;
  transform: translateY(110%);
  transition: transform .22s ease;
  padding-bottom: var(--safe-bottom);
}
.shafx-sheet.open{ transform: translateY(0); }
.shafx-sheet .panel{
  margin: 0 10px 10px;
  border-radius: 18px;
  background: rgba(14,18,34,.95);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px;
}
.shafx-sheet .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shafx-action{
  display:flex; align-items:center; gap: 10px;
  padding: 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.shafx-action .ico{ font-size: 18px; }
.shafx-action:active{ transform: scale(.99); }

/* Skeleton */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
  border-radius: 12px;
}
@keyframes shimmer { 0%{background-position: 100% 0;} 100%{background-position: 0 0;} }

/* Mobile: show bottom nav */
@media (max-width: 991px){
  .shafx-bottom-nav{ display:block; }
  body{ padding-bottom: calc(var(--nav-height) + var(--safe-bottom)); }
}

.shafx-drawer a .chev{ opacity:.9; transform: rotate(180deg); }
.shafx-drawer a span{ white-space:nowrap; }


/* Search */
.shafx-search{ background: transparent; border: 0; color: #fff; font-size: 18px; width: 42px; height: 42px; border-radius: 12px; display:inline-flex; align-items:center; justify-content:center; }
.shafx-search:active{ transform: scale(.98); background: rgba(255,255,255,.06); }
.shafx-search-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 9997;
}
.shafx-search-modal{
  position: fixed; inset: auto 12px 90px 12px;
  max-width: 720px; margin: 0 auto;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9998;
}
.shafx-search-modal .panel{
  background: rgba(25,29,52,.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}
.shafx-search-modal .top{ display:flex; gap: 10px; align-items:center; }
#shafxSearchInput{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 12px;
  outline: none;
  font-family: inherit;
}
#shafxSearchInput::placeholder{ color: rgba(255,255,255,.6); }
.shafx-search-modal .hint{ margin: 8px 2px 10px; font-size: 12px; }
.shafx-search-modal .results{ display:flex; flex-direction:column; gap: 8px; max-height: 55vh; overflow:auto; padding-bottom: 4px; }
.shafx-search-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  text-decoration:none; color:#fff;
}
.shafx-search-item .meta{ font-size:12px; color: rgba(255,255,255,.65); }
.shafx-search-item:active{ transform: scale(.99); background: rgba(255,255,255,.06); }
body.search-open .shafx-search-backdrop{ opacity: 1; pointer-events: auto; }
body.search-open .shafx-search-modal{ opacity: 1; transform: translateY(0); pointer-events: auto; }