/* ==========================================================================
   食堂口碑（今天吃什么 · 社区化）
   --------------------------------------------------------------------------
   由 hgumap/js/canteen-review.js 使用。
   单独成文件的原因：app.css 已近 39 万字节，且本仓库的构建脚本会对
   index.html 中字面量引用的 .css/.js 做内容哈希，独立文件同样能正确指纹化。
   全部颜色走语义 token，因此自动获得深色模式；任何硬编码颜色都配套一条
   html[data-theme="dark"] 覆盖。
   ========================================================================== */

.ew-rating-strip,
.ew-reviews-list,
.ew-editor-card,
.ew-my-card,
.ew-board,
.ew-mine-head,
.ew-mine-grid {
  --ew-accent: #e8804a;
  --ew-accent-soft: rgba(232, 128, 74, 0.12);
  --ew-accent-border: rgba(232, 128, 74, 0.28);
  --ew-star: #f5a623;
  --ew-surface: var(--drawer-surface, rgba(255, 255, 255, 0.5));
}

html[data-theme="dark"] .ew-rating-strip,
html[data-theme="dark"] .ew-reviews-list,
html[data-theme="dark"] .ew-editor-card,
html[data-theme="dark"] .ew-my-card,
html[data-theme="dark"] .ew-board,
html[data-theme="dark"] .ew-mine-head,
html[data-theme="dark"] .ew-mine-grid {
  --ew-accent: #f2a06b;
  --ew-accent-soft: rgba(242, 160, 107, 0.18);
  --ew-accent-border: rgba(242, 160, 107, 0.36);
  --ew-star: #ffc857;
}

/* 写评价页已改成扁平版式（不再有 .ew-editor-card），但这批变量必须继续存在 ——
   .ew-editor-target / .ew-scope-hint / .ew-editor-status 都用了 var(--ew-accent-soft)
   且没有兜底值，变量丢了就会背景透明。所以直接挂到页面容器上。 */
#canteen-editor-page {
  --ew-accent: #e8804a;
  --ew-accent-soft: rgba(232, 128, 74, 0.12);
  --ew-accent-border: rgba(232, 128, 74, 0.28);
  --ew-star: #f5a623;
  --ew-surface: var(--drawer-surface, rgba(255, 255, 255, 0.5));
}
html[data-theme="dark"] #canteen-editor-page {
  --ew-accent: #f2a06b;
  --ew-accent-soft: rgba(242, 160, 107, 0.18);
  --ew-accent-border: rgba(242, 160, 107, 0.36);
  --ew-star: #ffc857;
}

/* ---------- 星级 ---------- */
.ew-review-stars,
.ew-strip-stars,
.ew-editor-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ew-star, #f5a623);
  font-size: 13px;
}
.ew-review-stars .fa-star.is-off,
.ew-strip-stars .fa-star.is-off,
.ew-editor-stars .fa-star.is-off {
  color: var(--subtext);
  opacity: 0.22;
}

/* ---------- 窗口列表里的评分角标 ---------- */
.ew-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--hgu-radius-pill, 999px);
  background: var(--ew-accent-soft, rgba(232, 128, 74, 0.12));
  color: var(--ew-accent, #e8804a);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.ew-rating-badge small {
  font-weight: 400;
  opacity: 0.75;
}
.ew-rating-badge.is-empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--subtext);
  opacity: 0.6;
  font-weight: 400;
}

/* ---------- 窗口详情页的评分条 ---------- */
.ew-rating-strip {
  margin: 12px 0;
  padding: 14px;
  border-radius: var(--hgu-radius-xl, 12px);
  background: var(--ew-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ew-strip-loading {
  text-align: center;
  color: var(--subtext);
  font-size: 13px;
  padding: 8px 0;
}
.ew-strip-main {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.ew-strip-score {
  min-width: 96px;
  text-align: center;
}
.ew-strip-score b {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ew-accent);
}
.ew-strip-score small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--subtext);
  opacity: 0.8;
}
.ew-strip-dist {
  flex: 1;
  min-width: 160px;
}
.ew-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  font-size: 11px;
  color: var(--subtext);
}
.ew-dist-row > span { width: 10px; }
.ew-dist-row > small { width: 26px; text-align: right; opacity: 0.7; }
.ew-dist-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--text-light, rgba(76, 175, 80, 0.15));
  overflow: hidden;
}
.ew-dist-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ew-star, #f5a623);
}
.ew-strip-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
/* 评分条里的「我的评分」：点星星直接打分（原来的「写评价」按钮已移除） */
.ew-strip-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ew-strip-rate-label {
  font-size: 12px;
  color: var(--subtext);
  opacity: 0.85;
  flex-shrink: 0;
}
.ew-strip-rate-stars {
  display: inline-flex;
  gap: 6px;
  font-size: 24px;
  line-height: 1;
  color: var(--ew-star, #f5a623);
  cursor: pointer;
}
.ew-strip-rate-stars .fa-star {
  transition: transform 0.15s ease;
}
.ew-strip-rate-stars .fa-star.is-off {
  color: var(--subtext);
  opacity: 0.22;
}
.ew-strip-rate-stars .fa-star:active {
  transform: scale(0.9);
}
.ew-strip-rate-hint {
  font-size: 11px;
  color: var(--subtext);
  opacity: 0.75;
}
.ew-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--hgu-radius-md, 8px);
  background: transparent;
  color: var(--subtext);
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ew-btn.primary {
  background: var(--ew-accent);
  border-color: var(--ew-accent);
  color: #fff;
  font-weight: 600;
}
.ew-btn:active { opacity: 0.75; }

/* ---------- 评价列表 ---------- */
.ew-reviews-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--hgu-radius-md, 8px);
  background: var(--ew-accent-soft);
  color: var(--subtext);
  font-size: 12px;
  line-height: 1.6;
}
.ew-review-card,
.ew-my-card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--hgu-radius-xl, 12px);
  background: var(--ew-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ew-review-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
  min-width: 0;
}
.ew-review-author b { color: var(--subtext); }
.ew-review-author small { color: var(--subtext); opacity: 0.6; font-size: 11px; }

/* 卡片顶部一行：左边是作者信息，右边是「我的评价」标注 */
.ew-review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
/* 本人评价：右上角标注 + 主题色描边，一眼能认出来 */
.ew-review-card.is-mine {
  border-color: var(--ew-accent-border, rgba(232, 128, 74, 0.5));
  box-shadow: 0 0 0 1px var(--ew-accent-border, rgba(232, 128, 74, 0.28)), var(--shadow);
}
.ew-review-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ew-review-mine-flag {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: var(--hgu-radius-pill, 999px);
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.5));
  background: var(--ew-accent-soft);
  color: var(--ew-accent, var(--ew-theme-strong));
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ew-review-pending-flag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--hgu-radius-pill, 999px);
  background: rgba(255, 159, 64, .18);
  color: #c77700;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 头像右侧两行：第一行「昵称 + 评价 N 次」，第二行「打星 + 时间」（同字号） */
.ew-review-author-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ew-review-author-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ew-review-author-line b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ew-review-author-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* 打星与日期同字号：星星在日期前面 */
.ew-review-stars-inline {
  display: inline-flex;
  gap: 1px;
  font-size: 10.5px;
  color: #f5a623;
  line-height: 1.3;
  flex-shrink: 0;
}
.ew-review-stars-inline .fa-star.is-off { color: var(--subtext); opacity: 0.35; }
/* 选择器带上 .ew-review-author 压过上面的 `.ew-review-author small`（11px/0.6） */
.ew-review-author small.ew-review-time {
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0.55;
}
.ew-review-time {
  color: var(--subtext);
  opacity: 0.65;
}
/* 精确到菜品的评价：正文上方标出是哪道菜 */
.ew-review-dish {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  padding: 2px 9px;
  border-radius: var(--hgu-radius-pill, 999px);
  background: var(--ew-accent-soft);
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.35));
  font-size: 11.5px;
  color: var(--ew-accent, var(--ew-theme-strong));
}

/* 「评价 N 次」标签：颜色随已通过评价的窗口数加深 */
.ew-review-count {
  flex-shrink: 0;
  padding: 0 5px;
  border-radius: var(--hgu-radius-pill, 999px);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.ew-level-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  vertical-align: middle;
}
.ew-review-count.is-gray       { color: #8a8f98; background: rgba(138, 143, 152, .14); border-color: rgba(138, 143, 152, .32); }
.ew-review-count.is-green      { color: #2f9e5f; background: rgba(47, 158, 95, .14);   border-color: rgba(47, 158, 95, .34); }
.ew-review-count.is-blue       { color: #2f7fe0; background: rgba(47, 127, 224, .14);  border-color: rgba(47, 127, 224, .34); }
.ew-review-count.is-amber      { color: #d98a00; background: rgba(217, 138, 0, .15);   border-color: rgba(217, 138, 0, .36); }
.ew-review-count.is-orange-red { color: #f2601a; background: rgba(242, 96, 26, .15);   border-color: rgba(242, 96, 26, .36); }
.ew-review-count.is-red        { color: #e03131; background: rgba(224, 49, 49, .15);   border-color: rgba(224, 49, 49, .36); }
html[data-theme="dark"] .ew-review-count.is-gray       { color: #a8adb6; }
html[data-theme="dark"] .ew-review-count.is-green      { color: #5ecb8e; }
html[data-theme="dark"] .ew-review-count.is-blue       { color: #6cb0ff; }
html[data-theme="dark"] .ew-review-count.is-amber      { color: #ffc857; }
html[data-theme="dark"] .ew-review-count.is-orange-red { color: #ff8a5c; }
html[data-theme="dark"] .ew-review-count.is-red        { color: #ff6b6b; }
.ew-review-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--text-light);
}
.ew-review-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text-light);
  color: var(--subtext);
  font-size: 12px;
}
.ew-review-badge {
  padding: 1px 8px;
  border-radius: var(--hgu-radius-pill, 999px);
  background: var(--ew-accent-soft);
  color: var(--ew-accent);
  font-size: 11px;
  font-weight: 600;
}
.ew-source-platform-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 4px;
}
.ew-review-content {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--subtext);
  white-space: pre-wrap;
  word-break: break-word;
}
.ew-review-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.ew-review-imgs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--hgu-radius-sm, 6px);
  background: var(--text-light);
  cursor: zoom-in;
}
.ew-review-pending-img {
  font-size: 12px;
  color: var(--subtext);
  opacity: 0.75;
  margin: 4px 0;
}
.ew-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}
.ew-review-foot-left { display: flex; align-items: center; gap: 10px; }
.ew-review-foot-right { display: flex; align-items: center; gap: 14px; }

/* 赞 / 踩按钮（左下角）：一条评价里两者只能选一个，再点同一个 = 取消。
   两者共用 .ew-vote 的底色/描边/圆角，只有选中态配色不同 ——
   之前点踩只写了 .ew-dislike，没继承到基础样式，所以看起来「没有样式」。 */
.ew-vote-box { display: inline-flex; align-items: center; gap: 6px; }
.ew-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--ew-dish-border);
  border-radius: var(--hgu-radius-pill);
  background: transparent;
  color: var(--subtext);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.ew-vote i { font-size: 11.5px; }
.ew-vote:active { transform: scale(.94); }
.ew-vote:disabled { opacity: .6; cursor: default; }
.ew-vote.liked {
  background: var(--ew-dish-soft);
  border-color: var(--ew-dish);
  color: var(--ew-dish);
  font-weight: 700;
}
/* 点踩：中性灰蓝，与点赞的暖色区分开 */
.ew-dislike { border-color: var(--hgu-border-soft); }
.ew-dislike.disliked {
  background: rgba(107, 119, 133, .14);
  border-color: #6b7785;
  color: #6b7785;
  font-weight: 700;
}
.ew-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--subtext);
  opacity: 0.6;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.ew-link.danger { color: #e05a4f; opacity: 0.85; }
.ew-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--subtext);
  opacity: 0.6;
  font-size: 13px;
}
.ew-empty i { font-size: 22px; display: block; margin-bottom: 8px; }
.ew-empty p { margin: 6px 0 0; }
.ew-load-more {
  display: block;
  width: 100%;
  margin: 8px 0 20px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--hgu-radius-md, 8px);
  background: var(--ew-surface);
  color: var(--subtext);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- 编辑器（扁平版式：不套卡片，只用分隔线分区） ---------- */
/* 内容区默认是 flex + gap:16px，扁平版式由各分区自己的 margin 控制间距，
   否则分隔线上下各吃一个 16px 的 gap，中间会空成一条缝。 */
#canteen-editor-page .eatwhat-content { gap: 0; }

.ew-editor-card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--hgu-radius-xl, 12px);
  background: var(--ew-surface);
  /* 打分框 / 图文填写框都要看得见的边框（原来只有 --border 那层很淡的线） */
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.28));
  box-shadow: var(--shadow);
}
.ew-editor-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--subtext);
  margin-bottom: 8px;
}

/* 分区之间的细分隔线（与发布寻物启事页 .lf-pub-divider 同一视觉）
   ⚠️ 不用 --hgu-border-soft：它= --border = rgba(255,255,255,.4)，
      在白底卡片上是一条看不见的白线。这里写死灰色，浅/深色底都看得见。 */
.ew-pub-divider {
  height: 1px;
  margin: 14px 0;
  background: rgba(120, 130, 160, 0.3);
}
html[data-theme="dark"] .ew-pub-divider { background: rgba(150, 160, 185, 0.28); }

/* 评分行：左侧标题「点击评分」（与食堂/窗口/菜品 同级标题大小、正文黑色），
   右侧五个星星，星星与标题同字号 —— 需求明确要求「一样大小」。
   星星用 padding 把点击热区撑到 25px 高，图标本身仍是 1em。 */
.ew-rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ew-rate-title {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  /* 需求：正文黑色。不能用 var(--text) —— 本页面没有主题覆盖，
     :root 的 --text 是绿色（#4a7c59），会变成绿字。 */
  color: #1f2228;
}
html[data-theme="dark"] .ew-rate-title { color: #f2f4f8; }
.ew-rate-row .ew-editor-stars {
  flex: none;
  font-size: 1em;
  gap: 0;
  cursor: pointer;
}
/* 星星与标题同字号（13px）后单颗只有 13px 宽，用横向 padding 把点击热区撑到 ~21px
   （图标本身仍是 1em，视觉间距与 gap:6px 时一致） */
.ew-rate-row .ew-editor-stars i { padding: 7px 4px; }

.ew-editor-stars {
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  cursor: pointer;
}

/* ---------- 编辑器：评价对象选择器（食堂 / 窗口 / 菜品） ---------- */
.ew-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ew-scope-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 30%;
  min-width: 120px;
  /* 「评价对象」那行标题已去掉，把它的字号/字重搬到这里 ——
     食堂 / 窗口 / 菜品 就是本区的标题（同 .ew-editor-label 的视觉） */
  font-size: 13px;
  font-weight: 600;
  color: var(--subtext);
}
.ew-scope-field select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--hgu-radius-sm, 6px);
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.35));
  background: var(--ew-surface, var(--bg-primary));
  /* 选择器里的文字用主题橙黄色，和本功能的强调色一致 */
  color: var(--ew-theme-strong, #e08500);
  font-weight: 600;
}
.ew-scope-field select option {
  color: var(--ew-theme-strong, #e08500);
  background: var(--ew-surface, var(--bg-primary));
}
/* 修改模式：显示正在修改哪一条（选择器整块隐藏） */
.ew-editor-target {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--hgu-radius-sm, 6px);
  background: var(--ew-accent-soft);
  font-size: 12.5px;
  color: var(--subtext);
}
/* 已评价过同一对象：只提示 + 给「修改评价」入口，不给重复提交 */
.ew-scope-hint {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--hgu-radius-sm, 6px);
  background: var(--ew-accent-soft);
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.35));
  font-size: 12px;
  color: var(--subtext);
  line-height: 1.7;
}
.ew-scope-edit-btn {
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ew-accent-border, rgba(232, 128, 74, 0.5));
  border-radius: var(--hgu-radius-pill, 999px);
  background: var(--ew-surface, var(--bg-primary));
  color: var(--ew-accent, var(--ew-theme-strong));
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ew-editor-status {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: var(--hgu-radius-sm, 6px);
  background: var(--ew-accent-soft);
  font-size: 12px;
  color: var(--subtext);
  line-height: 1.6;
}
.ew-editor-text {
  display: block;
  width: 100%;
  min-height: 120px;
  /* 需求：去掉输入框边框，文字直接铺在页面上（同发布寻物启事页的描述框） */
  padding: 2px 2px 6px;
  margin: 0 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--subtext);
  font-size: 14px;
  line-height: 1.7;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.ew-editor-text:focus { outline: none; border: none; box-shadow: none; }
.ew-editor-text::placeholder { color: var(--subtext); opacity: 0.45; }
.ew-editor-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ew-img-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--hgu-radius-sm, 6px);
  overflow: hidden;
  background: var(--text-light);
}
.ew-img-item img { width: 100%; height: 100%; object-fit: cover; }
.ew-img-item button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
/* 图片角标：区分「旧图（已上传/审核中）」与「本次新选（上传中）」 */
.ew-img-badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 6px;
  border-radius: var(--hgu-radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
}
.ew-img-badge.is-pending { background: rgba(245, 166, 35, 0.9); color: #3a2a00; }
.ew-img-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1 / 1;
  /* 需求：改成灰色虚线框（与发布寻物启事页 .lf-img-add 同一效果），
     中间只留一个相机图标，不再带「加图」文字 */
  border: 1px dashed rgba(120, 130, 160, 0.5);
  border-radius: var(--hgu-radius-sm, 6px);
  color: #9aa0ab;
  font-size: 22px;
  cursor: pointer;
}
/* file input 必须彻底移出 flex 布局，否则会占一个槽位把相机图标挤偏 */
.ew-img-add input { display: none !important; }
.ew-img-add > i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; }
html[data-theme="dark"] .ew-img-add { color: #8b93a3; }
.ew-submit {
  display: block;
  width: 100%;
  margin: 4px 0 24px;
  padding: 14px;
  /* 提交纠错 / 提交评价统一带边框（用户要求） */
  border: 1.5px solid var(--ew-theme-border, rgba(246, 168, 33, 0.45));
  border-radius: var(--hgu-radius-xl, 12px);
  /* 提交按钮在编辑器页里拿不到 .ew-editor-card 上的 --ew-accent（是兄弟节点），
     原来 var(--ew-accent) 解析失败 → 背景透明 + 白字 = 看不见，这里补足兜底色 */
  background: var(--ew-accent, var(--ew-theme, #f6a821));
  /* 橙黄底上用深色字（主题的橙黄偏亮，白字对比度不够，看起来就像"字没了"） */
  color: #2f2410;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ew-submit:active { opacity: 0.85; }
.ew-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 举报评价：改为标准二级抽屉样式 ---------- */
.secondary-drawer.report-drawer {
  max-width: 480px;
  --report-accent: #ff8f00;
}
html[data-theme="dark"] .secondary-drawer.report-drawer {
  --report-accent: #ffb74d;
}
/* 标题用橙黄（与「食品问题投诉」抽屉一致） */
.report-drawer .modal-header span {
  color: var(--report-accent, #ff8f00);
}
.report-drawer .ew-sheet-reasons {
  margin-bottom: 0;
}

/* ---------- 我的食评 ---------- */
.ew-mine-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: var(--hgu-radius-xl, 12px);
  background: var(--ew-surface);
  border: 1.5px solid var(--ew-accent-border, rgba(232, 128, 74, 0.38));
  box-shadow: var(--shadow);
}
.ew-mine-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--text-light);
}
.ew-mine-head b { color: var(--subtext); font-size: 15px; }
.ew-mine-ident { min-width: 0; }
/* 评价数 / 评分数 / 审核中：放在原来「贡献值」的位置（昵称下方一行） */
.ew-mine-stats {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 6px;
}
.ew-mine-stats > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ew-mine-stats b { font-size: 15px; color: var(--ew-accent); }
.ew-mine-stats span { font-size: 11.5px; color: var(--subtext); opacity: 0.85; }
.ew-section-title {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--subtext);
}
.ew-my-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ew-my-window { font-size: 13px; font-weight: 600; color: var(--subtext); }
.ew-my-status {
  padding: 2px 8px;
  border-radius: var(--hgu-radius-pill, 999px);
  font-size: 11px;
  background: var(--text-light);
  color: var(--subtext);
}
.ew-my-status.ok { background: rgba(76, 175, 80, 0.16); color: #3f9142; }
.ew-my-status.warn { background: rgba(245, 166, 35, 0.18); color: #b3781a; }
.ew-my-status.err { background: rgba(224, 90, 79, 0.16); color: #c0453a; }
html[data-theme="dark"] .ew-my-status.ok { color: #8bd48e; }
html[data-theme="dark"] .ew-my-status.warn { color: #ffc857; }
html[data-theme="dark"] .ew-my-status.err { color: #ff8b80; }
.ew-pending-note,
.ew-reject-note {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: var(--hgu-radius-sm, 6px);
  font-size: 12px;
  line-height: 1.6;
}
.ew-pending-note { background: rgba(245, 166, 35, 0.14); color: var(--subtext); }
.ew-reject-note { background: rgba(224, 90, 79, 0.12); color: var(--subtext); }
.ew-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ---------- 榜单 ---------- */
.ew-board {
  border-radius: var(--hgu-radius-xl, 12px);
  background: var(--ew-surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ew-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ew-board-row:last-child { border-bottom: 0; }
.ew-board-row img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--text-light);
}
.ew-board-rank {
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--subtext);
  opacity: 0.55;
}
.ew-board-rank.r1 { color: #d4a017; opacity: 1; }
.ew-board-rank.r2 { color: #8e9aa6; opacity: 1; }
.ew-board-rank.r3 { color: #b87333; opacity: 1; }
.ew-board-name { flex: 1; color: var(--subtext); }
.ew-board-score { font-weight: 700; color: var(--ew-accent); }

/* ---------- 大图查看 ---------- */
.ew-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.88);
}
.ew-image-overlay.active { display: flex; }
.ew-image-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--hgu-radius-md, 8px);
}

/* ---------- 举报底部弹层 ---------- */
.ew-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.ew-sheet {
  width: 100%;
  max-width: 520px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--hgu-radius-drawer, 32px 32px 0 0);
  background: var(--bg);
  box-shadow: var(--hgu-shadow-modal, 0 14px 42px rgba(0, 0, 0, 0.28));
}
.ew-sheet h4 { margin: 0 0 12px; font-size: 15px; color: var(--subtext); }
.ew-sheet-reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ew-sheet-reasons button {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--hgu-radius-md, 8px);
  background: transparent;
  color: var(--subtext);
  font-size: 13px;
  cursor: pointer;
}
.ew-sheet .ew-btn { width: 100%; }

/* ---------- 菜品图片（life.js 的菜品行） ---------- */
.dish-menu-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  border-radius: var(--hgu-radius-sm, 6px);
  overflow: hidden;
  background: var(--text-light);
}
.dish-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 生活页入口按钮 ---------- */
.eatwhat-action-btn.mine-btn {
  background: var(--ew-accent-soft, rgba(232, 128, 74, 0.12));
  color: var(--ew-accent, #e8804a);
  border-color: var(--ew-accent-border, rgba(232, 128, 74, 0.28));
}

@media (max-width: 380px) {
  .ew-mine-grid { grid-template-columns: repeat(2, 1fr); }
  .ew-review-imgs { grid-template-columns: repeat(2, 1fr); }
  .ew-strip-score b { font-size: 26px; }
}

/* ==========================================================================
   今天吃什么 · 页面布局与主题色（仅限本功能，不动全站绿色主色）
   --------------------------------------------------------------------------
   主题色分工：
     整体（页头 / 切换按钮 / 搜索框 / 窗口卡片）= 橙黄
     菜品 = 橙红    饮品 = 浅蓝
   所有卡片类元素一律带边框。

   令牌定义在 :root 而非仅 #eatwhat-page：.ew-* 是本功能独占命名空间，
   这样写可让卡片组件在评价子页、我的食评页里也拿到一致的边框色，
   避免「变量未定义 → border 声明整条失效 → 卡片没边框」的坑。
   全局绿色主色不受影响（--text / --bg 等均未改动）。
   ========================================================================== */
:root {
  --ew-theme: #f6a821;                              /* 橙黄主色 */
  --ew-theme-strong: #e08500;
  --ew-theme-soft: rgba(246, 168, 33, 0.14);
  --ew-theme-border: rgba(246, 168, 33, 0.45);
  --ew-card-border: rgba(246, 168, 33, 0.32);
  --ew-card-surface: var(--hgu-surface-glass);
  --ew-dish: #ff6b35;                               /* 菜品：橙红 */
  --ew-dish-soft: rgba(255, 107, 53, 0.12);
  --ew-dish-border: rgba(255, 107, 53, 0.40);
  --ew-drink: #3f9dfb;                              /* 饮品：浅蓝 */
  --ew-drink-soft: rgba(63, 157, 251, 0.12);
  --ew-drink-border: rgba(63, 157, 251, 0.40);
}

html[data-theme="dark"] {
  --ew-theme: #ffc857;
  --ew-theme-strong: #ffb020;
  --ew-theme-soft: rgba(255, 200, 87, 0.16);
  --ew-theme-border: rgba(255, 200, 87, 0.45);
  --ew-card-border: rgba(255, 200, 87, 0.30);
  --ew-dish: #ff8a5c;
  --ew-dish-soft: rgba(255, 138, 92, 0.18);
  --ew-dish-border: rgba(255, 138, 92, 0.44);
  --ew-drink: #7cc4ff;
  --ew-drink-soft: rgba(124, 196, 255, 0.18);
  --ew-drink-border: rgba(124, 196, 255, 0.44);
}

/* ---------- 页头 ---------- */
#eatwhat-page .sub-page-title {
  color: var(--ew-theme-strong);
  font-weight: 700;
}
#eatwhat-page .sub-page-back {
  color: var(--ew-theme-strong);
  border-color: var(--ew-theme-border);
}

/* ---------- 顶部三视图切换（窗口 / 随机 / 评价） ---------- */
.eatwhat-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-height: 44px;
  padding: 4px;
  margin-bottom: 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--ew-theme-border);
  border-radius: var(--hgu-radius-pill);
  background: var(--ew-theme-soft);
}

.eatwhat-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  border-radius: var(--hgu-radius-pill);
  background: transparent;
  color: var(--subtext);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.eatwhat-view-tab:active { transform: scale(0.96); }
.eatwhat-view-tab.active {
  background: var(--ew-theme);
  color: #fff;
  box-shadow: 0 2px 10px rgba(246, 168, 33, 0.30);
}
.eatwhat-view-panel[hidden] { display: none !important; }

/* ---------- 搜索框：保留并强化边框 ---------- */
.eatwhat-search-bar {
  border: 1.5px solid var(--ew-theme-border);
  background: var(--ew-card-surface);
  border-radius: var(--hgu-radius-pill);
  overflow: hidden;
}
.eatwhat-search-bar input {
  color: var(--ew-theme-strong);
  -webkit-text-fill-color: var(--ew-theme-strong);
  caret-color: var(--ew-theme-strong);
}
.eatwhat-search-bar input::placeholder { color: var(--ew-theme-strong); opacity: 0.55; }
.eatwhat-search-bar .clear-btn:hover { color: var(--ew-theme-strong); }

/* ---------- 食堂切换：去掉外层「胶囊容器」 ----------
   这个容器其实来自 app.css 的共享圆角规则（给 .eatwhat-canteen-tabs 设了
   border-radius: var(--hgu-radius-xl)）叠加我先前加的底边线，视觉上像一层多余的胶囊。
   这里把容器的边框 / 圆角 / 底色全部清掉，只保留「文字高亮 + 可移动横线」本身
   —— 这套样式用户明确偏好，窗口详情内的「菜品 / 评价」也复用同一套。 */
.eatwhat-canteen-tabs {
  padding-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.eatwhat-canteen-tabs .canteen-tab.active { color: var(--ew-theme-strong); }
.eatwhat-canteen-tabs .canteen-tab-indicator { background: var(--ew-theme); }

/* 窗口详情内的二级切换条：同样不含容器，只补间距（.wd-tabs 也带 .eatwhat-canteen-tabs） */
.wd-tabs {
  margin: 4px 0 14px;
  padding: 0 2px;
}
.wd-panel[hidden] { display: none !important; }

/* ---------- 搜索 / 随机推荐：菜品橙红 + 左侧缩略图 ---------- */
.ew-search-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--hgu-radius-lg);
  overflow: hidden;
  background: var(--hgu-surface-glass);
  border: 1px solid var(--ew-dish-border);
}
.ew-search-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ew-search-thumb.is-empty {
  display: grid;
  place-items: center;
  border-color: var(--hgu-border-soft);
  color: var(--subtext);
  opacity: 0.4;
  font-size: 18px;
}

/* 菜品：橙红（原为 #ff9800 橙黄，与「菜品 = 橙红」的配色分工不一致） */
.ew-search-item.dish {
  border-color: var(--ew-dish-border);
}
.ew-search-item.dish .ew-search-name,
.ew-search-item.dish .ew-search-price {
  color: var(--ew-dish);
}
.ew-search-item.dish .ew-search-tag {
  background: var(--ew-dish-soft);
}
.ew-search-item.dish .ew-search-goto {
  border-color: var(--ew-dish);
  color: var(--ew-dish);
}
.ew-search-item.dish:active {
  background: var(--ew-dish-soft);
}
.ew-search-item.drink .ew-search-name,
.ew-search-item.drink .ew-search-price {
  color: var(--ew-drink);
}
.ew-search-item.drink {
  border-color: var(--ew-drink-border);
}
.ew-search-item.drink .ew-search-tag {
  background: var(--ew-drink-soft);
}
.ew-search-item.drink .ew-search-goto {
  border-color: var(--ew-drink);
  color: var(--ew-drink);
}
.ew-search-item.drink:active {
  background: var(--ew-drink-soft);
}

/* ---------- 随机页：推荐按钮改胶囊型 ---------- */
#eatwhat-page .random-type-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#eatwhat-page .random-type-btn {
  border-radius: var(--hgu-radius-pill);
}
#eatwhat-page .random-type-btn[data-type="dish"] {
  border-color: var(--ew-dish-border);
  color: var(--ew-dish);
  background: var(--ew-dish-soft);
}
#eatwhat-page .random-type-btn[data-type="drink"] {
  border-color: var(--ew-drink-border);
  color: var(--ew-drink);
  background: var(--ew-drink-soft);
}

/* ---------- 窗口：双排瀑布流（上图 + 下文，楼层降级为标签） ----------
   两个独立列容器（列内 flex 纵向排列），由 life.js 把卡片按「先横行」的顺序
   轮流放进左右两列：1、2 并排，3、4 并排……
   不用 CSS 多列布局（column-count）的原因：多列是「先排纵列再排横行」，
   会把 1、2、3 都塞进左列，序号顺序与线下逛食堂的顺序对不上。
   也不用 grid：grid 同一行的卡片会被行高对齐，矮卡片下面必然留出大小不一的空档。 */
.eatwhat-windows-grid {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 40px;
}
.eatwhat-windows-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 加载中 / 空状态这类整块提示要占满整行，否则会被挤成半宽 */
.eatwhat-windows-grid > .search-loading,
.eatwhat-windows-grid > .empty-state {
  flex: 1 1 100%;
}

.eatwhat-window-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  border: 1.5px solid var(--ew-card-border);
  border-radius: var(--hgu-radius-xl);
  background: var(--ew-card-surface);
  box-shadow: var(--hgu-shadow-card);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.eatwhat-window-card:active {
  transform: scale(0.975);
  box-shadow: var(--hgu-shadow-raised);
}

.eatwhat-window-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ew-theme-soft);
}
.eatwhat-window-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eatwhat-window-cover .img-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ew-theme-strong);
  background: var(--ew-theme-soft);
  font-size: 24px;
}

.eatwhat-window-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px 12px;
}
.eatwhat-window-body .eatwhat-window-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ew-theme-strong);
  /* 允许换行、最多两行：瀑布流卡片高度自然，比单行截断更可读 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.eatwhat-window-body .eatwhat-window-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.eatwhat-window-card .ew-tag {
  padding: 1px 7px;
  font-size: 10px;
  border: 1px solid var(--ew-theme-border);
  background: var(--ew-theme-soft);
  color: var(--ew-theme-strong);
}
.eatwhat-window-card .ew-tag i {
  font-size: 9px;
}
.eatwhat-window-card .ew-tag-order {
  border-color: rgba(255, 152, 0, 0.5);
  background: rgba(255, 152, 0, 0.12);
  color: #e87516;
}
html[data-theme="dark"] .eatwhat-window-card .ew-tag-order {
  border-color: rgba(255, 183, 77, 0.5);
  background: rgba(255, 183, 77, 0.16);
  color: #ffb74d;
}
.eatwhat-window-card .ew-rating-badge {
  margin-left: 0;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.5;
  border: 1px solid var(--ew-theme-border);
}
.eatwhat-window-card .ew-rating-badge i,
.eatwhat-window-card .ew-rating-badge small {
  font-size: 9px;
}

/* ---------- 菜品：按分类套整卡片容器，分类标题在容器顶部 ---------- */
.dish-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 分类配色：菜品橙红、饮品浅蓝（分组容器与行都从这里取色） */
.dish-group.dish {
  --dish-accent: var(--ew-dish);
  --dish-accent-soft: var(--ew-dish-soft);
  --dish-accent-border: var(--ew-dish-border);
}
.dish-group.drink {
  --dish-accent: var(--ew-drink);
  --dish-accent-soft: var(--ew-drink-soft);
  --dish-accent-border: var(--ew-drink-border);
}

.dish-group {
  border: 1.5px solid var(--dish-accent-border);
  border-radius: var(--hgu-radius-xl);
  background: var(--hgu-surface-glass);
  box-shadow: var(--hgu-shadow-card);
  overflow: hidden;
}

/* 分类标题：普通标题样式（不再做成带边框的「标签」），位于该分类所有菜品之上 */
.dish-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--dish-accent-border);
  background: var(--dish-accent-soft);
  color: var(--dish-accent);
  font-size: 15px;
  font-weight: 700;
}
.dish-group-title small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}

.dish-group-list {
  display: flex;
  flex-direction: column;
}

/* 行：图片是「圆角正方形」缩略块，四周留几像素，不再拉满整行高度 */
.dish-row {
  display: flex;
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid var(--hgu-border-soft);
}
.dish-row:last-child { border-bottom: 0; }

.dish-row-image {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  /* 图片与图片框之间留几像素：照片不填满整个框 */
  padding: 5px;
  margin: 6px 10px 6px 6px;
  align-self: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dish-accent-soft);
  cursor: zoom-in;
}
.dish-row-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.dish-row-image.is-empty {
  display: grid;
  place-items: center;
  color: var(--dish-accent);
  font-size: 22px;
  opacity: 0.45;
  cursor: default;
}

.dish-row-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
/* 菜品名与价格上下两行（与随机推荐列表一致的层级） */
.dish-row-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  word-break: break-word;
}
html[data-theme="dark"] .dish-row-name {
  /* 深色模式下纯黑看不见，这里用近白；浅色模式按要求用黑 */
  color: #f2f2f2;
}
/* 菜品名 + 右上角评分（评分/评价人数） */
.dish-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dish-row-score {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dish-accent);
  white-space: nowrap;
}
.dish-row-score i { font-size: 11px; }
.dish-row-score small { font-size: 11px; font-weight: 600; opacity: .75; }
.dish-row-score.is-empty {
  font-size: 11px;
  font-weight: 500;
  color: var(--subtext);
  opacity: .75;
}
/* 价格与「评价」按钮同一行（按钮靠右） */
.dish-row-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 评价按钮：菜品橙红、饮品蓝色（沿用分组的强调色） */
.dish-row-rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--hgu-radius-pill);
  border: 1px solid var(--dish-accent-border);
  background: var(--dish-accent-soft);
  color: var(--dish-accent);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.dish-row-rate:active { transform: scale(.96); }
.dish-row-rate i { font-size: 11px; }
.dish-row-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dish-accent);
}
.dish-row-tag {
  padding: 1px 8px;
  border: 1px solid var(--dish-accent-border);
  border-radius: var(--hgu-radius-pill);
  background: var(--dish-accent-soft);
  color: var(--dish-accent);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 评价流（「评价」标签页） ---------- */
.ew-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
/* 评价流排序切换：最新 / 热门 / 随机 —— 直接复用食堂切换那套「文字 + 可移动横线」 */
.ew-feed-tabs {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  gap: 18px;
}
.ew-btn-compact {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 13px;
  border: 1.5px solid var(--ew-theme-border);
  background: var(--ew-theme-soft);
  color: var(--ew-theme-strong);
}
.ew-review-window {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 8px;
  padding: 6px 9px;
  border: 1px dashed var(--ew-theme-border);
  border-radius: var(--hgu-radius-sm);
  background: var(--ew-theme-soft);
  color: var(--ew-theme-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ew-review-window span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ew-review-window .fa-chevron-right { font-size: 10px; opacity: 0.55; }

/* ---------- 「已下架」态（窗口停业换新 / 菜品换季） ----------
   历史评价必须继续可见，但不能点进详情（详情接口对下架窗口返回 404）。
   灰化 + 实线边框 + 去掉手型鼠标，右侧箭头换成「已下架」标签。 */
.ew-review-window.is-retired {
  cursor: default;
  opacity: 0.72;
  border-style: solid;
  border-color: var(--border-light, rgba(120, 130, 160, .35));
  background: transparent;
  color: var(--subtext);
}
.ew-review-dish.is-retired { opacity: 0.72; color: var(--subtext); }
/* .ew-review-window span 是 flex:1，会把这个小标签拉宽，必须自己收回来 */
.ew-retired-tag {
  flex: 0 0 auto !important;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(245, 108, 108, .14);
  color: #f56c6c;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 卡片边框统一（本功能内所有卡片类元素） ---------- */
#eatwhat-page .ew-review-card,
#eatwhat-page .ew-reviews-hint,
#eatwhat-page .ew-load-more,
#eatwhat-page .ew-board,
#eatwhat-page .ew-mine-head,
#eatwhat-page .ew-mine-grid > div,
#eatwhat-page .ew-editor-card,
#window-detail-page .ew-rating-strip,
#window-detail-page .ew-review-card,
#window-detail-page .dish-group {
  border-width: 1.5px;
}
#eatwhat-page .ew-review-card,
#eatwhat-page .ew-load-more,
#eatwhat-page .ew-board,
#eatwhat-page .ew-mine-head,
#eatwhat-page .ew-mine-grid > div,
#eatwhat-page .ew-editor-card,
#window-detail-page .ew-review-card,
#window-detail-page .ew-rating-strip {
  border-color: var(--ew-card-border);
}
/* 本人评价的高亮描边要压过上面那批带 #id 的规则（同权重下后面那条会赢） */
#eatwhat-page .ew-review-card.is-mine,
#window-detail-page .ew-review-card.is-mine {
  border-color: var(--ew-accent-border, rgba(232, 128, 74, 0.5));
  box-shadow: 0 0 0 1px var(--ew-accent-border, rgba(232, 128, 74, 0.28)), var(--shadow);
}

@media (max-width: 380px) {
  .eatwhat-windows-grid { gap: 9px; }
  .eatwhat-windows-col { gap: 9px; }
  .eatwhat-window-body { padding: 8px 9px 10px; }
  .eatwhat-window-body .eatwhat-window-name { font-size: 13px; }
  .eatwhat-view-tab { font-size: 13px; gap: 4px; }
  .dish-row { min-height: 68px; }
  .dish-row-image { flex-basis: 78px; width: 78px; }
  .dish-row-name { font-size: 14px; }
  .dish-row-price { font-size: 13px; }
  .ew-search-thumb { flex-basis: 50px; width: 50px; height: 50px; }
  .sub-page-action span { display: none; }
}

/* 与 .sub-page-back 一样绝对定位：标题在 flex 居中下才不会被挤偏。
   （曾经用 margin-left:auto 把动作按钮推到右边，结果把标题顶到了左边） */
.sub-page-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--ew-theme-border, rgba(246, 168, 33, 0.45));
  border-radius: var(--hgu-radius-pill);
  background: var(--ew-theme-soft, rgba(246, 168, 33, 0.14));
  color: var(--ew-theme-strong, #e08500);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.sub-page-action:active { transform: translateY(-50%) scale(0.96); }

/* ---------- 写评价页 / 我的食评页：沿用橙黄主题色 ---------- */
#canteen-editor-page .sub-page-title,
#canteen-mine-page .sub-page-title {
  color: var(--ew-theme-strong);
  font-weight: 700;
}
#canteen-editor-page .sub-page-back,
#canteen-mine-page .sub-page-back {
  color: var(--ew-theme-strong);
  border-color: var(--ew-theme-border);
}

/* ---------- 写评价页的免责提示（食品安全 / 工作态度） ---------- */
.ew-editor-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1.5px solid rgba(224, 90, 79, 0.45);
  border-radius: var(--hgu-radius-xl);
  background: rgba(224, 90, 79, 0.10);
  color: var(--subtext);
  font-size: 12.5px;
  line-height: 1.75;
}
.ew-editor-warn > i {
  flex-shrink: 0;
  margin-top: 3px;
  color: #e05a4f;
}
.ew-editor-warn b { color: #e05a4f; }
html[data-theme="dark"] .ew-editor-warn {
  border-color: rgba(255, 138, 92, 0.5);
  background: rgba(255, 138, 92, 0.14);
}
html[data-theme="dark"] .ew-editor-warn > i,
html[data-theme="dark"] .ew-editor-warn b { color: #ff8a5c; }

/* ==========================================================================
   图片查看器：多图左右滑动 + 手势/滚轮缩放
   --------------------------------------------------------------------------
   最小缩放（scale = 1）时图片宽度恰好等于舞台宽度；再缩小会在松手后回弹。
   交互全部由 canteen-review.js 的 openViewer 处理，这里只负责外观与
   touch-action（必须为 none，否则拖动会带着页面一起滚）。
   ========================================================================== */
.ew-iv {
  position: fixed;
  inset: 0;
  z-index: 100001;               /* 高于引导页(100000)与其它弹层 */
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .94);
  opacity: 0;
  /* 未激活时必须彻底「不参与交互」：只把 opacity 置 0 的话，元素仍然覆盖全屏并吃掉点击 */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
}
.ew-iv.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ew-iv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  color: #fff;
}
.ew-iv-count { font-size: 13px; opacity: .85; }
.ew-iv-hint { font-size: 11.5px; opacity: .6; }
.ew-iv-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.ew-iv-stage:active { cursor: grabbing; }
.ew-iv-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.ew-iv-slide {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ew-iv-slide img {
  display: block;
  width: 100%;                   /* 关键：最小缩放时宽度与页面相同 */
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* 图片下方浮出的评价信息：头像 / 昵称 / 次数标签 / 评分 / 日期 / 正文（过长省略）。
   左右滑动切图时同步切到上一条/下一条带图评价，这块内容也跟着更新；
   翻到已加载评价的末尾时会自动续拉下一页评价（见 canteen-review.js）。 */
.ew-iv-info {
  flex: 0 0 auto;
  max-height: 38vh;
  overflow-y: auto;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 18, 20, .96);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
}
.ew-iv-info-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ew-iv-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: rgba(255, 255, 255, .14);
}
.ew-iv-avatar.is-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
}
.ew-iv-info-lines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ew-iv-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ew-iv-line b {
  font-size: 13.5px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ew-iv-sub {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ew-iv-info .ew-review-time { color: rgba(255, 255, 255, .6); }
.ew-iv-info .ew-review-dish {
  margin-top: 8px;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #ffd9a0;
}
.ew-iv-content {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  white-space: pre-wrap;
  word-break: break-word;
  /* 正文过长只显示一部分（3 行） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 续拉评价时的提示 */
.ew-iv-loading {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

/* ============================================================
   横屏分栏（与 app.css 一致，由 JS 给 <html> 挂 .hgu-split 触发）
   举报底部弹层属于"弹窗"，收进左侧面板内；.ew-image-overlay / .ew-iv
   是沉浸式大图查看，仍然全屏。
   ============================================================ */
html.hgu-split .ew-sheet-mask {
  left: 0;
  right: auto;
  width: min(50vw, 580px);
}

html.hgu-split .ew-sheet {
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   评分信息并入窗口信息卡片（需求）：去掉它自带的卡片外观，只留一条分隔线。
   这里的 #id 前缀是为了压过文件前面那条
   「#window-detail-page .ew-rating-strip { border-width: 1.5px }」的统一描边规则。
   ============================================================ */
#window-detail-page .window-header-info .ew-rating-strip {
  margin: 12px 0 0;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hgu-border-soft);
  border-radius: 0;
  box-shadow: none;
}
#window-detail-page .window-header-info .ew-rating-strip .ew-strip-score b {
  font-size: 26px;
}
#window-detail-page .window-header-info .ew-rating-strip .ew-strip-rate {
  margin-top: 10px;
}

/* ============================================================
   我的食评：卡片统一橙黄描边；窗口行里的状态标签靠右；
   删除确认用同风格底部抽屉（不再用浏览器 confirm）。
   ============================================================ */
.ew-my-card {
  border: 1.5px solid var(--ew-accent-border, rgba(232, 128, 74, 0.38));
}
.ew-review-window .ew-my-status {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: max-content;
  flex-shrink: 0;
}
.ew-confirm-overlay {
  z-index: 10002;
}
.ew-confirm-drawer {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ew-confirm-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: var(--hgu-radius-pill, 999px);
  background: var(--hgu-border-soft);
}
.ew-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.ew-confirm-body {
  font-size: 13px;
  color: var(--subtext);
  line-height: 1.7;
}
/* 关键信息用主题橙黄色强调 */
.ew-strong {
  color: var(--ew-theme-strong, #e08500);
  font-weight: 700;
}
.ew-confirm-msg {
  margin-top: 8px;
  font-size: 12px;
  color: #e05a4f;
  min-height: 16px;
}
.ew-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.ew-confirm-cancel,
.ew-confirm-ok {
  padding: 9px 18px;
  border-radius: var(--hgu-radius-pill, 999px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ew-confirm-cancel {
  border: 1px solid var(--hgu-border-soft);
  background: transparent;
  color: var(--subtext);
}
.ew-confirm-ok {
  border: 1px solid var(--ew-theme, #f6a821);
  background: var(--ew-theme, #f6a821);
  color: #2f2410;
}
.ew-confirm-ok.danger {
  border-color: #e05a4f;
  background: #e05a4f;
  color: #fff;
}
.ew-confirm-ok:disabled {
  opacity: .6;
  cursor: default;
}