* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #E6EAF0;
  color: #1F2329;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }
button { touch-action: manipulation; }
.app {
  width: 100%;
  max-width: 414px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  background: #F3F5F8;
  display: flex;
  flex-direction: column;
  position: relative;
}
.navbar {
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 14px 10px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 0.5px solid rgba(229, 231, 235, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  flex: none;
}
.navbar h1 { min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; }
.navbar .date { font-size: 12px; color: #86909C; white-space: nowrap; }
.content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 18px;
}
.card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 0.5px solid rgba(232, 234, 237, 0.95);
  box-shadow: 0 6px 18px rgba(31, 35, 41, 0.04);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.1px; }
.muted { color: #86909C; font-size: 12px; }
.seg {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 14px;
  background: #E8EDF3;
}
.seg button {
  flex: 1;
  padding: 8px 0;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #4E5969;
  cursor: pointer;
}
.seg button.on {
  background: #FFFFFF;
  color: #185FA5;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08);
}
.countcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 62%);
}
.countcard .num {
  font-size: 34px;
  font-weight: 700;
  color: #185FA5;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.steppers { display: flex; gap: 8px; flex: none; }
.steppers button {
  width: 44px;
  height: 38px;
  border-radius: 10px;
  border: 0.5px solid #E1E4E8;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  color: #4E5969;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
}
.steppers button.pri { background: #185FA5; color: #fff; border-color: #185FA5; box-shadow: 0 4px 10px rgba(24, 95, 165, 0.22); }
.steppers button:active { transform: scale(0.96); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 0.5px solid #E1E4E8;
  border-radius: 999px;
  background: #F7F8FA;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.chip b { color: #185FA5; font-weight: 700; }
.chip.on { background: #E6F1FB; border-color: #93BFF2; color: #185FA5; box-shadow: inset 0 0 0 0.5px #93BFF2; }
.chip.add { border-style: dashed; background: #fff; color: #86909C; }
.chip:active { transform: scale(0.98); }
.btnrow { display: flex; gap: 10px; margin-top: 2px; }
.btn {
  flex: 1;
  padding: 13px 0;
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  border: 0.5px solid #E1E4E8;
  background: #FFFFFF;
  color: #4E5969;
}
.btn.pri {
  background: linear-gradient(180deg, #1E6BB8 0%, #185FA5 100%);
  color: #fff;
  border-color: #185FA5;
  font-weight: 600;
  box-shadow: 0 8px 16px rgba(24, 95, 165, 0.22);
}
.btn:active { opacity: 0.88; }
.btn:disabled { opacity: 0.55; cursor: default; }
.tabbar {
  height: calc(72px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 0.5px solid #E5E7EB;
  box-shadow: 0 -4px 16px rgba(31, 35, 41, 0.04);
  display: flex;
  padding: 4px 4px env(safe-area-inset-bottom);
  flex: none;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #86909C;
  font-size: 13px;
  line-height: 1.2;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 4px 0 2px;
}
.tab svg { width: 26px; height: 26px; stroke: #86909C; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: #185FA5; font-weight: 600; background: #F3F8FD; }
.tab.on svg { stroke: #185FA5; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  background: #E6F1FB;
  color: #185FA5;
  flex: none;
}
.tag.green { background: #E8F7F0; color: #0F6E56; }
.tag.amber { background: #FAF0DC; color: #8A5A0B; }
.hisrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  border-bottom: 0.5px solid #F0F1F3;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  color: inherit;
}
.hisrow:last-child { border-bottom: none; }
.hisrow:active { background: #F7F9FB; border-radius: 10px; }
.hisrow::after { content: "›"; color: #C9CDD4; font-size: 18px; line-height: 1; flex: none; margin-left: 2px; }
.hisrow .d {
  width: 56px;
  font-weight: 600;
  font-size: 13px;
  flex: none;
  text-align: center;
  background: #F4F6F8;
  border-radius: 8px;
  padding: 4px 0;
}
.hisrow .dishes {
  flex: 1;
  font-size: 12px;
  color: #86909C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hisrow .n { font-size: 15px; font-weight: 700; color: #185FA5; flex: none; font-variant-numeric: tabular-nums; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.metric { background: #FFFFFF; border-radius: 16px; padding: 14px; border: 0.5px solid rgba(232, 234, 237, 0.95); box-shadow: 0 6px 18px rgba(31, 35, 41, 0.04); }
.metric:first-child { background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 70%); }
.metric:first-child .v { color: #185FA5; }
.metric .v { font-size: 24px; font-weight: 700; color: #1F2329; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.metric .v span { font-size: 12px; font-weight: 400; color: #86909C; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding: 4px 2px 0; }
.bcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.bcol .b { width: 68%; border-radius: 7px 7px 3px 3px; background: #9EC4EA; min-height: 0; }
.bcol.hi .b { background: linear-gradient(180deg, #3B86C8 0%, #185FA5 100%); }
.bcol .lb { font-size: 10px; color: #86909C; }
.bcol .vl { font-size: 10px; color: #4E5969; }
.rank { margin-bottom: 8px; }
.rank:last-child { margin-bottom: 0; }
.rank .lb { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; gap: 8px; }
.rank .track { height: 10px; background: #F0F2F5; border-radius: 999px; overflow: hidden; }
.rank .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7FB2E5, #185FA5); }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 0.5px solid #E8EAED;
  box-shadow: 0 6px 18px rgba(31, 35, 41, 0.04);
  padding: 11px 14px;
  margin-bottom: 12px;
  color: #86909C;
  font-size: 13px;
}
.dishrow {
  display: flex;
  align-items: center;
  padding: 11px 0;
  border-bottom: 0.5px solid #F0F1F3;
  font-size: 14px;
  gap: 6px;
}
.dishrow:last-child { border-bottom: none; }
.dishrow .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dishrow .cnt { font-size: 12px; color: #86909C; flex: none; }
.dishrow .op { flex: none; text-align: right; }
.dishrow .op button {
  border: none;
  background: #F3F8FD;
  color: #185FA5;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
}
.dishrow .op button.del { color: #D23B3A; background: #FDECEC; }
.addline { display: flex; gap: 10px; margin-top: 10px; }
.addline input {
  flex: 1;
  min-width: 0;
  border: 0.5px solid #D9DCE0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
}
.addline button {
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: #185FA5;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex: none;
}
.checkrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.cb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #C9CDD4;
  display: inline-block;
  position: relative;
  flex: none;
}
.cb.on { background: #185FA5; border-color: #185FA5; }
.cb.on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.table-wrap { overflow-x: auto; border-radius: 12px; border: 0.5px solid #E8EAED; }
table.prev { width: 100%; border-collapse: collapse; font-size: 12px; }
table.prev th, table.prev td { border: 0.5px solid #EEF0F3; padding: 8px 8px; text-align: center; white-space: nowrap; }
table.prev th { background: #F7F9FB; font-weight: 600; color: #4E5969; }
table.prev tr:last-child td { background: #F8FBFE; }
.fmt { display: flex; gap: 8px; margin-top: 4px; }
.fmt button {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 0.5px solid #E5E7EB;
  background: #fff;
  color: #4E5969;
  font-size: 13px;
  cursor: pointer;
}
.fmt button.on { background: #E6F1FB; color: #185FA5; border-color: #93BFF2; font-weight: 600; }
.hint { font-size: 11px; color: #86909C; margin-top: 8px; text-align: center; }
.sum3 { display: flex; gap: 0; padding: 6px 0 2px; }
.sum3 .cell { flex: 1; text-align: center; }
.sum3 .cell + .cell { border-left: 0.5px solid #F0F1F3; }
.sum3 .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.sum3 .n em { font-style: normal; font-size: 11px; font-weight: 400; color: #86909C; }
.sum3 .blue { color: #185FA5; }
@media (max-width: 360px) {
  .steppers { gap: 6px; }
  .steppers button { width: 36px; }
  .countcard .num { font-size: 28px; }
}