/**
 * Suniar App Navigation — top bar + bottom dock
 * Brand: royal blue #204098 + sun gold #F8B810
 * Frosted floating glass chrome (borderless capsules).
 */

:root {
  --nav-glass-border: transparent;
  --nav-glass-tint: rgba(255, 255, 255, 0.18);
  --nav-ink: #152447;
  --nav-ink-soft: #5A6478;
  --nav-blue: #204098;
  --nav-gold: #F8B810;
  --nav-well: 2.55rem;
  --nav-fab: 3.25rem;
  --nav-dock-pad: 0.4rem;
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --app-nav-height: 5.25rem;
  --app-nav-inset: 0.55rem;
  --app-nav-bottom: 0.45rem;

  /* Shared frosted capsule material */
  --frost-bg: linear-gradient(
    160deg,
    color-mix(in srgb, #ffffff 42%, transparent),
    color-mix(in srgb, #ffffff 14%, transparent)
  );
  --frost-bg-dark: linear-gradient(
    160deg,
    color-mix(in srgb, #ffffff 10%, transparent),
    color-mix(in srgb, #0B1426 55%, transparent)
  );
  --frost-blur: blur(28px) saturate(180%) brightness(1.06);
  --frost-blur-dark: blur(32px) saturate(180%) brightness(0.94);
  --frost-shadow: 0 12px 36px color-mix(in srgb, var(--nav-blue) 16%, transparent),
    0 4px 14px rgba(15, 23, 42, 0.1);
  --frost-shadow-dark: 0 16px 40px rgba(0, 0, 0, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.28);
  --frost-radius: 999px;
  --frost-radius-panel: 1.55rem;
}

html.dark {
  --nav-glass-border: transparent;
  --nav-glass-tint: rgba(255, 255, 255, 0.06);
  --nav-ink: #F5F7FC;
  --nav-ink-soft: #A6B2CB;
}

/* Sticky offset under floating mobile top bar — keep tight under header */
:root {
  --app-header-bar-height: 3.15rem;
  --app-header-sticky-clearance: calc(
    max(0.35rem, env(safe-area-inset-top, 0px)) + var(--app-header-bar-height) + 0.35rem
  );
}

/* ═══════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════ */
.app-header,
.dashboard-topbar {
  --nav-local-radius: 1.25rem;
}

.app-header.liquidGlass-wrapper,
.dashboard-topbar.liquidGlass-wrapper {
  border: 0 !important;
}

.app-header-shell,
.dashboard-topbar-shell {
  gap: 0.65rem 1rem;
  align-items: center;
}

.app-header-brand,
.dashboard-topbar-brand {
  gap: 0.7rem;
  min-width: 0;
}

.app-header-logo,
.dashboard-brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--nav-blue) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--nav-blue) 12%, transparent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
    var(--nav-blue);
  transition: transform 0.22s var(--nav-ease), box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-header-logo:hover,
  .dashboard-brand-mark:hover {
    transform: scale(1.04);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--nav-blue) 28%, transparent),
      0 6px 16px color-mix(in srgb, var(--nav-blue) 18%, transparent);
  }
}

.app-header-logo img,
.dashboard-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-header-title,
.dashboard-topbar-title {
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--nav-ink);
  line-height: 1.2;
}

.app-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.app-header-page-badge,
.app-header-page-badge.liquidGlass-wrapper {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.15rem 0.55rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--nav-blue) 28%, var(--nav-glass-border)) !important;
  color: var(--nav-blue) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent !important;
}

html.dark .app-header-page-badge,
html.dark .app-header-page-badge.liquidGlass-wrapper {
  color: var(--nav-gold) !important;
  border-color: color-mix(in srgb, var(--nav-gold) 34%, var(--nav-glass-border)) !important;
}

.app-header-page-badge.liquidGlass-wrapper > .liquidGlass-tint {
  background: color-mix(in srgb, var(--nav-blue) 14%, rgba(255, 255, 255, 0.22)) !important;
}

html.dark .app-header-page-badge.liquidGlass-wrapper > .liquidGlass-tint {
  background: color-mix(in srgb, var(--nav-gold) 16%, rgba(255, 255, 255, 0.04)) !important;
}

.app-header-location,
.dashboard-topbar-subtitle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: var(--nav-ink-soft);
  font-size: 0.72rem;
  font-weight: 550;
}

.app-header-location-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  opacity: 0.75;
}

/* Toolbar wells */
.app-header-toolbar,
.dashboard-topbar-main-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.app-header-toolbar-group--actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem;
  border-radius: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--nav-glass-border) 75%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #ffffff 28%, transparent),
      color-mix(in srgb, var(--nav-glass-tint) 70%, transparent)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.dark .app-header-toolbar-group--actions {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #ffffff 8%, transparent),
      color-mix(in srgb, #0B1426 40%, transparent)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-topbar-icon-button,
.dashboard-topbar-theme-toggle,
.app-header-toolbar .dashboard-topbar-pill {
  width: var(--nav-well);
  height: var(--nav-well);
  min-height: var(--nav-well);
  border-radius: 0.85rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-ink);
  border-color: transparent !important;
  transition: transform 0.22s var(--nav-ease), color 0.2s ease, background 0.2s ease;
}

.dashboard-topbar-icon-button svg,
.dashboard-topbar-theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .dashboard-topbar-icon-button:hover,
  .dashboard-topbar-theme-toggle:hover {
    color: var(--nav-blue);
    transform: scale(1.05);
  }

  html.dark .dashboard-topbar-icon-button:hover,
  html.dark .dashboard-topbar-theme-toggle:hover {
    color: var(--nav-gold);
  }
}

.dashboard-topbar-notification-badge {
  position: absolute;
  top: 0.2rem;
  inset-inline-end: 0.15rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: var(--nav-gold);
  color: #14233F;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1rem;
  text-align: center;
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 70%, transparent);
}

.dashboard-topbar-notification-badge.is-empty {
  display: none;
}

.dashboard-topbar-notification-trigger {
  position: relative;
}

/* Ops chips — denser, calmer */
.dashboard-topbar-ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.dashboard-topbar-ops-chip {
  min-height: 2.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.85rem !important;
  gap: 0.15rem;
}

.dashboard-topbar-ops-label {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-ink-soft);
}

.dashboard-topbar-ops-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--nav-ink);
}

.app-header-datetime,
.dashboard-topbar-datetime {
  min-height: 2.35rem;
  padding: 0.3rem 0.7rem !important;
  border-radius: 0.85rem !important;
}

/* ═══════════════════════════════════════════
   BOTTOM DOCK — Apple-like floating glass
   ═══════════════════════════════════════════ */
.app-bottom-nav {
  display: none;
}

@media (max-width: 760px) {
  /* Top bar — one clean frosted row: brand | actions */
  body.app-mobile-shell .app-header,
  body.app-mobile-shell .dashboard-topbar,
  body.app-mobile-shell .app-header.liquidGlass-wrapper,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper {
    position: fixed !important;
    top: max(0.35rem, env(safe-area-inset-top, 0px)) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    inset-inline: 0.75rem !important;
    width: auto !important;
    z-index: 60;
    margin: 0 !important;
    padding: 0.4rem 0.55rem !important;
    padding-top: 0.4rem !important;
    border-radius: 1.35rem !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
  }

  html.dark body.app-mobile-shell .app-header,
  html.dark body.app-mobile-shell .dashboard-topbar,
  html.dark body.app-mobile-shell .app-header.liquidGlass-wrapper,
  html.dark body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper {
    background: rgba(18, 28, 52, 0.78) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4) !important;
    border: 0 !important;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-effect,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-effect {
    border: 0 !important;
    border-radius: inherit;
    filter: none !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-shine,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-tint,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0 !important;
    animation: none !important;
  }

  html.dark body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-tint,
  html.dark body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(18, 28, 52, 0.55) !important;
  }

  /* Content clearance under fixed floating header */
  body.app-mobile-shell #main-content,
  body.app-mobile-shell[data-page="dashboard"] #main-content,
  body[data-page="dashboard"].app-mobile-shell #main-content {
    padding-top: var(--app-header-sticky-clearance) !important;
  }

  body.app-mobile-shell .app-header-shell,
  body.app-mobile-shell .dashboard-topbar-shell,
  body.app-mobile-shell .dashboard-topbar--ops .dashboard-topbar-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 2.5rem;
  }

  body.app-mobile-shell .app-header-brand,
  body.app-mobile-shell .dashboard-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  body.app-mobile-shell .app-header-logo,
  body.app-mobile-shell .dashboard-brand-mark {
    width: 2.15rem !important;
    height: 2.15rem !important;
    border-radius: 0.7rem !important;
    flex-shrink: 0;
  }

  body.app-mobile-shell .app-header-copy,
  body.app-mobile-shell .dashboard-brand-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.app-mobile-shell .app-header-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    min-width: 0;
  }

  body.app-mobile-shell .app-header-title,
  body.app-mobile-shell .dashboard-topbar-title {
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-mobile-shell .app-header-location,
  body.app-mobile-shell .dashboard-topbar-subtitle,
  body.app-mobile-shell .app-header-menu-button,
  body.app-mobile-shell .dashboard-topbar-ops,
  body.app-mobile-shell .app-header-datetime,
  body.app-mobile-shell .dashboard-topbar-datetime,
  body.app-mobile-shell .app-header-page-badge,
  body.app-mobile-shell .app-header-page-badge.liquidGlass-wrapper {
    display: none !important;
  }

  body.app-mobile-shell .app-header-toolbar,
  body.app-mobile-shell .dashboard-topbar-main-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.app-mobile-shell .app-header-toolbar-group--actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body.app-mobile-shell .dashboard-topbar-icon-button,
  body.app-mobile-shell .dashboard-topbar-theme-toggle,
  body.app-mobile-shell .dashboard-topbar-pill {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-mobile-shell .dashboard-topbar-icon-button.liquidGlass-wrapper,
  body.app-mobile-shell .dashboard-topbar-theme-toggle.liquidGlass-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-mobile-shell .dashboard-topbar-icon-button.liquidGlass-wrapper > .liquidGlass-effect,
  body.app-mobile-shell .dashboard-topbar-icon-button.liquidGlass-wrapper > .liquidGlass-tint,
  body.app-mobile-shell .dashboard-topbar-icon-button.liquidGlass-wrapper > .liquidGlass-shine,
  body.app-mobile-shell .dashboard-topbar-theme-toggle.liquidGlass-wrapper > .liquidGlass-effect,
  body.app-mobile-shell .dashboard-topbar-theme-toggle.liquidGlass-wrapper > .liquidGlass-tint,
  body.app-mobile-shell .dashboard-topbar-theme-toggle.liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
  }

  /* Content clearance under fixed floating header */
  body.app-mobile-shell #main-content,
  body.app-mobile-shell[data-page="dashboard"] #main-content,
  body[data-page="dashboard"].app-mobile-shell #main-content {
    padding-top: var(--app-header-sticky-clearance) !important;
  }

  /* Bottom dock — one frosted capsule (like reference) */
  .app-bottom-nav,
  .app-bottom-nav--taskbar,
  .app-bottom-nav.liquidGlass-wrapper,
  .app-bottom-nav--taskbar.liquidGlass-wrapper,
  nav.app-bottom-nav[data-app-bottom-nav] {
    display: flex !important;
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    inset-inline: 0.75rem !important;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    z-index: 200 !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .app-bottom-nav__cluster {
    pointer-events: auto;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    min-width: 0;
    min-height: 4.25rem;
    padding: 0.45rem 0.55rem 0.5rem;
    border-radius: 999px;
    border: 0 !important;
    outline: 0 !important;
    overflow: visible;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14) !important;
  }

  html.dark .app-bottom-nav__cluster {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  }

  .app-bottom-nav__cluster.liquidGlass-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
  }

  .app-bottom-nav__cluster.liquidGlass-wrapper > .liquidGlass-effect {
    display: block !important;
    z-index: -3;
    border-radius: inherit;
    border: 0 !important;
    filter: none;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  }

  .app-bottom-nav__cluster.liquidGlass-wrapper > .liquidGlass-tint {
    display: block !important;
    z-index: -2;
    border-radius: inherit;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    animation: none;
  }

  html.dark .app-bottom-nav__cluster.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .app-bottom-nav__cluster.liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
  }

  /* Hide legacy separate menu capsule if any leftover markup */
  .app-bottom-nav__menu-slot {
    display: none !important;
  }

  .app-bottom-nav__item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.2rem 0.1rem;
    border: 0;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, transform 0.2s var(--nav-ease);
  }

  html:not(.dark) .app-bottom-nav__item {
    color: rgba(21, 36, 71, 0.72);
  }

  .app-bottom-nav__item:active {
    transform: scale(0.94);
  }

  .app-bottom-nav__item:not(.is-active) {
    opacity: 0.72;
  }

  .app-bottom-nav__item.is-active {
    opacity: 1;
    color: #fff;
  }

  html:not(.dark) .app-bottom-nav__item.is-active {
    color: #152447;
  }

  .app-bottom-nav__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
  }

  .app-bottom-nav__icon {
    width: 1.28rem;
    height: 1.28rem;
    stroke-width: 1.9;
  }

  .app-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1;
    color: inherit;
  }

  .app-bottom-nav__item.is-active .app-bottom-nav__label {
    font-weight: 750;
  }

  .app-bottom-nav__item.is-active .app-bottom-nav__label::after {
    display: none !important;
  }

  .app-bottom-nav__item--fab {
    display: flex !important;
    transform: none !important;
  }

  .app-bottom-nav__item--fab .app-bottom-nav__icon-wrap,
  .app-bottom-nav__icon-wrap--fab {
    display: inline-flex !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: inherit !important;
  }

  .app-bottom-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-effect,
  .app-bottom-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-tint,
  .app-bottom-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
  }

  /* Soft white well behind active — no colored aura */
  .app-bottom-nav .app-liquid-tabs__blob,
  .app-bottom-nav [data-liquid-blob] {
    display: block !important;
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    filter: none;
    opacity: 1;
    transition:
      transform 0.4s var(--nav-ease),
      width 0.35s var(--nav-ease),
      height 0.3s var(--nav-ease),
      top 0.3s var(--nav-ease);
  }

  html.dark .app-bottom-nav .app-liquid-tabs__blob,
  html.dark .app-bottom-nav [data-liquid-blob] {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 0 !important;
  }

  .app-bottom-nav__item--menu.is-active .app-bottom-nav__icon-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit;
  }
}

/* ═══════════════════════════════════════════
   DASHBOARD SECTION TABS (Generation / Devices / …)
   Frosted floating glass capsule — same material as dock.
   ═══════════════════════════════════════════ */
.dashboard-section-nav {
  display: none;
}

@media (max-width: 760px) {
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper--dock,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper--sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: var(--app-header-sticky-clearance) !important;
    z-index: 45 !important;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin: 0 0 0.65rem !important;
    padding: 0.3rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    isolation: isolate;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper > .liquidGlass-effect {
    display: block !important;
    border: 0 !important;
    border-radius: inherit;
    filter: url(#glass-distortion);
    backdrop-filter: blur(22px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper > .liquidGlass-shine {
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0.5;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper > .liquidGlass-tint {
    display: block !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    animation: none;
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav,
  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper,
  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper--sheet {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__track {
    display: flex !important;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.2rem;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 3.55rem;
    padding: 0.4rem 0.15rem 0.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nav-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, transform 0.22s var(--nav-ease);
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item:not(.is-active) {
    opacity: 0.72;
    color: #5a6478;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active {
    opacity: 1;
    color: var(--nav-ink);
    background: rgba(255, 255, 255, 0.28) !important;
    box-shadow: none;
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item:not(.is-active) {
    color: rgba(255, 255, 255, 0.65);
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon-wrap,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon-wrap.liquidGlass-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.15rem !important;
    height: 2.15rem !important;
    border-radius: 999px !important;
    color: inherit;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-effect,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-tint,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon-wrap.liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active .dashboard-section-nav__icon-wrap {
    color: inherit;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.dark body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active .dashboard-section-nav__icon-wrap {
    color: inherit;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__icon {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active .dashboard-section-nav__icon {
    stroke-width: 2.25;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__label {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: inherit;
    text-align: center;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__item.is-active .dashboard-section-nav__label {
    font-weight: 800;
  }
}

@media (max-width: 380px) {
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav__label {
    font-size: 0.6rem;
  }

  .app-bottom-nav__label {
    font-size: 0.56rem !important;
  }

  .app-bottom-nav__icon-wrap {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 761px) {
  .app-bottom-nav,
  .app-bottom-nav--taskbar,
  .dashboard-section-nav {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-bottom-nav__cluster,
  .app-bottom-nav__menu-slot {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: color-mix(in srgb, var(--surface, #fff) 94%, transparent) !important;
  }

  html.dark .app-bottom-nav__cluster,
  html.dark .app-bottom-nav__menu-slot {
    background: color-mix(in srgb, var(--surface, #162044) 94%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-bottom-nav__item,
  .app-bottom-nav__icon-wrap,
  .app-bottom-nav .app-liquid-tabs__blob {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════
   UNIFIED FROSTED GLASS — tabs, menus, sidebar
   Authoritative (loads last). Borderless capsules.
   ═══════════════════════════════════════════ */

/* Shared frosted surface recipe */
.app-liquid-tabs__track:not(.dashboard-section-nav__track),
.chart-wizard-tabs__track,
.linear-analytics-tab-list.app-liquid-tabs__track,
.linear-analytics-tabs .chart-wizard-tabs__track,
.suniar-dropdown-menu,
.app-select-menu,
.chart-export-menu,
.dashboard-topbar-menu,
.dashboard-topbar-profile-menu,
.app-header-notification-menu,
.dashboard-topbar-notification-menu,
.dashboard-sidebar-shell,
.dashboard-sidebar-shell.liquidGlass-wrapper,
.chart-mobile-action-bar,
.chart-wizard-nav,
.chart-wizard-nav--final {
  border: 0 !important;
  background: var(--frost-bg) !important;
  backdrop-filter: var(--frost-blur) !important;
  -webkit-backdrop-filter: var(--frost-blur) !important;
  box-shadow: var(--frost-shadow) !important;
}

html.dark .app-liquid-tabs__track:not(.dashboard-section-nav__track),
html.dark .chart-wizard-tabs__track,
html.dark .linear-analytics-tab-list.app-liquid-tabs__track,
html.dark .linear-analytics-tabs .chart-wizard-tabs__track,
html.dark .suniar-dropdown-menu,
html.dark .app-select-menu,
html.dark .chart-export-menu,
html.dark .dashboard-topbar-menu,
html.dark .dashboard-topbar-profile-menu,
html.dark .app-header-notification-menu,
html.dark .dashboard-topbar-notification-menu,
html.dark .dashboard-sidebar-shell,
html.dark .dashboard-sidebar-shell.liquidGlass-wrapper,
html.dark .chart-mobile-action-bar,
html.dark .chart-wizard-nav,
html.dark .chart-wizard-nav--final {
  background: var(--frost-bg-dark) !important;
  backdrop-filter: var(--frost-blur-dark) !important;
  -webkit-backdrop-filter: var(--frost-blur-dark) !important;
  box-shadow: var(--frost-shadow-dark) !important;
  border: 0 !important;
}

/* Pill tracks */
.app-liquid-tabs__track:not(.dashboard-section-nav__track),
.chart-wizard-tabs__track,
.linear-analytics-tab-list.app-liquid-tabs__track,
.linear-analytics-tabs .chart-wizard-tabs__track {
  border-radius: var(--frost-radius) !important;
  padding: 0.28rem !important;
}

/* Soft aura blob — neutral white, no accent color */
.app-liquid-tabs__blob {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
  filter: none;
  opacity: 1;
}

html.dark .app-liquid-tabs__blob {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
}

/* Floating menu panels */
.suniar-dropdown-menu,
.app-select-menu,
.chart-export-menu,
.dashboard-topbar-menu,
.dashboard-topbar-profile-menu {
  border-radius: var(--frost-radius-panel) !important;
  overflow: hidden;
}

.app-header-notification-menu,
.dashboard-topbar-notification-menu {
  border-radius: var(--frost-radius-panel) !important;
  overflow: hidden;
  border: 0 !important;
}

.app-header-notification-menu .dashboard-notification-panel,
.dashboard-topbar-notification-menu .dashboard-notification-panel,
.app-header-notification-menu .dashboard-notification-item,
.dashboard-topbar-notification-menu .dashboard-notification-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Sidebar sheet — frosted glass, no hard edge */
.dashboard-sidebar-shell,
.dashboard-sidebar-shell.liquidGlass-wrapper {
  border-radius: var(--frost-radius-panel) 0 0 var(--frost-radius-panel) !important;
  border: 0 !important;
}

html[dir="rtl"] .dashboard-sidebar-shell,
html[dir="rtl"] .dashboard-sidebar-shell.liquidGlass-wrapper {
  border-radius: 0 var(--frost-radius-panel) var(--frost-radius-panel) 0 !important;
}

.dashboard-sidebar-shell.liquidGlass-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dashboard-sidebar-shell.liquidGlass-wrapper > .liquidGlass-effect {
  border: 0 !important;
  border-radius: inherit;
  backdrop-filter: blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
}

.dashboard-sidebar-shell.liquidGlass-wrapper > .liquidGlass-tint {
  border: 0 !important;
  background: color-mix(in srgb, var(--nav-blue) 6%, rgba(255, 255, 255, 0.16)) !important;
}

html.dark .dashboard-sidebar-shell.liquidGlass-wrapper > .liquidGlass-tint {
  background: color-mix(in srgb, var(--nav-gold) 5%, rgba(255, 255, 255, 0.04)) !important;
}

.dashboard-sidebar-shell.liquidGlass-wrapper > .liquidGlass-shine {
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0.45;
}

.dashboard-sidebar-user-card,
.dashboard-sidebar-link,
.linear-sidebar-panel,
.linear-sidebar-link {
  border: 0 !important;
}

.dashboard-sidebar-user-card {
  border-radius: 1.15rem !important;
  background: color-mix(in srgb, #ffffff 28%, transparent) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--nav-blue) 10%, transparent);
}

html.dark .dashboard-sidebar-user-card {
  background: color-mix(in srgb, #ffffff 6%, transparent) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* Chart sticky bars */
.chart-mobile-action-bar,
.chart-wizard-nav,
.chart-wizard-nav--final {
  border-radius: var(--frost-radius) !important;
}

/* Desktop top bars also frosted when liquid-glass wraps them */
@media (min-width: 761px) {
  .app-header.liquidGlass-wrapper,
  .dashboard-topbar.liquidGlass-wrapper {
    border: 0 !important;
  }

  .app-header.liquidGlass-wrapper > .liquidGlass-shine,
  .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-shine {
    box-shadow: none !important;
  }
}

@media (max-width: 760px) {
  /* Kill opaque section-nav overrides from glass-theme */
  body.app-mobile-shell .dashboard-section-nav.liquidGlass-wrapper,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper {
    border: 0 !important;
  }

  body.app-mobile-shell .liquidGlass-wrapper.app-header,
  body.app-mobile-shell .liquidGlass-wrapper.dashboard-topbar,
  body.app-mobile-shell .liquidGlass-wrapper.app-bottom-nav__cluster,
  body.app-mobile-shell .liquidGlass-wrapper.dashboard-section-nav,
  body.app-mobile-shell .liquidGlass-wrapper.dashboard-sidebar-shell {
    border: 0 !important;
  }

  /* Keep top header clean: no ops badge / no floating wells */
  body.app-mobile-shell .app-header-page-badge,
  body.app-mobile-shell .app-header-page-badge.liquidGlass-wrapper,
  body.app-mobile-shell .app-header-page-badge[data-active-page-badge],
  body.app-mobile-shell .dashboard-topbar-ops {
    display: none !important;
  }

  body.app-mobile-shell .app-header-toolbar-group--actions,
  body.app-mobile-shell .dashboard-topbar-icon-button,
  body.app-mobile-shell .dashboard-topbar-theme-toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Final clearance — tight under fixed header, no dead gap */
  body.app-mobile-shell #main-content,
  body.app-mobile-shell[data-page="dashboard"] #main-content,
  body[data-page="dashboard"].app-mobile-shell #main-content {
    padding-top: var(--app-header-sticky-clearance, 3.85rem) !important;
  }

  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav,
  body.app-mobile-shell[data-page="dashboard"] .dashboard-section-nav.liquidGlass-wrapper {
    margin-top: 0 !important;
    top: var(--app-header-sticky-clearance, 3.85rem) !important;
  }
}