/* App Shell — premium app-level polish */
.app-shell-topbar{
  position: sticky; top:0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
  background: rgba(248,245,236,0.94);
  border-bottom: 1px solid rgba(15,47,31,0.10);
  backdrop-filter: blur(14px);
}
.app-shell-topbar__left{display:flex;align-items:center;gap:10px;min-width:0;}
.app-shell-badge{
  width:40px;height:40px;border-radius:14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15,47,31,0.10);
  display:grid;place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  flex:0 0 auto;
}
.app-shell-badge img{width:30px;height:30px;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.25));}
.app-shell-title{min-width:0;}
.app-shell-title b{display:block;font-size:14px;letter-spacing:.02em;}
.app-shell-title small{display:block;color:rgba(247,245,239,0.66);font-weight:700;margin-top:1px;}
.app-shell-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.app-ico{
  width:42px;height:42px;border-radius:14px;
  border: 1px solid rgba(15,47,31,0.10);
  background: rgba(255,255,255,0.70);
  color: rgba(15,47,31,0.86);
  display:grid;place-items:center;
  text-decoration:none !important;
}
.app-ico:active{transform: translateY(1px);}
.app-ico svg{width:20px;height:20px;opacity:.9;}

.app-shell-bottomnav{
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 80;
  border-radius: 18px;
  background: rgba(248,245,236,0.94);
  border: 1px solid rgba(15,47,31,0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.16);
  padding: 8px 8px;
  display:flex; gap:6px; justify-content:space-between;
}
.app-shell-bottomnav a{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  padding: 10px 8px;
  border-radius: 14px;
  color: rgba(15,47,31,0.60) !important;
  text-decoration:none !important;
  font-weight:800;
  font-size:11px;
  letter-spacing:.02em;
}
.app-shell-bottomnav a svg{width:18px;height:18px;opacity:.9}
.app-shell-bottomnav a.is-active{
  background: rgba(15,47,31,0.06);
  border: 1px solid rgba(15,47,31,0.10);
  color: rgba(15,47,31,0.88) !important;
}
.app-shell-pad{height: 92px;}
@media (min-width: 900px){
  .app-shell-bottomnav{
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 80;
  border-radius: 18px;
  background: rgba(248,245,236,0.94);
  border: 1px solid rgba(15,47,31,0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.16);
  padding: 8px 8px;
  display:flex; gap:6px; justify-content:space-between;
}
}






/* Site header: use banner image as top header bar */
.app-shell-hero{display:block; width:100%;}
.app-shell-hero-img{display:block; width:100%; height:auto;}

/* Make topbar act as banner container */
.app-shell-topbar{
  padding:0 !important;
  background: transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Hide pill title area; keep right-side button(s) */
.app-shell-topbar__left,
.app-shell-topbar__titlewrap{
  display:none !important;
}

/* Keep right controls visible and place them on top of banner */
.app-shell-topbar__right{
  position:absolute;
  right:12px;
  top:10px;
  z-index:5;
}



/* Global banner header */
.app-shell-topbar{
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.app-shell-hero{display:block; width:100%; line-height:0;}
.app-shell-hero-img{display:block; width:100%; height:auto;}
/* Hide legacy title/pill if present */
.app-shell-topbar__left, .app-shell-topbar__titlewrap{display:none !important;}
/* Place help button on top-right of banner */
.app-shell-actions{
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 5;
}


/* Topbar call link */
.app-shell-call{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(214,194,139,.12);border:1px solid rgba(214,194,139,.25);color:#e6c35a;text-decoration:none;font-weight:900;font-size:13px;}
@media (min-width:900px){.app-shell-call{font-size:14px;}}
@media (max-width:360px){.app-shell-call{font-size:12px;padding:7px 9px;}}