:root { --nav-height: 72px; --app-bg: #faf9f7; --app-surface: #fff; --app-orange: #f5663f; }
body.authenticated { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); background: var(--app-bg); }
body.locked #bottomNav, body:not(.authenticated) #bottomNav { display: none !important; }
.bottom-nav { position: fixed; z-index: 120; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left)); border-top: 1px solid #ece7e2; background: rgba(255,255,255,.96); box-shadow: 0 -8px 30px rgba(68,48,40,.08); backdrop-filter: blur(18px); }
.bottom-nav[hidden] { display: none; }
.bottom-nav button { position: relative; display: grid; flex: 1 1 0; grid-template-rows: 30px 17px; place-items: center; min-width: 0; max-width: 104px; min-height: 56px; padding: 2px 1px; border: 0; border-radius: 12px; background: transparent; color: #817a76; }
.bottom-nav button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 21px; line-height: 1; transition: background .18s,color .18s,transform .18s; }
.bottom-nav button small { overflow: hidden; max-width: 100%; font-size: 10px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.bottom-nav button.active { color: var(--app-orange); }
.bottom-nav button.active span { background: #fff0ea; transform: translateY(-1px); }
.bottom-nav button:active span { transform: scale(.9); }
.bottom-nav button em { position: absolute; top: 0; left: calc(50% + 9px); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: var(--app-orange); color: #fff; font-size: 9px; font-style: normal; font-weight: 900; }
.bottom-nav .admin-only[hidden] { display: none; }

body.authenticated header:not(.sessions-card > header) { min-height: 58px; height: 58px; padding: 7px max(14px,calc((100vw - 1240px)/2)); border-bottom: 1px solid #eee9e5; background: rgba(255,255,255,.96); color: #37312e; box-shadow: 0 4px 20px rgba(70,50,42,.045); backdrop-filter: blur(15px); }
body.authenticated header .eyebrow { color: var(--app-orange); }
body.authenticated header:not(.sessions-card > header) .eyebrow { display: none; }
body.authenticated header strong { color: #332e2b; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif; font-size: 19px; font-weight: 800; }
body.authenticated header .quiet { border-color: #eee4de; background: #fff; color: #766c67; }
.module-app > header .header-actions, .treatment-app > header .header-actions { display: none; }
#healthHomeBtn, #logoutBtn { display: none; }
#app > header .header-actions { gap: 5px; }
#app > header .pill { background: #f1eee9; color: #706863; }
#app > header .quiet b { background: #fff0ea; color: var(--app-orange); }

.portal-main,.module-main,.treatment-main { padding-bottom: 24px; }
.portal-card,.module-card,.map-card,.work-card,.treatment-map-card,.treatment-form-card,.treatment-history { border-color: #eee8e3; background: var(--app-surface); box-shadow: 0 10px 35px rgba(75,53,44,.055); }
.portal-card:hover { border-color: #ffc7b4; background: #fffaf7; }
.portal-icon { background: #fff1eb !important; color: var(--app-orange) !important; }
#openCalendar .portal-icon { background: var(--app-orange) !important; color: #fff !important; }

@media (max-width: 850px) {
  body.authenticated { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
  body.authenticated header:not(.sessions-card > header) { position: sticky; top: 0; min-height: calc(54px + env(safe-area-inset-top)); height: calc(54px + env(safe-area-inset-top)); padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
  body:has(#app.map-mode:not([hidden])) { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
  #app.map-mode { height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom)); }
  #app.form-mode { height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom)); }
  #app.form-mode .save-bar { bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
  #app.form-mode .work-card { padding-bottom: calc(105px + var(--nav-height)); }
  #toast { bottom: calc(78px + var(--nav-height) + env(safe-area-inset-bottom)); }
  .portal-main { padding-top: 20px; }
  .portal-heading p:last-child { display: none; }
}

@media (max-width: 390px) {
  :root { --nav-height: 68px; }
  .bottom-nav { padding-right: 3px; padding-left: 3px; }
  .bottom-nav button { grid-template-rows: 29px 15px; min-height: 54px; }
  .bottom-nav button span { width: 28px; height: 28px; font-size: 19px; }
  .bottom-nav button small { font-size: 9px; letter-spacing: -.02em; }
  body.authenticated header strong { max-width: 180px; font-size: 17px; }
}