:root {
  --bg: #faf8f5;
  --fg: #1c1a17;
  --muted: #6f6a63;
  --accent: #d4622a;
  --card: #ffffff;
  --line: #e8e3dc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17150f;
    --fg: #f0ece5;
    --muted: #9a938a;
    --accent: #ff8a4c;
    --card: #221f19;
    --line: #35302a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem 1.5rem;
}

.slot-label { margin: 0; color: var(--muted); font-size: 0.9rem; }
.dish-name { margin: 0.25rem 0 0.5rem; font-size: 2rem; line-height: 1.25; }
.shop-name { margin: 0; color: var(--muted); }
.price { margin: 0.25rem 0 0; color: var(--muted); }
.reason { margin: 1rem 0 1.5rem; color: var(--accent); }
.empty-text { margin: 0 0 1.25rem; color: var(--muted); }

.swap {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.primary {
  display: block;
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 0.75rem;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* 「去下单」是 <a>（Universal Links 唤不起脚本跳转，见 deeplink.js）。
   链接不合法时 setShopLink 会摘掉 href，点不动了 —— 外观必须跟着变，
   否则用户只会觉得按钮坏了。兜底路径是下面的「复制店名」。 */
.primary[aria-disabled="true"] {
  background: var(--line);
  color: var(--muted);
  cursor: default;
}

.ghost {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.pool-link {
  display: block;
  margin-top: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.overlay[hidden] { display: none; }

.sheet {
  width: 100%;
  max-width: 34rem;
  background: var(--card);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}

.fb-question { margin: 0 0 1.25rem; font-size: 1.1rem; }

.fb-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.fb-buttons button {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: none;
  color: var(--fg);
  font-size: 1.05rem;
  cursor: pointer;
}

.fb-extra {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
}

.link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.fb-price-box { display: flex; gap: 0.5rem; margin-top: 1rem; }
.fb-price-box[hidden] { display: none; }
.fb-price-box input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
}
/* 填实付价的结果反馈。以前保存成功和输了非法值都是「输入框一收，没了」，
   两种情况长得一模一样 —— 这是全应用最容易让人以为存上了而其实没存的地方。 */
.fb-price-msg {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.fb-price-msg[hidden] { display: none; }

.fb-price-box button {
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.page-title { font-size: 1.5rem; margin: 1rem 0 1.25rem; }
.form-title { font-size: 1rem; margin: 0 0 0.75rem; color: var(--muted); }

.form {
  display: grid;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
/* display: grid 是作者级声明，会盖掉浏览器默认的 [hidden] { display: none }。
   不补这条，JS 里设 .hidden = true 对表单毫无作用。同 .overlay / .fb-price-box。 */
.form[hidden] { display: none; }

.form input,
.form select {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
}

/* 操作成功的即时反馈。#io-msg 那行小灰字在页面顶部，用户在下面删店时
   根本看不见 —— 这个固定在屏幕底部，无论滚到哪儿都会跳出来。 */
.toast {
  position: fixed;
  /* 左右都定住再用 margin 居中，不要 left:50% + translateX(-50%)：
     那种写法下收缩包裹的可用宽度只从中线算到右边缘，等于只剩半屏，
     长一点的店名会被挤成又窄又高的一坨。 */
  left: 1rem;
  right: 1rem;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  width: fit-content;
  margin-inline: auto;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
  z-index: 100;
  pointer-events: none;  /* 纯提示，不该挡住底下的按钮 */
  opacity: 0;
  /* 0.2s 在手机上几乎察觉不到，淡出尤其显得像是直接消失。 */
  transition: opacity 0.3s ease;
}
.toast-show { opacity: 1; }
/* position: fixed 不改 display，[hidden] 本来就生效；写出来是为了跟
   .overlay / .form / .io-row 保持一致，免得以后有人给它加 display 踩坑。 */
.toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

.io-row { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
.io-row[hidden] { display: none; }  /* 同上：display: flex 会盖掉 [hidden] */
.io-row > * { flex: 1; margin-top: 0; }
.import-label { text-align: center; }
.io-msg { min-height: 1.5rem; color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }

.shop-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.shop-head { display: flex; justify-content: space-between; align-items: baseline; }
.shop-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.shop-meta { color: var(--muted); font-size: 0.8rem; }
.shop-blocked { color: var(--accent); }

/* 「吃坏了」的回头路：误触拉黑之后要能在候选池里改回来。 */
.hygiene-row { margin: 0.5rem 0 0; }
.hygiene-select {
  margin-left: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
}

.dish-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.dish-stat { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

/* 被「别再推这个」按过的菜。用强调色而不是灰色 —— 这是个用户主动做过的
   决定，不是背景信息，得能一眼扫到。
   独占一行是量出来的结果不是偏好：375px 下左栏只剩 126px，接在
   「¥31・午/晚」后面必然换行，与其让它半吊着不如写死。 */
.dish-muted {
  display: block;
  margin-top: 0.15rem;
  color: var(--accent);
  font-size: 0.78rem;
}

/* 轮播位置指示。不做圆点是因为候选可能有几十道，圆点会排到屏幕外。
   排在卡片内容的末尾、三个按钮之前 —— 它说明的是「你在看第几道」，
   属于内容不属于操作。夹在按钮中间会让人以为它跟某个按钮有关。 */
.carousel-pos {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 1.25rem;
}