/* ============================================================
   桅杆堡小学菜谱云平台 · 视觉系统 v2
   ------------------------------------------------------------
   设计说明：
   · 配色：深翡翠（食堂/新鲜感）+ 暖陶土（汤品/食物）+ 纸白底
   · 排版：中文系统字体栈（不下载 Web 字体，秒开且不依赖外网）
   · 层次：卡片 → 细描边 → 三层阴影，避免「一块白板」的扁平感
   · 图标：内联 SVG sprite，随文字颜色走，不用 emoji
   · 下方保留一套工具类，给历史模板字符串用（app.js 里还有）
   ============================================================ */

:root {
  /* 主色：深翡翠 */
  --primary: #0e7c5a;
  --primary-600: #0a6650;
  --primary-700: #08543f;
  --primary-soft: #e8f4ef;
  --primary-soft-2: #f2f9f6;

  /* 暖色：汤 / 强调 */
  --accent: #c9753a;
  --accent-soft: #fdf4ea;
  --accent-ink: #a85f2b;

  /* 语义色 */
  --warn: #d9962b;
  --warn-soft: #fdf6e8;
  --danger: #cf4a3f;
  --danger-soft: #fdeeec;
  --info: #3d7ea6;
  --info-soft: #eef6fb;

  /* 文字 */
  --ink: #12271f;
  --ink-2: #38524a;
  --ink-3: #5d756c;
  --muted: #83988f;
  --on-dark: #eaf6f1;
  --on-dark-dim: rgba(234, 246, 241, .72);

  /* 线 / 面 */
  --line: #e2eae6;
  --hair: #eef3f0;
  --bg: #f2f6f3;
  --surface: #ffffff;
  --surface-2: #f7faf8;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;

  /* 阴影 */
  --sh-xs: 0 1px 2px rgba(18, 39, 31, .05);
  --sh-sm: 0 1px 2px rgba(18, 39, 31, .05), 0 2px 8px -2px rgba(18, 39, 31, .06);
  --sh-md: 0 1px 3px rgba(18, 39, 31, .05), 0 10px 24px -14px rgba(18, 39, 31, .18);
  --sh-lg: 0 2px 6px rgba(18, 39, 31, .06), 0 24px 48px -24px rgba(18, 39, 31, .28);
  --sh-focus: 0 0 0 3px rgba(14, 124, 90, .16);

  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans SC",
    "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --page: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  background:
    radial-gradient(1100px 420px at 12% -12%, #e7f2ec 0%, transparent 62%),
    radial-gradient(900px 380px at 92% 4%, #fdf3e8 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
img, svg { display: block; }

.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: rgba(14, 124, 90, .18); }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: #c8d8d1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbdbd4; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #b3cac1; }

/* ============================================================ 顶栏 */
.appbar {
  position: sticky; top: 0; z-index: 40;
  color: var(--on-dark);
  background:
    radial-gradient(900px 260px at 8% -120%, rgba(52, 211, 153, .45), transparent 70%),
    radial-gradient(700px 240px at 88% -140%, rgba(20, 184, 166, .38), transparent 70%),
    linear-gradient(135deg, #0a4f3b 0%, #0b5f47 46%, #0d7055 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 24px -18px rgba(10, 79, 59, .9);
}
.appbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 9px);
}
.appbar-inner {
  position: relative; z-index: 1;
  max-width: var(--page); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
}
.brand-mark .ic { width: 24px; height: 24px; stroke-width: 1.6; }
.brand-mark.lg { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 14px; background: var(--primary-soft); border-color: #d7e9e1; }
.brand-mark.lg .ic { width: 30px; height: 30px; color: var(--primary); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong {
  font-size: 16px; font-weight: 700; letter-spacing: .01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.brand-text small { font-size: 12px; color: var(--on-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

.nav {
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .1);
}
.nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--on-dark-dim);
  transition: background .16s, color .16s, box-shadow .16s;
}
.nav-item .ic { width: 16px; height: 16px; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-item.is-active { background: #fff; color: var(--primary-700); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }

.appbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--on-dark);
  padding: 6px 11px; border-radius: 99px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap; transition: background .2s, color .2s;
}
.status .ic { width: 14px; height: 14px; opacity: .9; }
.status.is-ok { background: rgba(52, 211, 153, .2); border-color: rgba(110, 231, 183, .34); }
.status.is-busy { background: rgba(250, 204, 21, .18); border-color: rgba(253, 224, 71, .3); }
.status.is-err { background: rgba(248, 113, 113, .22); border-color: rgba(252, 165, 165, .35); color: #fff1f1; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--on-dark); background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .16s, transform .16s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .22); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn .ic { width: 18px; height: 18px; }

/* 白色背景里的 icon-btn */
.modal .icon-btn, .settings-body .icon-btn { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); }
.modal .icon-btn:hover { background: #eef3f0; color: var(--ink); }

/* ============================================================ 页面骨架 */
.page { max-width: var(--page); margin: 0 auto; padding: 22px 24px 8px; }
.view { animation: fadeUp .32s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================ 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 11px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .12s, color .16s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn .ic { width: 17px; height: 17px; }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #128a64 0%, var(--primary) 55%, #0b6d4f 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 16px -10px rgba(11, 109, 79, .9);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #149a70 0%, #0d8560 55%, #0a6249 100%); }

.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); box-shadow: var(--sh-xs); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: #d3e2db; color: var(--ink); }

.btn-soft { background: var(--primary-soft); color: var(--primary-700); border-color: #d6e9e1; }
.btn-soft:hover:not(:disabled) { background: #ddf0e8; border-color: #c3e0d5; }
.btn-soft.danger { background: var(--danger-soft); color: var(--danger); border-color: #f6d7d3; }
.btn-soft.danger:hover:not(:disabled) { background: #fbe2df; }

.btn-gray { background: #eff3f1; color: var(--ink-3); }
.btn-gray:hover:not(:disabled) { background: #e6ece9; }

.btn-sec { background: var(--primary-soft); color: var(--primary-700); border-color: #d6e9e1; }
.btn-sec:hover:not(:disabled) { background: #ddf0e8; }

.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-sm .ic { width: 15px; height: 15px; }

.btn-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.push-right { margin-left: auto; }

/* ============================================================ 表单 */
.field { display: inline-flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.field > span em { font-style: normal; font-weight: 400; color: #a6b7b0; margin-left: 4px; letter-spacing: 0; }
.field.block { display: flex; }
.field.grow { flex: 1 1 220px; }
.field.small > span { font-size: 11px; }

.input {
  height: 38px; padding: 0 11px; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; color: var(--ink);
  transition: border-color .16s, box-shadow .16s, background .16s;
  font-variant-numeric: tabular-nums;
}
.input::placeholder { color: #a9bbb4; }
.input:hover { border-color: #cfdfd8; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--sh-focus); }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: none;
}
.select-wrap { position: relative; display: block; }
.select-wrap .chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.select-plain {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent; border: 0; color: inherit; font-weight: 600; font-size: 14px;
  padding-right: 4px;
}
.select-plain option { color: var(--ink); }
.chev { width: 15px; height: 15px; opacity: .6; }

.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.form-row-inline { display: inline-flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; margin-bottom: 12px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.form-hint { font-size: 12px; color: var(--muted); }
.form-error { color: var(--danger); font-size: 13px; margin: 4px 0 0; }

/* 开关 */
.switch { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 38px; height: 22px; border-radius: 99px; background: #d7e2dd;
  position: relative; transition: background .18s; flex: none;
}
.switch-dot {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform .18s var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--sh-focus); }

/* 分段控件 */
.segmented {
  display: inline-flex; padding: 3px; border-radius: 11px;
  background: #eef3f0; border: 1px solid #e3ebe7;
}
.segmented button {
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: background .16s, color .16s, box-shadow .16s;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active { background: #fff; color: var(--primary-700); box-shadow: 0 1px 2px rgba(18, 39, 31, .12); }

/* ============================================================ 卡片 / 区块 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .01em;
}
.section-head h2 .ic { width: 18px; height: 18px; color: var(--primary); }
.section-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 62ch; }
.section-head.compact { margin-bottom: 12px; }
.section-head.compact h2 { font-size: 15px; }
.count { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
  white-space: nowrap;
}
.pill .ic { width: 13px; height: 13px; }
.pill-soft { background: var(--primary-soft); color: var(--primary-700); border-color: #d6e9e1; }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: #f2ddc6; }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(180deg, #fffaf2, #fdf5ea);
  border: 1px solid #f0dcbf; border-radius: var(--r-lg);
  color: #7a5424; font-size: 13.5px; line-height: 1.7;
  box-shadow: var(--sh-xs);
}
.notice b { color: #6c4519; }

.hint { font-size: 12px; color: var(--muted); }

/* ============================================================ 家长端 Hero */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  padding: 30px 32px;
  color: #fff;
  background:
    radial-gradient(760px 300px at 88% -30%, rgba(251, 191, 36, .26), transparent 62%),
    radial-gradient(620px 320px at 6% 120%, rgba(52, 211, 153, .3), transparent 60%),
    linear-gradient(140deg, #0a4b39 0%, #0b6049 45%, #0d7a5a 100%);
  box-shadow: 0 30px 60px -40px rgba(8, 60, 46, .95), 0 2px 0 rgba(255, 255, 255, .06) inset;
  margin-bottom: 18px;
}
.hero::before {
  content: ""; position: absolute; right: -90px; top: -110px; width: 340px; height: 340px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .1), transparent 68%);
}
.hero::after {
  content: ""; position: absolute; right: 40px; bottom: -140px; width: 260px; height: 260px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08);
}
.hero-inner { position: relative; z-index: 1; display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.hero-copy { min-width: 260px; flex: 1 1 380px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #b6e6d3;
  padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 14px;
}
.hero-eyebrow .ic { width: 14px; height: 14px; }
.hero-title {
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.22; font-weight: 800;
  letter-spacing: .01em; color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .16);
}
.hero-title b { font-family: var(--font-num); font-weight: 800; }
.hero-range { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.hero-stats { display: flex; gap: 0; margin-top: 22px; flex-wrap: wrap; }
.hero-stats .stat { padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-stats .stat:first-child { padding-left: 0; border-left: 0; }
.hero-stats b { display: block; font-family: var(--font-num); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.hero-stats span { font-size: 12px; color: rgba(255, 255, 255, .68); }

.hero-panel {
  flex: 0 1 300px; min-width: 260px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  padding: 14px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px;
}
.hero-field {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  border-radius: 10px; padding: 8px 12px;
}
.hero-field .ic { width: 16px; height: 16px; color: var(--primary); flex: none; }
.hero-field select { flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; }
.hero .segmented { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .16); }
.hero .segmented button { color: rgba(255, 255, 255, .78); }
.hero .segmented button.is-active { background: #fff; color: var(--primary-700); }
.hero-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .62); }
.hero-note .ic { width: 13px; height: 13px; }

/* ============================================================ 菜谱大表（家长端 / 管理端共用） */
.menu-list { display: flex; flex-direction: column; gap: 16px; }
.menu-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.menu-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.menu-card__title { font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.menu-card__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.menu-scroll { overflow-x: auto; }
.menu-table-wrap { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }

table.menu-table {
  width: 100%; min-width: 720px;
  border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.menu-table thead th {
  background: var(--surface-2);
  padding: 10px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #6d857b;
  text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--hair);
}
.menu-table thead th:last-child { border-right: 0; }
.menu-table thead th .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; color: #93aca2; }
.menu-table tbody td {
  padding: 11px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  font-size: 13px; line-height: 1.6;
}
.menu-table tbody tr:last-child td { border-bottom: 0; }
.menu-table tbody td:last-child { border-right: 0; }
.menu-table tbody tr:hover td { background: #fbfdfc; }

.menu-table td.day {
  width: 112px; text-align: center;
  background: #fcfefd; font-weight: 700; color: var(--ink); font-size: 12.5px;
}
.menu-table td.day .wk { display: block; margin-top: 2px; font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.menu-table td.cell { text-align: left; color: var(--ink-2); }
.menu-table td.cell .dname { display: block; font-weight: 600; color: var(--ink); font-size: 13px; }
.menu-table td.cell .damt { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; letter-spacing: .01em; }
.menu-table td.cell.empty { text-align: center; color: #cbd8d2; font-size: 15px; }
.menu-table td.soup { background: var(--accent-soft); }
.menu-table td.soup .dname { color: var(--accent-ink); }
.menu-table td.off { text-align: center; color: var(--muted); letter-spacing: .3em; background: var(--surface-2); font-size: 12.5px; }

.menu-table td[data-i] { cursor: pointer; position: relative; transition: background .14s; }
.menu-table td[data-i]:hover { background: var(--primary-soft); }
.menu-table td[data-i]:hover::after {
  content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(14, 124, 90, .34); border-radius: 4px; pointer-events: none;
}

/* ============================================================ 手机端：每天一张卡 */
/* 手机端日期列表（phoneWeekHTML 用） */
.day-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* 管理端内嵌表格（bare 模式） */
.menu-inner { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
/* Hero 里的学期小标签 */
.hero-term {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 7px; margin-right: 10px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .2);
  vertical-align: 6px;
}
/* 营养条必须是块级才能显示宽度 */
.nutri-row__track { display: block; }
.nutri-row__bar { display: block; }
.day-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.day-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--hair);
}
.day-card__date { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.day-card__wk { font-size: 12px; color: var(--muted); }
.day-card__body { padding: 4px 0; }
.meal-row { display: flex; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--hair); }
.meal-row:first-child { border-top: 0; }
.meal-tag {
  flex: 0 0 68px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--primary-700);
  letter-spacing: .02em; padding-top: 2px;
}
.meal-tag .ic { width: 13px; height: 13px; opacity: .8; }
.meal-tag.soup { color: var(--accent-ink); }
.meal-dishes { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.meal-dishes .dname { display: block; font-weight: 500; color: var(--ink); }
.meal-dishes .damt { display: block; font-size: 11px; color: var(--muted); }
.meal-dishes .dish-line + .dish-line { margin-top: 6px; }
.day-card--off { padding: 14px 16px; text-align: center; color: var(--muted); font-size: 13px; background: var(--surface-2); }

.menu-card__head .pill { flex: none; }

/* ============================================================ 管理端工具条 */
.toolbar { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.toolbar-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: nowrap; }
.toolbar-row.wrap { flex-wrap: wrap; }
.toolbar-row:not(:first-child) { padding-top: 12px; border-top: 1px solid var(--hair); }
.toolbar-bottom { align-items: center; }
.v-divider { width: 1px; height: 26px; background: var(--line); margin: 0 4px; align-self: flex-end; }
.people-badge {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 10px; background: var(--primary-soft); color: var(--primary-700);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; align-self: flex-end;
}
.people-badge .ic { width: 15px; height: 15px; }
.people-badge b { font-family: var(--font-num); font-size: 16px; font-weight: 800; }

.day-toggles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.day-toggles .lead { font-size: 12px; color: var(--muted); margin-right: 2px; }
.day-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  transition: background .16s, border-color .16s, color .16s;
  user-select: none;
}
.day-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.day-toggle .dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #c6d6cf;
  display: grid; place-items: center; background: #fff; transition: all .16s;
}
.day-toggle .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; transition: background .16s; }
.day-toggle:has(input:checked) { background: #fff; border-color: #bcdcd0; color: var(--primary-700); }
.day-toggle:has(input:checked) .dot { border-color: var(--primary); }
.day-toggle:has(input:checked) .dot::after { background: var(--primary); }
.day-toggle:has(input:focus-visible) { box-shadow: var(--sh-focus); }
.day-toggle:not(:has(input:checked)) { background: #fdf4f2; border-color: #f2dcd7; color: #a97168; text-decoration: line-through; text-decoration-color: rgba(169, 113, 104, .45); }

/* ============================================================ AI */
.ai-card { background: linear-gradient(180deg, #fbfdfc, #ffffff); }
.ai-log {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 260px; overflow-y: auto;
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--hair);
}
.ai-hint { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.ai-msg { font-size: 13px; line-height: 1.7; padding: 9px 12px; border-radius: 10px; max-width: 92%; }
.ai-msg.me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 3px; box-shadow: var(--sh-xs); }
.ai-msg.err { align-self: flex-start; background: var(--danger-soft); border: 1px solid #f6d7d3; color: #9c3a30; }
.ai-msg b { font-weight: 700; }
.ai-input-row { display: flex; gap: 10px; margin-top: 12px; }
.ai-input-row .input { flex: 1; }

/* ============================================================ 三栏 */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-3 > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.mt-auto { margin-top: auto; }

.list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.list-item {
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--surface-2);
  transition: border-color .16s, background .16s;
}
.list-item:hover { border-color: #dbe8e2; background: #fbfdfc; }
.list-item__head { display: flex; align-items: center; gap: 8px; }
.list-item__title { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.list-item__body { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.65; }
.list-actions { display: flex; gap: 10px; margin-top: 6px; }
.link-btn { font-size: 12px; font-weight: 600; color: var(--primary); }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger); }
.reply {
  margin-top: 8px; padding: 8px 11px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  border-left: 3px solid var(--primary); background: #fff; font-size: 12.5px; color: var(--primary-700);
}
.reply b { font-weight: 700; }
.list-empty { padding: 18px 4px; text-align: center; font-size: 12.5px; color: #a2b4ad; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 250px; overflow-y: auto; align-content: flex-start; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--hair);
  font-size: 12px; color: var(--ink-2);
}
.chip b { font-family: var(--font-num); font-weight: 700; color: var(--primary-700); }
.chip span { font-size: 10.5px; color: var(--muted); }

/* ============================================================ 营养分析 */
.nutri-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nutri-card {
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 14px 16px; background: var(--surface-2);
}
.nutri-card.avg { border-color: #cfe7dd; background: linear-gradient(180deg, #f2faf6, #fff); }
.nutri-card__title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.nutri-card__title .ic { width: 14px; height: 14px; color: var(--primary); }
.nutri-rows { display: flex; flex-direction: column; gap: 8px; }
.nutri-row { display: grid; grid-template-columns: 46px 1fr 92px 34px; align-items: center; gap: 8px; }
.nutri-row__label { font-size: 11.5px; color: var(--muted); }
.nutri-row__track { height: 8px; border-radius: 99px; background: #e8efeb; overflow: hidden; }
.nutri-row__bar { height: 100%; border-radius: 99px; transition: width .5s var(--ease); }
.nutri-row__val { font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.nutri-row__tag { font-size: 10.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 6px; }
.bar-good { background: linear-gradient(90deg, #34b98a, var(--primary)); }
.bar-low { background: linear-gradient(90deg, #e88a7d, #d9564a); }
.bar-high { background: linear-gradient(90deg, #efc069, #d9962b); }
.tag-good { color: var(--primary-700); background: var(--primary-soft); }
.tag-low { color: #a8352b; background: var(--danger-soft); }
.tag-high { color: #90621a; background: var(--warn-soft); }
.nutri-unknown { margin-top: 9px; font-size: 11px; color: #b08a4a; line-height: 1.6; }
.nutri-note { font-size: 12px; color: var(--muted); grid-column: 1 / -1; }

/* ============================================================ 弹窗 */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 34, 27, .5);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.modal-mask.show, .modal-mask.flex { display: flex !important; }
.modal {
  width: 100%; max-width: 660px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: 0 40px 80px -30px rgba(6, 30, 24, .55);
  margin: auto; overflow: hidden;
  animation: modalIn .24s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-lg { max-width: 720px; }
.modal-sm { max-width: 400px; }
.modal-xl { max-width: 880px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, #fbfdfc, #fff);
}
.modal-head h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.modal-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.modal-body { padding: 18px 22px; overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 22px; border-top: 1px solid var(--hair); background: var(--surface-2);
}
.settings-body { display: flex; flex-direction: column; gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; background: #fff; }
.panel h4 {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
}
.panel h4 .ic { width: 16px; height: 16px; color: var(--primary); }
.panel h4 em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.panel-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.audit {
  margin: 10px 0 0; padding: 10px 12px; max-height: 200px; overflow: auto;
  background: #0f1f1a; color: #cfe8dd; border-radius: var(--r-md);
  font: 12px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre; tab-size: 2;
}

/* 登录弹窗 */
.login-brand { margin-bottom: 4px; }
.login-title { font-size: 20px; font-weight: 800; color: var(--ink); text-align: center; }
.login-sub { font-size: 12.5px; color: var(--muted); text-align: center; margin: 6px 0 20px; }
#loginForm .field { margin-bottom: 12px; }
.login-actions { display: flex; gap: 10px; margin-top: 18px; }
.login-actions .btn { flex: 1; }

/* 编辑弹窗里的菜块（app.js 生成） */
.dish-block { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 14px; margin-bottom: 10px; background: var(--surface-2); }
.dish-block:hover { border-color: #d9e7e0; }
.dish-block .dish-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dish-block .dish-head input { flex: 1; font-weight: 600; }
.item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.item-row .item-n { flex: 1 1 120px; min-width: 100px; }
.item-row .q-in { width: 84px; text-align: right; }
.item-row .u-sel { width: 78px; }
.item-row .g-in { width: 64px; text-align: right; }
.item-row .gwrap { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.item-row .gcell { min-width: 78px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.item-del { color: #c0cfc9; transition: color .15s; font-size: 16px; line-height: 1; padding: 4px; }
.item-del:hover { color: var(--danger); }
.add-item { font-size: 12px; font-weight: 600; color: var(--primary); }
.add-item:hover { text-decoration: underline; }
.editor-lead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }

/* 推荐卡片 */
.rec-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 22px 4px; }
.rec-scroll {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 14px 22px 22px; scroll-snap-type: x mandatory;
}
.rec-card {
  scroll-snap-align: center; flex: 0 0 210px;
  border: 1px solid #d8e9e1; border-radius: var(--r-lg);
  padding: 14px; background: #fff;
  box-shadow: 0 10px 24px -18px rgba(9, 74, 56, .8);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.rec-card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 22px 36px -22px rgba(9, 74, 56, .55); }
.rec-card__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.type-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.type-meat { background: #fdeceb; color: #b4402f; }
.type-veg { background: var(--primary-soft); color: var(--primary-700); }
.type-soup { background: var(--accent-soft); color: var(--accent-ink); }
.type-staple { background: var(--info-soft); color: #2f6685; }
.rec-card__name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rec-card__items { font-size: 11.5px; color: var(--ink-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rec-card__items b { color: var(--ink-2); font-weight: 600; }
.rec-card__items .kg { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-card .btn { margin-top: 12px; width: 100%; }

/* ============================================================ 提示条 */
.toast-wrap {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 99px;
  background: rgba(15, 31, 26, .94); color: #eaf6f1;
  font-size: 13px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  animation: toastIn .22s var(--ease);
  backdrop-filter: blur(8px);
  max-width: min(90vw, 520px);
}
.toast.ok { background: rgba(10, 102, 80, .96); }
.toast.err { background: rgba(176, 52, 43, .96); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ 骨架屏 */
.skeleton-card {
  height: 260px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: linear-gradient(100deg, #f2f6f4 20%, #fbfdfc 40%, #f2f6f4 60%);
  background-size: 240% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ============================================================ 页脚 */
.footer {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 26px 24px 34px; font-size: 12px; color: #93a7a0;
}
.footer .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.footer .sep { opacity: .5; }

/* ============================================================ 响应式 */
@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .page { padding: 16px 16px 6px; }
  .appbar-inner { padding: 10px 16px; gap: 12px; }
  .brand-text strong { max-width: 46vw; }
  .brand-text small { display: none; }
  .nav { order: 3; width: 100%; }
  .nav-item { flex: 1; justify-content: center; }
  .appbar-actions { gap: 6px; }
  .hero { padding: 22px 20px; border-radius: var(--r-xl); }
  .hero-inner { gap: 18px; }
  .hero-panel { flex: 1 1 100%; }
  .grid-3 { grid-template-columns: 1fr; }
  .nutri-grid { grid-template-columns: 1fr; }
  .toolbar-row { flex-wrap: wrap; }
  .v-divider { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .page { padding: 12px 12px 4px; }
  .card { padding: 16px 14px; border-radius: var(--r-lg); }
  .hero { padding: 20px 16px; }
  .hero-title { font-size: 24px; }
  .hero-stats .stat { padding: 0 14px; }
  .hero-stats b { font-size: 22px; }
  .menu-card__head { padding: 13px 14px; flex-wrap: wrap; gap: 8px; }
  .menu-card__title { font-size: 15px; }
  .section-head { gap: 10px; }
  .section-head h2 { font-size: 15px; }
  .toolbar { padding: 14px; }
  .btn-group { width: 100%; }
  .btn-group .btn { flex: 1; }
  .field.small { flex: 1 1 calc(50% - 6px); }
  .field.small .input { width: 100% !important; }
  .people-badge { width: 100%; justify-content: center; }
  .modal { max-height: 92vh; border-radius: var(--r-lg); }
  .modal-mask { padding: 10px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }
  .nutri-row { grid-template-columns: 40px 1fr 78px 30px; gap: 6px; }
  .rec-scroll { padding: 12px 14px 18px; }
  .footer { padding: 20px 12px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================ 打印：只留菜谱表格 */
#printOnly { display: none; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff; }
  body > *:not(#printOnly) { display: none !important; }
  #printOnly { display: block !important; }
}

/* ============================================================
   工具类（历史模板字符串还在用，保留并做视觉对齐）
   ============================================================ */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.ml-auto { margin-left: auto; }

.relative { position: relative; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }

.gap-1 { gap: 4px; } .gap-1\.5 { gap: 6px; } .gap-2 { gap: 8px; }
.gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-x-3 { column-gap: 12px; } .gap-x-4 { column-gap: 16px; }
.gap-y-1 { row-gap: 4px; } .gap-y-2 { row-gap: 8px; }
.p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.pt-1 { padding-top: 4px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-0\.5 { margin-bottom: 2px; } .mb-1 { margin-bottom: 4px; } .mb-1\.5 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-10 { margin-bottom: 40px; }
.-mb-1 { margin-bottom: -4px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-0\.5 > * + * { margin-top: 2px; }
.space-y-1 > * + * { margin-top: 4px; }
.space-y-1\.5 > * + * { margin-top: 6px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }

.w-4 { width: 16px; } .w-8 { width: 32px; } .w-14 { width: 56px; } .w-16 { width: 64px; }
.w-20 { width: 80px; } .w-24 { width: 96px; } .w-full { width: 100%; }
.h-3 { height: 12px; } .h-4 { height: 16px; } .h-24 { height: 96px; }
.min-w-\[90px\] { min-width: 90px; }
.max-w-2xl { max-width: 672px; } .max-w-6xl { max-width: 1152px; }
.max-h-56 { max-height: 224px; } .max-h-64 { max-height: 256px; }
.max-h-\[85vh\] { max-height: 85vh; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13.5px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 23px; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-none { line-height: 1; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.break-all { word-break: break-all; }

.text-white { color: #fff; }
.text-gray-300 { color: #c2d0ca; }
.text-gray-400 { color: var(--muted); }
.text-gray-500 { color: var(--ink-3); }
.text-gray-600 { color: var(--ink-3); }
.text-gray-700 { color: var(--ink-2); }
.text-gray-800 { color: var(--ink); }
.text-emerald-100 { color: #c7ecdd; }
.text-emerald-500 { color: #12a97a; }
.text-emerald-600 { color: var(--primary); }
.text-emerald-700 { color: var(--primary-700); }
.text-emerald-800 { color: #075640; }
.text-emerald-900 { color: #063f2f; }
.text-amber-500 { color: var(--warn); }
.text-amber-700 { color: var(--accent-ink); }
.text-amber-800 { color: #8d4f1f; }
.text-red-400 { color: #e28a7f; }
.text-red-500 { color: var(--danger); }
.text-red-700 { color: #a8352b; }
.text-sky-700 { color: #2f6685; }

.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: var(--surface-2); }
.bg-gray-100 { background-color: #eef3f0; }
.bg-emerald-50 { background-color: var(--primary-soft-2); }
.bg-emerald-100 { background-color: var(--primary-soft); }
.bg-emerald-500 { background-color: var(--primary); }
.bg-amber-100 { background-color: var(--accent-soft); }
.bg-red-100 { background-color: var(--danger-soft); }
.bg-sky-100 { background-color: var(--info-soft); }
.bg-red-400 { background-color: #e0786c; }
.bg-amber-400 { background-color: var(--warn); }
.bg-emerald-50\/80 { background-color: rgba(232, 244, 239, .85); }
.bg-white\/20 { background-color: rgba(255, 255, 255, .2); }
.bg-black\/40 { background-color: rgba(0, 0, 0, .4); }
.bg-black\/50 { background-color: rgba(0, 0, 0, .5); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-from, #fff), var(--tw-to, #eee)); }
.from-emerald-600 { --tw-from: var(--primary); }
.to-teal-500 { --tw-to: #14b8a6; }
.from-amber-50 { --tw-from: #fffbeb; }
.to-orange-50 { --tw-to: #fff7ed; }

.border { border-width: 1px; border-style: solid; border-color: var(--line); }
.border-gray-100 { border-color: var(--hair); }
.border-gray-200 { border-color: var(--line); }
.border-emerald-100 { border-color: #d9ece4; }
.border-emerald-200 { border-color: #c9e3d9; }
.border-emerald-300 { border-color: #a9d7c7; }
.border-amber-200 { border-color: #f0dcbf; }
.rounded-lg { border-radius: var(--r-sm); }
.rounded-xl { border-radius: var(--r-md); }
.rounded-2xl { border-radius: var(--r-lg); }
.rounded-full { border-radius: 99px; }
.shadow { box-shadow: var(--sh-sm); }
.shadow-xl { box-shadow: var(--sh-lg); }

.accent-emerald-600 { accent-color: var(--primary); }
.cursor-pointer { cursor: pointer; }
.opacity-50 { opacity: .5; }
.hover\:text-red-500:hover { color: var(--danger); }
.col-span-full { grid-column: 1 / -1; }
.whitespace-nowrap { white-space: nowrap; }

.\!py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.\!py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.\!px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.\!text-red-500 { color: var(--danger) !important; }
.\!border-red-200 { border-color: #f3ddd9 !important; }

/* 旧版遗留：inp / gcell / tab-btn / rec-card 等 */
.inp {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  font-size: 13.5px; background: #fff; color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
.inp:focus { outline: none; border-color: var(--primary); box-shadow: var(--sh-focus); }
.gcell { font-size: 11.5px; color: var(--primary); font-weight: 600; white-space: nowrap; min-width: 76px; text-align: right; }
.tab-btn {
  padding: 10px 22px; border-radius: var(--r-md); font-weight: 600; font-size: 14px;
  color: var(--ink-3); background: #fff; border: 1px solid var(--line);
}
.tab-btn.off { background: transparent; color: var(--muted); }

/* 顶栏里的按钮要压住深色背景，不能是白底 */
.appbar .btn-ghost {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16);
  color: var(--on-dark); box-shadow: none;
}
.appbar .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .3); }
.appbar .btn-primary {
  background: #fff; color: var(--primary-700); border-color: #fff;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .8);
}
.appbar .btn-primary:hover { background: #f2fbf7; color: var(--primary-700); }@media (max-width: 640px) {
  .appbar-inner { padding: 8px 12px; gap: 8px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .brand-mark .ic { width: 20px; height: 20px; }
  .brand-text strong { font-size: 14.5px; max-width: 52vw; }
  .status { padding: 6px; }
  .status span { display: none; }
  .icon-btn { width: 32px; height: 32px; border-radius: 9px; }
  .appbar .btn-sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .nav { padding: 3px; }
  .nav-item { padding: 6px 10px; font-size: 13px; }
}
/* ============================================================
   v2.1 增强：Hero 插画、动效、海报、菜品类型点
   ============================================================ */

/* Hero 背景插画 */
.hero { isolation: isolate; }
.hero-art {
  position: absolute; right: -24px; bottom: -64px; width: 430px; height: 430px;
  z-index: 0; pointer-events: none; opacity: 1;
}
.hero-inner { position: relative; z-index: 1; }

/* 本周亮点 */
.hero-highlights { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hero-highlights:empty { display: none; }
.hero-highlights .hl-label {
  font-size: 11.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .55); font-weight: 600;
}
.hl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18);
  color: #d8f3e8;
}
.hl-chip .ic { width: 12px; height: 12px; opacity: .85; }
.hl-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.hl-chip b { font-family: var(--font-num); font-weight: 800; color: #fff; }

/* 卡片入场：按天/按周错开 */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu-card, .day-card { animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.menu-list > .menu-card:nth-child(2) { animation-delay: .06s; }
.menu-list > .menu-card:nth-child(3) { animation-delay: .12s; }

/* 表格：日期块更清晰 + 每天之间加分隔 */
.menu-table td.day { width: 104px; }
.menu-table td.day .day-date { display: block; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.menu-table td.day .day-wk {
  display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 600; color: var(--primary-700);
  background: var(--primary-soft); letter-spacing: .04em;
}
.menu-table tbody tr.group-start > td { border-top: 1px solid #e4ece8; }
.menu-table tbody tr:first-child > td { border-top: 0; }
.menu-table td.soup { background: linear-gradient(180deg, #fdf6ec, #fdf3e6); }

/* 手机卡片：每道菜前的小类型点 */
.dish-line { position: relative; }
.dish-line .dname { display: block; font-weight: 500; color: var(--ink); }
.dish-line .dname:first-child::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1.5px; background: var(--kind, #7fb6a2);
}
.dish-line .damt { display: block; margin-left: 11px; font-size: 11px; color: var(--muted); }
.dish-line.k-meat { --kind: #e2645a; }
.dish-line.k-veg { --kind: #34a87c; }
.dish-line.k-soup { --kind: #d78b3f; }
.dish-line.k-staple { --kind: #4d8ab5; }

/* ============================================================ 公示海报（A4 竖版） */
#posterOnly { display: none; }
.poster {
  width: 190mm; margin: 0 auto; background: #fff; color: #14261f;
  font-family: var(--font);
}
.poster-top {
  position: relative; overflow: hidden;
  border-radius: 5mm; padding: 6mm 8mm 5.5mm; color: #fff; margin-bottom: 4.4mm;
  background:
    radial-gradient(120mm 50mm at 90% -20%, rgba(251, 191, 36, .28), transparent 65%),
    linear-gradient(135deg, #0a4f3b, #0d7055 70%);
}
.poster-top::after {
  content: ""; position: absolute; right: -14mm; bottom: -22mm; width: 62mm; height: 62mm;
  border-radius: 50%; border: 0.6mm solid rgba(255, 255, 255, .16);
}
.poster-school { font-size: 3mm; letter-spacing: .26em; color: rgba(255, 255, 255, .78); font-weight: 600; }
.poster-week { font-size: 11.8mm; font-weight: 800; letter-spacing: .02em; line-height: 1.12; margin: 2mm 0 1.4mm; }
.poster-week b { font-family: var(--font-num); }
.poster-range { font-size: 3.3mm; color: rgba(255, 255, 255, .82); letter-spacing: .04em; }
.poster-badge {
  position: absolute; right: 8mm; top: 6mm; font-size: 2.7mm; letter-spacing: .14em;
  padding: 1.2mm 3mm; border-radius: 99px; border: 0.3mm solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
}
.poster-days { display: flex; flex-direction: column; gap: 2.6mm; }
.poster-day {
  border: 0.3mm solid #dde8e3; border-radius: 3mm; padding: 2.8mm 3.4mm;
  break-inside: avoid;
}
.poster-day h2 {
  font-size: 3.8mm; font-weight: 800; color: #0b5f47; margin-bottom: 1.2mm;
  display: flex; align-items: baseline; gap: 2.2mm;
}
.poster-day h2 span { font-size: 2.8mm; font-weight: 600; color: #7d918a; letter-spacing: .1em; }
.poster-meal { display: flex; gap: 2.6mm; padding: 1.05mm 0; border-top: 0.2mm solid #eef4f1; }
.poster-meal:first-of-type { border-top: 0; }
.poster-meal .pm-tag {
  flex: 0 0 13mm; font-size: 2.7mm; font-weight: 700; color: #0b5f47; letter-spacing: .04em;
}
.poster-meal.soup .pm-tag { color: #a8662c; }
.poster-meal .pm-body { flex: 1; font-size: 2.95mm; line-height: 1.45; color: #2f463d; }
.poster-meal .pm-body .amt { color: #8d9f98; font-size: 2.5mm; margin-left: 1mm; }
.poster-meal .pm-body .dish + .dish::before { content: "·"; color: #c3d2cb; margin: 0 1.2mm; }
.poster-foot {
  margin-top: 3.6mm; padding-top: 2.4mm; border-top: 0.3mm solid #e4ece8;
  display: flex; align-items: center; justify-content: space-between; gap: 4mm;
  font-size: 2.7mm; color: #6d857b; line-height: 1.6;
}
.poster-foot b { color: #0b5f47; }
.poster-url {
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  border-left: 0.3mm solid #e4ece8; padding-left: 4mm;
}
.poster-url span { font-size: 2.4mm; color: #93a7a0; letter-spacing: .1em; }
.poster-url b { font-size: 3.1mm; color: #0b5f47; font-weight: 700; }

@media print {
  body.printing-poster > *:not(#posterOnly) { display: none !important; }
  body.printing-poster #posterOnly { display: block !important; }
  body.printing-poster #printOnly { display: none !important; }
  body.printing-poster .poster { width: 190mm; }
}

/* 「今天」标记 */
.today-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  background: var(--accent); color: #fff; vertical-align: 1px;
}
.menu-table tr.is-today td { background: #fffdf6; }
.menu-table tr.is-today td.day { background: #fff8e8; }
.menu-table tr.is-today td.day .day-wk { background: #fbeed2; color: var(--accent-ink); }
.day-card--today { border-color: #f0d9b5; box-shadow: 0 2px 10px -4px rgba(201, 117, 58, .35); }
.day-card--today .day-card__head { background: linear-gradient(180deg, #fffaf2, #fffdf8); }

/* 默认密码提醒 */
.notice-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 16px; margin-bottom: 14px;
  background: linear-gradient(180deg, #fff6f4, #fdeeeb);
  border: 1px solid #f3d4ce; border-radius: var(--r-lg);
  color: #8d3b30; font-size: 13px; line-height: 1.7;
}
.notice-warn .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--danger); }
.notice-warn b { color: #7a2d23; }

/* ============================================================
   深色模式：跟随系统（auto）或手动切换（light / dark）
   —— 只用 data-theme 做开关，浅色模式不受任何影响
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #0c1411; --surface: #131e19; --surface-2: #17241f;
  --line: #26352e; --hair: #1e2b25;
  --ink: #e9f3ee; --ink-2: #b6c8c0; --ink-3: #8ea49b; --muted: #7d918a;
  --primary-soft: rgba(24, 160, 118, .16); --primary-soft-2: rgba(24, 160, 118, .08);
  --primary: #1aa87c; --primary-600: #16996f; --primary-700: #6fd3b0;
  --accent-soft: rgba(201, 117, 58, .16); --accent-ink: #e0a06a;
  --danger-soft: rgba(207, 74, 63, .18);
  --info-soft: rgba(61, 126, 166, .18);
  --warn-soft: rgba(217, 150, 43, .18);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --sh-md: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 28px -16px rgba(0, 0, 0, .8);
  --sh-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 56px -28px rgba(0, 0, 0, .9);
}
:root[data-theme="dark"] body {
  background: radial-gradient(1100px 420px at 12% -12%, #10261f 0%, transparent 62%),
    radial-gradient(900px 380px at 92% 4%, #2a2117 0%, transparent 58%), var(--bg);
}
:root[data-theme="dark"] .menu-table thead th {
  background: #101a16; color: #9db3aa; border-bottom-color: #26352e;
}
:root[data-theme="dark"] .menu-table td.day {
  background: #101a16;
}
:root[data-theme="dark"] .menu-table td.soup {
  background: linear-gradient(180deg, rgba(201,117,58,.14), rgba(201,117,58,.10));
}
:root[data-theme="dark"] .menu-table tr.is-today td {
  background: rgba(251,191,36,.07);
}
:root[data-theme="dark"] .menu-table tr.is-today td.day {
  background: rgba(251,191,36,.12);
}
:root[data-theme="dark"] .menu-card__head {
  background: linear-gradient(180deg, #16221d 0%, #131e19 100%);
}
:root[data-theme="dark"] .segmented {
  background: #101a16; border-color: var(--line);
}
:root[data-theme="dark"] .segmented button.is-active {
  background: #22332b; color: #d6ece2; box-shadow: none;
}
:root[data-theme="dark"] .notice {
  background: linear-gradient(180deg, #2a2117, #241d14); border-color: #4a3a22; color: #e8c9a0;
}
:root[data-theme="dark"] .notice-warn {
  background: linear-gradient(180deg, #2c1a17, #261613); border-color: #4d2a24; color: #f0b6ac;
}
:root[data-theme="dark"] .ai-card {
  background: linear-gradient(180deg, #16221d, #131e19);
}
:root[data-theme="dark"] .ai-msg.bot {
  background: var(--surface); color: var(--ink-2);
}
:root[data-theme="dark"] .day-card {
  background: var(--surface);
}
:root[data-theme="dark"] .day-card__head {
  background: #16221d;
}
:root[data-theme="dark"] .day-card--today .day-card__head {
  background: linear-gradient(180deg, rgba(251,191,36,.12), rgba(251,191,36,.05));
}
:root[data-theme="dark"] .gallery-item {
  background: var(--surface);
}
:root[data-theme="dark"] .gallery-empty {
  background: linear-gradient(135deg, #16221d, #131e19);
}
:root[data-theme="dark"] .rec-card {
  background: var(--surface);
}
:root[data-theme="dark"] .week-chip {
  background: #16221d;
}
:root[data-theme="dark"] .week-chip.is-current {
  background: rgba(24,160,118,.2); border-color: #2f6b56; color: #a9e8d0;
}
:root[data-theme="dark"] .audit {
  background: #060b09; color: #b6d8ca;
}
:root[data-theme="dark"] .panel {
  background: var(--surface);
}
:root[data-theme="dark"] .toast {
  background: rgba(6,16,12,.96);
}
:root[data-theme="dark"] .input {
  background: #0f1a15;
}
:root[data-theme="dark"] .btn-ghost {
  background: #16221d; border-color: var(--line); color: var(--ink-2);
}
:root[data-theme="dark"] .btn-soft {
  background: rgba(24,160,118,.14); border-color: #2b5c4b; color: #a9e8d0;
}
:root[data-theme="dark"] .status {
  background: rgba(255,255,255,.1);
}

@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
  --bg: #0c1411; --surface: #131e19; --surface-2: #17241f;
  --line: #26352e; --hair: #1e2b25;
  --ink: #e9f3ee; --ink-2: #b6c8c0; --ink-3: #8ea49b; --muted: #7d918a;
  --primary-soft: rgba(24, 160, 118, .16); --primary-soft-2: rgba(24, 160, 118, .08);
  --primary: #1aa87c; --primary-600: #16996f; --primary-700: #6fd3b0;
  --accent-soft: rgba(201, 117, 58, .16); --accent-ink: #e0a06a;
  --danger-soft: rgba(207, 74, 63, .18);
  --info-soft: rgba(61, 126, 166, .18);
  --warn-soft: rgba(217, 150, 43, .18);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --sh-md: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 28px -16px rgba(0, 0, 0, .8);
  --sh-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 56px -28px rgba(0, 0, 0, .9);
}
:root[data-theme="auto"] body {
  background: radial-gradient(1100px 420px at 12% -12%, #10261f 0%, transparent 62%),
    radial-gradient(900px 380px at 92% 4%, #2a2117 0%, transparent 58%), var(--bg);
}
:root[data-theme="auto"] .menu-table thead th {
  background: #101a16; color: #9db3aa; border-bottom-color: #26352e;
}
:root[data-theme="auto"] .menu-table td.day {
  background: #101a16;
}
:root[data-theme="auto"] .menu-table td.soup {
  background: linear-gradient(180deg, rgba(201,117,58,.14), rgba(201,117,58,.10));
}
:root[data-theme="auto"] .menu-table tr.is-today td {
  background: rgba(251,191,36,.07);
}
:root[data-theme="auto"] .menu-table tr.is-today td.day {
  background: rgba(251,191,36,.12);
}
:root[data-theme="auto"] .menu-card__head {
  background: linear-gradient(180deg, #16221d 0%, #131e19 100%);
}
:root[data-theme="auto"] .segmented {
  background: #101a16; border-color: var(--line);
}
:root[data-theme="auto"] .segmented button.is-active {
  background: #22332b; color: #d6ece2; box-shadow: none;
}
:root[data-theme="auto"] .notice {
  background: linear-gradient(180deg, #2a2117, #241d14); border-color: #4a3a22; color: #e8c9a0;
}
:root[data-theme="auto"] .notice-warn {
  background: linear-gradient(180deg, #2c1a17, #261613); border-color: #4d2a24; color: #f0b6ac;
}
:root[data-theme="auto"] .ai-card {
  background: linear-gradient(180deg, #16221d, #131e19);
}
:root[data-theme="auto"] .ai-msg.bot {
  background: var(--surface); color: var(--ink-2);
}
:root[data-theme="auto"] .day-card {
  background: var(--surface);
}
:root[data-theme="auto"] .day-card__head {
  background: #16221d;
}
:root[data-theme="auto"] .day-card--today .day-card__head {
  background: linear-gradient(180deg, rgba(251,191,36,.12), rgba(251,191,36,.05));
}
:root[data-theme="auto"] .gallery-item {
  background: var(--surface);
}
:root[data-theme="auto"] .gallery-empty {
  background: linear-gradient(135deg, #16221d, #131e19);
}
:root[data-theme="auto"] .rec-card {
  background: var(--surface);
}
:root[data-theme="auto"] .week-chip {
  background: #16221d;
}
:root[data-theme="auto"] .week-chip.is-current {
  background: rgba(24,160,118,.2); border-color: #2f6b56; color: #a9e8d0;
}
:root[data-theme="auto"] .audit {
  background: #060b09; color: #b6d8ca;
}
:root[data-theme="auto"] .panel {
  background: var(--surface);
}
:root[data-theme="auto"] .toast {
  background: rgba(6,16,12,.96);
}
:root[data-theme="auto"] .input {
  background: #0f1a15;
}
:root[data-theme="auto"] .btn-ghost {
  background: #16221d; border-color: var(--line); color: var(--ink-2);
}
:root[data-theme="auto"] .btn-soft {
  background: rgba(24,160,118,.14); border-color: #2b5c4b; color: #a9e8d0;
}
:root[data-theme="auto"] .status {
  background: rgba(255,255,255,.1);
}
}

/* ============================================================ 学期归档时间轴 */
.archive { display: flex; flex-direction: column; gap: 14px; }
.archive-term { position: relative; padding-left: 18px; }
.archive-term::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--primary-soft), transparent); border-radius: 2px;
}
.archive-term__name {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}
.archive-term__name::before {
  content: ""; position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
}
.archive-term__meta { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.archive-weeks { display: flex; flex-wrap: wrap; gap: 8px; }
.week-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); transition: all .16s var(--ease);
}
.week-chip:hover { border-color: var(--primary); color: var(--primary-700); transform: translateY(-1px); }
.week-chip.is-current { background: var(--primary-soft); border-color: #bcdcd0; color: var(--primary-700); font-weight: 700; }
.week-chip b { font-family: var(--font-num); font-weight: 800; }
.week-chip span { font-size: 11px; color: var(--muted); }

/* ============================================================ 菜品照片 */
.dish-thumb {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none;
  border: 1px solid var(--line); background: var(--surface-2);
}
.menu-table td.cell .dish-row { display: flex; align-items: center; gap: 8px; }
.menu-table td.cell .dish-row .dish-text { min-width: 0; }
.dish-line { display: flex; align-items: flex-start; gap: 8px; }
.dish-line .dish-body { flex: 1; min-width: 0; }
.dish-line .dish-thumb { width: 40px; height: 40px; border-radius: 10px; }
.editor-photo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.editor-photo img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.editor-photo .ph-empty {
  width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px dashed var(--line); color: var(--muted); font-size: 10px; text-align: center;
}
.photo-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--primary-700);
  background: var(--primary-soft); border: 1px solid #cfe6dc;
}
.photo-btn:hover { background: #d9efe6; }

/* 本周菜品图库 */
.gallery { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.gallery-card { margin-bottom: 16px; }
.gallery-item {
  flex: 0 0 148px; scroll-snap-align: start; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); transition: transform .18s var(--ease), box-shadow .18s;
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.gallery-item img { width: 100%; height: 104px; object-fit: cover; display: block; }
.gallery-item .cap { padding: 7px 9px; font-size: 12px; font-weight: 600; color: var(--ink); }
.gallery-item .cap span { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.gallery-empty {
  display: grid; place-items: center; height: 104px; color: var(--muted);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  font-size: 12px;
}
#photoLightbox {
  position: fixed; inset: 0; z-index: 95; display: none; place-items: center;
  background: rgba(6, 16, 12, .86); backdrop-filter: blur(6px); padding: 24px;
}
#photoLightbox.show { display: grid; }
#photoLightbox img { max-width: min(92vw, 900px); max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 70px -30px #000; }
#photoLightbox .cap { color: #dff0e9; text-align: center; margin-top: 12px; font-size: 14px; }

/* 深色模式下的原生控件与 Hero 选择器 */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] .hero-field {
  background: rgba(9, 26, 21, .66); border: 1px solid rgba(255, 255, 255, .16); color: #eaf3ee;
}
:root[data-theme="dark"] .hero-field .ic { color: #6fd3b0; }
:root[data-theme="dark"] .hero .segmented { background: rgba(0, 0, 0, .3); }
:root[data-theme="light"] .hero-field { background: rgba(255, 255, 255, .94); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
  :root[data-theme="auto"] .hero-field {
    background: rgba(9, 26, 21, .66); border: 1px solid rgba(255, 255, 255, .16); color: #eaf3ee;
  }
  :root[data-theme="auto"] .hero-field .ic { color: #6fd3b0; }
  :root[data-theme="auto"] .hero .segmented { background: rgba(0, 0, 0, .3); }
}
/* 批量上传照片的行 */
.photo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--hair);
}
.photo-row:first-child { border-top: 0; }
.photo-row img {
  width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-2); flex: none;
}
.photo-row__meta { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); }
.photo-row__meta b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-row__meta span { color: var(--muted); }
.photo-row .select-wrap { width: 190px; flex: none; }
.photo-row select { height: 34px; font-size: 12.5px; }

/* 图库展开：默认横向滑，点「查看全部」变成换行网格 */
.gallery.is-all { flex-wrap: wrap; overflow: visible; }
.gallery.is-all .gallery-item { flex: 0 0 calc(16.666% - 10px); }
.gallery-more {
  flex: 0 0 auto; align-self: center; margin: 0 6px;
  padding: 10px 16px; border-radius: 12px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--primary-700);
  background: var(--primary-soft); border: 1px dashed #bcdcd0;
}
.gallery-more:hover { background: #ddf0e8; }
@media (max-width: 900px) {
  .gallery.is-all .gallery-item { flex: 0 0 calc(33.333% - 8px); }
}

/* 没照片的菜也留出同样的缩进，文字左边缘才整齐 */
.dish-line.no-photo .dish-body { margin-left: 48px; }
.dish-line.no-photo .dname:first-child::before { margin-left: -11px; }

/* AI 卡片里的两个快捷入口 */
.ai-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ai-tools .hint { font-size: 11.5px; }

/* 多食材菜：菜名一行，食材逐行小字 */
.menu-table td.cell .damt-item { display: block; padding-left: 10px; position: relative; }
.menu-table td.cell .damt-item::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 3px; height: 3px;
  border-radius: 50%; background: #b9cdc4;
}
.meal-dishes .damt-item { display: block; }