/* TASK785 — Header lower edge matches the cyan / sapphire lighting language
   of the login card. CSS only: header geometry, sticky ownership and nav unchanged. */
html body #app-view.app-shell > header.app-header {
  border-bottom: 1px solid rgba(197,248,255,.78) !important;
  box-shadow:
    0 0 3px rgba(185,246,255,.56),
    0 3px 12px rgba(87,234,255,.38),
    0 8px 27px rgba(0,140,255,.27),
    0 14px 26px -7px rgba(83,207,255,.48),
    0 20px 43px rgba(0,9,32,.43),
    inset 0 1px 0 rgba(224,247,255,.12),
    inset 0 -3px 8px -4px rgba(180,250,255,.48) !important;
  transition: box-shadow .28s ease, border-bottom-color .28s ease;
}
html body #app-view.app-shell > header.app-header::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 0 0 18px 18px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(81,185,255,.12) 0%,
    rgba(103,216,255,.70) 14%,
    rgba(224,254,255,.90) 48%,
    rgba(103,216,255,.70) 86%,
    rgba(81,185,255,.12) 100%);
  opacity: .76;
  box-shadow:
    0 0 5px rgba(191,249,255,.60),
    0 2px 12px rgba(87,234,255,.48),
    0 6px 24px rgba(0,140,255,.34);
  transform: translateY(0);
  transition: opacity .28s ease, box-shadow .28s ease, transform .28s ease;
}
html body #app-view.app-shell > header.app-header.atosy-header-scrolled-t783 {
  border-bottom-color: rgba(197,248,255,.90) !important;
  box-shadow:
    0 0 4px rgba(185,246,255,.72),
    0 3px 18px rgba(87,234,255,.52),
    0 9px 34px rgba(0,140,255,.42),
    0 14px 30px -6px rgba(83,207,255,.61),
    0 24px 48px rgba(0,12,39,.60),
    inset 0 1px 0 rgba(240,255,255,.17),
    inset 0 -3px 10px -3px rgba(180,250,255,.62) !important;
}
html body #app-view.app-shell > header.app-header.atosy-header-scrolled-t783::after {
  opacity: .90;
  transform: translateY(1px);
  box-shadow:
    0 0 7px rgba(220,255,255,.74),
    0 3px 17px rgba(87,234,255,.65),
    0 8px 32px rgba(0,140,255,.45);
}

/* Mobile: a single, predictable gap after the sticky header, across
   dashboard and management pages. No adjustment to header height or offset. */
@media (max-width:767px) {
  html body #app-view.app-shell {
    --atosy-mobile-header-content-gap: clamp(24px, 5.5vw, 32px);
  }
  html body #app-view.app-shell > main.app-main {
    padding-top: var(--atosy-mobile-header-content-gap) !important;
  }
  /* Handles pages mounted directly under the app shell rather than main. */
  html body #app-view.app-shell > :is(
    #atosy-dashboard-v2, #subject-full-page, #object-full-page,
    #verb-full-page, #information-full-page
  ) {
    margin-top: var(--atosy-mobile-header-content-gap) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #app-view.app-shell > header.app-header,
  html body #app-view.app-shell > header.app-header::after {
    transition: none !important;
  }
}