/* ===========================================================
   家庭菜单 App · 基础样式
   配色：奶油白 + 暖橙 + 抹茶绿  |  移动端优先
   =========================================================== */

:root{
  --bg:          #FDF6EE;
  --bg-2:        #F6EDE2;
  --card:        #FFFFFF;
  --card-soft:   #FBF5EC;
  --primary:     #FF7A45;
  --primary-dk:  #E9622E;
  --primary-soft:#FFE8DC;
  --green:       #4CAF83;
  --green-soft:  #E2F3EA;
  --text:        #33302C;
  --text-2:      #6F675E;
  --muted:       #A79C90;
  --line:        #F1E7DA;
  --shadow:      0 8px 24px rgba(176,138,96,.12);
  --shadow-sm:   0 2px 10px rgba(176,138,96,.10);
  --r-lg:        24px;
  --r-md:        18px;
  --r-sm:        12px;
  --tab-h:       66px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",
              system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:var(--bg-2);
  /* 桌面端：柔和的暖色背景 + 光斑 */
  background-image:
    radial-gradient(560px 420px at 12% 8%,  #FFE9D8 0%, transparent 62%),
    radial-gradient(520px 420px at 92% 92%, #E4F3EA 0%, transparent 60%);
  background-attachment:fixed;
  display:flex;
  justify-content:center;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- App 外壳 ---------------- */
.app{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* 桌面端把外壳做成"手机卡片" */
@media (min-width:600px){
  body{ padding:28px 0; align-items:flex-start; }
  .app{
    min-height:calc(100dvh - 56px);
    height:calc(100dvh - 56px);
    border-radius:36px;
    box-shadow:0 24px 60px rgba(150,110,70,.20), 0 0 0 1px rgba(255,255,255,.6) inset;
  }
}

/* ---------------- 顶部栏 ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  padding:20px 20px 14px;
  background:linear-gradient(180deg,#FFF7EF 62%,rgba(255,247,239,.86));
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.topbar.is-stuck{ border-bottom-color:var(--line); }

.topbar__row{ display:flex; align-items:center; gap:12px; }
.topbar__hello{ font-size:12px; color:var(--muted); letter-spacing:.4px; }
.topbar__title{
  margin:2px 0 0; font-size:22px; font-weight:800; letter-spacing:.3px;
}
.topbar__title em{ font-style:normal; color:var(--primary); }

.avatars{ margin-left:auto; display:flex; }
.avatars span{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:16px;
  background:var(--card); border:2px solid #fff;
  box-shadow:var(--shadow-sm);
}
.avatars span + span{ margin-left:-10px; }

/* ---------------- 主体滚动区 ---------------- */
.screen{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 20px calc(var(--tab-h) + 28px);
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{ display:none; }

.view{ display:none; animation:fadeUp .32s ease both; }
.view.is-active{ display:block; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ---------------- 通用组件 ---------------- */
.section-head{
  display:flex; align-items:baseline; gap:8px;
  margin:22px 0 12px;
}
.section-head h2{ margin:0; font-size:16px; font-weight:800; }
.section-head .hint{ font-size:12px; color:var(--muted); }
.section-head .link{
  margin-left:auto; font-size:12.5px; color:var(--primary);
  font-weight:600; background:none; border:0; padding:0; cursor:pointer;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}

.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600;
  background:var(--card-soft); color:var(--text-2);
  border:1px solid var(--line);
  cursor:pointer; white-space:nowrap;
  transition:.18s;
}
.chip:active{ transform:scale(.95); }
.chip.is-on{
  background:var(--primary); border-color:var(--primary);
  color:#fff; box-shadow:0 6px 14px rgba(255,122,69,.32);
}

.scroller-x{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px;
  scrollbar-width:none;
}
.scroller-x::-webkit-scrollbar{ display:none; }

.btn{
  font:inherit; font-weight:700; cursor:pointer;
  border-radius:14px; border:1px solid var(--line);
  background:var(--card); color:var(--text);
  padding:11px 16px; transition:.18s;
}
.btn:active{ transform:scale(.97); }
.btn--primary{
  background:linear-gradient(135deg,var(--primary),#FF9A5C);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 18px rgba(255,122,69,.32);
}
.btn--ghost{ background:var(--card-soft); color:var(--text-2); }
.btn--sm{ padding:7px 12px; font-size:12.5px; border-radius:11px; }
.btn--block{ width:100%; }

/* 空状态 */
.empty{
  text-align:center; color:var(--muted); font-size:13px;
  padding:26px 10px; line-height:1.9;
}
.empty b{ display:block; font-size:26px; margin-bottom:4px; }

/* ---------------- 今日 · 问候卡 ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding:18px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FF8A54,#FFB27A 58%,#FFC99A);
  color:#fff;
  box-shadow:0 14px 30px rgba(255,138,84,.34);
}
.hero::after{
  content:""; position:absolute; right:-34px; top:-40px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.18);
}
.hero::before{
  content:""; position:absolute; right:34px; bottom:-58px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.13);
}
.hero__date{ font-size:12.5px; opacity:.92; letter-spacing:.6px; }
.hero__title{ margin:6px 0 12px; font-size:20px; font-weight:800; }
.hero__stats{ display:flex; gap:8px; position:relative; }
.hero__stat{
  flex:1; background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.32);
  border-radius:14px; padding:8px 10px;
  backdrop-filter:blur(4px);
}
.hero__stat b{ display:block; font-size:17px; }
.hero__stat span{ font-size:11px; opacity:.9; }

/* ---------------- 今日 · 三餐 ---------------- */
.meal{
  padding:14px 14px 12px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  margin-bottom:12px;
}
.meal__head{ display:flex; align-items:center; gap:10px; }
.meal__icon{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center; font-size:19px;
  background:var(--card-soft);
}
.meal__name{ font-size:15px; font-weight:800; }
.meal__sub{ font-size:11.5px; color:var(--muted); }
.meal__act{ margin-left:auto; display:flex; gap:6px; }
.icon-btn{
  width:32px; height:32px; border-radius:10px;
  border:1px solid var(--line); background:var(--card-soft);
  display:grid; place-items:center; font-size:14px;
  cursor:pointer; color:var(--text-2); transition:.18s;
}
.icon-btn:active{ transform:scale(.9) rotate(-12deg); }

.meal__dishes{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
}
.dish-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px 7px 9px; border-radius:12px;
  background:var(--card-soft); border:1px solid var(--line);
  font-size:13px; font-weight:600;
}
.dish-pill span{ font-size:15px; }
.dish-pill--add{
  background:transparent; border-style:dashed; color:var(--muted);
  cursor:pointer; font-weight:600;
}
.dish-pill--add:active{ transform:scale(.96); }

/* ---------------- 本周菜单 ---------------- */
.overview{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
  padding:12px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.ov-col{ text-align:center; }
.ov-col small{ font-size:10.5px; color:var(--muted); display:block; margin-bottom:5px; }
.ov-dots{ display:flex; flex-direction:column; gap:4px; align-items:center; }
.ov-dot{ width:100%; height:9px; border-radius:5px; background:var(--card-soft); }
.ov-dot.on{ background:linear-gradient(135deg,#FFB27A,#FF8A54); }
.ov-col.is-today small{ color:var(--primary); font-weight:800; }

.daystrip{ display:flex; gap:6px; overflow-x:auto; padding:14px 0 4px; scrollbar-width:none; }
.daystrip::-webkit-scrollbar{ display:none; }
.day-btn{
  flex:0 0 auto; min-width:52px; padding:8px 4px;
  border-radius:14px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; transition:.18s;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.day-btn b{ font-size:13px; }
.day-btn small{ font-size:10px; color:var(--muted); }
.day-btn.is-on{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 8px 16px rgba(255,122,69,.3);
}
.day-btn.is-on small{ color:rgba(255,255,255,.85); }

.table-wrap{
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm);
}
.mrow{
  display:grid; grid-template-columns:64px 1fr;
  gap:10px; padding:13px 14px; border-bottom:1px solid var(--line);
}
.mrow:last-child{ border-bottom:0; }
.mrow__k{ font-size:12.5px; font-weight:800; color:var(--text-2); padding-top:3px; }
.mrow__list{ display:flex; flex-wrap:wrap; gap:7px; }
.mrow__list .dish-pill{ font-size:12px; padding:5px 10px 5px 8px; }

/* ---------------- 菜品库 ---------------- */
.search{
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; border-radius:14px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.search input{
  border:0; outline:0; background:transparent; font:inherit; font-size:14px;
  width:100%; color:var(--text);
}
.search input::placeholder{ color:var(--muted); }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dish-card{
  position:relative; text-align:left; cursor:pointer;
  padding:12px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:.18s;
}
.dish-card:active{ transform:scale(.97); }
.dish-card__emoji{
  height:64px; border-radius:14px; display:grid; place-items:center;
  font-size:30px; margin-bottom:9px;
  background:linear-gradient(135deg,#FFF2E4,#FFE7D6);
}
.dish-card__name{ font-size:13.5px; font-weight:800; }
.dish-card__meta{ font-size:11px; color:var(--muted); margin-top:3px; }
.dish-card__plus{
  position:absolute; right:9px; top:9px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--primary);
  display:grid; place-items:center; font-size:15px; font-weight:800;
  box-shadow:var(--shadow-sm);
}

/* ---------------- 采购清单 ---------------- */
.progress{
  padding:14px 16px; border-radius:var(--r-md);
  background:linear-gradient(135deg,#EAF7F0,#F4FBF7);
  border:1px solid #D5EEE1;
}
.progress__top{ display:flex; align-items:baseline; font-size:13px; }
.progress__top b{ font-size:15px; }
.progress__top span{ margin-left:auto; color:var(--green); font-weight:700; }
.bar{ height:9px; border-radius:6px; background:#DFEDE5; margin-top:10px; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,#6BC79B,#3FA678); transition:width .35s ease; }

.shop-group{ margin-top:16px; }
.shop-group__title{
  font-size:12.5px; font-weight:800; color:var(--text-2);
  margin:0 2px 8px; display:flex; align-items:center; gap:6px;
}
.shop-group__title span{ font-size:11px; color:var(--muted); font-weight:600; }

.shop-item{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; background:var(--card);
  border:1px solid var(--line); border-bottom:0; cursor:pointer;
}
.shop-group .shop-item:first-of-type{ border-radius:var(--r-md) var(--r-md) 0 0; }
.shop-group .shop-item:last-of-type{ border-radius:0 0 var(--r-md) var(--r-md); border-bottom:1px solid var(--line); }
.shop-item__box{
  width:21px; height:21px; border-radius:50%;
  border:2px solid #E4D8C8; flex:0 0 auto;
  display:grid; place-items:center; font-size:12px; color:#fff;
  transition:.18s;
}
.shop-item__name{ font-size:14px; font-weight:600; }
.shop-item__qty{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.shop-item.is-done .shop-item__box{ background:var(--green); border-color:var(--green); }
.shop-item.is-done .shop-item__name{ color:var(--muted); text-decoration:line-through; }

/* ---------------- 底部 Tab ---------------- */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;   /* 页签数量变了也不用改这里 */
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.tab{
  border:0; background:none; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--muted); transition:.18s; position:relative;
}
.tab i{ font-size:19px; font-style:normal; line-height:1; }
.tab span{ font-size:10px; font-weight:700; letter-spacing:0; white-space:nowrap; }
.tab.is-on{ color:var(--primary); }
.tab.is-on i{ transform:translateY(-2px); transition:.18s; }
.tab.is-on::after{
  content:""; position:absolute; top:5px; width:26px; height:3px;
  border-radius:2px; background:var(--primary);
}

/* ---------------- 底部弹层 ---------------- */
.sheet-mask{
  position:absolute; inset:0; z-index:40;
  background:rgba(48,38,28,.36); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.24s;
}
.sheet-mask.is-open{ opacity:1; pointer-events:auto; }
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:41;
  background:var(--card);
  border-radius:26px 26px 0 0;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateY(102%); transition:transform .3s cubic-bezier(.3,.9,.3,1);
  max-height:78%; overflow-y:auto;
}
.sheet.is-open{ transform:none; }
.sheet__grip{
  width:40px; height:4px; border-radius:3px; background:var(--line);
  margin:4px auto 14px;
}
.sheet h3{ margin:0 0 4px; font-size:16.5px; }
.sheet__sub{ font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.field-label{ font-size:12.5px; font-weight:800; color:var(--text-2); margin:14px 0 9px; }
.field-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sheet__foot{ display:flex; gap:10px; margin-top:22px; }
.sheet__foot .btn{ flex:1; }

/* ---------------- 轻提示 ---------------- */
.toast{
  position:absolute; left:50%; bottom:calc(var(--tab-h) + 22px);
  transform:translate(-50%,14px);
  background:rgba(51,48,44,.92); color:#fff;
  font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:.26s; z-index:60;
  white-space:nowrap;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------------- 菜品小胶囊：可点文字 / 可点删除 ---------------- */
.dish-pill{ padding:6px 8px 6px 10px; }
.dish-pill__txt{
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
}
.dish-pill__txt span{ font-size:15px; }
.dish-pill__x{
  font-style:normal; font-size:10px; line-height:1;
  color:var(--muted); opacity:.7; cursor:pointer;
  padding:3px 2px; border-radius:6px; transition:.18s;
}
.dish-pill__x:hover{ color:var(--primary); opacity:1; background:var(--primary-soft); }
.dish-pill--add{ padding:7px 12px; }

/* 菜品卡里的 ＋ 按钮不吃掉整卡点击 */
.dish-card__plus{ z-index:2; }
.dish-card{ font:inherit; }

/* ===========================================================
   手机 / PWA 适配
   =========================================================== */

html{ -webkit-text-size-adjust:100%; }

/* 手机上禁止页面整体橡皮筋 / 下拉刷新，滚动只发生在内容区 */
body{ overscroll-behavior-y:none; }

/* 顶部留出刘海 / 状态栏高度 */
.topbar{ padding-top:calc(20px + env(safe-area-inset-top,0px)); }

/* 手指点按：去掉双击缩放带来的延迟，去掉误选中 */
.tab, .chip, .btn, .icon-btn, .dish-pill__txt, .dish-pill__x,
.dish-card, .shop-item, .day-btn, .dish-card__plus, .link{
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
.search input{ -webkit-user-select:text; user-select:text; }

/* 手指点得到的热区（桌面鼠标下也更好点） */
.icon-btn{ width:37px; height:37px; font-size:15px; }
.dish-pill{ padding:6px 4px 6px 10px; }
.dish-pill__x{ padding:10px 8px; }
.day-btn{ min-width:54px; padding:9px 4px; }

/* iOS 上字号小于 16px 的输入框会自动放大整页，这里顶住 */
@media (max-width:599px){
  .search input{ font-size:16px; }
  .sheet input{ font-size:16px; }
}

/* 键盘弹出时，把弹层底部顶起来（--kb 由 JS 按可视窗口算出来） */
.sheet{
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--kb,0px));
}

/* 「加到主屏幕」提示条 */
.install-tip{
  position:absolute; left:14px; right:14px;
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 12px);
  z-index:35;
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:16px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(150,110,70,.22);
  font-size:12.5px; line-height:1.5;
  animation:fadeUp .34s ease both;
}
.install-tip > span{ font-size:20px; line-height:1; }
.install-tip b{ display:block; color:var(--primary); }
.install-tip__x{
  margin-left:auto; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  border:0; background:var(--card-soft); color:var(--muted);
  font-size:12px; cursor:pointer;
}

/* 已装到桌面（独立窗口）时，隐藏浏览器里才需要的东西 */
@media (display-mode:standalone){
  .install-tip{ display:none; }
}

/* 宽屏手机上把外层卡片圆角收掉 */
@media (max-width:599px){
  .app{ min-height:100dvh; }
}


/* ---------------- 「我的」页：列表项 / 说明块 ---------------- */
.listcard{ border-radius:var(--r-md); overflow:hidden; }
.row-item{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:13px 14px; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  background:var(--card); border:1px solid var(--line); border-bottom:0;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.row-item:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
.row-item:last-child{ border-radius:0 0 var(--r-md) var(--r-md); border-bottom:1px solid var(--line); }
.row-item:only-child{ border-radius:var(--r-md); border-bottom:1px solid var(--line); }
.row-item:active{ background:var(--card-soft); }
.row-item__icon{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; font-size:17px; background:var(--card-soft);
}
.row-item__t{ display:block; font-size:14px; font-weight:700; }
.row-item__s{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.row-item__go{ margin-left:auto; color:var(--muted); font-size:16px; flex:0 0 auto; }
.row-item--danger .row-item__t{ color:#D9503F; }

.note{
  margin-top:16px; padding:14px 15px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,#EAF7F0,#F5FBF8);
  border:1px solid #D5EEE1;
  font-size:12.5px; color:var(--text-2); line-height:1.75;
}
.note b{ display:block; color:var(--text); font-size:13px; margin-bottom:3px; }