:root { --oc-bg:#f4f7f5; --oc-accent:#0f4c5c; --oc-warm:#e36414; --oc-ok:#2a9d8f; }
html,body{height:100%}
body{background:#83d4fa;}
.app-shell{height:100dvh;display:flex;flex-direction:column;background:var(--oc-bg)}
.app-body{flex:1;display:flex;min-height:0}
.app-sidebar{width:220px;background:var(--oc-bg)}
.app-content{flex:1;overflow:auto;background:var(--oc-bg)}
.login-shell{max-width:460px}
.login-card{margin:0 auto;max-width:420px;width:100%}
.login-passkey-btn{min-width:44px}
#content.diary-active{
  padding-top:0 !important;
  touch-action:pan-y;
}
#content.insights-active{
  padding-top:0 !important;
}
.mobile-tabs{display:flex;align-items:center;gap:.35rem;overflow:hidden;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));position:fixed;left:0;right:0;bottom:0;z-index:1030;box-shadow:0 -2px 8px rgba(0,0,0,.08);background:var(--oc-bg)}
.app-brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.app-brand-image{
  display:block;
  width:40px;
  max-width:100%;
  height:auto;
  -webkit-mask-image: radial-gradient(circle, #000 62%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.45) 86%, transparent 100%);
  mask-image: radial-gradient(circle, #000 62%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.45) 86%, transparent 100%);
}
.mobile-tabs-brand-image{width:36px}
.mobile-tabs-brand-wrap{display:flex;flex-direction:column;align-items:flex-end;line-height:1;margin-left:auto;text-align:right}
.app-install-slot{display:flex;flex-direction:column;align-items:inherit;gap:.3rem;margin-top:.2rem}
.pwa-install-btn{white-space:nowrap}
.pwa-install-help{max-width:170px;font-size:.7rem;line-height:1.2;color:#6c757d;display:flex;align-items:flex-start;gap:.35rem}
.pwa-install-help i{font-size:.85rem;line-height:1.1;margin-top:.02rem}
.mobile-install-slot{align-items:flex-end}
.mobile-install-slot .pwa-install-help{max-width:150px;justify-content:flex-end;text-align:right}
.mobile-tabs #mobileNav{order:1}
.mobile-tabs .mobile-tabs-brand-wrap{order:2}
.account-section-select{
  border-color:var(--oc-accent);
  box-shadow:0 0 0 .12rem rgba(15,76,92,.12);
  font-weight:600;
}
.goal-macro-row{gap:.35rem !important;justify-content:center}
.goal-macro-row .goal-macro-label{min-width:88px;font-weight:600;text-align:center}
.goal-macro-row .goal-unit{min-width:auto;text-align:center;color:#6c757d;margin-left:0}
.goal-value-wrap{display:inline-flex;align-items:center;gap:0}
.goal-macro-input{width:8ch;min-width:8ch;max-width:8ch;text-align:center;padding-left:.2rem;padding-right:.2rem}
.goal-header-row{position:relative;display:flex;align-items:center;min-height:2rem}
.goal-header-row .form-check{position:relative;z-index:1}
.goal-header-title{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.app-version{font-size:.68rem;line-height:1;color:#6c757d}
#mobileNav{display:flex;align-items:center;gap:.35rem;overflow-x:auto;overflow-y:hidden;flex:1 1 auto}
.mobile-tabs .btn,.app-sidebar .btn{min-height:40px}
.mobile-tabs .btn{white-space:nowrap;flex:0 0 auto}
.mobile-tabs .nav-btn-mobile{min-width:40px;padding-left:.55rem;padding-right:.55rem}
.mobile-tabs .nav-btn-mobile.nav-btn-diary{min-width:52px;padding-left:.78rem;padding-right:.78rem}
.mobile-tabs .nav-btn-mobile.nav-btn-account{margin-left:auto}
.mobile-tabs .nav-btn-mobile.nav-btn-ai-suggest{min-width:46px}
.mobile-tabs .nav-btn-mobile.btn-outline-secondary{
  color:#0d6efd;
  border-color:#86b7fe;
  background:#fff;
}
.mobile-tabs .nav-btn-mobile.btn-outline-secondary:hover,
.mobile-tabs .nav-btn-mobile.btn-outline-secondary:focus{
  color:#0b5ed7;
  border-color:#0d6efd;
  background:#eef5ff;
}
.mobile-tabs .nav-btn-mobile i{font-size:1.55rem;line-height:1}
.mobile-tabs .nav-btn-mobile.nav-btn-diary-goal{
  background:linear-gradient(
    0deg,
    #72d7a3 0%,
    #72d7a3 calc(var(--diary-nav-center,100%) - var(--diary-nav-spread,0%)),
    #ffd28a var(--diary-nav-center,100%),
    #f7dbdb calc(var(--diary-nav-center,100%) + var(--diary-nav-spread,0%)),
    #f7dbdb 100%
  ) !important;
  color:#0b2239 !important;
  border-color:#9fb7cf !important;
  box-shadow:inset 0 0 8px rgba(255,210,138,.45);
}
.mobile-tabs .nav-btn-mobile.nav-btn-diary-goal i{color:#0b2239}
.mobile-tabs .nav-btn-mobile.nav-btn-ai-suggest i{font-size:1.25rem}
.debug-splash-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#83d4fa;
}
.debug-splash-overlay img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.debug-splash-note{
  position:absolute;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#0f4c5c;
  font-size:.75rem;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.app-sidebar .btn{text-align:left}
.table-responsive{overflow-y:visible}
.dropdown-menu{z-index:1085}
.action-menu .dropdown-menu{margin-bottom:.35rem}
.modal-open .echarts-tooltip,
.modal-open [class*="echarts-tooltip"]{display:none !important}
.skeleton{height:16px;border-radius:8px;background:linear-gradient(90deg,#e8ecef,#f8f9fa,#e8ecef);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.badge-verified{background:var(--oc-ok)}
.badge-verified-icon{
  margin-left:.35rem;
  width:1.1rem;
  height:1.1rem;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.badge-verified-icon i{
  font-size:.72rem;
  line-height:1;
}
.search-wrap{position:relative}
.search-wrap .form-control{padding-right:2.25rem}
.search-wrap .input-group{position:relative}
.scan-mobile-only{display:none !important}
.search-spinner{position:absolute;top:50%;right:.7rem;transform:translateY(-50%);pointer-events:none;z-index:5}
.search-status{position:absolute;right:.25rem;top:calc(100% + .15rem);font-size:.72rem;color:#6c757d;white-space:nowrap}
.result-compact{font-size:.78rem;line-height:1.15}
.food-result-select{cursor:pointer}
.food-result-select.is-selected{
  border-color:var(--oc-accent);
  box-shadow:0 0 0 .16rem rgba(15,76,92,.18);
}
.result-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.result-row{display:grid;grid-template-columns:50ch 22ch 120px;align-items:center;column-gap:.5rem;min-width:0}
.result-name-wrap{min-width:0}
.result-name{min-width:0;max-width:50ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-brand{min-width:0;max-width:50ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;line-height:1.1}
.result-macros{white-space:nowrap;text-align:left}
.result-name,.result-macros{font-size:.86rem}
.result-source{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;white-space:nowrap}
.source-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.source-dot-square{border-radius:2px}
.used-badge{font-size:.68rem;font-weight:500}
.result-missing{font-family:inherit}
.source-local{background:#2a9d8f}
.source-owned{background:#62b9a5}
.source-openfoodfacts{background:#3b82f6}
.source-usda{background:#f59e0b}
.source-bls{background:#6b7280}
.source-external{background:#6b7280}
.result-row.result-row-deviation .result-name,
.result-row.result-row-deviation .result-macros{color:#7b1e1e !important}
.modal .result-row{grid-template-columns:minmax(0,1fr) 18ch 98px}
.modal .result-name{max-width:none}
.recipe-ai-status-list{
  max-height:220px;
  overflow:auto;
  border:1px solid #e9ecef;
  border-radius:.35rem;
  padding:.35rem .5rem;
  background:#fff;
}
.recipe-ai-status-line{
  line-height:1.35;
  padding:.12rem 0;
}
.diary-sticky-bar{
  position:sticky;
  top:0;
  z-index:1020;
  background:var(--oc-bg);
  padding:.25rem 0 .35rem;
}
.insights-sticky-bar{
  position:sticky;
  top:0;
  z-index:1020;
  background:var(--oc-bg);
  margin-top:0;
  padding:.25rem 0 .35rem;
  transform:translateZ(0);
}
.day-swipe-out-left{animation:daySwipeOutLeft .18s ease forwards}
.day-swipe-out-right{animation:daySwipeOutRight .18s ease forwards}
.day-swipe-in-left{animation:daySwipeInLeft .2s ease forwards}
.day-swipe-in-right{animation:daySwipeInRight .2s ease forwards}
@keyframes daySwipeOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-42px);opacity:.12}}
@keyframes daySwipeOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(42px);opacity:.12}}
@keyframes daySwipeInLeft{from{transform:translateX(-30px);opacity:.35}to{transform:translateX(0);opacity:1}}
@keyframes daySwipeInRight{from{transform:translateX(30px);opacity:.35}to{transform:translateX(0);opacity:1}}
.toast-container.toast-offset{
  bottom:20px !important;
}
.diary-date-input{max-width:190px;min-width:190px}
.diary-add-btn{
  min-width:48px;
  min-height:48px;
  padding:.5rem .85rem;
}
.diary-add-btn i{font-size:1.25rem}
.diary-friend-btn{margin-right:.3rem}
.diary-sticky-bar > .d-flex.gap-2{font-size:1.06rem}
.diary-sticky-bar > .d-flex.gap-2 .btn{font-size:1.06rem}
.diary-sticky-bar > .d-flex.gap-2 .form-control{font-size:1.06rem}
.diary-bulk-row{min-height:54px;font-size:1.02rem}
.diary-bulk-row .btn,.diary-bulk-row .form-control,.diary-bulk-row .form-select,.diary-bulk-row label{font-size:1.02rem}
@media (max-width:576px){
  .diary-add-btn{
    min-width:52px;
    min-height:52px;
    padding:.55rem .95rem;
  }
  .diary-add-btn i{font-size:1.35rem}
  .diary-friend-btn{margin-right:.4rem}
  .diary-sticky-bar > .d-flex.gap-2{font-size:1.18rem}
  .diary-sticky-bar > .d-flex.gap-2 .btn{font-size:1.18rem}
  .diary-sticky-bar > .d-flex.gap-2 .form-control{font-size:1.18rem}
  .diary-bulk-row{min-height:60px;font-size:1.1rem}
  .diary-bulk-row .btn,.diary-bulk-row .form-control,.diary-bulk-row .form-select,.diary-bulk-row label{font-size:1.1rem}
}
.diary-goal-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;cursor:pointer;user-select:none}
.diary-goals-row{display:flex;align-items:stretch;gap:.45rem}
.diary-goals-row .diary-goal-cards{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(var(--diary-goal-cols,5),minmax(0,1fr));
  align-items:stretch;
  overflow:hidden;
  gap:.35rem;
}
.diary-goals-row .diary-goal-card{display:flex;justify-content:center}
.diary-metric-card{
  --fiber-track-len:42px;
  width:100%;
  border:none;
  border-radius:.5rem;
  background:transparent;
  padding:.28rem .45rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:.28rem;
}
.diary-fiber-bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.12rem;
}
.diary-fiber-label{font-size:.58rem;color:#6c757d;line-height:1;text-align:center}
.diary-fiber-bar-wrap{
  width:12px;
  height:var(--fiber-track-len);
  border-radius:999px;
  background:#f7dbdb;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.diary-fiber-bar{width:100%;height:0;background:#2fb36d}
.diary-fiber-meta{
  width:100%;
  display:flex;
  justify-content:center;
  text-align:center;
  gap:0;
  font-size:.52rem;
  font-weight:600;
  line-height:1;
}
.diary-suggest-inline-btn{
  flex:0 0 auto;
  align-self:center;
  min-width:44px;
  min-height:44px;
  padding:.35rem .6rem;
}
.diary-suggest-inline-btn i{font-size:1.1rem}
.diary-goal-cards-static{cursor:default}
.diary-goal-cards-static .diary-goal-ring{
  width:64px;
  height:64px;
}
.diary-goal-cards-static .diary-goal-value{font-size:1.02rem}
.diary-goal-cards-static .diary-goal-label{font-size:.68rem}
@media (max-width:576px){
  .diary-metric-card{--fiber-track-len:39px}
  .diary-goal-cards-static .diary-goal-ring{width:60px;height:60px}
  .diary-goal-cards-static .diary-goal-value{font-size:.94rem}
  .diary-goal-cards-static .diary-goal-label{font-size:.64rem}
}
.diary-goal-card{
  border:none;
  border-radius:0;
  background:transparent;
  padding:.3rem .2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.22rem;
}
.diary-goal-ring{
  --ring-fill:0%;
  --ring-color:#2fb36d;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(closest-side,#fff 66%,transparent 67% 100%),
    conic-gradient(var(--ring-color) var(--ring-fill),#e8edf1 0);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.diary-goal-center{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.diary-goal-value{font-weight:700;font-size:.8rem;line-height:1}
.diary-goal-label{font-size:.58rem;color:#6c757d;line-height:1.05;margin-top:0}
@media (max-width:576px){
  .diary-goal-ring{width:39px;height:39px}
  .diary-goal-value{font-size:.72rem}
  .diary-goal-label{font-size:.52rem}
}
@media (min-width:992px){
  .diary-goal-ring{width:58px;height:58px}
  .diary-goal-value{font-size:1rem}
  .diary-goal-label{font-size:.68rem}
  .diary-goal-cards-static .diary-goal-ring{width:74px;height:74px}
  .diary-goal-cards-static .diary-goal-value{font-size:1.1rem}
  .diary-goal-cards-static .diary-goal-label{font-size:.74rem}
  .diary-metric-card{--fiber-track-len:58px}
  .diary-suggest-inline-btn{min-width:52px;min-height:52px}
  .diary-suggest-inline-btn i{font-size:1.22rem}
}
.diary-row{cursor:pointer}
.diary-row.diary-dragging{opacity:.55}
.diary-drag-handle{cursor:grab;touch-action:none}
.diary-drag-zone{touch-action:none}
.diary-touch-dragging{
  user-select:none;
  -webkit-user-select:none;
}
.diary-drag-ghost{
  position:fixed;
  left:0;
  top:0;
  transform:translate(-50%,-120%);
  z-index:2000;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:.65rem;
  border:1px solid #9ec5fe;
  background:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  max-width:80vw;
  font-size:.88rem;
  font-weight:600;
  color:#0a3d62;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.diary-drag-handle-btn{
  width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.5rem;
  border:0;
  background:transparent;
  box-shadow:none;
}
.diary-drag-handle-btn:hover{background:#f1f5f9}
.diary-drag-handle-btn:active{background:#e2e8f0}
.diary-drag-handle-btn:focus{outline:none}
.diary-drag-handle-btn:focus-visible{
  box-shadow:0 0 0 .2rem rgba(15,76,92,.18);
}
.diary-drag-handle-btn .diary-drag-handle{font-size:1.05rem}
.meal-drop-target{transition:background-color .15s ease}
.meal-summary-row{
  min-height:68px;
  padding-top:.8rem;
  padding-bottom:.8rem;
}
.meal-summary-row:not(.drop-ready):not(.drop-available){cursor:pointer}
.meal-drop-target.drop-available{
  background:#eef7ff;
  outline:2px dashed #9ec5fe;
  outline-offset:-2px;
}
.meal-drop-target.drop-ready{
  background:#d6ecff;
  outline:2px solid #4b9dff;
  outline-offset:-2px;
}
@media (max-width:991.98px){
  .diary-drag-handle-btn{
    width:42px;
    height:42px;
  }
  .meal-summary-row{
    min-height:76px;
    padding-top:.95rem;
    padding-bottom:.95rem;
  }
  #day.diary-mobile-drag .diary-row{
    max-height:0;
    opacity:0;
    transform:translateY(-8px);
    margin:0;
    padding-top:0;
    padding-bottom:0;
    border-width:0;
    overflow:hidden;
    pointer-events:none;
    transition:max-height .22s ease,opacity .22s ease,transform .22s ease,padding .22s ease,border-width .22s ease,margin .22s ease;
  }
  #day.diary-mobile-drag .diary-row.diary-dragging{
    max-height:120px;
    opacity:.55;
    transform:none;
    border-width:1px;
    pointer-events:auto;
  }
}
.recipe-item-row{cursor:pointer}
.form-check.form-switch .form-check-input{width:2.5em;height:1.35em;cursor:pointer}
.form-check.form-switch .form-check-label{cursor:pointer}
.diary-check{
  width:1.1rem;
  height:1.1rem;
  margin-top:.15rem;
  cursor:pointer;
  border:2px solid #6c757d;
  border-radius:.3rem;
}
.diary-check:checked{
  background-color:var(--oc-accent);
  border-color:var(--oc-accent);
}
.diary-check:focus{
  box-shadow:0 0 0 .2rem rgba(15,76,92,.2);
}
.diary-entry-check-wrap{
  margin-bottom:.35rem !important;
}
.scenario-day-check.diary-check{
  width:1.2rem;
  height:1.2rem;
}
.diary-edit-modal-content{
  max-height:100dvh;
}
.diary-edit-modal-content .modal-body{
  overflow:auto;
  padding-bottom:5rem;
}
.diary-edit-header-btn{
  font-size:1.06rem;
  padding:.5rem .9rem;
}
.diary-edit-modal-footer{
  position:sticky;
  bottom:0;
  z-index:3;
  background:#fff;
  border-top:1px solid #dee2e6;
}
.account-section-nav{min-width:32px}
.acc-nav-bump{animation:accNavBump .2s ease}
@keyframes accNavBump{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.acc-section-slide-left{animation:accSlideLeft .22s ease}
.acc-section-slide-right{animation:accSlideRight .22s ease}
@keyframes accSlideLeft{0%{transform:translateX(-8px);opacity:.85}100%{transform:translateX(0);opacity:1}}
@keyframes accSlideRight{0%{transform:translateX(8px);opacity:.85}100%{transform:translateX(0);opacity:1}}
.foreign-owner-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:2px;
  background:#6c757d;
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
}
.food-row-shared-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--oc-ok);
  color:#fff;
  font-size:.7rem;
  line-height:1;
}
.food-owner-quiet{
  font-size:.74rem;
  line-height:1.1;
  opacity:.72;
}
@media (max-width: 991.98px){
  html{font-size:14px}
  .scan-mobile-only{display:inline-flex !important}
  .search-spinner{right:2.85rem}
  .app-content{
    padding-left:3px !important;
    padding-right:3px !important;
    padding-bottom:calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }
  .result-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "macros" "source";row-gap:.2rem;align-items:start}
  .modal .result-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "macros" "source";row-gap:.2rem;align-items:start}
  .result-name-wrap{grid-area:name}
  .result-name,.result-brand{white-space:normal;overflow:visible;text-overflow:clip}
  .result-macros{grid-area:macros;white-space:normal}
  .result-source{grid-area:source;justify-self:start;align-items:flex-start;flex-direction:row;gap:.35rem;white-space:normal}
  .result-name{max-width:none}
}