/* Navigation and its hosted pages share the existing member colour and illustration system.
   #app deliberately outranks the legacy mobile !important rules, without altering those pages. */
#app .app-shell:not(.auth-gate) .global-nav {
  box-sizing: border-box; min-height: 0 !important; height: calc(72px + env(safe-area-inset-bottom)) !important;
  flex: 0 0 calc(72px + env(safe-area-inset-bottom)) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  padding: 4px 7px calc(4px + env(safe-area-inset-bottom)) !important;
}
#app .global-nav .nav-item { box-sizing: border-box; height: 100% !important; padding: 2px !important; min-width: 0 !important; min-height: 44px !important; gap: 2px !important; }
#app .global-nav .nav-item img { width: 25px !important; height: 25px !important; }
#app .global-nav .nav-item small { font-size: 14px !important; line-height: 1.1 !important; }

#app .app-shell:not(.auth-gate) .app-main:has(.member-data-hub,.member-meals-home,.member-other) {
  height: 100% !important; min-height: 0 !important; flex: 1 1 0; overflow: hidden;
}
#app .app-shell:not(.auth-gate) .screen-content:has(.member-data-hub,.member-meals-home,.member-other),
#app .app-shell:not(.auth-gate) .screen-anchor:has(.member-data-hub,.member-meals-home,.member-other),
#app [data-role="screen"]:has(.member-data-hub,.member-meals-home,.member-other) {
  box-sizing: border-box; height: 100% !important; min-height: 0 !important;
  flex: 1 1 0; display: flex !important; flex-direction: column; overflow: hidden !important;
}
#app .screen-content:has(.member-data-hub,.member-meals-home,.member-other) { padding: 0 9px 4px !important; }
#app .screen-anchor:has(.member-data-hub,.member-meals-home,.member-other) { padding: 4px 0 0 !important; }
#app .member-data-hub {
  width: 100%; height: 100%; min-height: 0; display: grid;
  grid-template-rows: 52px minmax(0, 1fr); gap: 5px; overflow: hidden;
}
#app .member-data-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
#app .member-data-tabs > button {
  min-width: 0; height: 44px; padding: 4px; border: 2px solid var(--v1-ink);
  border-radius: 14px 11px 15px 12px; background: #fffdf8; color: var(--v1-muted);
  font-size: 14px; line-height: 1.1;
}
#app .member-data-tabs [aria-selected="true"] { background: var(--v1-yellow); color: var(--v1-ink); box-shadow: 2px 2px 0 var(--v1-ink); font-weight: 800; }
#app .member-data-nav { min-height: 0; display: grid; grid-template-rows: 44px 8px; touch-action: pan-y; }
#app .data-section-dots { display: flex; align-items: center; justify-content: center; gap: 5px; }
#app .data-section-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c8bba3; }
#app .data-section-dots .is-current { width: 14px; border-radius: 4px; background: var(--v1-ink); }
#app .member-data-pager { display: flex; min-height: 0; min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: none; scrollbar-width: none; }
#app .member-data-pager::-webkit-scrollbar { display: none; }
#app .member-data-panel { box-sizing: border-box; flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
html:has(.member-data-hub), body:has(.member-data-hub) { overscroll-behavior: none; }
html:has(.member-data-hub):has(dialog[open]), body:has(.member-data-hub):has(dialog[open]) { touch-action: auto; }
#app .member-data-panel :is(.diet-meal-carousel,.diet-calendar-glance,.diet-pvt-history,.trend-metrics) { overscroll-behavior-x: contain; }
#app .member-data-hub { grid-template-rows: 50px minmax(0,1fr); gap: 3px; }
#app .member-data-nav { grid-template-rows: 44px 6px; }
#app .member-data-nav .member-data-tabs { gap: 3px; }
#app .member-data-tabs button { font-size: 13px; }
#app .member-data-panel .diet-calendar-inline { height: 100%; padding: 4px; overflow: hidden; }
#app .member-data-panel .calendar-scroll { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 3px; overflow: hidden !important; overscroll-behavior: none; }
#app .member-data-panel .diet-calendar-heading { min-height: 44px; padding: 0; }
#app .member-data-panel .diet-calendar-weekdays { height: 16px; min-height: 16px; font-size: 11px; }
#app .member-data-panel .diet-calendar-day { min-height: 44px; height: 48px; padding: 2px; }
#app .member-data-panel .diet-calendar-day strong { font-size: 16px; }
#app .member-data-panel .diet-calendar-day span { font-size: 10px; line-height: 1.2; }
#app .member-data-panel .diet-calendar-summary { min-height: 44px; height: 44px; padding: 0; }
#app .member-data-panel .diet-record-tabs { min-height: 44px; height: 44px; padding: 0; }
#app .member-data-panel .calendar-scroll .diet-record-viewport { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
#app .diet-record-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; align-content: start; min-height: 0; }
#app .diet-record-values .diet-record-value { min-height: 44px; height: 44px; padding: 3px; gap: 1px; font-size: 12px; border-radius: 9px; }
#app .diet-record-values .diet-record-value span { font-size: 10px; line-height: 1.1; }
#app .diet-record-values .diet-record-value b { font-size: 13px; line-height: 1.2; }
#app .diet-record-values [hidden] { display: none !important; }
#app .calendar-values-all,#app .calendar-history-button { min-height: 44px; height: 44px; font-size: 12px; }
#app .calendar-unrecorded,#app .diet-record-value.is-unrecorded { border: 1px solid #d5a6a2 !important; background: #fff0ee !important; color: #9b5550; border-radius: 10px; padding: 8px; box-shadow: none; }
#app .diet-record-value.is-unrecorded :is(span,b) { color: #9b5550; }
#app .member-account-tools { display: grid; gap: 8px; }
#app .member-account-tools input { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
#app .member-account-tools button,#app .member-account-tools a { min-height: 44px; display: grid; place-items: center; }
#app [data-role="account-qr-result"] img { width: min(100%,260px); height: auto; display: block; margin: auto; }
#app .my-course-balance { padding: 8px; border: 1px solid #d7c6b4; border-radius: 12px; background: #fff2ca; }
#app .course-history-title { margin: 10px 0 4px; font-size: 14px; }
#app .my-course-history > div,#app .metric-drawer-history > div { display: flex; justify-content: space-between; gap: 6px; padding: 8px 0; border-bottom: 1px solid #e4d5c3; font-size: 12px; }
#app .month-picker-dialog .calendar-month-picker { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#app .month-pages { display: flex; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
#app .month-pages::-webkit-scrollbar { display: none; }
#app .month-page { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
#app .month-page-dots { display: flex; justify-content: center; gap: 5px; padding: 3px; }
#app .month-page-dots i { width: 4px; height: 4px; border-radius: 50%; background: #c8bba3; }
#app .month-page-dots .is-current { width: 12px; border-radius: 3px; background: #315c56; }
#app .month-picker-dialog .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: 44px; align-content: start; gap: 2px; }
#app .month-picker-dialog .calendar-cell { height: 44px; min-height: 44px; border: 0; }
#app .month-picker-dialog .calendar-cell button { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 44px; min-height: 44px; max-height: 44px; padding: 1px; border: 1px solid #dfcdb9; border-radius: 8px; font-size: 12px; line-height: 1.05; overflow: hidden; }
#app .month-picker-dialog .calendar-cell button strong { display: block; font-size: 15px; line-height: 1.05; }
#app .month-picker-dialog .calendar-cell button :is(span,small) { font-size: 11px; line-height: 1.05; margin-inline: 1px; }
#app .month-picker-dialog .calendar-cell.is-selected button { background: #ffd86e; }
#app .month-picker-dialog .calendar-year-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
#app .month-picker-dialog .calendar-year-grid button { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: 3px; font-size: 13px; }
#app .month-picker-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 5px; }
#app .month-picker-toolbar :is(button,select,input,[role="button"]) { box-sizing: border-box; min-width: 44px; width: auto; height: 44px; min-height: 44px; flex: 0 0 auto; }
#app .month-picker-dialog :is(.month-picker-toolbar button,.month-picker-toolbar select,.month-picker-toolbar input,.calendar-cell button):focus-visible { outline: 2px solid #d77438; outline-offset: 1px; }
#app .member-metric-drawer { position: fixed; inset: 50% auto auto 50% !important; margin: 0 !important; transform: translate(-50%,-50%); width: min(430px,calc(100vw - 20px)); max-width: calc(100vw - 20px); height: min(700px,calc(100dvh - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box; border-radius: 18px 15px 19px 14px; }
#app .member-metric-drawer .diet-record-dialog-content { min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
#app .metric-drawer-ranges { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; flex: 0 0 auto; }
#app .metric-drawer-ranges button { min-height: 44px; font-size: 12px; }
#app .metric-drawer-ranges [aria-pressed="true"] { background: #ffd86e; }
#app .metric-drawer-chart { height: clamp(150px,30dvh,240px); min-height: 150px; flex: 0 0 auto; }
#app .metric-drawer-chart .trend-chart { width: 100%; height: 100%; min-height: 0; background: transparent; border: 0; box-shadow: none; }
#app .member-metric-drawer .trend-point { box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; box-shadow: none; }
#app .trend-custom-days { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; flex: 0 0 auto; }
#app .trend-slider-caption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 13px; line-height: 13px; }
#app .trend-slider-caption output { grid-column: 2; color: #5e564c; font-size: 11px; font-variant-numeric: tabular-nums; }
#app .trend-custom-days input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--v1-ink); border-radius: 9px; background: #fffdf8; color: var(--v1-ink); padding: 6px; font: inherit; font-size: 16px !important; }
#app .trend-custom-days small { grid-column: 3; justify-self: end; color: #877665; font-size: 10px; line-height: 12px; font-variant-numeric: tabular-nums; }
#app .trend-custom-days :is(input,button):focus-visible { outline: 3px solid #886bba; outline-offset: 2px; }
#app .trend-custom-days input[type="range"] { margin: -7px 0 0; padding: 0; border: 0; background: transparent; accent-color: #315c56; }
#app .calendar-photo-pages { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; }
#app .calendar-photo-pages button { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 24px; }
#app .calendar-photo-pages button:disabled { opacity: .35; }
#app .calendar-photo-pages button:focus-visible { outline: 2px solid #d77438; outline-offset: 1px; }
#app .calendar-photo-pages span { font-size: 14px; font-variant-numeric: tabular-nums; }
#app .calendar-photo-dialog img { max-height: calc(100dvh - 140px) !important; }
#app .calendar-photo-dialog img[hidden] { display: none !important; }
#app [data-role="main-trend-results"], #app [data-role="metric-trend-results"] { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; overflow: hidden; }
#app .trend-history, #app .metric-drawer-history { flex: 1 1 0; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
#app .trend-history > div { display: flex; justify-content: space-between; gap: 6px; padding: 8px 0; border-bottom: 1px solid #e4d5c3; font-size: 12px; }
#app .member-data-panel [data-role="main-trend-results"] .trend-chart { flex: 0 0 clamp(100px,20dvh,200px) !important; }
#app .member-data-panel .trend-point { width: 44px !important; height: 44px !important; min-height: 44px; box-shadow: none !important; }
#app .member-data-panel .trend-point span { margin: 16px !important; }
#app .member-metric-drawer { display: flex; flex-direction: column; overflow: hidden; }
#app .member-metric-drawer:not([open]) { display: none; }
#app .member-metric-drawer > header { flex: 0 0 44px; }
#app .member-metric-drawer .trend-chart-svg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none; }
#app .member-metric-drawer .trend-points { position: absolute; inset: 0; }
#app .member-metric-drawer .trend-y-labels { display: block; position: absolute; inset: 0 auto 0 2px; font-size: 10px; line-height: 1; }
#app .member-metric-drawer .trend-y-labels span { position: absolute; transform: translateY(-50%); white-space: nowrap; }
#app .member-metric-drawer .trend-x-labels { position: absolute; inset: auto 0 3px; height: 14px; font-size: 10px; }
#app .member-metric-drawer .trend-grid-line { stroke: #dccab7; stroke-width: .5; vector-effect: non-scaling-stroke; }
#app .member-metric-drawer .trend-axis-line { stroke: #8a7460; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-height: 500px) {
  #app .member-metric-drawer .diet-record-dialog-content { gap: 2px; padding-block: 2px; }
  #app .metric-drawer-chart { height: 100px; min-height: 100px; }
  #app .member-data-panel .trend-chart-card > .data-card-head,
  #app .member-data-panel [data-role="main-trend-results"] .trend-summary { display: none !important; }
  #app .member-data-panel [data-role="main-trend-results"] .trend-chart { flex-basis: 80px !important; }
}
@media (max-height: 400px) { #app .member-data-panel .diet-calendar-summary { display: none; } }
#app .member-data-panel > section { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; }
#app .member-data-panel .diet-food-preview { overscroll-behavior-x: auto; }
#app .member-data-panel .host-page-head { min-height: 30px !important; height: 30px !important; margin: 0 !important; }
#app .member-data-panel .host-page-head h2 { display: none; }
#app .member-data-panel .host-v1-data {
  display: grid !important; grid-template-rows: minmax(0,1fr) auto !important;
  gap: 4px !important; overflow: hidden !important;
}
#app .report-card-stack { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 5px 4px 4px; margin: 2px 3px 4px 0; border: 1px solid #bba88d; border-radius: 16px 13px 15px 14px; background: #f5ead8; box-shadow: 3px 4px 0 #d8c4a4; overflow: hidden; }
#app .report-pager { display: flex; flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overscroll-behavior-y: none; scrollbar-width: none; }
#app .report-pager::-webkit-scrollbar { display: none; }
#app .report-panel { box-sizing: border-box; flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
#app .report-page-dots { display: flex; flex: 0 0 7px; align-items: center; justify-content: center; gap: 4px; touch-action: pan-y; }
#app .report-page-dots i { width: 3px; height: 3px; background: #c7b69b; border-radius: 50%; }
#app .report-page-dots .is-current { width: 9px; border-radius: 3px; background: #315c56; }
#app .member-data-panel .data-tabs { box-sizing: border-box; height: 44px !important; padding: 0 !important; touch-action: pan-y; }
#app .member-data-panel .data-tabs { display: grid; flex: 0 0 44px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; border: 0; background: transparent; }
#app .member-data-panel .data-tabs button { min-width: 0; height: 44px; min-height: 44px !important; padding: 3px; border: 0; border-radius: 11px 9px 0 0; background: transparent; font-size: 13px !important; color: #776b5c; }
#app .member-data-panel .data-tabs button.is-active { background: #fffdf8; color: #315c56; box-shadow: inset 0 3px #315c56; font-weight: 700; }
#app .member-data-panel .host-v1-data > .data-summary { display: none !important; }
#app .member-data-panel .data-summary { height: 40px !important; gap: 4px !important; }
#app .member-data-panel .data-summary > div { padding: 2px 5px !important; }
#app .member-data-panel .data-summary span { font-size: 11px !important; }
#app .member-data-panel .data-summary strong { font-size: 16px !important; }
#app .member-data-panel .data-panel { box-sizing: border-box !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; overflow: visible !important; }
#app .member-data-panel :is(.data-form-card,.pvt-card) {
  box-sizing: border-box; height: 100% !important; min-height: 0 !important; padding: 6px !important;
  display: flex !important; flex-direction: column; gap: 4px !important; overflow: visible !important;
}
#app .member-data-panel .data-card-head { min-height: 20px !important; height: 20px !important; }
#app .member-data-panel .data-card-head h3 { font-size: 16px !important; line-height: 1.1 !important; }
#app .member-data-panel .data-fields {
  display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows: 66px !important; gap: 4px !important; overflow: visible !important;
}
#app .member-data-panel .data-field {
  box-sizing: border-box; min-width: 0 !important; height: 66px !important; min-height: 66px !important;
  padding: 1px 4px !important; justify-content: flex-start !important; overflow: visible !important;
}
#app .member-data-panel .data-field > span { min-height: 20px !important; font-size: 12px !important; line-height: 1.2 !important; }
#app .member-data-panel .data-field > span em { font-size: 10px !important; }
#app .member-data-panel .data-field :is(input,select,textarea) {
  box-sizing: border-box; width: 100% !important; height: 44px !important; min-height: 44px !important;
  padding: 0 3px !important; font-size: 16px !important; line-height: 1.2 !important;
}
#app .member-data-panel .form-error:empty { display: none !important; }
#app .member-data-panel .data-step-actions { height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; grid-template-columns: 1fr .7fr 1.3fr !important; gap: 4px !important; margin: auto 0 0 !important; }
#app .member-data-panel .data-step-actions button {
  height: 44px !important; min-height: 44px !important; min-width: 0 !important;
  padding: 3px !important; font-size: 12px !important; white-space: nowrap !important;
}
#app .member-data-panel .data-progress-strip { height: 26px !important; min-height: 26px !important; padding: 3px 5px !important; grid-row: auto !important; }
#app .member-data-panel .inline-status { grid-row: auto !important; min-height: 18px; font-size: 12px !important; }

#app .member-data-panel .pvt-card .pvt-fields { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
#app .member-data-panel .pvt-card .data-step-actions { grid-template-columns: 1fr 1fr !important; }
#app .member-data-panel .pvt-card:not(.pvt-active-card) { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); }
#app .member-data-panel .pvt-card:not(.pvt-active-card) > :is(.data-card-head,.pvt-fields,.pvt-copy,.form-error) { grid-column: 1/-1; }
#app .member-data-panel .pvt-card :is(.pvt-tools,.data-step-actions) { display: contents !important; }
#app .member-data-panel .pvt-tools button { flex: 1; min-height: 44px !important; padding: 3px !important; font-size: 12px !important; }
#app .member-data-panel .pvt-card .pvt-copy { margin: 0 !important; font-size: 11px !important; line-height: 1.2 !important; }
#app .member-data-panel .pvt-active-card { height: 100% !important; }
#app .member-data-panel .pvt-active-card .pvt-run-panel { min-height: 0; height: 100%; flex: 1; }
#app .member-data-panel .pvt-active-card .pvt-target { flex: 1; height: auto !important; min-height: 44px !important; }

#app .member-data-panel .host-v1-trends {
  display: grid !important; grid-template-rows: 44px 44px 44px minmax(0,1fr) !important; gap: 3px !important;
}
#app .member-data-panel :is(.trend-ranges,.trend-groups,.trend-metrics) { height: 44px !important; min-height: 44px !important; overflow: visible !important; }
#app .member-data-panel :is(.range-button,.group-button,.trend-metric) { height: 44px !important; min-height: 44px !important; font-size: 12px !important; }
#app .trend-compact-controls { display: none; }
#app .member-data-panel .trend-chart-card { min-height: 0 !important; padding: 5px 7px !important; overflow: hidden !important; }
#app .member-data-panel .trend-summary { flex: 0 0 42px !important; min-height: 42px !important; gap: 3px !important; margin: 3px 0 !important; }
#app .member-data-panel .trend-summary > div { padding: 3px !important; }
#app .member-data-panel .trend-summary span { font-size: 10px !important; }
#app .member-data-panel .trend-summary strong { font-size: 14px !important; }
#app .member-data-panel .trend-chart { min-height: 0 !important; flex: 1 1 0 !important; }
#app .member-data-panel .diet-calendar-inline { height: 100%; min-height: 0; }
#app .member-data-panel .diet-calendar-heading { flex-wrap: wrap; min-height: 32px; height: auto; }
#app .member-data-panel .diet-calendar-heading h3 { font-size: 12px; }

#app .member-other { box-sizing: border-box; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; overflow: hidden; }
#app .member-other-links { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; align-content: start; }
#app .member-other-links > :is(button,a) {
  box-sizing: border-box; min-width: 0; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 7px;
  border: 2px solid var(--v1-ink); border-radius: 16px 13px 17px 14px;
  background: #fff2ca; color: var(--v1-ink); text-align: left;
}
#app .member-other-links > a { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: 4px 12px; text-decoration: none; }
#app .member-other-links img { width: 22px; height: 22px; object-fit: contain; }
#app .member-other-links strong { font-size: 13px; }
#app .member-other-links small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--v1-muted); }
#app .member-course-card { flex: 0 1 auto; min-height: 0; padding: 4px 10px 8px; border: 2px solid var(--v1-ink); border-radius: 18px 15px 19px 16px; background: #fff7df; box-shadow: 2px 3px 0 #e7d3ab; overflow-y: auto; }
#app .member-course-card header { display: flex; justify-content: space-between; align-items: center; }
#app .member-course-card header strong { font-size: 15px; }
#app .member-course-card header button { min-width: 44px; min-height: 44px; border: 0; background: transparent; padding: 2px; font-size: 12px; color: #315c56; }
#app .course-card-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 0; text-align: left; font-variant-numeric: tabular-nums; }
#app .course-card-balance > span { font-size: 12px; color: #80705e; }
#app .course-card-balance > strong { font-size: 18px; line-height: 1.3; color: #315c56; }
#app .course-card-balance small { margin-left: 2px; font-size: 12px; }
#app .course-card-balance .course-gift { margin-left: auto; color: #876342; }
#app .course-validity { margin: 3px 0 6px; font-size: 11px; color: #80705e; }
#app .course-validity.is-expired { color: #a75245; }
#app .course-card-history > div { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-top: 1px dashed #d5c4a3; font-size: 12px; line-height: 1.4; }
#app :is(.course-card-history,.my-course-history) time { font-variant-numeric: tabular-nums; white-space: nowrap; }
#app :is(.course-card-history,.my-course-history) div > span { font-size: 11px; white-space: nowrap; }
#app .course-card-history > small,#app .course-state { font-size: 12px; color: #80705e; }
#app .member-other .test-tools-compact { align-self: flex-end; flex: 0 0 auto; display: grid; gap: 4px; margin-top: auto; }
#app .member-other .test-switch-compact { min-height: 44px; padding: 4px 8px; border: 1px solid #d6c6b0; border-radius: 11px; background: #fffdf8; font-size: 12px; color: #776b5c; }
@media (min-width: 600px) and (max-height: 480px) {
  #app .member-other { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 6px 10px; align-content: start; }
  #app .member-other .member-other-links { grid-column: 1; grid-row: 1; }
  #app .member-other .member-course-card { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  #app .member-other .test-tools-compact { grid-column: 1; grid-row: 2; justify-self: end; }
}
#app .manual-sync-content { display: grid; gap: 10px; }
#app .manual-sync-content p { margin: 0; font-size: 14px; line-height: 1.6; }
#app .manual-sync-content small { color: #776b5c; font-size: 12px; }
#app .manual-sync-content [role="status"]:empty { display: none; }
#app .manual-sync-content button { border: 2px solid var(--v1-ink); border-radius: 14px; background: #ffda67; color: var(--v1-ink); }

#app :is(.member-data-tabs button,.member-other :is(button,a)):focus-visible { outline: 2px solid var(--v1-orange); outline-offset: 2px; }
#app .member-info-dialog :is(.trend-ranges,.trend-groups,.trend-option-list) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#app .member-info-dialog button { min-height: 44px; font-size: 14px; }
#app .member-info-dialog .test-account-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; width: 100%; min-width: 0; }
#app .member-info-dialog .test-account-list button { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: 4px 10px; text-align: left; }
#app .member-info-dialog .data-summary { display: grid; height: auto; gap: 5px; }
#app .member-info-dialog .data-summary > div { padding: 8px; }
#app .member-info-dialog .data-summary strong { font-size: 20px; }
#app .member-info-dialog .data-progress-strip { display: flex; flex-wrap: wrap; gap: 6px; height: auto; margin-top: 10px; }
#app .pvt-records-dialog .pvt-result { display: flex !important; flex-direction: column !important; gap: 6px; font-size: 14px; }
#app .pvt-records-dialog .pvt-history { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
#app .pvt-records-dialog .pvt-history-item { min-height: 60px !important; height: auto !important; padding: 6px !important; }
#app .pvt-records-dialog .pvt-history-item :is(time,span,small) { font-size: 12px !important; line-height: 1.3 !important; white-space: normal !important; }

#app .member-data-panel .host-v1-data > .host-page-head { height: 24px !important; min-height: 24px !important; }
#app .data-form-groups { min-height: 0; display: flex; flex-direction: column; gap: 4px; }
#app .data-form-group { min-width: 0; flex: 0 0 auto; }
#app .data-group-open { display: none; }
#app .data-form-group.is-folded > .data-fields { display: none !important; }
#app .data-form-group.is-folded > .data-group-open { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 1.5px solid var(--v1-ink); border-radius: 11px 8px 12px 9px; background: #fff5d8; color: var(--v1-ink); text-align: left; font-size: 13px; }
#app .data-group-open span { font-size: 12px; color: var(--v1-muted); }
#app .data-group-dialog .data-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#app .data-group-dialog .data-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#app .data-group-dialog .data-field span { min-height: 20px; }
#app .data-group-dialog .data-field :is(input,select,textarea) { box-sizing: border-box; width: 100%; min-height: 44px; padding: 5px; font-size: 16px; }
#app .data-group-dialog textarea { min-height: 110px !important; resize: vertical; }
#app .data-group-dialog .data-field:has(textarea) { grid-column: 1/-1; }
#app .data-group-dialog footer { flex: 0 0 auto; padding: 6px 8px; border-top: 1px dashed #b8945c; }
#app .data-group-dialog footer button { min-height: 44px; width: 100%; font-size: 14px; }
#app .data-form-card .form-error { margin: 0; font-size: 12px; }
#app .data-form-card .draft-note { margin: 0; font-size: 12px; }
#app .data-form-card :is(.data-card-head,.data-step-actions,.form-error,.draft-note) { flex: 0 0 auto; }
#app .member-data-panel .data-form-card { justify-content: flex-start !important; }
#app .member-data-panel .data-form-card .data-card-head { margin: 0 !important; padding: 0 !important; }
#app .data-group-open:focus-visible { outline: 2px solid var(--v1-orange); outline-offset: 2px; }
#app .member-data-panel .trend-metrics { overflow-x: auto !important; overflow-y: hidden !important; }
#app .member-data-panel .trend-metrics .trend-metric { flex: 1 0 auto; }

@media (max-width: 359px) and (min-height: 401px) {
  #app .member-data-panel .data-form-card[data-tab="body"] .data-fields { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #app .member-data-panel .host-v1-data { gap: 3px !important; }
}

@media (max-height: 400px) and (min-width: 500px) {
  #app .member-data-panel .data-form-card[data-tab="body"] .data-fields { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
  #app .member-data-panel .data-form-card:not([data-tab="body"]) .data-form-groups { flex-direction: row; align-items: stretch; }
  #app .member-data-panel .data-form-card:not([data-tab="body"]) .data-form-group { flex: 1 1 0; }
  #app .member-data-panel .data-form-card:not([data-tab="body"]) .data-group-open { height: 66px; flex-direction: column; justify-content: center; }
}
@media (max-height: 500px) {
  #app .data-form-groups:not(:has(> .data-form-group:not(.is-folded))) { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); }
}

@media (min-height: 451px) and (max-height: 600px) {
  #app .member-data-panel .diet-metric-carousel { flex: 1 1 0; height: auto; }
  #app .member-data-panel .diet-metric-page { height: 100%; align-self: stretch; }
  #app .member-data-panel .diet-record-metrics { height: 100%; grid-template-rows: none; grid-auto-rows: minmax(44px,1fr); }
  #app .member-data-panel .diet-record-value { min-height: 44px !important; height: 100% !important; max-height: none; }
}

@media (max-height: 400px) {
  #app .auth-gate .app-header { display: none !important; }
  #app .auth-gate :is(.app-main,.screen-content,.screen-anchor,[data-role="screen"]) { box-sizing: border-box; height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding: 3px !important; }
  #app .auth-gate .empty-state { box-sizing: border-box; min-height: 0 !important; height: auto !important; padding: 5px !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px !important; align-content: center; }
  #app .auth-gate .empty-state > img { display: none !important; }
  #app .auth-gate .empty-state > :is(h2,p,.ui-build-label) { grid-column: 1/-1; margin: 0 !important; }
  #app .auth-gate .empty-state h2 { font-size: 20px !important; line-height: 1.2 !important; }
  #app .auth-gate .empty-state p { font-size: 12px !important; line-height: 1.25 !important; }
  #app .auth-gate .empty-state > small { font-size: 11px !important; line-height: 1.2 !important; }
  #app .auth-gate :is(.member-password-form,.password-reset-form) { grid-column: 1/-1; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px !important; margin: 0 !important; }
  #app .auth-gate .member-password-form > label:first-child { grid-column: 1/-1; }
  #app .auth-gate :is(.member-password-form,.password-reset-form) > label { min-width: 0; margin: 0 !important; gap: 2px !important; font-size: 12px !important; }
  #app .auth-gate :is(.member-password-form,.password-reset-form) input[type="password"] { box-sizing: border-box; width: 100% !important; height: 44px !important; min-height: 44px !important; font-size: 16px !important; padding: 4px 8px !important; }
  #app .auth-gate .remember-login { min-height: 44px; align-items: center; font-size: 11px !important; }
  #app .auth-gate .remember-login input { width: 16px !important; height: 16px !important; }
  #app .auth-gate .empty-state button { height: 44px !important; min-height: 44px !important; padding: 4px !important; margin: 0 !important; font-size: 13px !important; }
  #app .app-shell:not(.auth-gate) .global-nav { height: calc(52px + env(safe-area-inset-bottom)) !important; flex-basis: calc(52px + env(safe-area-inset-bottom)) !important; padding-block: 2px env(safe-area-inset-bottom) !important; }
  #app .global-nav .nav-item img { width: 20px !important; height: 20px !important; }
  #app .global-nav .nav-item small { font-size: 11px !important; }
  #app .member-data-panel .host-v1-data { grid-template-rows: minmax(0,1fr) auto !important; gap: 3px !important; }
  #app .member-data-panel .host-v1-data > :is(.host-page-head,.data-summary,.data-progress-strip,.inline-status) { display: none !important; }
  #app .member-data-panel .data-form-card { padding: 4px !important; gap: 3px !important; }
  #app .member-data-panel .data-form-card .data-card-head { height: 18px !important; min-height: 18px !important; }
  #app .member-data-panel .data-card-head h3 { font-size: 13px !important; }
  #app .member-data-panel .pvt-card:not(.pvt-active-card) { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px !important; gap: 3px !important; }
  #app .member-data-panel .pvt-card:not(.pvt-active-card) > :is(.data-card-head,.pvt-fields,.form-error) { grid-column: 1/-1; }
  #app .member-data-panel .pvt-card :is(.pvt-copy,.draft-note) { display: none !important; }
  #app .member-data-panel .pvt-card :is(.pvt-tools,.data-step-actions) { display: contents !important; }
  #app .member-data-panel .pvt-card .pvt-tools button { font-size: 11px !important; min-width: 0; }
  #app .member-data-panel .host-v1-trends { grid-template-rows: 44px minmax(0,1fr) !important; }
  #app .member-data-panel .host-v1-trends > :is(.host-page-head,.trend-ranges,.trend-groups,.trend-metrics) { display: none !important; }
  #app .trend-compact-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  #app .trend-compact-controls button { min-height: 44px; font-size: 13px; border: 1.5px solid var(--v1-ink); border-radius: 12px; background: #fff2ca; }
  #app .member-data-panel .trend-chart-card > .data-card-head { display: none; }
  #app .member-data-panel .trend-summary { min-height: 34px !important; flex-basis: 34px !important; }
  #app .member-data-panel .diet-calendar-heading { min-height: 24px; flex-wrap: nowrap; }
  #app .member-data-panel .diet-calendar-heading h3 { display: none; }
}

/* The data view stays fixed; only its record pages own the two native scroll axes. */
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) { box-sizing: border-box; flex: 0 0 44px; height: 44px; min-height: 44px; min-width: 0; }
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; padding: 0; }
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) button { box-sizing: border-box; min-width: 0; width: 100%; height: 44px; min-height: 44px; padding: 2px; border: 0; border-radius: 0; background: transparent; font-size: 13px; white-space: nowrap; }
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) button[aria-selected="true"],
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) button.is-active { border-bottom: 3px solid #315c56; color: #493728; font-weight: 700; }
#app .member-data-panel :is(.diet-record-tabs,.calendar-record-tabs) button:focus-visible { outline: 2px solid #d77438; outline-offset: 1px; }
#app .member-data-panel .calendar-record-pages { box-sizing: border-box; display: flex; flex: 1 1 0; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; overscroll-behavior-y: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#app .member-data-panel .calendar-record-pages::-webkit-scrollbar,
#app .member-data-panel .calendar-meals-pages::-webkit-scrollbar { display: none; }
#app .member-data-panel .calendar-record-page[data-tab] { box-sizing: border-box; display: flex; flex: 0 0 100%; flex-direction: column; width: 100%; height: 100%; min-width: 100%; min-height: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
#app .member-data-panel .calendar-record-page .diet-record-viewport { box-sizing: border-box; flex: 1 1 0 !important; width: 100%; height: 100%; min-width: 0; min-height: 0 !important; overflow: hidden; }
#app .member-data-panel .calendar-meals-pages { box-sizing: border-box; display: flex; flex: 1 1 0; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-x: auto; overscroll-behavior-y: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#app .member-data-panel .calendar-meals-page { box-sizing: border-box; display: grid; flex: 0 0 100%; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 4px; width: 100%; height: 100%; min-width: 0; min-height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
#app .member-data-panel .calendar-meals-page:not(:has(> .diet-meal-mini:nth-child(3))),
#app .member-data-panel .calendar-meals-page[data-capacity="2"] { grid-template-rows: minmax(0,1fr); }
#app .member-data-panel .calendar-scroll .diet-calendar-week { flex: 0 0 48px; height: 48px; min-height: 48px; }
#app .member-data-panel .calendar-scroll .diet-calendar-day { height: 48px !important; min-height: 48px !important; max-height: 48px; }
#app .member-data-panel .calendar-scroll .diet-calendar-weekdays { flex: 0 0 16px; }
#app .calendar-short-month,#app .calendar-short-space { display: none; }
@media (max-height:400px) {
  #app .member-data-panel .diet-calendar-heading { display: none; }
  #app .member-data-panel .calendar-scroll :is(.diet-calendar-week,.diet-calendar-weekdays) { grid-template-columns: repeat(8,minmax(0,1fr)); }
  #app .calendar-short-space { display: block; }
  #app .calendar-short-month { display: block; min-height:44px; padding:2px; font-size:13px; background:#ffe69a; border:1px solid #604933; border-radius:9px; }
}
#app .member-data-panel .calendar-record-dots { display: flex; flex: 0 0 8px; align-items: center; justify-content: center; gap: 6px; height: 8px; min-height: 8px; line-height: 0; }
#app .member-data-panel .calendar-record-dots i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #c7b9a5; }
#app .member-data-panel .calendar-record-dots i.is-current { background: #315c56; }
#app .member-data-panel .calendar-meals-dots { display: flex; flex: 0 0 10px; align-items: center; justify-content: center; gap: 6px; height: 10px; min-height: 10px; line-height: 0; }
#app .member-data-panel .calendar-meals-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #c7b9a5; }
#app .member-data-panel .calendar-meals-dots i.is-current { background: #315c56; }

@media (prefers-reduced-motion: reduce) {
  #app .member-data-panel :is(.calendar-record-pages,.calendar-meals-pages) { scroll-behavior: auto; }
}