/* One viewport for header, content and navigation. svh can leave an empty strip
   when Safari expands its visible area; the content must end above the menu. */
@media(max-width:700px){
  body.is-app-mode{
    height:100vh;
    height:100dvh;
  }
  body.is-app-mode main{
    inset:calc(90px + env(safe-area-inset-top)) 0 calc(70px + env(safe-area-inset-bottom)) 0!important;
  }
  body.is-app-mode .app-preview-section{
    overflow-anchor:none;
    scroll-behavior:auto;
  }
  body.is-app-mode .mobile-bottom-nav-simplified{
    position:absolute!important;
  }
  body.is-app-mode .app-screen{
    padding-bottom:24px!important;
  }
}

/* Black-and-gold app canvas. The public site and checkout keep their own styling. */
body.is-app-mode,
body.is-app-mode .app-preview-section {
  background-color: #0b0d0b !important;
  background-image: linear-gradient(145deg, #141713, #0b0d0b 65%, #090b09) !important;
  color: #f0f0e9 !important;
}

body.is-app-mode .app-shell,
body.is-app-mode .app-tabs,
body.is-app-mode .mobile-side-rail,
body.is-app-mode .mobile-side-menu,
body.is-app-mode .mobile-side-rail-handle {
  background: #151815 !important;
  border-color: #655735 !important;
}

body.is-app-mode .app-shell {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42) !important;
}

/* Both the site header and the in-app header return to their earlier white surface. */
body.is-app-mode .topbar,
body.is-app-mode .app-shell-top {
  background: #f3f5ef !important;
  border-bottom-color: #b89a53 !important;
}

body.is-app-mode .app-screen {
  background-color: #121512 !important;
  background-image:
    radial-gradient(circle at 100% 0, rgba(189, 153, 71, .09), transparent 36%),
    linear-gradient(145deg, #191c18, #101210 75%) !important;
  color: #f0f0e9 !important;
}

body.is-app-mode .topbar .brand,
body.is-app-mode .topbar nav a,
body.is-app-mode .topbar .text-button,
body.is-app-mode .app-shell-top .brand,
body.is-app-mode .app-shell-top .shell-greeting,
body.is-app-mode .app-back-button {
  color: #1b281c !important;
}

body.is-app-mode .mobile-side-rail-title {
  color: #f0f0e9 !important;
}

body.is-app-mode .app-screen > .eyebrow,
body.is-app-mode .app-screen > .screen-label,
body.is-app-mode .app-screen > h3 {
  color: #e6c678 !important;
}

body.is-app-mode .app-screen > .route-description,
body.is-app-mode .app-screen > .home-motivation,
body.is-app-mode .app-screen > .timeline-line {
  color: #dedfd5 !important;
}

body.is-app-mode .app-tabs button,
body.is-app-mode .app-tabs button span,
body.is-app-mode .mobile-side-rail-handle span,
body.is-app-mode .mobile-side-rail-handle small {
  color: #f0f0e9 !important;
}

body.is-app-mode .app-tabs button.is-active,
body.is-app-mode .app-tabs button.is-active span {
  background: #352b1a !important;
  color: #f0d180 !important;
}

body.is-app-mode .mobile-bottom-nav {
  background: #111411 !important;
  border-color: #8c7540 !important;
}

body.is-app-mode .mobile-bottom-nav > button {
  background-image: linear-gradient(145deg, #242721, #141714) !important;
  color: #f0f0e9 !important;
}

body.is-app-mode .mobile-bottom-nav > button.is-active {
  background-image: linear-gradient(145deg, #483a20, #2b2417) !important;
  color: #f0d180 !important;
}

body.is-app-mode .mobile-bottom-nav > button span,
body.is-app-mode .mobile-bottom-nav > button.is-active span {
  color: inherit !important;
}

body.is-app-mode .home-action-card,
body.is-app-mode .planning-summary-card,
body.is-app-mode .planning-welcome,
body.is-app-mode .planning-subpanel-heading,
body.is-app-mode .nutrition-scan-hero,
body.is-app-mode .nutrition-goal-intro,
body.is-app-mode .nutrition-section-heading,
body.is-app-mode .workout-live-header,
body.is-app-mode .workout-avatar-panel,
body.is-app-mode .pro-feature-note,
body.is-app-mode .route-plan-pro {
  background-image: linear-gradient(145deg, #272a22, #151915) !important;
  border-color: #74613a !important;
}

body.is-app-mode .home-scanner-tip,
body.is-app-mode .profile-data-center,
body.is-app-mode .evolution-screen-card {
  background: #20231e !important;
  border-color: #74613a !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav {
  background-color: #141713 !important;
  background-image: linear-gradient(145deg, #20231d, #111411) !important;
  border-color: #8c7540 !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button.is-active {
  background-color: #1c201a !important;
  background-image: linear-gradient(145deg, #2b2d25, #171a16) !important;
  border-color: #8c7540 !important;
  color: #ecd084 !important;
}

/* High-visibility actions requested for Home, Planning and Nutrition. */
body.is-app-mode [data-screen-panel="inicio"] .home-action-buttons button,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-tab,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button {
  background-color: #a7ef4c !important;
  background-image: linear-gradient(145deg, #baff68, #8ee33a) !important;
  border-color: #d3ff91 !important;
  color: #102008 !important;
  -webkit-text-fill-color: #102008 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px rgba(19, 35, 9, .3), 0 0 16px rgba(148, 238, 61, .16) !important;
}

body.is-app-mode [data-screen-panel="inicio"] .home-action-buttons button span {
  color: #102008 !important;
}

body.is-app-mode [data-screen-panel="planejamentos"] .planning-tab.is-active,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button.is-active {
  background-color: #c6ff76 !important;
  background-image: linear-gradient(145deg, #dcff9e, #a9f347) !important;
  border-color: #eeffbf !important;
  color: #102008 !important;
  -webkit-text-fill-color: #102008 !important;
  box-shadow: inset 0 0 0 2px rgba(16, 32, 8, .65), 0 0 20px rgba(166, 245, 75, .28) !important;
}

body.is-app-mode [data-screen-panel="inicio"] .home-action-buttons button:hover,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-tab:hover,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button:hover {
  filter: brightness(1.07) !important;
}

body.is-app-mode [data-screen-panel="inicio"] .home-action-buttons button:focus-visible,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-tab:focus-visible,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-nav > button:focus-visible {
  outline: 3px solid #f0ffbd !important;
  outline-offset: 2px !important;
}

/* These rows have transparent backgrounds and previously relied on the pale screen. */
body.is-app-mode [data-screen-panel="planejamentos"] .planning-check strong,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-exercise strong,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-meal-list strong,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-rest-day strong,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-record-line,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-record-line strong {
  color: #ecf2e9 !important;
}

body.is-app-mode [data-screen-panel="planejamentos"] .planning-check small,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-exercise small,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-meal-list small,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-rest-day small,
body.is-app-mode [data-screen-panel="planejamentos"] .planning-empty {
  color: #c7d6c3 !important;
}

/* Form labels sit directly on the black canvas; keep input values dark on white fields. */
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-goal-form > label,
body.is-app-mode [data-screen-panel="nutricao"] .physical-profile-grid > label {
  color: #f5f5ef !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-goal-disclaimer,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-goal-status {
  color: #d9dfd2 !important;
}

/* A meal saved in the account gets a short, non-obscuring celebration beside the daily macros. */
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 9px;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid #d7b968;
  border-radius: 18px;
  background: linear-gradient(135deg, #24301a, #10160f) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3), 0 0 18px rgba(174, 245, 81, .13);
  text-align: center;
  pointer-events: none;
  animation: nutrition-meal-celebrate 2.8s ease-out both;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration span {
  color: #d7b968 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration strong {
  color: #fff !important;
  font: 900 15px/1.3 Manrope, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration small {
  color: #baff68 !important;
  font: 850 13px/1.3 Manrope, Arial, sans-serif !important;
}

@keyframes nutrition-meal-celebrate {
  0% { opacity: 0; transform: translateY(18px) scale(.86); }
  16% { opacity: 1; transform: translateY(-6px) scale(1.04); }
  28% { transform: translateY(3px) scale(.98); }
  40%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration {
    animation: none;
  }
}

/* Readable text on transparent dark rows: saved content, food history and profile. */
body.is-app-mode [data-screen-panel="salvos"] .offline-summary strong,
body.is-app-mode [data-screen-panel="salvos"] .saved-list strong,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-week-list strong,
body.is-app-mode [data-screen-panel="perfil"] > .profile-row strong {
  color: #f5f5ef !important;
  -webkit-text-fill-color: #f5f5ef !important;
}

body.is-app-mode [data-screen-panel="salvos"] .offline-summary span,
body.is-app-mode [data-screen-panel="salvos"] .saved-list small,
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-week-list small {
  color: #d9dfd2 !important;
  -webkit-text-fill-color: #d9dfd2 !important;
  font-size: 11px !important;
}

body.is-app-mode [data-screen-panel="nutricao"] .nutrition-week-list span,
body.is-app-mode [data-screen-panel="perfil"] > .profile-row,
body.is-app-mode [data-screen-panel="perfil"] > .profile-row span {
  color: #e6c678 !important;
  -webkit-text-fill-color: #e6c678 !important;
}

/* Short decorative sparkle burst when a recorded daily goal is reached. */
.hydration-celebration.is-goal-reached,
.nutrition-meal-celebration.is-goal-reached {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.planning-hydration-card .hydration-celebration.is-goal-reached { position: absolute; }
body.is-app-mode [data-screen-panel="nutricao"] .nutrition-daily-macros .nutrition-meal-celebration.is-goal-reached strong {
  flex: 1 1 100%;
}
.is-goal-reached > strong,
.is-goal-reached > small,
.is-goal-reached > span { position: relative; z-index: 1; }
.goal-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.goal-sparkles i {
  position: absolute;
  left: calc(8% + var(--star-index) * 11%);
  top: 75%;
  color: #e6c678;
  font: normal 16px/1 Arial, sans-serif;
  text-shadow: 0 0 8px #e6c67888;
  animation: vwork-goal-sparkle 1.1s ease-out infinite;
  animation-delay: calc(var(--star-index) * -0.13s);
}
.goal-sparkles i:nth-child(even) { color: #baff68; font-size: 11px; }
@keyframes vwork-goal-sparkle {
  0% { opacity: 0; transform: translateY(0) scale(.4) rotate(0deg); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-65px) scale(1.15) rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) {
  .goal-sparkles i { animation: none; top: 10%; opacity: .45; }
}