/* Floating ROWgoals navigation: soft glass, clear labels, and a lifted current section. */
@media (min-width: 761px) {
  .sidebar {
    background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(236,250,249,.88) 54%, rgba(244,240,255,.9)) !important;
    border-right: 1px solid rgba(164,190,222,.4) !important;
    box-shadow: 10px 0 34px rgba(31,63,105,.06);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }
  .sidebar nav {
    margin: 0 -5px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(229,248,246,.66), rgba(239,246,255,.7) 55%, rgba(243,235,255,.66));
    box-shadow: 0 12px 30px rgba(37,74,122,.09), inset 0 1px 0 rgba(255,255,255,.95);
  }
  .sidebar nav > a {
    display: flex;
    align-items: center;
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 14px;
  }
  .sidebar nav > a i {
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: rgba(255,255,255,.65);
    color: #55749b;
  }
  .sidebar nav > a:hover {
    transform: translate(3px, -1px);
    background: rgba(255,255,255,.73);
  }
  .sidebar nav > a.active,
  .sidebar nav > a.active:hover {
    transform: translate(3px, -2px);
    border-color: rgba(112,191,196,.36);
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(218,249,243,.86), rgba(235,231,255,.83));
    box-shadow: 0 9px 22px rgba(42,91,139,.15), inset 0 1px 0 #fff;
    color: #126f7b;
  }
  .sidebar nav > a.active i { background: rgba(255,255,255,.82); color: #1685b5; }
}

@media (max-width: 760px) {
  :root { --mobile-nav-height: 92px; }
  .sidebar {
    inset: auto 10px calc(9px + env(safe-area-inset-bottom, 0px)) 10px !important;
    width: calc(100% - 20px) !important;
    height: 74px !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 26px !important;
    background: linear-gradient(120deg, rgba(234,250,247,.91), rgba(255,255,255,.87) 36%, rgba(237,243,255,.89) 68%, rgba(247,238,255,.9)) !important;
    box-shadow: 0 18px 48px rgba(23,51,94,.22), inset 0 1px 1px rgba(255,255,255,.96) !important;
    backdrop-filter: blur(24px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  }
  .sidebar nav {
    width: calc(100% - 48px) !important;
    height: 62px !important;
    padding: 4px 3px 3px 2px !important;
    gap: 4px !important;
    align-items: flex-start;
  }
  .sidebar nav > a,
  .sidebar nav .tool-nav,
  .sidebar nav .tool-nav-first,
  .sidebar-export-tools button {
    flex-basis: 70px !important;
    min-width: 70px !important;
    min-height: 54px !important;
    padding: 5px 3px !important;
    border-radius: 18px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
  }
  .sidebar nav > a i,
  .sidebar-export-tools button i {
    display: grid !important;
    place-items: center;
    width: 29px !important;
    height: 25px;
    flex: none;
    color: #315e8c !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .sidebar nav > a.active,
  .sidebar nav > a.active:hover {
    transform: translateY(-3px) !important;
    border: 1px solid rgba(109,179,197,.35) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(223,246,244,.91), rgba(236,234,255,.9)) !important;
    box-shadow: 0 7px 18px rgba(41,91,137,.19), inset 0 1px 0 #fff !important;
    color: #16647f !important;
  }
  .sidebar nav > a.active i { color: #2988d8 !important; }
  .mobile-nav-arrow {
    right: 7px !important;
    bottom: 9px !important;
    width: 43px !important;
    height: 54px !important;
    border: 1px solid rgba(113,178,205,.34) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(222,244,251,.85), rgba(236,232,255,.86)) !important;
    box-shadow: -5px 0 15px rgba(34,74,116,.13), inset 0 1px 0 #fff !important;
  }
  .sidebar nav > a:focus-visible,
  .mobile-nav-arrow:focus-visible { outline: 2px solid #247dc9; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar nav > a { transition: none !important; }
}