:root{
  color-scheme:dark;
  --page:#091a2d;
  --panel:#122b47;
  --panel-soft:#1b3a5a;
  --date:#173653;
  --text:#f0f6fc;
  --muted:#a9bfd4;
  --blue:#a9d3f4;
  --blue-strong:#61a9df;
  --selected:#438fc5;
  --selected-ink:#ffffff;
  --line:#2b4966;
  --nav-start:#174976;
  --nav-mid:#0d3d6c;
  --nav-end:#082c52;
  --shadow:0 14px 38px #020b1760;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body{touch-action:manipulation}
:root[data-theme="light"]{
  color-scheme:light;
  --page:#eaf2fa;
  --panel:#d3e5f4;
  --panel-soft:#bfd7ec;
  --date:#c8def0;
  --text:#122a42;
  --muted:#536e88;
  --blue:#123d66;
  --blue-strong:#286c9f;
  --selected:#0a3c6d;
  --selected-ink:#ffffff;
  --line:#a6c3dc;
  --shadow:0 12px 30px #1b477012;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--page);scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:var(--page);color:var(--text);transition:background .2s,color .2s}
button{-webkit-tap-highlight-color:transparent;font:inherit}
.app-shell{width:min(100%,620px);min-height:100vh;margin:0 auto;padding:24px 20px 120px}
main{width:100%}
.month-toolbar{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;margin-bottom:17px}
.month-arrow,.today-button{display:grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);cursor:pointer}
.month-arrow{font-size:27px;line-height:1}
.month-arrow:active,.today-button:active,.refresh-button:active{transform:scale(.96)}
.month-heading{text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 4px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.16em}
.site-logo{width:34px;height:34px;flex:none;object-fit:contain;border:1px solid var(--line);border-radius:9px;background:#031534}
.eyebrow-title{display:flex;align-items:center;gap:7px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--blue-strong);box-shadow:0 0 9px #4695cc80}
.month-heading h1{margin:0;font-size:20px;font-weight:750;letter-spacing:-.025em}
.month-controls{display:flex;align-items:center;gap:6px}
.today-button{min-width:54px;padding:0 9px;color:var(--blue);font-size:11px;font-weight:700}
.calendar{display:flex;gap:9px;overflow-x:auto;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.calendar::-webkit-scrollbar{display:none}
.date-card{position:relative;display:flex;flex:0 0 72px;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:95px;border:1px solid transparent;border-radius:20px;background:var(--date);color:var(--blue);cursor:pointer;scroll-snap-align:center;transition:background .2s,color .2s,transform .2s}
.date-card:active{transform:scale(.96)}
.date-card.selected{background:var(--selected);color:var(--selected-ink,#fff)}
.date-number{font-size:29px;font-weight:760;line-height:1}
.date-weekday{font-size:13px;font-weight:620}
.date-selected{font-size:9px;line-height:1.1}
.date-strip-empty{width:100%;margin:12px 0;color:var(--muted);font-size:12px;text-align:center}
.menu-mode{display:flex;flex:none;align-items:center;justify-content:center;gap:13px;margin:13px 0 15px}
.mode-label{color:var(--muted);font-size:13px;font-weight:700;transition:color .2s}
.mode-label.active{color:var(--blue)}
.mode-switch{position:relative;flex:none;width:51px;height:31px;padding:3px;border:2px solid var(--blue-strong);border-radius:99px;background:var(--panel-soft);cursor:pointer;transition:background .2s,border-color .2s}
.mode-switch span{display:block;width:21px;height:21px;border-radius:50%;background:var(--blue-strong);transition:transform .2s,background .2s}
.mode-switch[aria-checked="true"]{border-color:var(--selected);background:var(--selected)}
.mode-switch[aria-checked="true"] span{transform:translateX(18px);background:#fff}
.mode-switch:disabled{opacity:.42;cursor:not-allowed}
.day-detail{overflow:hidden;min-height:260px;padding:19px 18px 16px;border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:25px;background:var(--panel);box-shadow:var(--shadow)}
.detail-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px}
.detail-meta{display:flex;align-items:center;gap:10px;min-width:0}
.detail-date{color:var(--blue);font-size:14px;font-weight:800;letter-spacing:.045em;white-space:nowrap}
.calorie-pill{display:flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #e7b959;border-radius:999px;background:#fff0d0;color:#88520b;font-size:11px;font-weight:740;white-space:nowrap}
.calorie-pill strong{font-size:10px}
.reaction-bar{display:flex;align-items:center;gap:7px;flex:none}
.reaction-button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:47px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:color .18s,background .18s,border-color .18s,transform .18s}
.reaction-button svg{width:19px;height:19px;fill:currentColor}
.reaction-button.reaction-down svg{transform:rotate(180deg)}
.reaction-button.selected{border-color:var(--blue-strong);background:var(--selected);color:var(--selected-ink,#fff)}
.reaction-button:active:not(:disabled){transform:scale(.95)}
.reaction-button:disabled{opacity:.72;cursor:not-allowed}
.reaction-note{max-width:105px;color:var(--muted);font-size:9px;line-height:1.2;text-align:right}
.meal-list{display:grid;gap:12px}
.meal-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:11px;min-height:58px}
.meal-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--panel-soft);font-size:23px}
.meal-copy{display:grid;gap:3px;min-width:0}
.meal-label{color:var(--blue);font-size:12px;font-weight:760;letter-spacing:.015em}
.meal-name{font-size:clamp(16px,4.7vw,20px);font-weight:720;line-height:1.25;overflow-wrap:anywhere}
.meal-search{color:inherit;text-decoration:none;cursor:pointer}
.meal-search:hover{text-decoration:underline;text-decoration-color:var(--blue-strong);text-underline-offset:3px}
.meal-search:focus-visible{outline:2px solid var(--blue-strong);outline-offset:3px;border-radius:3px}
.empty-state{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center}
.empty-state strong{color:var(--text);font-size:16px}
.empty-icon{font-size:30px}
.detail-loading{display:flex;min-height:190px;align-items:center;justify-content:center;gap:11px;color:var(--muted)}
.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--blue-strong);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status-row{display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px;padding:10px 3px 0;color:var(--muted);font-size:10px}
.refresh-button{border:0;background:none;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer}
.refresh-button span{display:inline-block;margin-right:3px;font-size:15px;vertical-align:-1px}
.refresh-button.loading span{animation:spin .8s linear infinite}
.bottom-nav{position:fixed;z-index:5;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,620px);height:calc(76px + env(safe-area-inset-bottom));margin:0 auto;padding:8px 20px calc(8px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0;background:linear-gradient(105deg,var(--nav-start) 0%,var(--nav-mid) 55%,var(--nav-end) 100%);box-shadow:0 -8px 30px #06192d45}
.bottom-nav-main,.bottom-nav-settings{height:49px;border:0;color:#fff;cursor:pointer}
.bottom-nav-main{display:flex;flex:1;align-items:center;justify-content:center;gap:9px;max-width:210px;border-radius:18px;background:#ffffff22;font-size:16px;font-weight:750}
.bottom-nav-main span{font-size:21px}
.bottom-nav-settings{display:grid;place-items:center;width:50px;border-radius:16px;background:transparent;font-size:26px}
.bottom-nav-settings:active{background:#ffffff24}
.bottom-nav-profile{display:grid;flex:none;place-items:center;width:46px;height:46px;border:0;border-radius:15px;background:transparent;color:#fff;opacity:.78;cursor:pointer}
.bottom-nav-profile svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.toast{position:fixed;z-index:10;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);padding:11px 15px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:601px){.app-shell{padding-top:34px}.day-detail{padding:25px}.meal-list{gap:17px}.meal-row{grid-template-columns:66px minmax(0,1fr);min-height:64px}.meal-icon{width:62px;height:62px}}
@media(max-width:600px){
  html,body{height:100%;min-height:0;overflow:hidden}
  .app-shell{display:flex;width:100%;height:100dvh;min-height:0;flex-direction:column;padding:calc(env(safe-area-inset-top) + 7px) 14px calc(76px + env(safe-area-inset-bottom));overflow:hidden}
  main{display:flex;flex:1;min-height:0}
  .menu-panel{display:flex;width:100%;min-height:0;flex:1;flex-direction:column}
  .month-toolbar{flex:none;grid-template-columns:37px 1fr auto;gap:6px;margin-bottom:6px}
  .month-arrow,.today-button{min-width:35px;height:35px;border-radius:11px}
  .month-arrow{font-size:24px}
  .today-button{min-width:48px;padding:0 7px;font-size:10px}
  .eyebrow{gap:6px;margin-bottom:2px;font-size:8px}
  .site-logo{width:29px;height:29px;border-radius:8px}
  .eyebrow-title{gap:5px}
  .month-heading h1{font-size:17px}
  .calendar{flex:none;height:82px;gap:7px;margin:0 -14px;padding:0 14px 5px}
  .date-card{flex-basis:63px;height:75px;gap:3px;border-radius:16px}
  .date-number{font-size:25px}
  .date-weekday{font-size:11px}
  .date-selected{font-size:8px}
  .date-strip-empty{align-self:center;margin:4px 0}
  .menu-mode{gap:10px;margin:6px 0 9px}
  .mode-label{font-size:12px}
  .mode-switch{width:45px;height:28px;padding:2px}
  .mode-switch span{width:20px;height:20px}
  .mode-switch[aria-checked="true"] span{transform:translateX(15px)}
  .day-detail{display:flex;min-height:0;flex:1;flex-direction:column;padding:12px 13px 10px;border-radius:20px}
  .detail-header{display:grid;flex:none;grid-template-columns:1fr auto;gap:5px;margin-bottom:5px}
  .detail-meta{display:contents}
  .detail-date{font-size:12px;letter-spacing:.02em}
  .calorie-pill{gap:4px;padding:5px 7px;font-size:9px}
  .calorie-pill strong{font-size:9px}
  .reaction-bar{grid-column:1/-1;justify-self:end;gap:5px}
  .reaction-button{min-width:43px;height:29px;gap:4px;padding:0 7px;border-radius:10px;font-size:11px}
  .reaction-button svg{width:16px;height:16px}
  .reaction-note{max-width:84px;font-size:8px}
  .meal-list{flex:1;grid-template-rows:repeat(4,minmax(0,1fr));gap:2px;min-height:0}
  .meal-row{grid-template-columns:46px minmax(0,1fr);gap:9px;min-height:0}
  .meal-icon{width:43px;height:43px;font-size:19px}
  .meal-copy{gap:2px;overflow:hidden}
  .meal-label{font-size:10px}
  .meal-name{display:-webkit-box;overflow:hidden;font-size:clamp(14px,4.2vw,17px);line-height:1.18;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .empty-state,.detail-loading{min-height:0;flex:1}
  .empty-state{font-size:12px}
  .status-row{padding:6px 2px 0;font-size:9px}
  .refresh-button{font-size:10px}
  .bottom-nav{height:calc(61px + env(safe-area-inset-bottom));padding:5px 17px calc(5px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .bottom-nav-main,.bottom-nav-settings{height:44px}
  .bottom-nav-main{max-width:165px;font-size:14px}
  .bottom-nav-main span{font-size:18px}
  .bottom-nav-settings{width:44px;font-size:24px}
  .toast{bottom:calc(69px + env(safe-area-inset-bottom))}
}
@media(max-width:600px) and (max-height:700px){
  .app-shell{padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .month-toolbar{margin-bottom:2px}
  .calendar{height:72px}
  .date-card{height:66px}
  .menu-mode{margin:3px 0 5px}
  .day-detail{padding:9px 11px 7px}
  .detail-header{margin-bottom:2px}
  .meal-row{grid-template-columns:39px minmax(0,1fr);gap:8px}
  .meal-icon{width:37px;height:37px;font-size:17px}
  .meal-label{font-size:9px}
  .meal-name{font-size:14px}
  .status-row{padding-top:3px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

[hidden]{display:none!important}
.comments-view{display:flex;width:100%;min-height:0;flex:1;flex-direction:column;gap:12px;color:var(--text)}
.comments-header{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:12px}
.comments-header>div:first-child{min-width:0;flex:1}
.comments-header .eyebrow{justify-content:flex-start}
.comments-header h1{margin:2px 0 0;font-size:23px;letter-spacing:-.03em}
.comments-date{margin:3px 0 0;color:var(--muted);font-size:10px}
.account-badge{display:flex;min-width:0;max-width:100%;align-items:center;justify-content:flex-end;gap:5px;overflow:visible;padding:8px 11px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--blue);font-size:12px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;white-space:normal}
.account-controls{display:flex;min-width:0;max-width:52%;flex:0 1 52%;align-items:center;justify-content:flex-end;gap:7px}
.sign-out-button{min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--blue);font-size:11px;font-weight:720}
.account-panel,.comment-compose{flex:none;padding:13px;border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.comment-login-prompt{display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:15px;background:var(--panel);box-shadow:var(--shadow)}
.comment-login-prompt p{margin:0;color:var(--muted);font-size:11px;font-weight:700}
.auth-tabs{display:flex;gap:6px;margin-bottom:10px;padding:3px;border-radius:12px;background:var(--page)}
.auth-tab{flex:1;min-height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.auth-tab.active{background:var(--selected);color:var(--selected-ink,#fff)}
.account-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-field{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:10px;font-weight:700}
.form-field input,.comment-compose textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;outline:none;background:var(--page);color:var(--text);font:inherit;font-size:13px}
.form-field input{height:38px;padding:0 10px}
.form-field input:focus,.comment-compose textarea:focus{border-color:var(--blue-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue-strong) 23%,transparent)}
.primary-action{min-height:38px;padding:0 14px;border:0;border-radius:11px;background:var(--selected);color:var(--selected-ink,#fff);font-size:12px;font-weight:760;cursor:pointer}
.account-form>.primary-action{align-self:end}
.primary-action:disabled{opacity:.55;cursor:wait}
.primary-action.loading{opacity:.75}
.account-note{grid-column:1/-1;margin:0;color:var(--muted);font-size:9px;line-height:1.35}
.form-message{grid-column:1/-1;min-height:0;margin:0;color:var(--blue);font-size:10px;line-height:1.35}
.form-message.error{color:#e88989}
.compose-top,.compose-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px}
.compose-top{margin-bottom:8px;color:var(--blue);font-size:12px;font-weight:750}
.compose-top #signedInName{display:flex;align-items:center;gap:5px}
.text-action{padding:3px 6px;border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}
.comment-compose form{display:grid;gap:7px}
.comment-compose textarea{min-height:64px;padding:9px 10px;resize:vertical}
.compose-bottom .primary-action{min-height:34px}
.retention-note{flex:none;margin:-4px 2px 0;color:var(--muted);font-size:10px}
.bulk-comment-tools{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.bulk-comment-tools[hidden]{display:none!important}
.bulk-comment-selection-count{flex:1;color:var(--muted);font-size:10px;font-weight:700}
.bulk-select-all{min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);color:var(--blue);font-size:10px;font-weight:700;cursor:pointer}
.bulk-select-all:disabled{opacity:.45;cursor:not-allowed}
.bulk-delete{min-height:30px;padding:0 10px;font-size:10px}
.bulk-delete:disabled{opacity:.45;cursor:not-allowed}
.comment-limit-note{flex:none;margin:0;padding:8px 10px;border-radius:10px;background:var(--panel);color:var(--muted);font-size:10px}
.comments-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:8px;overflow:auto;padding:1px 2px 8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.comment-card{flex:none;padding:12px 13px;border:1px solid color-mix(in srgb,var(--text) 6%,transparent);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.comment-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.comment-author{display:flex;min-width:0;align-items:center;gap:5px;overflow:visible;color:var(--blue);font-size:12px}
.comment-author-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vip-name{color:#d94e5d!important}
:root:not([data-theme="light"]) .vip-name{color:#ff7886!important}
.vip-label{flex:none;padding:2px 5px;border:1px solid #d94e5d55;border-radius:999px;background:#d94e5d18;color:#d94e5d;font-size:8px;font-weight:850;letter-spacing:.04em;line-height:1.2}
:root:not([data-theme="light"]) .vip-label{border-color:#ff788655;background:#ff788618;color:#ff8a96}
.comment-author-block{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:6px 8px}
.comment-author-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.comment-author-action{min-height:24px;padding:0 7px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);font-size:9px;font-weight:750;cursor:pointer}
.comment-author-action.block{color:#e88989}
.comment-author-action.privilege{color:var(--blue)}
.comment-author-action:disabled{opacity:.55;cursor:wait}
.comment-time{flex:none;color:var(--muted);font-size:10px}
.comment-body{margin:8px 0 10px;font-size:13px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.comment-actions{display:flex;justify-content:flex-end;gap:7px}
.comment-vote{display:flex;align-items:center;gap:5px;min-width:55px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);color:var(--muted);font-size:11px;cursor:pointer}
.comment-vote.selected{border-color:var(--blue-strong);background:var(--selected);color:var(--selected-ink,#fff)}
.comment-vote:disabled{opacity:.48;cursor:not-allowed}
.comments-loading,.comments-empty{display:grid;min-height:90px;flex:1;place-items:center;padding:16px;color:var(--muted);font-size:12px;text-align:center}
.bottom-nav-main,.bottom-nav-comments{height:49px;border:0;color:#fff;cursor:pointer}
.bottom-nav-main{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;max-width:none;border-radius:16px;background:transparent;font-size:14px;font-weight:740;opacity:.78}
.bottom-nav-comments{display:flex;flex:1;align-items:center;justify-content:center;gap:7px;border-radius:16px;background:transparent;font-size:14px;font-weight:740;opacity:.78}
.bottom-nav-main.active,.bottom-nav-comments.active,.bottom-nav-profile.active{background:#ffffff24;opacity:1}
.bottom-nav-comments span{font-size:18px}
.comments-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#a9d3f4;color:#09213a;font-size:10px;font-weight:800;line-height:1}
.bottom-nav-comments .comments-count{font-size:10px}
.comment-management{display:flex;align-items:center;gap:6px;margin-top:8px}
.comment-manage-button,.comment-edit-button{min-height:29px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);color:var(--blue);font-size:10px;font-weight:700;cursor:pointer}
.comment-manage-button.delete{color:#e88989}
.comment-editor{display:block;width:100%;min-height:70px;margin:8px 0;padding:9px 10px;border:1px solid var(--blue-strong);border-radius:10px;background:var(--page);color:var(--text);font:inherit;font-size:12px;line-height:1.4;resize:vertical}
.comment-edit-actions{display:flex;justify-content:flex-end;gap:7px;margin:0 0 8px}
.comment-edit-actions .primary-action{min-height:30px}
.vip-panel{flex:none;padding:11px;border:1px solid var(--blue-strong);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.vip-panel-heading{display:grid;gap:3px;margin-bottom:8px;color:var(--blue);font-size:12px}
.vip-panel-heading span{color:var(--muted);font-size:9px;font-weight:500}
.block-form{display:flex;gap:7px}
.block-form input{min-width:0;flex:1;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--text);font:inherit;font-size:12px}
.block-form .primary-action{min-height:36px}
.blocked-users-list{display:grid;gap:5px;max-height:116px;overflow:auto;margin-top:7px}
.blocked-user-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:9px;background:var(--panel-soft);font-size:11px}
.blocked-user-name{overflow:hidden;color:var(--text);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.blocked-user-empty{padding:6px 2px;color:var(--muted);font-size:10px}
.unblock-button{flex:none;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--blue);font-size:10px;font-weight:700;cursor:pointer}
.unblock-button:disabled{opacity:.55;cursor:wait}
.admin-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.admin-section-heading .vip-panel-heading{min-width:0;flex:1}
.admin-list-status{margin:2px 0 7px;color:var(--muted);font-size:10px}
.admin-list{display:grid;gap:6px;max-height:210px;overflow:auto;padding:1px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.active-users-list{max-height:150px}
.admin-user-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);font-size:11px}
.admin-user-seen{flex:none;color:var(--muted);font-size:9px}
.admin-comment-search{width:100%;height:35px;margin:0 0 7px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--page);color:var(--text);font:inherit;font-size:11px}
.admin-comment-card{display:grid;gap:6px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft)}
.admin-comment-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.admin-comment-header strong{min-width:0;overflow-wrap:anywhere;color:var(--blue);font-size:11px}
.admin-comment-header span{flex:none;color:var(--muted);font-size:9px;text-align:right}
.admin-comment-body{margin:0;color:var(--text);font-size:11px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-wrap}
.admin-comment-actions{display:flex;justify-content:flex-end}
.admin-live-section,.admin-comments-section{margin-top:12px;padding-top:12px}
.admin-dashboard-view{display:flex;width:100%;min-height:0;flex:1;flex-direction:column;gap:12px;overflow:auto;padding:2px 1px 12px;color:var(--text);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.admin-dashboard-view>.section-header{flex:none}
.admin-dashboard-view>.section-header h1{margin-bottom:4px}
.admin-dashboard-view>.section-header p{margin:0;color:var(--muted);font-size:11px}
.admin-panel-tabs,.admin-subtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:none;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.admin-panel-tab,.admin-subtab{min-width:0;min-height:36px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:720;cursor:pointer;touch-action:manipulation}
.admin-panel-tab.active,.admin-subtab.active{background:var(--panel-soft);color:var(--blue)}
.admin-subtabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-panel-content{display:flex;min-height:0;flex:1;flex-direction:column;gap:10px;overflow:auto;padding:1px 1px 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.admin-dashboard-card{flex:none;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow)}
.admin-dashboard-card .admin-section-heading{margin-bottom:5px}
.admin-panel-card{display:flex;min-height:0;flex:1;flex-direction:column;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow)}
.admin-panel-card>.vip-panel-heading{flex:none}
.admin-panel-card .admin-comments-list{max-height:min(52vh,480px)}
.admin-panel-content>.admin-panel-card[hidden]{display:none!important}
.admin-panel-content>.admin-subtabs{margin-bottom:1px}
.daily-user-stats-list{max-height:260px}
.daily-user-stat-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.daily-user-stat-count{flex:none;color:var(--blue);font-size:10px;font-weight:800}
.profile-view{display:flex;width:100%;min-height:0;flex:1;flex-direction:column;gap:14px;overflow:auto;padding:2px 1px 12px;color:var(--text);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.profile-header{flex:none}
.profile-header .eyebrow{justify-content:flex-start}
.profile-header h1{margin:2px 0 3px;font-size:23px;letter-spacing:-.03em}
.profile-header>p:last-child{margin:0;color:var(--muted);font-size:11px}
.profile-card,.profile-guest-panel,.profile-theme-panel{display:flex;flex:none;align-items:center;gap:12px;padding:15px;border:1px solid color-mix(in srgb,var(--text) 8%,transparent);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.profile-avatar{display:grid;flex:none;place-items:center;width:52px;height:52px;border-radius:17px;background:var(--panel-soft);color:var(--blue);font-size:20px}
.profile-avatar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.profile-user-copy{display:grid;min-width:0;flex:1;gap:3px}
.profile-kicker{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em}
.profile-user-copy strong{overflow:hidden;color:var(--blue);font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.profile-user-copy>span:last-child{color:var(--muted);font-size:10px}
.profile-guest-panel{justify-content:space-between}
.profile-guest-panel p{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
.profile-theme-panel{display:block}
.profile-admin-panel{width:100%;margin:0}
.profile-admin-section{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.profile-section-heading h2{margin:0;color:var(--text);font-size:14px}
.profile-section-heading p{margin:4px 0 12px;color:var(--muted);font-size:10px}
.theme-wheel-wrap{display:grid;place-items:center;padding:2px 0 7px}
.theme-color-wheel{position:relative;width:240px;height:240px;max-width:100%;border:1px solid #ffffff75;border-radius:50%;background:conic-gradient(#f35100 0deg 28.5deg,#fff 28.5deg 30deg,#ed2923 30deg 58.5deg,#fff 58.5deg 60deg,#a31f82 60deg 88.5deg,#fff 88.5deg 90deg,#6322a1 90deg 118.5deg,#fff 118.5deg 120deg,#542ab3 120deg 148.5deg,#fff 148.5deg 150deg,#1c49eb 150deg 178.5deg,#fff 178.5deg 180deg,#008a93 180deg 208.5deg,#fff 208.5deg 210deg,#00b74d 210deg 238.5deg,#fff 238.5deg 240deg,#83dc35 240deg 268.5deg,#fff 268.5deg 270deg,#ffe600 270deg 298.5deg,#fff 298.5deg 300deg,#ffb500 300deg 328.5deg,#fff 328.5deg 330deg,#ff8500 330deg 358.5deg,#fff 358.5deg 360deg);box-shadow:0 8px 22px #06192d35}
.theme-color-option{position:absolute;left:50%;top:50%;width:36px;height:36px;padding:0;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 2px 7px #06192d75;cursor:pointer;touch-action:manipulation}
.theme-color-option:focus-visible{outline:3px solid var(--text);outline-offset:2px;z-index:2}
.theme-color-option[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:2px;box-shadow:0 0 0 3px var(--panel),0 2px 8px #0007;z-index:1}
.theme-color-option:nth-of-type(1){left:calc(50% + 21px);top:calc(50% - 79px)}
.theme-color-option:nth-of-type(2){left:calc(50% + 58px);top:calc(50% - 58px)}
.theme-color-option:nth-of-type(3){left:calc(50% + 79px);top:calc(50% - 21px)}
.theme-color-option:nth-of-type(4){left:calc(50% + 79px);top:calc(50% + 21px)}
.theme-color-option:nth-of-type(5){left:calc(50% + 58px);top:calc(50% + 58px)}
.theme-color-option:nth-of-type(6){left:calc(50% + 21px);top:calc(50% + 79px)}
.theme-color-option:nth-of-type(7){left:calc(50% - 21px);top:calc(50% + 79px)}
.theme-color-option:nth-of-type(8){left:calc(50% - 58px);top:calc(50% + 58px)}
.theme-color-option:nth-of-type(9){left:calc(50% - 79px);top:calc(50% + 21px)}
.theme-color-option:nth-of-type(10){left:calc(50% - 79px);top:calc(50% - 21px)}
.theme-color-option:nth-of-type(11){left:calc(50% - 58px);top:calc(50% - 58px)}
.theme-color-option:nth-of-type(12){left:calc(50% - 21px);top:calc(50% - 79px)}
.theme-color-wheel-center{position:absolute;inset:24%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:50%;background:var(--panel);color:var(--blue);box-shadow:inset 0 0 22px #06192d12;font-size:11px;font-variant-numeric:tabular-nums;font-weight:800;pointer-events:none}
.theme-color-wheel-center span{padding:4px 7px;border-radius:999px;background:var(--panel-soft)}
.accent-reset{width:100%;min-height:34px;margin-top:9px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--blue);font-size:10px;font-weight:750;cursor:pointer}
html[data-account-blocked="true"] #commentsTab,html[data-account-blocked="true"] #profileTab,html[data-account-blocked="true"] #panelTab,html[data-account-blocked="true"] .reaction-bar{display:none!important}
@media(max-width:600px){
  .comments-view{gap:7px}
  .comments-header{min-height:38px;gap:6px}
  .comments-header .site-logo{width:25px;height:25px}
  .comments-header h1{font-size:19px}
  .comment-login-prompt{padding:9px 10px}
  .comment-login-prompt p{font-size:10px}
  .account-controls{flex-wrap:wrap;flex-basis:50%;max-width:50%;gap:4px}
  .account-badge{flex:0 1 100%;padding:6px 8px;font-size:10px;text-align:right}
  .sign-out-button{min-height:30px;padding:0 8px;font-size:10px}
  .account-note{font-size:8px}
  .form-message{font-size:9px}
  .retention-note{font-size:9px}
  .bulk-comment-tools{gap:4px;padding:6px 7px}
  .bulk-comment-selection-count{font-size:9px}
  .bulk-select-all,.bulk-delete{min-height:27px;padding:0 7px;font-size:9px}
  .comment-card{padding:10px 11px;border-radius:14px}
  .comment-body{margin:6px 0 8px;font-size:12px}
  .comment-vote{height:28px}
  .bottom-nav{gap:6px;padding-right:12px;padding-left:12px}
  .bottom-nav-main,.bottom-nav-comments{height:42px;gap:5px;font-size:12px}
  .bottom-nav-main span,.bottom-nav-comments span{font-size:16px}
  .comments-count{min-width:18px;height:18px;padding:0 4px;font-size:9px}
  .bottom-nav-comments .comments-count{font-size:9px}
  .bottom-nav-profile{width:40px;height:40px}
  .profile-view{gap:9px}
  .profile-card,.profile-guest-panel,.profile-theme-panel{padding:12px;border-radius:15px}
  .profile-avatar{width:46px;height:46px;border-radius:14px}
  .profile-guest-panel p{font-size:10px}
  .comment-manage-button,.comment-edit-button{min-height:27px}
  .comment-author-action{min-height:23px;padding:0 6px;font-size:8px}
}
@media(max-width:360px){.account-form{grid-template-columns:1fr}.account-form>.primary-action{min-height:32px}.account-note{line-height:1.2}.bottom-nav-profile{width:36px;height:38px}}

/* Privileged users can personalize the color palette on this device. */
:root[data-accent="custom"]{--page:color-mix(in srgb,#091a2d 94%,var(--custom-accent));--panel:color-mix(in srgb,#122b47 90%,var(--custom-accent));--panel-soft:color-mix(in srgb,#1b3a5a 83%,var(--custom-accent));--date:color-mix(in srgb,#173653 84%,var(--custom-accent));--blue:color-mix(in srgb,var(--custom-accent) 50%,#f0f6fc);--blue-strong:var(--custom-accent);--selected:var(--custom-accent);--selected-ink:var(--custom-ink,#fff);--line:color-mix(in srgb,#2b4966 72%,var(--custom-accent));--nav-start:color-mix(in srgb,#174976 78%,var(--custom-accent));--nav-mid:color-mix(in srgb,#0d3d6c 82%,var(--custom-accent));--nav-end:color-mix(in srgb,#082c52 86%,var(--custom-accent))}
:root[data-theme="light"][data-accent="custom"]{--page:color-mix(in srgb,#eaf2fa 94%,var(--custom-accent));--panel:color-mix(in srgb,#d3e5f4 90%,var(--custom-accent));--panel-soft:color-mix(in srgb,#bfd7ec 82%,var(--custom-accent));--date:color-mix(in srgb,#c8def0 82%,var(--custom-accent));--blue:color-mix(in srgb,var(--custom-accent) 44%,#122a42);--blue-strong:var(--custom-accent);--selected:var(--custom-accent);--selected-ink:var(--custom-ink,#fff);--line:color-mix(in srgb,#a6c3dc 72%,var(--custom-accent));--nav-start:color-mix(in srgb,#174976 78%,var(--custom-accent));--nav-mid:color-mix(in srgb,#0d3d6c 82%,var(--custom-accent));--nav-end:color-mix(in srgb,#082c52 86%,var(--custom-accent))}

/* Refined blue/navy layout */
:root{--page:#07182d;--panel:#102c49;--panel-soft:#193b5c;--date:#142f4b;--text:#f5f8fc;--muted:#a8bfd5;--blue:#a9d3f4;--blue-strong:#69b5e5;--selected:#4da8df;--selected-ink:#fff;--line:#345573;--nav-start:#0e2945;--nav-mid:#0e2945;--nav-end:#0e2945;--shadow:0 12px 30px #020b1725}
:root[data-theme="light"]{--page:#edf3f9;--panel:#fff;--panel-soft:#e7f0f8;--date:#e4eef7;--text:#152b41;--muted:#60768c;--blue:#254e73;--blue-strong:#438fc5;--selected:#438fc5;--selected-ink:#fff;--line:#c9d7e4;--nav-start:#fff;--nav-mid:#fff;--nav-end:#fff;--shadow:0 10px 26px #17324d0a}
.app-shell{width:min(100%,560px);padding:15px 18px calc(90px + env(safe-area-inset-bottom))}
main{display:flex;min-height:calc(100vh - 112px);flex-direction:column;gap:14px}
.app-header{display:flex;flex:none;align-items:center;justify-content:space-between;min-height:40px}
.brand-lockup{display:flex;align-items:center;gap:9px;color:var(--text);font-size:18px;font-weight:780;letter-spacing:-.035em}
.site-logo{width:28px;height:28px;border:0;border-radius:7px;background:transparent;object-fit:contain}
.top-profile-button{display:grid;flex:none;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.top-profile-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.top-profile-button:hover,.top-profile-button.active{border-color:var(--blue-strong);background:var(--panel-soft)}
.top-profile-button:active{transform:scale(.96)}
.menu-panel{display:flex;width:100%;min-height:0;flex:1;flex-direction:column;gap:11px}
.month-toolbar{grid-template-columns:35px 1fr auto;gap:8px;margin:0}
.month-arrow,.today-button{min-width:34px;height:34px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--text)}
.month-arrow{font-size:23px}
.month-heading{text-align:left}
.month-heading h1{font-size:14px;font-weight:700;letter-spacing:0;color:var(--muted)}
.month-controls{gap:5px}
.today-button{min-width:48px;padding:0 8px;color:var(--blue);font-size:10px}
.calendar{gap:8px;margin:0 -2px;padding:0 2px 4px;scroll-padding-inline:2px}
.date-card{flex:0 0 61px;height:76px;gap:5px;border:1px solid transparent;border-radius:16px;background:var(--date);color:var(--blue);scroll-snap-align:center}
.date-card.selected{background:var(--selected);color:var(--selected-ink)}
.date-number{font-size:24px}
.date-weekday{font-size:11px;font-weight:650}
.date-selected{display:none}
.menu-mode{gap:10px;margin:0 0 1px}
.mode-label{font-size:11px}
.mode-switch{width:43px;height:26px;padding:2px;border-width:1px}
.mode-switch span{width:18px;height:18px}
.mode-switch[aria-checked="true"] span{transform:translateX(15px)}
.day-detail{display:flex;min-height:0;flex:1;flex-direction:column;gap:10px;overflow:hidden;padding:17px 16px 13px;border:1px solid color-mix(in srgb,var(--text) 5%,transparent);border-radius:22px;background:var(--panel);box-shadow:none}
.detail-header{display:grid;flex:none;gap:9px;margin:0}
.detail-date{color:var(--blue);font-size:12px;font-weight:720;letter-spacing:.01em}
.detail-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.detail-menu-heading h2{margin:0;font-size:20px;font-weight:760;letter-spacing:-.035em}
.calorie-pill{gap:5px;padding:6px 9px;border:0;border-radius:9px;background:var(--panel-soft);color:var(--blue);font-size:10px;font-weight:700}
.calorie-pill strong{font-size:10px}
.meal-list{display:grid;flex:1;grid-template-rows:repeat(4,minmax(0,1fr));gap:0;min-height:0}
.meal-row{grid-template-columns:43px minmax(0,1fr);gap:11px;min-height:0;padding:7px 0;border-bottom:1px solid var(--line)}
.meal-row:last-child{border-bottom:0}
.meal-icon{width:39px;height:39px;border:0;border-radius:13px;background:var(--panel-soft);font-size:19px}
.meal-copy{gap:3px}
.meal-label{font-size:10px}
.meal-name{font-size:clamp(14px,4.2vw,17px);font-weight:680;line-height:1.2}
.detail-footer{display:flex;flex:none;justify-content:stretch;padding-top:2px}
.reaction-bar{display:flex;width:100%;gap:8px}
.reaction-button{flex:1;min-width:0;height:40px;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--text);font-size:13px}
.reaction-button svg{width:18px;height:18px}
.reaction-button.selected{border-color:var(--selected);background:var(--selected);color:var(--selected-ink)}
.reaction-note{max-width:90px;font-size:9px}
.status-row{padding:0 2px;color:var(--muted);font-size:9px}
.refresh-button{font-size:10px}
.bottom-nav{justify-content:stretch;gap:7px;width:min(100%,560px);height:calc(70px + env(safe-area-inset-bottom));padding:6px 14px calc(6px + env(safe-area-inset-bottom));border:1px solid var(--line);border-bottom:0;border-radius:19px 19px 0 0;background:var(--panel);box-shadow:0 -8px 26px #06192d15}
.bottom-nav-item{position:relative;display:flex;flex:1;min-width:0;height:53px;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:10px;font-weight:680;cursor:pointer;transition:background .18s,color .18s}
.bottom-nav-item.active{background:var(--panel-soft);color:var(--blue)}
.bottom-nav-icon{font-size:18px;line-height:1.1}
.comments-count{position:absolute;top:1px;right:calc(50% - 27px);display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--selected);color:var(--selected-ink);font-size:9px;font-weight:800;line-height:1}
.comments-view,.profile-view,.theme-view{display:flex;width:100%;min-height:0;flex:1;flex-direction:column;gap:12px;overflow:auto;padding:2px 1px 12px;color:var(--text);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.comments-header{min-height:0;align-items:center}
.comments-header h1,.profile-header h1,.section-header h1{margin:0;font-size:22px;letter-spacing:-.035em}
.comments-refresh-button{flex:none;min-height:32px;padding:5px 8px;border-radius:9px;background:var(--panel-soft);color:var(--blue);font-size:11px}
.comments-refresh-button:disabled{opacity:.6;cursor:wait}
.comments-refresh-button:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}
.comments-date,.profile-header>p:last-child,.section-header>p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.profile-header{flex:none}
.profile-header .eyebrow{display:none}
.profile-card,.profile-guest-panel,.profile-theme-panel,.account-panel,.comment-compose,.comment-login-prompt,.comment-card,.vip-panel{border-radius:14px;box-shadow:none}
.profile-card,.profile-guest-panel,.account-panel,.comment-compose,.comment-login-prompt,.vip-panel{border-color:var(--line);background:var(--panel)}
.profile-theme-panel{border-color:var(--line);background:var(--panel)}
.profile-view{gap:11px}
.profile-card{padding:13px}
.profile-avatar{border-radius:13px}
.profile-user-copy strong{font-size:15px}
.profile-admin-section{margin-top:12px;padding-top:12px}
.account-form{gap:9px}
.form-field input,.comment-compose textarea,.block-form input,.comment-editor{border-radius:9px}
.theme-view{gap:14px}
.section-header{flex:none}
.theme-mode-button{display:flex;flex:none;align-items:center;gap:12px;width:100%;min-height:72px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}
.theme-mode-icon{display:grid;flex:none;place-items:center;width:41px;height:41px;border-radius:12px;background:var(--panel-soft);color:var(--blue);font-size:22px}
.theme-mode-copy{display:grid;flex:1;gap:3px}
.theme-mode-copy strong{font-size:13px}
.theme-mode-copy small,.theme-access-note{color:var(--muted);font-size:10px;line-height:1.45}
.theme-mode-chevron{color:var(--muted);font-size:23px}
.theme-access-note{margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.profile-theme-panel{padding:14px}
.theme-color-wheel{width:min(240px,68vw);height:min(240px,68vw);box-shadow:none}
.theme-color-option{width:34px;height:34px}
.accent-reset{border-radius:9px}
html[data-account-blocked="true"] #commentsTab,html[data-account-blocked="true"] #profileTab,html[data-account-blocked="true"] #panelTab,html[data-account-blocked="true"] .reaction-bar{display:none!important}
@media(min-width:601px){
  .app-shell{padding:25px 20px 105px}
  main{min-height:calc(100vh - 130px)}
  .app-header{min-height:46px;margin-bottom:5px}
  .menu-panel{gap:15px}
  .month-heading h1{font-size:16px}
  .calendar{gap:10px}
  .date-card{flex-basis:70px;height:84px}
  .detail-menu-heading h2{font-size:23px}
  .meal-row{grid-template-columns:48px minmax(0,1fr);gap:13px}
  .meal-icon{width:44px;height:44px}
  .meal-list{gap:0}
}
@media(max-width:600px){
  html,body{height:100%;min-height:0;overflow:hidden}
  .app-shell{display:flex;width:100%;height:100dvh;min-height:0;flex-direction:column;padding:calc(env(safe-area-inset-top) + 5px) 14px calc(69px + env(safe-area-inset-bottom));overflow:hidden}
  main{min-height:0;flex:1;gap:8px}
  .app-header{min-height:37px}
  .brand-lockup{gap:7px;font-size:16px}
  .site-logo{width:25px;height:25px}
  .top-profile-button{width:37px;height:37px;border-radius:12px}
  .top-profile-button svg{width:21px;height:21px}
  .menu-panel{gap:7px}
  .month-toolbar{grid-template-columns:31px 1fr auto;gap:5px}
  .month-arrow,.today-button{min-width:31px;height:31px;border-radius:9px}
  .month-arrow{font-size:21px}
  .today-button{min-width:43px;padding:0 6px;font-size:9px}
  .month-heading h1{font-size:12px}
  .calendar{height:73px;gap:7px;margin:0 -1px;padding:0 1px 3px}
  .date-card{flex-basis:calc((100vw - 74px)/5.15);max-width:64px;height:67px;gap:4px;border-radius:14px}
  .date-number{font-size:22px}
  .date-weekday{font-size:10px}
  .menu-mode{gap:8px}
  .mode-label{font-size:10px}
  .mode-switch{width:40px;height:24px}
  .mode-switch span{width:16px;height:16px}
  .mode-switch[aria-checked="true"] span{transform:translateX(15px)}
  .day-detail{gap:6px;padding:12px 12px 10px;border-radius:17px}
  .detail-date{font-size:10px}
  .detail-menu-heading h2{font-size:17px}
  .calorie-pill{padding:5px 7px;font-size:9px}
  .meal-row{grid-template-columns:38px minmax(0,1fr);gap:8px;padding:4px 0}
  .meal-icon{width:34px;height:34px;border-radius:11px;font-size:17px}
  .meal-label{font-size:9px}
  .meal-name{font-size:clamp(13px,3.9vw,16px)}
  .reaction-button{height:35px;font-size:12px}
  .reaction-button svg{width:16px;height:16px}
  .status-row{font-size:8px}
  .refresh-button{font-size:9px}
  .bottom-nav{gap:5px;height:calc(62px + env(safe-area-inset-bottom));padding:4px 13px calc(4px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
  .bottom-nav-item{height:48px;font-size:9px}
  .bottom-nav-icon{font-size:17px}
  .comments-count{right:calc(50% - 24px);min-width:15px;height:15px;font-size:8px}
  .comments-view,.profile-view,.theme-view{gap:8px;padding:0 1px 8px}
  .comments-header h1,.profile-header h1,.section-header h1{font-size:19px}
  .profile-header>p:last-child,.section-header>p{font-size:10px}
  .profile-card,.profile-guest-panel,.account-panel,.comment-compose,.comment-login-prompt,.vip-panel{padding:10px}
  .profile-avatar{width:44px;height:44px}
  .profile-theme-panel{padding:11px}
  .theme-mode-button{min-height:64px;padding:10px}
  .theme-mode-icon{width:37px;height:37px}
  .theme-color-wheel{width:min(220px,62vw);height:min(220px,62vw)}
  .theme-color-option{width:31px;height:31px}
  .theme-view .profile-section-heading p{margin-bottom:8px}
  .toast{bottom:calc(68px + env(safe-area-inset-bottom))}
}
@media(max-width:600px) and (max-height:700px){
  .app-shell{padding-top:calc(env(safe-area-inset-top) + 3px);padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  main{gap:5px}
  .menu-panel{gap:4px}
  .calendar{height:64px}
  .date-card{height:59px}
  .day-detail{gap:4px;padding:9px 10px 7px}
  .meal-row{padding:2px 0}
  .meal-icon{width:31px;height:31px;font-size:15px}
  .reaction-button{height:31px}
  .status-row{padding-top:0}
}

/* Daily menu with a compact vertical date rail */
.app-header{display:grid;grid-template-columns:42px 1fr 42px;justify-items:center;min-height:76px;margin-bottom:3px}
.top-menu-button{display:grid;place-self:center start;place-items:center;width:38px;height:38px;border:0;border-radius:11px;background:transparent;color:var(--text);cursor:pointer}
.top-menu-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.top-menu-button:active{background:var(--panel-soft)}
.brand-lockup{justify-self:center;gap:0}
.site-logo{width:68px;height:68px;object-fit:contain}
.top-profile-button{justify-self:end}
.month-toolbar{grid-template-columns:32px 1fr auto;margin-bottom:0}
.month-heading{text-align:left}
.month-heading h1{font-size:12px;letter-spacing:.02em}
.menu-layout{display:grid;grid-template-columns:minmax(0,1fr) 66px;align-items:start;gap:8px;flex:0 0 auto;min-height:0}
.menu-card-column{display:flex;min-width:0;min-height:0;flex-direction:column;gap:6px}
.menu-mode{justify-content:center;gap:6px;margin:0;min-height:22px}
.mode-label{font-size:10px;white-space:nowrap}
.mode-switch{width:36px;height:22px;padding:2px}
.mode-switch span{width:14px;height:14px}
.mode-switch[aria-checked="true"] span{transform:translateX(13px)}
.day-detail{min-width:0;flex:0 0 auto;height:min(520px,calc(100dvh - 300px));gap:7px;padding:12px 11px 9px;border-radius:17px}
.detail-header{gap:7px}
.detail-date{font-size:10px;letter-spacing:.02em}
.detail-menu-heading{align-items:center;gap:5px}
.detail-menu-heading h2{font-size:17px;white-space:nowrap}
.calorie-pill{flex:none;padding:5px 7px;font-size:9px;white-space:nowrap}
.meal-list{grid-template-rows:repeat(4,minmax(0,1fr));gap:0}
.meal-row{grid-template-columns:36px minmax(0,1fr);gap:7px;padding:4px 0}
.meal-icon{width:32px;height:32px;border-radius:10px;font-size:16px}
.meal-copy{gap:2px}
.meal-label{font-size:9px}
.meal-name{font-size:clamp(13px,3.8vw,16px);line-height:1.17}
.detail-footer{padding-top:0}
.reaction-bar{gap:6px}
.reaction-button{height:34px;gap:5px;border-radius:10px;font-size:12px}
.reaction-button svg{width:16px;height:16px}
.status-row{min-height:13px;padding:0;font-size:8px}
.refresh-button{font-size:9px}
.date-rail{display:flex;width:100%;height:min(520px,calc(100dvh - 300px));min-height:0;flex:none;flex-direction:column;gap:5px;padding:5px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.date-card{flex:1 1 0;min-height:42px;height:auto}
.date-rail-arrow{display:grid;flex:none;place-items:center;width:100%;height:29px;border:0;border-radius:9px;background:var(--panel-soft);color:var(--text);font-size:17px;font-weight:700;line-height:1;cursor:pointer}
.date-rail-arrow:active{background:var(--selected);color:var(--selected-ink)}
.date-rail-arrow:disabled{opacity:.35;cursor:default}
.calendar{display:flex;min-height:0;flex:1;flex-direction:column;align-items:stretch;gap:5px;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain}
.calendar::-webkit-scrollbar{display:none}
.date-card{flex:0 0 51px;width:100%;height:51px;min-height:0;gap:3px;border:1px solid var(--line);border-radius:11px;background:var(--date);color:var(--blue);scroll-snap-align:center}
.date-card.selected{border-color:var(--selected);background:var(--selected);color:var(--selected-ink)}
.date-number{font-size:18px}
.date-weekday{font-size:9px;line-height:1}
.date-selected{display:none}
.date-strip-empty{font-size:9px}
@media(min-width:601px){
  .app-shell{width:min(100%,650px)}
  main{gap:12px}
  .app-header{min-height:87px;grid-template-columns:46px 1fr 46px}
  .site-logo{width:76px;height:76px}
  .menu-layout{grid-template-columns:minmax(0,1fr) 74px;gap:12px}
  .day-detail{padding:18px 16px 13px}
  .detail-menu-heading h2{font-size:21px}
  .meal-row{grid-template-columns:42px minmax(0,1fr);gap:10px}
  .meal-icon{width:38px;height:38px}
  .date-card{flex-basis:57px;height:57px}
}
@media(max-width:600px){
  .app-shell{padding-top:calc(env(safe-area-inset-top) + 2px);padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  main{gap:6px}
  .app-header{min-height:76px;grid-template-columns:37px 1fr 37px;margin-bottom:0}
  .top-menu-button,.top-profile-button{width:35px;height:35px}
  .site-logo{width:70px;height:70px}
  .month-toolbar{grid-template-columns:28px 1fr auto;gap:4px}
  .month-arrow,.today-button{min-width:28px;height:28px;border-radius:8px}
  .month-arrow{font-size:19px}
  .today-button{min-width:39px;padding:0 5px;font-size:8px}
  .month-heading h1{font-size:10px}
  .menu-layout{grid-template-columns:minmax(0,1fr) 59px;gap:6px}
  .menu-card-column{gap:4px}
  .menu-mode{min-height:22px;gap:4px}
  .mode-label{font-size:9px}
  .mode-switch{width:33px;height:20px}
  .mode-switch span{width:12px;height:12px}
  .mode-switch[aria-checked="true"] span{transform:translateX(13px)}
  .day-detail{height:min(500px,calc(100dvh - 320px));gap:5px;padding:9px 8px 7px;border-radius:14px}
  .detail-date{font-size:9px}
  .detail-menu-heading h2{font-size:15px}
  .calorie-pill{gap:3px;padding:4px 5px;font-size:8px}
  .meal-row{grid-template-columns:31px minmax(0,1fr);gap:6px;padding:3px 0}
  .meal-icon{width:28px;height:28px;border-radius:9px;font-size:14px}
  .meal-label{font-size:8px}
  .meal-name{font-size:clamp(12px,3.55vw,14px);line-height:1.15}
  .reaction-button{height:31px;gap:4px;padding:0 5px;font-size:11px}
  .reaction-button svg{width:14px;height:14px}
  .reaction-note{max-width:65px;font-size:7px}
  .status-row{font-size:7px}
  .refresh-button{font-size:8px}
  .date-rail{height:min(500px,calc(100dvh - 320px));gap:4px;padding:4px;border-radius:12px}
  .date-rail-arrow{height:25px;border-radius:8px;font-size:15px}
  .calendar{gap:4px}
  .date-card{flex:1 1 0;min-height:38px;height:auto;border-radius:9px}
  .date-number{font-size:17px}
  .date-weekday{font-size:8px}
  .bottom-nav{height:calc(58px + env(safe-area-inset-bottom));padding:3px 12px calc(3px + env(safe-area-inset-bottom));border-radius:15px 15px 0 0}
  .bottom-nav-item{height:45px;font-size:8px}
  .bottom-nav-icon{font-size:15px}
  .comments-count{right:calc(50% - 22px);min-width:14px;height:14px;font-size:7px}
}
@media(max-width:600px) and (max-height:700px){
  .app-header{min-height:58px}
  .site-logo{width:51px;height:51px}
  .menu-layout{grid-template-columns:minmax(0,1fr) 56px}
  .day-detail,.date-rail{height:min(420px,calc(100dvh - 260px))}
  .date-rail-arrow{height:22px}
  .date-card{flex-basis:42px;height:42px}
  .day-detail{gap:3px;padding:7px 7px 6px}
  .meal-row{padding:1px 0}
  .meal-icon{width:25px;height:25px;font-size:13px}
  .reaction-button{height:28px}
}

/* Keep the brand centered without the removed hamburger, and put comments beside menu reactions. */
.app-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.brand-lockup{grid-column:2}
.top-profile-button{grid-column:3}
.reaction-comments-button{position:relative;display:flex;flex:0 0 38px;align-items:center;justify-content:center;width:38px;min-width:38px;height:34px;padding:0;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);color:var(--text);cursor:pointer}
.reaction-comments-button svg{width:18px;height:18px;fill:none!important;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reaction-comments-button.active{border-color:var(--blue-strong);background:var(--selected);color:var(--selected-ink,#fff)}
.reaction-comments-button .comments-count{position:absolute;top:-6px;right:-5px;display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:1px solid var(--panel);border-radius:999px;background:var(--selected);color:var(--selected-ink,#fff);font-size:8px;font-weight:850;line-height:1}
@media(max-width:600px){.reaction-comments-button{height:31px}}
@media(max-width:600px) and (max-height:700px){.reaction-comments-button{height:28px}}
.calendar{overflow-x:hidden;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.calendar::-webkit-scrollbar{display:block;width:3px}
.calendar::-webkit-scrollbar-thumb{border-radius:99px;background:var(--line)}
.calendar .date-card{flex:0 0 46px;width:100%;height:46px;min-height:46px;touch-action:pan-y}
@media(max-width:600px){.calendar .date-card{flex-basis:43px;height:43px;min-height:43px}}
@media(max-width:600px) and (max-height:700px){.calendar .date-card{flex-basis:40px;height:40px;min-height:40px}}
.month-heading{text-align:center}
.month-heading h1{font-size:15px;font-weight:760;letter-spacing:.015em}
.site-logo{border-color:color-mix(in srgb,var(--selected) 32%,var(--line));border-radius:14px;opacity:.93;filter:saturate(.88) brightness(.97);box-shadow:0 0 14px color-mix(in srgb,var(--selected) 20%,transparent);transition:opacity .2s,filter .2s,border-color .2s,box-shadow .2s}
@media(max-width:600px){
  .menu-layout{flex:1 1 0;min-height:0;align-items:stretch}
  .menu-card-column{height:100%}
  .day-detail{flex:1 1 0;height:auto;min-height:0}
  .date-rail{height:calc(100% - 17px);min-height:0}
}
.detail-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:3px}
.detail-date,.detail-title,.calorie-pill{font-size:11px;font-weight:760;letter-spacing:0}
.detail-date{grid-column:1;min-width:0}
.detail-title{grid-column:2;margin:0;text-align:center;white-space:nowrap}
.calorie-pill{grid-column:3;justify-self:end;gap:2px;padding:4px 4px;border:0;background:var(--panel-soft);color:var(--blue);white-space:nowrap}
@media(min-width:601px){.detail-date,.detail-title,.calorie-pill{font-size:13px}}
@media(max-width:360px){.detail-date,.detail-title,.calorie-pill{font-size:10px}.calorie-pill{gap:1px;padding:3px 3px}}


@media(max-width:600px){.comments-refresh-button{min-height:30px;padding:4px 7px;font-size:9px}}