:root{
  --bg:#0b0d10;
  --surface:#13161b;
  --surface-2:#1a1e25;
  --line:#242a33;
  --text:#e7ebf0;
  --muted:#8b95a4;
  --accent:#5b9dff;

  /* 三大栄養素。緑と赤は「達成／未達」に取ってあるので使わない */
  --p:#5b9dff;      /* たんぱく質 — 青 */
  --f:#a8b6cc;      /* 脂質 — 淡いスレート。上限管理なので目立たせない */
  --c:#35d0c0;      /* 炭水化物 — ティール */

  /* 目標に対する評価。ここだけが緑と赤 */
  --good:#3ddc97;
  --bad:#ff6b7d;
  --up:#3ddc97;
  --down:#ff6b7d;

  --target:#8ea0b8; /* 目標線。緑赤と競合しない中間色 */
  --warn:#5b9dff;   /* 解析待ちバッジ */
  --week:#5b9dff;   /* 週平均の線 */
  --r:14px;
}

/* ライトモード。色トークンだけ差し替える */
html[data-theme="light"]{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#eef1f5;
  --line:#dde2e9;
  --text:#171a1f;
  --muted:#697280;
  --accent:#2b6fe0;
  --p:#2b6fe0;
  --f:#7a8ba6;
  --c:#0a9e93;
  --good:#0f9d58;
  --bad:#d93a52;
  --up:#0f9d58;
  --down:#d93a52;
  --target:#8092a8;
  --warn:#2b6fe0;
  --week:#2b6fe0;
}

*{box-sizing:border-box;margin:0;padding:0}
/* hidden 属性は、display を指定した要素（grid など）でも必ず隠す */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  font-feature-settings:"tnum";
  line-height:1.5;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom));
}
.wrap{max-width:1120px;margin:0 auto}
a{color:var(--accent)}

.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.eyebrow{color:var(--muted);font-size:10px;letter-spacing:.14em}
.tab-title{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.topbar-right{display:flex;align-items:center;gap:8px;padding-bottom:2px}

/* タブ。<html data-tab> で見せるものを決める（読み込み前から効くのでチラつかない） */
.tab{display:none}
html[data-tab="gym"] #tab-gym,
html[data-tab="food"] #tab-food,
html[data-tab="settings"] #tab-settings{display:block}
html[data-tab="settings"] .tabbar{display:none}

/* 下のタブバー。親指で届く位置に2つだけ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:grid;grid-template-columns:1fr 1fr;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line)}
.tabbar-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;
  color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;padding:6px 0 4px;cursor:pointer;border-radius:12px;
  -webkit-tap-highlight-color:transparent}
.tabbar-btn.on{color:var(--accent)}
.tabbar-btn:active{background:var(--surface-2)}
.pending-pill:empty{display:none}
.pending-pill{font-size:11px;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pending-pill.outbox{color:var(--bad);border-color:var(--bad)}

/* いちばん上の2枚（今日の残り・週平均体重） */
.summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sum-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  text-align:left;color:var(--text);font-family:inherit;min-width:0}
button.sum-card{cursor:pointer}
button.sum-card:active{border-color:var(--accent)}
.sum-value{font-size:clamp(19px,5.4vw,24px);font-weight:700;letter-spacing:-.02em;margin:2px 0 1px;white-space:nowrap}
.sum-value.ok{color:var(--good)}
.fast{color:var(--text)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card + .card{margin-top:12px}
.card h2{font-size:13px;font-weight:600;letter-spacing:.03em}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hint{font-size:11px;color:var(--muted)}

/* 今日のサマリ */
.today{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tile-label{color:var(--muted);font-size:11px}
.tile-value{font-size:clamp(15px,4.4vw,20px);font-weight:600;letter-spacing:-.01em;margin-top:2px}
.tile-sub{color:var(--muted);font-size:11px}
.bar{height:4px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:2px;background:var(--accent)}

/* フォーム */
label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
input,textarea,select{
  width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  border-radius:12px;padding:12px;font-size:16px;font-family:inherit
}
textarea{min-height:96px;resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.field + .field,.row + .field,.field + .row,.row + .row{margin-top:12px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 16px;font-size:14px;font-family:inherit;cursor:pointer}
.chip.on{border-color:var(--accent);color:var(--text)}

.btn{width:100%;background:var(--accent);color:#08111f;border:none;border-radius:12px;
  padding:15px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:14px}
.btn:disabled{opacity:.5}
.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}

.photo{display:flex;gap:10px;align-items:center;margin-top:12px}
.photo-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface-2);
  border:1px dashed var(--line);color:var(--muted);border-radius:12px;padding:13px 10px;font-size:14px;font-family:inherit;cursor:pointer}
.thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
input[type=file]{display:none}

/* 一覧 */
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.item-main{min-width:0;flex:1}
.item-title{font-size:14px;overflow-wrap:anywhere}
.item-sub{color:var(--muted);font-size:11px;margin-top:3px}
.item-right{text-align:right;white-space:nowrap;font-size:13px}
.badge{display:inline-block;font-size:10px;border-radius:999px;padding:2px 8px;border:1px solid var(--warn);color:var(--warn)}
.del{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px;font-family:inherit}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:14px;
  width:max-content;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.toast.on{opacity:1}
.toast.has-action.on{pointer-events:auto}
.toast-act{background:none;border:none;color:var(--accent);font-weight:700;font-size:14px;font-family:inherit;margin-left:14px;padding:0;cursor:pointer}

.empty{color:var(--muted);font-size:13px;padding:14px 0;text-align:center}

/* 分析画面 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.grid .card{margin-top:0}
.span2{grid-column:span 2}
.chart{width:100%;height:300px}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpis .card{margin-top:0;padding:12px 14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:500;font-size:11px}

@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* 分析の見出しと期間 */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 2px 10px}
.section-head .section-title{margin:0}
.section-head select{width:auto;padding:7px 10px;font-size:14px;border-radius:10px}
details summary{cursor:pointer;list-style:none;padding:10px 12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"＋ ";color:var(--accent)}
details[open] summary::before{content:"− "}

/* アイコンだけのボタン（テーマ切替・閉じる） */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:50%;cursor:pointer;padding:0}
.icon-btn:hover{color:var(--text);border-color:var(--accent)}
/* ライトでは青ボタンの文字を白に（暗い紺のままだと読めない） */
html[data-theme="light"] .btn{color:#fff}
html[data-theme="light"] .btn.ghost{color:var(--text)}

/* 達成／未達の表示 */
.ok{color:var(--good)}
.ng{color:var(--bad)}
.tile.met{border-color:var(--good)}
.tile.met .tile-value{color:var(--good)}
td.ok{color:var(--good)}
td.ng{color:var(--bad)}
.tile.over{border-color:var(--bad)}
.tile.over .tile-value{color:var(--bad)}

/* カレンダー（ホーム） */
.cal-card{padding:14px 12px}
.cal-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;font-size:15px;font-weight:600;position:relative}
.cal-nav{background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:8px;width:32px;height:32px;font-size:17px;line-height:1;cursor:pointer;font-family:inherit;flex:none}
.cal-nav:hover{border-color:var(--accent)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-today-btn{position:absolute;right:0;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:4px 10px;font-size:12px;font-family:inherit;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{color:var(--muted);font-size:11px;text-align:center;padding-bottom:2px}
.cal-dow.sun{color:var(--bad)}
.cal-dow.sat{color:var(--accent)}
.cal-day{position:relative;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:inherit;cursor:pointer;padding:5px 1px 4px;min-width:0}
.cal-day:hover{border-color:var(--accent)}
.cal-day.future{opacity:.3;cursor:default}
.cal-day.future:hover{border-color:var(--line)}
.cal-day.blank{background:none;border:none;cursor:default}
.cd-n{font-size:13px;line-height:22px;min-width:22px;height:22px;border-radius:50%;text-align:center}
.cal-day.today{border-color:var(--accent)}
.cal-day.today .cd-n{background:var(--accent);color:#08111f;font-weight:700}
html[data-theme="light"] .cal-day.today .cd-n{color:#fff}
.cd-kcal{font-size:10px;line-height:1.1;color:var(--muted);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;max-width:100%}
.cd-kcal.ok{color:var(--good);font-weight:600}
.cd-kcal.ng{color:var(--bad);font-weight:600}
.cd-dots{display:flex;gap:3px;margin-top:auto;height:6px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%}
.dot.gym{background:var(--good)}
.dot.gym.memo{box-shadow:0 0 0 1.5px var(--surface-2),0 0 0 3px var(--good)}
.dot.wt{background:var(--accent)}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}
.cal-legend .dot{margin-right:4px;vertical-align:0}
.cal-legend b{font-weight:600}
.cal-legend .sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-2px}
/* 筋トレタブ: やった日は緑で塗る。数字はその日の合計kg */
.cal-day.gym-on,.sw.gym{background:color-mix(in srgb,var(--good) 18%,var(--surface-2));border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.cd-vol{font-size:10px;line-height:1.1;color:var(--good);font-weight:600;white-space:nowrap;overflow:hidden;max-width:100%}

.section-title{font-size:12px;color:var(--muted);letter-spacing:.12em;margin:22px 2px 10px}

/* 選んだ日（カレンダーのすぐ下） */
.cal-day.sel{background:var(--surface);border:2px solid var(--text);padding:4px 0 3px}
.cal-day.today.sel{border-color:var(--accent)}
.day{margin-top:18px}
.day-title{font-size:18px;font-weight:600;margin:0 2px 10px;display:flex;align-items:center;gap:8px;scroll-margin-top:12px}
.today-tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent);color:#08111f}
html[data-theme="light"] .today-tag{color:#fff}
.day h3{font-size:14px;font-weight:600}
.day .card > h3{margin-bottom:12px}

/* 筋トレ（チェック1行）とメモ */
.check-card{padding:6px 8px 6px 6px}
.check-row{display:flex;align-items:center;gap:8px}
.check{flex:1;display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--text);
  font-size:15px;font-family:inherit;cursor:pointer;padding:8px;border-radius:10px;text-align:left}
.check:active{background:var(--surface-2)}
.check-box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--muted);
  display:flex;align-items:center;justify-content:center;color:transparent;transition:background .12s,border-color .12s}
.check.on .check-box{background:var(--good);border-color:var(--good);color:#08111f}
html[data-theme="light"] .check.on .check-box{color:#fff}
.check.on .check-label{font-weight:600}
.gym-sum{font-size:13px;color:var(--muted);padding-right:8px;white-space:nowrap}
.log-box{padding:8px 8px 8px;border-top:1px solid var(--line);margin-top:6px}
.link-btn{background:none;border:none;color:var(--accent);font-size:13px;font-family:inherit;cursor:pointer;padding:10px 0 0}

/* 食事・体重 */
.day .today{margin-bottom:12px}
.day .list:empty{display:none}
.form-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.list:empty + .form-block,.list:empty + .link-btn[hidden] + .form-block{margin-top:0;padding-top:0;border-top:none}
.form-block textarea{margin-top:10px;min-height:84px}
.form-block .photo{margin-top:10px}
/* 区分: 4つがつながったスイッチ。右に時刻 */
.meal-when{display:flex;align-items:center;gap:8px}
.seg{flex:1;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:3px;gap:2px;min-width:0}
.seg button{background:none;border:none;border-radius:9px;color:var(--muted);font-size:14px;font-family:inherit;
  padding:8px 0;cursor:pointer;transition:background .12s,color .12s}
.seg button.on{background:var(--accent);color:#08111f;font-weight:600}
html[data-theme="light"] .seg button.on{color:#fff}
.time-pill{flex:none;display:flex;align-items:center;gap:4px;margin:0;color:var(--muted);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:0 10px;height:42px}
.time-pill input{width:auto;background:none;border:none;padding:0;font-size:15px;color:var(--text);min-width:0}
.time-pill input:focus{outline:none}
.time-pill:focus-within{border-color:var(--accent)}
.time-pill input::-webkit-calendar-picker-indicator{display:none}
#w-form .photo{margin-top:0}
details.fold{margin-top:10px}
details.fold summary{background:none;border:none;padding:6px 0;color:var(--accent);font-size:13px}
details.fold summary::before{content:"＋ "}
details.fold[open] summary::before{content:"− "}
details.fold[open] summary{margin-bottom:8px}

/* 設定 */
.settings-col{max-width:640px}
.settings-col .card h2{font-size:15px}
.back-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--accent);
  font-size:15px;font-family:inherit;cursor:pointer;padding:4px 0 12px}

/* スマホでは合計の4マスを2×2にして、目標まで1行で読めるようにする */
@media (max-width:560px){
  .day .today{grid-template-columns:repeat(2,1fr)}
  .row3{grid-template-columns:repeat(2,1fr)}
}
/* ラベルが2行になっても入力欄の高さをそろえる */
.row3,.row{align-items:end}

/* 筋トレの記録: 種目ごとのまとまり。重さと回数は ＋／− でも変えられる */
.ex-block{border:1px solid var(--line);border-radius:12px;padding:10px 10px 8px;background:var(--surface-2)}
.ex-block + .ex-block{margin-top:10px}
.exb-head{display:flex;align-items:center;gap:8px}
.exb-name{font-weight:700;font-size:15px;flex:1;min-width:0;overflow-wrap:anywhere}
.exb-vol{font-size:12px;color:var(--muted);white-space:nowrap}
.exb-del{background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;font-family:inherit}
.exb-prev{font-size:11px;color:var(--muted);margin:1px 0 6px}
.exb-cols,.set-row{display:grid;grid-template-columns:18px minmax(0,1.25fr) minmax(0,1fr) 22px;gap:6px;align-items:center}
.exb-cols{font-size:10px;color:var(--muted);text-align:center;margin-bottom:3px}
.set-row + .set-row{margin-top:6px}
.set-no{font-size:12px;color:var(--muted);text-align:center}
.set-row .del{padding:0;font-size:17px}
.stepper{display:flex;align-items:stretch;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.stepper button{flex:none;width:34px;background:none;border:none;color:var(--accent);font-size:19px;font-family:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.stepper button:active{background:var(--surface-2)}
.stepper input{flex:1;min-width:0;border:none;border-radius:0;background:none;padding:0;text-align:center;font-size:16px;font-weight:600}
.stepper input:focus{outline:none}
.stepper:focus-within{border-color:var(--accent)}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}
.exb-add{display:block;width:100%;margin-top:8px;background:none;border:1px dashed var(--line);color:var(--accent);border-radius:9px;
  padding:7px;font-size:13px;font-family:inherit;cursor:pointer}
.picker{margin-top:12px}
.picker-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.pick-chips{display:flex;flex-wrap:wrap;gap:6px}
.pick-chip{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 12px;
  font-size:13px;font-family:inherit;cursor:pointer}
.pick-chip:active{border-color:var(--accent)}
.pick-chip.new{color:var(--accent);border-style:dashed}
.sets-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:12px}
.sets-total{font-size:13px;color:var(--muted)}
.sets-total b{color:var(--text);font-size:16px}
.gym-note{margin-top:10px;padding:10px 12px;font-size:15px}
.log-box .btn{margin-top:10px;padding:13px}

/* 種目ごとの記録 */
.ex-list{display:flex;flex-direction:column}
.ex-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) 16px;gap:10px;align-items:center;width:100%;background:none;border-left:none;border-right:none;border-bottom:none;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;
  padding:10px 2px;border-top:1px solid var(--line);font-size:14px}
.ex-row:first-child{border-top:none;padding-top:2px}
.ex-name{font-weight:600;overflow-wrap:anywhere}
.ex-caret{color:var(--muted);transition:transform .15s}
.ex-row.open .ex-caret{transform:rotate(180deg);color:var(--accent)}
.ex-chart-box{padding:4px 0 12px}
.ex-chart{width:100%;height:200px}
.ex-chart svg{width:100%;height:100%;display:block;overflow:visible}
.ex-cell{white-space:nowrap}
.ex-k{display:block;color:var(--muted);font-size:11px}
.ex-cell .ex-k:not(:first-child){display:inline}
.pr{display:inline-block;font-size:10px;font-weight:700;color:var(--good);border:1px solid var(--good);border-radius:999px;padding:0 6px;vertical-align:1px}
@media (max-width:420px){
  .ex-row{grid-template-columns:1fr 1fr 16px;row-gap:2px}
  .ex-name{grid-column:1/3}
  .ex-caret{grid-row:1/3;grid-column:3}
}

/* たたんでおくカード（種目の登録） */
details.fold-card summary{background:none;border:none;padding:0;font-size:14px;font-weight:600}
details.fold-card[open] summary{margin-bottom:2px}

/* 種目の登録 */
.menu-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.menu-chip{display:inline-flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 4px 4px 12px;font-size:13px}
.menu-chip button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:0 6px;font-family:inherit}
.menu-add{display:flex;gap:8px}
.menu-add .btn{width:auto;margin-top:0;padding:0 18px}

/* 解析待ちの食事の書き直し */
.item.editable .item-main{cursor:pointer}
.edit-hint{color:var(--accent);vertical-align:-1px;margin-left:3px}
.item.editing{display:block}
.edit-note{min-height:72px}
.edit-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.edit-row .edit-time{width:104px;flex:none;padding:10px}
.edit-row .btn{margin-top:0;padding:11px;flex:1}

/* PC: 要約とカレンダーを左の細い列に、選んだ日を右に。左はスクロールしても見えたままにする */
.wrap{max-width:1080px}
@media (min-width:900px){
  body{padding:24px 24px 96px}
  .home{display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;align-items:start}
  .home-left{position:sticky;top:16px}
  .home .day{margin-top:0}
  .cal-day{min-height:50px}
  .sum-card{padding:10px 12px}
  .sum-value{font-size:20px}
  .day-title{margin-top:2px}
  .section-head{margin-top:32px}
  /* PC ではタブバーを画面下の中央に小さく浮かべる */
  .tabbar{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:280px;border:1px solid var(--line);
    border-radius:18px;padding:4px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
  .tabbar-btn{flex-direction:row;justify-content:center;gap:6px;font-size:13px;padding:9px 0}
  .tabbar-btn svg{width:20px;height:20px}
  .tabbar-btn.on{background:var(--surface-2)}
}

/* アカウント（設定の中） */
.account{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.account .btn{width:auto;margin-top:0;padding:9px 16px;font-size:14px}
.account b{color:var(--text);font-weight:500;overflow-wrap:anywhere}

/* ログイン画面 */
.login{max-width:380px;margin:12vh auto 0;padding:0 4px}
.login-logo{width:76px;height:76px;border-radius:20px;display:block;margin:0 auto 14px}
.login h1{text-align:center;font-size:26px}
.login .lead{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 22px}
.login input{text-align:center;font-size:17px}
.login input.code{letter-spacing:.4em;font-size:24px;font-weight:600}
.login .err{color:var(--bad);font-size:13px;text-align:center;min-height:20px;margin-top:10px}
.login .sub{display:block;margin:14px auto 0;background:none;border:none;color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer;text-decoration:underline}
.login .shown-code{text-align:center;font-size:34px;font-weight:700;letter-spacing:.3em;padding:14px;margin-bottom:12px;
  background:var(--surface-2);border:1px dashed var(--accent);border-radius:12px;color:var(--text)}
.account-block{margin-top:14px}
.account-block > .btn{margin-top:0;font-size:14px;padding:11px}
.handoff-box{margin-top:10px;text-align:center}
.handoff-box .shown-code{margin-bottom:6px}
.invite-out{margin-top:10px}
.invite-out input{font-size:13px;margin-top:6px}
.invite-actions{display:flex;gap:8px;margin-top:8px}
.invite-actions .btn{margin-top:0;padding:10px;font-size:14px;text-align:center;text-decoration:none;display:block}
.friends{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.friend{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px}
.friend .hint{display:block}
.friend button{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px;
  font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap}
/* 招待ページの手順 */
.steps{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:4px}
.steps-title{font-weight:600;font-size:14px;margin-bottom:6px}
.steps ol{padding-left:20px;font-size:14px;line-height:1.9;margin-bottom:12px}
.steps .btn{margin-top:0}

/* 食事: カードの「記録する」ボタン */
.add-meal{display:block;width:100%;margin-top:12px;background:none;border:1px dashed var(--accent);color:var(--accent);
  border-radius:12px;padding:12px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer}
.list:empty + .add-meal{margin-top:0}

/* 食事タブの右下に常にある＋ボタン */
.fab{display:none;position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:9;width:56px;height:56px;
  border-radius:50%;border:none;background:var(--accent);color:#08111f;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);-webkit-tap-highlight-color:transparent}
html[data-theme="light"] .fab{color:#fff}
html[data-tab="food"] .fab{display:flex}
html[data-tab="food"] .toast{bottom:calc(148px + env(safe-area-inset-bottom))} /* ＋ボタンに重ねない */
.fab:active{transform:scale(.96)}

/* 下からせり上がるシート */
.sheet{position:fixed;inset:0;z-index:20}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .2s}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-radius:20px 20px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .22s ease-out;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.sheet-panel::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 8px}
.sheet.on .sheet-backdrop{opacity:1}
.sheet.on .sheet-panel{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheet-head h2{font-size:17px;font-weight:700}
body.sheet-open{overflow:hidden}
.meal-form textarea{margin-top:10px;min-height:84px}
.meal-form .photo{margin-top:10px}

/* よく食べるもの */
.fav-block{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fav-label{font-size:13px;font-weight:600;margin-bottom:8px}
.fav-label .hint{font-weight:400;margin-left:4px}
.fav-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fav-chips::-webkit-scrollbar{display:none}
.fav-chip{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:190px;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:9px 12px;font-family:inherit;cursor:pointer}
.fav-chip:active{border-color:var(--accent)}
.fav-name{font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-kcal{font-size:11px;color:var(--muted);white-space:nowrap}

/* 分析の切り替え */
.an-seg{grid-template-columns:repeat(4,1fr);margin-bottom:12px}

@media (min-width:900px){
  .fab{right:max(24px,calc(50% - 540px));bottom:24px}
  .sheet-panel{left:50%;right:auto;width:520px;transform:translate(-50%,100%);bottom:24px;border-radius:20px}
  .sheet.on .sheet-panel{transform:translate(-50%,0)}
}

/* 新しい版の知らせ（書きかけがあって自動で読み直せないときだけ出る） */
.update-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px}
.update-bar button{background:var(--accent);color:#08111f;border:none;border-radius:9px;padding:8px 14px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
html[data-theme="light"] .update-bar button{color:#fff}