/* V2.98.18 — unified application chrome/background for non-home screens.
   Mirrors the approved Home header/footer geometry and handwritten title. */
:root{
  --chrome-bg:rgba(48,52,45,.94);
  --chrome-text:#F7F1E8;
  --chrome-muted:#BFC5BA;
  --chrome-accent:#E2724B;
  --chrome-header-h:58px;
  --chrome-footer-h:60px;
}

/* One header geometry everywhere. */
.global-app-header,
.shopping-topbar,
.saved-topbar,
.result-topbar,
.planner-topbar{
  position:fixed!important;
  left:0!important;right:0!important;top:0!important;
  width:100%!important;max-width:none!important;
  height:calc(var(--chrome-header-h) + env(safe-area-inset-top))!important;
  min-height:calc(var(--chrome-header-h) + env(safe-area-inset-top))!important;
  max-height:calc(var(--chrome-header-h) + env(safe-area-inset-top))!important;
  margin:0!important;
  padding:calc(env(safe-area-inset-top) + 7px) 14px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  box-sizing:border-box!important;
  z-index:1000!important;
  background:var(--chrome-bg)!important;
  color:var(--chrome-text)!important;
  border:0!important;border-radius:0!important;
  box-shadow:0 5px 16px rgba(22,24,20,.12)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  transform:none!important;
}
.global-header-copy{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  min-height:100%!important;
  gap:0!important;
}
.global-header-copy strong{
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  font-family:"Caveat",cursive!important;
  font-size:28px!important;
  font-weight:600!important;
  line-height:.88!important;
  letter-spacing:.05px!important;
  color:#FFF8EE!important;
  white-space:nowrap!important;
  text-shadow:0 1px 0 rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.08)!important;
  transform:rotate(-.7deg)!important;
  transform-origin:left center!important;
}
.global-header-copy span{display:none!important}
.global-app-header .global-profile-button,
.global-profile-button,
.shopping-profile,
.saved-profile{
  position:relative!important;inset:auto!important;
  width:36px!important;height:36px!important;
  min-width:36px!important;min-height:36px!important;
  margin:0!important;padding:0!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:none!important;color:var(--chrome-text)!important;
  transform:none!important;
}
.global-app-header .profile-dot,
.global-profile-button .profile-dot{
  position:absolute!important;right:4px!important;top:4px!important;
  width:8px!important;height:8px!important;border-radius:50%!important;
  display:block!important;background:#67A764!important;border:0!important;
  box-shadow:0 0 0 2px #30342D!important;pointer-events:none!important;
}

/* One footer/camera geometry everywhere. Reset legacy page-specific offsets. */
.bottom-nav,
.shopping-bottom-nav,
.saved-bottom-nav,
.planner-bottom-nav,
.result-bottom-nav{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;max-width:none!important;
  height:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom))!important;
  min-height:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom))!important;
  margin:0!important;
  padding:4px 8px calc(4px + env(safe-area-inset-bottom))!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;box-sizing:border-box!important;
  z-index:1000!important;background:var(--chrome-bg)!important;
  border:0!important;border-radius:0!important;
  box-shadow:0 -5px 16px rgba(22,24,20,.12)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  transform:none!important;
}
.bottom-nav .nav-item,
.shopping-bottom-nav .nav-item,
.saved-bottom-nav .nav-item,
.planner-bottom-nav .nav-item,
.result-bottom-nav .nav-item{
  appearance:none!important;min-width:0!important;height:50px!important;
  margin:0!important;padding:0 2px!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:2px!important;
  border-radius:14px!important;background:transparent!important;
  color:var(--chrome-muted)!important;font:700 8.8px/1 "DM Sans",sans-serif!important;
  text-decoration:none!important;border:0!important;
}
.bottom-nav .nav-icon,
.shopping-bottom-nav .nav-icon,
.saved-bottom-nav .nav-icon,
.planner-bottom-nav .nav-icon,
.result-bottom-nav .nav-icon{
  width:28px!important;height:28px!important;border-radius:10px!important;
  display:grid!important;place-items:center!important;
}
.bottom-nav .nav-item.active,
.shopping-bottom-nav .nav-item.active,
.saved-bottom-nav .nav-item.active,
.planner-bottom-nav .nav-item.active,
.result-bottom-nav .nav-item.active{color:var(--chrome-accent)!important;background:transparent!important}
.bottom-nav .nav-item.active .nav-icon,
.shopping-bottom-nav .nav-item.active .nav-icon,
.saved-bottom-nav .nav-item.active .nav-icon,
.planner-bottom-nav .nav-item.active .nav-icon,
.result-bottom-nav .nav-item.active .nav-icon{color:var(--chrome-accent)!important;background:rgba(226,114,75,.14)!important}
.bottom-nav .camera-nav,
.shopping-bottom-nav .camera-nav,
.saved-bottom-nav .camera-nav,
.planner-bottom-nav .camera-nav,
.result-bottom-nav .camera-nav{
  height:54px!important;margin:-8px 0 0!important;padding:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:flex-start!important;gap:1px!important;background:transparent!important;
  color:var(--chrome-text)!important;border:0!important;transform:none!important;
}
.bottom-nav .camera-bubble,
.shopping-bottom-nav .camera-bubble,
.saved-bottom-nav .camera-bubble,
.planner-bottom-nav .camera-bubble,
.result-bottom-nav .camera-bubble{
  width:46px!important;height:46px!important;margin:0!important;
  border-radius:14px!important;display:grid!important;place-items:center!important;
  color:#fff!important;background:linear-gradient(145deg,#F07C55,#D96843)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 18px rgba(217,104,67,.18)!important;
  transform:none!important;
}
.bottom-nav .camera-label,
.shopping-bottom-nav .camera-label,
.saved-bottom-nav .camera-label,
.planner-bottom-nav .camera-label,
.result-bottom-nav .camera-label{margin:0!important;font:800 8.6px/1 "DM Sans",sans-serif!important;color:var(--chrome-text)!important}

/* Match the approved Home background on content screens. */
.shopping-bg,
.saved-bg,
.result-bg{position:fixed!important;inset:0!important;z-index:0!important;overflow:hidden!important;background:#eee7db!important;pointer-events:none!important}
.shopping-bg img,
.saved-bg img,
.result-bg img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:67% 50%!important;
  filter:blur(11px) saturate(1.07) contrast(1.01)!important;
  transform:scale(1.075)!important;opacity:.68!important;
}
.shopping-bg i,
.saved-bg i,
.result-bg i{
  position:absolute!important;inset:0!important;
  background:
    linear-gradient(180deg,rgba(249,245,237,.40),rgba(248,242,232,.55) 52%,rgba(247,240,229,.66)),
    radial-gradient(circle at 85% 18%,rgba(225,239,214,.10),transparent 28%),
    radial-gradient(circle at 10% 72%,rgba(244,192,158,.10),transparent 30%)!important;
}

/* Keep content at the same distance below/above fixed chrome. */
.shopping-scroll,.saved-scroll,.result-scroll{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 14px)!important;
  padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 30px)!important;
}
body.planner-page .planner-scroll{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 12px)!important;
  padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 20px)!important;
}

@media(max-width:355px){
  .global-app-header,.shopping-topbar,.saved-topbar,.result-topbar,.planner-topbar{padding-left:12px!important;padding-right:12px!important}
  .global-header-copy strong{font-size:25.5px!important}
}