:root{--green:#476a3c;--lime:#b9d63c;--dark:#111;--cream:#f6f4ec;--gold:#e6c65c}
*{box-sizing:border-box}.app-body{margin:0;background:var(--cream);font-family:Arial,sans-serif;color:#1d1d1d}.app-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;row-gap:6px;background:linear-gradient(90deg,rgba(3,28,22,.98),rgba(6,47,35,.98),rgba(11,107,61,.96));color:white;padding:5px 3vw;position:sticky;top:0;z-index:5}.app-header-left{display:flex;align-items:center;gap:14px}.app-menu-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;background:transparent;border:0;border-radius:10px;padding:0;cursor:pointer}.app-header img{width:auto;max-height:112px;object-fit:contain;display:block}.app-header h1{margin:0;font-size:1rem;font-weight:900;white-space:nowrap;letter-spacing:.02em;background:linear-gradient(100deg,var(--lime),var(--yellow),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 0 14px rgba(168,241,45,.4)}.app-header p{display:none}.app-menu{display:none}.app-menu.open{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:12px 0 4px}.app-nav{display:flex;align-items:center;gap:14px;margin-left:auto}.app-nav a{color:white;text-decoration:none;font-size:.8rem;font-weight:700;white-space:nowrap}.app-nav a:hover,.app-nav a[aria-current="page"]{color:var(--lime)}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.app-header select{width:auto;margin-top:0;padding:8px 12px;border:none;border-radius:999px;background:white;color:#111;font-weight:700}.app-home,.app-header-logout{color:#111;background:var(--lime);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer;white-space:nowrap}.app-header-logout{background:#ececec}.app-shell{max-width:1050px;margin:28px auto;padding:0 18px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.app-card{background:white;border-radius:18px;padding:22px;box-shadow:0 8px 28px rgba(0,0,0,.08);border-top:4px solid var(--lime)}.profile-card{margin-bottom:18px}.wide{grid-column:1/-1}.app-card h2{margin:0 0 16px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}label{display:block;font-weight:700;font-size:.93rem}input,select,textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #ccc;border-radius:10px;font:inherit;background:white}textarea{resize:vertical}.primary,button{border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.primary{background:var(--green);color:white}button:not(.primary){background:#ececec}.button-row,.section-line{display:flex;gap:10px;align-items:center;justify-content:space-between}.water-count{font-size:1.25rem;margin:22px 0}.water-count strong{font-size:3rem;color:var(--green)}.check{padding:9px 0;font-weight:600}.check input{width:auto;margin:0 9px 0 0}.meal-list{display:grid;gap:12px}.meal-item{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:start;padding:12px;border:1px solid #ddd;border-radius:12px}.meal-item img{width:90px;height:78px;object-fit:cover;border-radius:9px;background:#eee}.meal-info{min-width:0}.meal-item h3{margin:0 0 4px}.meal-item p{margin:3px 0;color:#555;overflow-wrap:anywhere}.empty,.status,.privacy-note{color:#666}.privacy-note{text-align:center;font-size:.85rem;margin:22px 0 35px}.remove-meal{background:#f3e3e3!important}.reminder-grid{grid-template-columns:repeat(5,1fr)}.meal-item.no-photo{grid-template-columns:1fr auto}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.file-picker{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}.file-picker button{margin:0}.meal-photo-preview{width:56px;height:56px;object-fit:cover;border-radius:9px;background:#eee;flex-shrink:0}@media(max-width:1050px){.app-header{flex-wrap:wrap}.app-nav{order:3;width:100%;justify-content:center}.app-header p{display:none}}@media(max-width:700px){.dashboard-grid,.form-grid,.reminder-grid{grid-template-columns:1fr}.wide{grid-column:auto}.app-nav{justify-content:flex-start;overflow-x:auto;padding-bottom:3px}.app-nav a{font-size:.75rem}.meal-item{grid-template-columns:70px 1fr}.meal-item img{width:70px;height:65px}.remove-meal{grid-column:1/-1}.meal-item.no-photo{grid-template-columns:1fr}}
.auth-form{margin:0}.auth-actions{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:6px}.auth-actions button{width:100%;min-width:0;padding-inline:4px;white-space:nowrap;font-size:clamp(.65rem,3vw,.875rem)}.signed-in-as{margin:-4px 0 14px;color:var(--green);font-weight:700}
@media (max-width:375px){.auth-card{padding-inline:12px}.auth-actions{gap:4px}.auth-actions button{padding-inline:2px;font-size:.64rem}}
@media (max-width: 600px) {
  .header-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .header-actions select,
  .header-actions a {
    margin: 0;
  }
}
.auth-actions button:disabled {
  background: #e5e5e5 !important;
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
  border-color: #e5e5e5 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
.auth-actions button {
  background: #476a3c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #476a3c !important;
  opacity: 1 !important;
}

.auth-actions button:disabled {
  background: #e5e5e5 !important;
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
  border-color: #e5e5e5 !important;
  opacity: 1 !important;
}
.password-field-wrap{position:relative;display:block;margin-top:7px}
.password-field-wrap input{margin-top:0;padding-right:42px}
.password-toggle-btn{
  position:absolute;top:0;right:0;bottom:0;
  width:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent !important;
  border:0 !important;
  padding:0;
  color:#666;
  cursor:pointer;
}
.password-toggle-btn:hover,.password-toggle-btn:focus-visible{color:var(--green)}

.my-menu-pdf-preview {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid #ddd;
  border-radius: 12px;
  display: block;
  margin-bottom: 14px;
  background: #f6f4ec;
}
.my-menu-download-link {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.my-menu-client-id {
  font-weight: 800;
  color: var(--green);
  background: var(--cream);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: inline-block;
}
.my-menu-section-heading {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .95rem;
  color: var(--green);
  margin: 0 0 4px;
}
.my-menu-history-heading { margin-top: 22px; }
.my-menu-label { margin: 0 0 10px; font-weight: 700; }
.my-menu-history-list { display: grid; gap: 8px; }
.my-menu-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: 10px;
  font-size: .9rem;
}
.my-menu-history-link {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.my-menu-history-link:hover { text-decoration: underline; }

/* Hamburger menu — explicit hex + !important (2026-08-11 fix): a white
   background with low-contrast green lines was reported live; this no
   longer depends on any translucent overlay or custom property
   resolving correctly against the dark header behind it. */
.app-menu-toggle{
  width:44px;height:44px;
  background:#e8d94a !important;
  border:1px solid #4b5320 !important;
}
.app-menu-toggle:hover,.app-menu-toggle:focus-visible{background:#f2e364 !important}
.hamburger-lines{
  position:relative;display:block;width:22px;height:2px;
  background:#4b5320 !important;
}
.hamburger-lines::before,.hamburger-lines::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#4b5320 !important;
}
.hamburger-lines::before{top:-7px}
.hamburger-lines::after{top:7px}
.app-menu-link{
  background:transparent;color:white;border:1px solid rgba(255,255,255,.4);
  text-decoration:none;
}
.app-menu-link:hover{background:rgba(255,255,255,.12)}

.section-title-caps{text-transform:uppercase;letter-spacing:.03em}

/* Meal History consolidated tabs (replaces four separate homepage cards) */
.meal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.meal-tab{background:#ececec;color:#1d1d1d}
.meal-tab.active{background:var(--green);color:white}
.meal-panel h3{margin-top:0}

/* Save / Saved button state (item 39-41). Explicit hex + !important
   (2026-08-11 fix): a prior version relied on --lime/inherited colors
   only, which could render white-on-white/blank if any custom property
   didn't resolve as expected — this no longer depends on any variable
   resolving correctly elsewhere in the cascade. */
.primary.save-success{
  background:#ffd447 !important;
  color:#4b5320 !important;
  -webkit-text-fill-color:#4b5320 !important;
  border:2px solid #4b5320 !important;
}

/* One-time Client ID linkage welcome message (2026-08-16). */
.app-modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(3,28,22,.72);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
/* 2026-08-19 fix: the unconditional `display:flex` above (an author
   rule) always overrides the browser's default `[hidden]{display:none}`
   (a lower-priority user-agent rule), so the `hidden` attribute alone
   never actually hid this overlay — it rendered full-screen from page
   load regardless of any JS toggle. Same bug class as intake.css's
   earlier `[hidden]{display:none !important}` fix, scoped here to only
   this element so nothing else changes. */
.app-modal-overlay[hidden]{display:none}
.app-modal-card{
  background:var(--cream);
  border-radius:16px;
  padding:26px 24px;
  max-width:420px;
  width:100%;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  text-align:center;
}
.app-modal-card h2{margin:0 0 12px;color:var(--green);font-size:1.15rem}
.app-modal-card p{margin:0 0 18px;line-height:1.5;color:#1d1d1d}
.app-modal-card button{width:100%}