/* ==========================================================================
   食光 FoodTime · 多端统一设计令牌 tokens.css  v2.0
   --------------------------------------------------------------------------
   唯一事实来源：品牌建设产物
     · UI 设计系统  foodtime-brand/ui-space.html
     · 品牌 VI 手册 foodtime-brand/vi.html
   风格关键词：Warm Organic Tech（温暖有机 × 克制科技）
   禁止：冷色 SaaS 蓝仪表盘 / 玻璃拟态 / 霓虹 / 暗黑赛博 / 外部字体 CDN
   --------------------------------------------------------------------------
   命名双轨（两套都可用，值完全一致）：
     · 无前缀   --brand / --ink-900 / --r-lg   ← 与 ui-space.html 对齐，新代码优先
     · --fm-*   --fm-green-600 / --fm-r-lg     ← 历史页面兼容层，勿删
   ========================================================================== */

:root{
  /* ---------- 1. 品牌保鲜绿 Brand Green ---------- */
  --green-900:#083023; --green-800:#0A4A36; --green-700:#0C6C4C; --green-600:#0E9F6E;
  --green-500:#21B583; --green-300:#7DD8B4; --green-100:#D6F2E5; --green-50:#EEF9F3;

  /* ---------- 2. 语义色 Semantic（全站强制统一语义）----------
     新鲜 >7天 绿 / 临期 ≤3天 琥珀 / 已过期 红 / 运动 蓝 / 睡眠 紫 */
  --amber-600:#E08A00; --amber-700:#8A5200; --amber-100:#FDF0D5;
  --orange-600:#F26B22; --orange-700:#B4470F; --orange-100:#FFEBDF;
  --red-600:#DC3F45;    --red-700:#A02328;   --red-100:#FDE7E7;
  --blue-600:#2F6FED;   --blue-700:#1B4BB0;  --blue-100:#E4EDFE;
  --violet-600:#7357E6; --violet-700:#4F37B5;--violet-100:#EDE9FD;
  --teal-600:#0E8C9F;   --teal-100:#DFF3F6;

  /* ---------- 3. 运营端紫 Ops Purple ---------- */
  --ops-800:#2A2468; --ops-700:#3F3792; --ops-600:#534AB7; --ops-300:#B3ADEA;
  --ops-100:#E3E0F7; --ops-50:#F1EFFB;

  /* ---------- 4. 暖中性灰阶 Warm Neutral ---------- */
  --ink-900:#12211B; --ink-700:#3A4B43; --ink-500:#6B7C73; --ink-400:#8B9A92; --ink-300:#B3BFB8;
  --ink-inv:#FFFFFF;
  --line:#E6E3DA; --line-2:#F0EDE4;
  --bg:#F7F4EC; --bg-2:#FBF9F3; --surface:#FFFFFF;

  /* ---------- 5. 深色面 Dark Surface ---------- */
  --dark-900:#0B1512; --dark-800:#12211B; --dark-700:#1B2E26; --dark-line:#264035;

  /* ---------- 6. 字体栈（系统字体，零 Web Font 请求）---------- */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --num:"SF Pro Display","DIN Alternate",Bahnschrift,Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* ---------- 7. 字体层级 ---------- */
  --fs-display:46px; --lh-display:1.14;
  --fs-h1:32px;      --lh-h1:1.22;
  --fs-h2:24px;      --lh-h2:1.3;
  --fs-h3:19px;      --lh-h3:1.4;
  --fs-lg:16px;      --lh-lg:1.65;
  --fs-md:14.5px;    --lh-md:1.7;
  --fs-sm:13px;      --lh-sm:1.6;
  --fs-xs:11.5px;    --lh-xs:1.5;

  /* ---------- 8. 4pt 间距系统 ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px; --s20:80px;
  --s24:96px; --s30:120px;

  /* ---------- 9. 圆角 Radius（卡片 20 / 控件 10–14 / 胶囊 999）---------- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* ---------- 10. 阴影 Elevation（绿调柔软投影）---------- */
  --e1:0 2px 10px rgba(18,33,27,.05),0 1px 3px rgba(18,33,27,.04);
  --e2:0 10px 28px rgba(18,33,27,.09),0 3px 8px rgba(18,33,27,.05);
  --e3:0 20px 48px rgba(18,33,27,.13),0 6px 16px rgba(18,33,27,.07);
  --e4:0 32px 72px rgba(18,33,27,.18),0 10px 24px rgba(18,33,27,.08);

  /* ---------- 11. 动效令牌 ---------- */
  --t-fast:140ms cubic-bezier(.4,0,.2,1);
  --t-base:240ms cubic-bezier(.4,0,.2,1);
  --t-slow:420ms cubic-bezier(.16,1,.3,1);

  /* ---------- 12. 布局 ---------- */
  --container:1320px;
  --container-narrow:1200px;

  /* ---------- 13. 主题语义别名（默认＝家庭端）----------
     组件只写 var(--brand)，不写死颜色；换端只切 body class */
  --brand:#0E9F6E; --brand-700:#0C6C4C; --brand-800:#0A4A36;
  --brand-300:#7DD8B4; --brand-100:#D6F2E5; --brand-50:#EEF9F3;
  --accent:#F26B22; --accent-100:#FFEBDF;
  --brand-sh:0 10px 26px rgba(14,159,110,.24);
  --accent-sh:0 10px 26px rgba(242,107,34,.24);

  /* ==========  兼容层：--fm-* 历史别名（值已对齐品牌规范）========== */
  --fm-green-900:#083023; --fm-green-800:#0A4A36; --fm-green-700:#0C6C4C;
  --fm-green-600:#0E9F6E; --fm-green-500:#21B583; --fm-green-300:#7DD8B4;
  --fm-green-100:#D6F2E5; --fm-green-50:#EEF9F3;
  --fm-amber-600:#E08A00; --fm-amber-100:#FDF0D5;
  --fm-orange-600:#F26B22; --fm-orange-100:#FFEBDF;
  --fm-red-600:#DC3F45;   --fm-red-100:#FDE7E7;
  --fm-blue-600:#2F6FED;  --fm-blue-100:#E4EDFE;
  --fm-violet-600:#7357E6;--fm-violet-100:#EDE9FD;
  --fm-teal-600:#0E8C9F;
  --fm-ink-900:#12211B; --fm-ink-700:#3A4B43; --fm-ink-500:#6B7C73;
  --fm-ink-400:#8B9A92; --fm-ink-300:#B3BFB8; --fm-ink-inv:#FFFFFF;
  --fm-line:#E6E3DA; --fm-line-2:#F0EDE4;
  --fm-bg:#F7F4EC; --fm-bg-2:#FBF9F3; --fm-surface:#FFFFFF;
  --fm-dark-900:#0B1512; --fm-dark-800:#12211B; --fm-dark-700:#1B2E26; --fm-dark-line:#264035;
  --fm-font:var(--font); --fm-font-num:var(--num); --fm-font-mono:var(--mono);
  --fm-fs-display:46px; --fm-lh-display:1.14;
  --fm-fs-h1:32px;  --fm-lh-h1:1.22;
  --fm-fs-h2:24px;  --fm-lh-h2:1.3;
  --fm-fs-h3:19px;  --fm-lh-h3:1.4;
  --fm-fs-lg:16px;  --fm-lh-lg:1.65;
  --fm-fs-md:14.5px;--fm-lh-md:1.7;
  --fm-fs-sm:13px;  --fm-lh-sm:1.6;
  --fm-fs-xs:11.5px;--fm-lh-xs:1.5;
  --fm-s1:4px;  --fm-s2:8px;  --fm-s3:12px; --fm-s4:16px;
  --fm-s5:20px; --fm-s6:24px; --fm-s8:32px; --fm-s10:40px;
  --fm-s12:48px;--fm-s14:56px;--fm-s16:64px;--fm-s20:80px;
  --fm-s24:96px;--fm-s30:120px;
  --fm-r-xs:6px; --fm-r-sm:10px; --fm-r-md:14px;
  --fm-r-lg:20px; --fm-r-xl:24px; --fm-r-2xl:32px; --fm-r-full:999px;
  --fm-e1:var(--e1); --fm-e2:var(--e2); --fm-e3:var(--e3); --fm-e4:var(--e4);
  --fm-e-green:0 10px 26px rgba(14,159,110,.24);
  --fm-t-fast:var(--t-fast); --fm-t-base:var(--t-base); --fm-t-slow:var(--t-slow);
  --fm-container:1200px; --fm-container-wide:1320px;
}

/* ==========================================================================
   多端主题 Theme —— 组件不写死颜色，切 body class 即换端
   家庭端 保鲜绿 / 酒店端 深商务绿 / 运营端 品牌紫
   ========================================================================== */
body.t-family{
  --brand:#0E9F6E; --brand-700:#0C6C4C; --brand-800:#0A4A36;
  --brand-300:#7DD8B4; --brand-100:#D6F2E5; --brand-50:#EEF9F3;
  --accent:#F26B22; --accent-100:#FFEBDF;
  --brand-sh:0 10px 26px rgba(14,159,110,.24);
  --accent-sh:0 10px 26px rgba(242,107,34,.24);
}
body.t-hotel{
  --brand:#0C6C4C; --brand-700:#0A4A36; --brand-800:#083023;
  --brand-300:#7DD8B4; --brand-100:#D6F2E5; --brand-50:#EEF9F3;
  --accent:#F26B22; --accent-100:#FFEBDF;
  --brand-sh:0 10px 26px rgba(12,108,76,.26);
  --accent-sh:0 10px 26px rgba(242,107,34,.26);
}
body.t-ops{
  --brand:#534AB7; --brand-700:#3F3792; --brand-800:#2A2468;
  --brand-300:#B3ADEA; --brand-100:#E3E0F7; --brand-50:#F1EFFB;
  --accent:#7357E6; --accent-100:#EDE9FD;
  --brand-sh:0 10px 26px rgba(83,74,183,.26);
  --accent-sh:0 10px 26px rgba(115,87,230,.24);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--bg);color:var(--ink-900);
  font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-md);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{border:0;background:none;cursor:pointer;}
table{border-collapse:collapse;width:100%;}
code,kbd{font-family:var(--mono);}

/* 可访问性：所有交互元素统一焦点环 */
:focus-visible{outline:3px solid var(--brand-300);outline-offset:2px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

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

/* ==========================================================================
   排版工具类
   ========================================================================== */
.num,.fm-num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.mono{font-family:var(--mono);}
.muted,.fm-muted{color:var(--ink-500);}

.display,.fm-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:800;letter-spacing:-.02em;color:var(--ink-900);}
.h1,.fm-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:780;letter-spacing:-.015em;color:var(--ink-900);}
.h2,.fm-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:720;letter-spacing:-.01em;color:var(--ink-900);}
.h3,.fm-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:680;color:var(--ink-900);}
.lead,.fm-lead{font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--ink-700);}
.sm,.fm-sm{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-500);}
.xs,.fm-xs{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-500);}

.eyebrow,.fm-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-700);
}
.eyebrow::before,.fm-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--brand);}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s6);}
.fm-container{width:100%;max-width:var(--fm-container);margin-inline:auto;padding-inline:var(--s6);}
.fm-container-wide{width:100%;max-width:var(--fm-container-wide);margin-inline:auto;padding-inline:var(--s6);}
.grid{display:grid;gap:var(--s5);}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

/* ==========================================================================
   Button —— 6 变体 × 3 尺寸
   ========================================================================== */
.btn,.fm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-full);
  font-family:inherit;font-size:14.5px;font-weight:680;line-height:1;white-space:nowrap;
  cursor:pointer;background:none;color:inherit;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             box-shadow var(--t-fast),transform var(--t-fast),filter var(--t-fast);
}
.btn:active,.fm-btn:active{transform:translateY(1px);}
.btn:disabled,.fm-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn svg,.fm-btn svg{width:17px;height:17px;flex:none;}

.btn--primary,.fm-btn--primary{background:var(--brand);color:#fff;box-shadow:var(--brand-sh);}
.btn--primary:hover:not(:disabled),.fm-btn--primary:hover:not(:disabled){background:var(--brand-700);}
.btn--cta,.fm-btn--cta{background:var(--accent);color:#fff;box-shadow:var(--accent-sh);}
.btn--cta:hover:not(:disabled),.fm-btn--cta:hover:not(:disabled){filter:brightness(.92);}
.btn--ghost,.fm-btn--ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line);}
.btn--ghost:hover:not(:disabled),.fm-btn--ghost:hover:not(:disabled){border-color:var(--brand);color:var(--brand-700);background:var(--brand-50);}
.btn--quiet{background:transparent;color:var(--ink-500);}
.btn--quiet:hover:not(:disabled){background:var(--line-2);color:var(--ink-900);}
.btn--danger{background:var(--red-600);color:#fff;box-shadow:0 10px 26px rgba(220,63,69,.22);}
.btn--danger:hover:not(:disabled){background:var(--red-700);}

.btn--sm,.fm-btn--sm{height:34px;padding:0 14px;font-size:13px;}
.btn--sm svg{width:15px;height:15px;}
.btn--lg{height:52px;padding:0 30px;font-size:16px;}
.btn--ico{width:44px;padding:0;}
.btn--ico.btn--sm{width:34px;}
.btn--block{display:flex;width:100%;}

/* ==========================================================================
   Form
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px;}
.field > label{font-size:13px;font-weight:660;color:var(--ink-700);}
.field .hint{font-size:12px;color:var(--ink-400);}
.field .err{font-size:12px;color:var(--red-700);}

.inp,.sel,.ta{
  width:100%;height:44px;padding:0 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;color:var(--ink-900);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.ta{height:auto;min-height:96px;padding:11px 14px;line-height:1.6;resize:vertical;}
.inp::placeholder,.ta::placeholder{color:var(--ink-300);}
.inp:hover,.sel:hover,.ta:hover{border-color:var(--ink-300);}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100);}
.inp:disabled,.sel:disabled,.ta:disabled{background:var(--line-2);color:var(--ink-400);cursor:not-allowed;}
.inp.is-error,.ta.is-error{border-color:var(--red-600);box-shadow:0 0 0 3px var(--red-100);}
.sel{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C73' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;}
.inp--sm,.sel--sm{height:34px;font-size:13px;padding:0 11px;}

/* ==========================================================================
   Card
   ========================================================================== */
.card,.fm-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--e1);
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--brand-300);}
.card--flat{box-shadow:none;}
.card--pad-lg{padding:var(--s6);}
.fm-card{padding:0;}
.fm-card-pad{padding:var(--s6);}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--e1);}
.kpi__label{font-size:12.5px;font-weight:640;color:var(--ink-500);}
.kpi__value{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:30px;font-weight:780;line-height:1.15;color:var(--ink-900);margin-top:6px;letter-spacing:-.02em;}
.kpi__delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:660;margin-top:6px;}
.kpi__delta.is-up{color:var(--green-700);}
.kpi__delta.is-down{color:var(--red-700);}

/* ==========================================================================
   Pill / Tag —— 状态语义强制统一
   ========================================================================== */
.pill,.fm-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:var(--r-full);
  font-size:12px;font-weight:660;line-height:1.6;
  background:var(--green-100);color:var(--green-800);
}
.pill--fresh{background:var(--green-100);color:var(--green-800);}
.pill--warn,.fm-pill--warn{background:var(--amber-100);color:var(--amber-700);}
.pill--danger,.fm-pill--danger{background:var(--red-100);color:var(--red-700);}
.pill--cta{background:var(--orange-100);color:var(--orange-700);}
.pill--info,.fm-pill--info{background:var(--blue-100);color:var(--blue-700);}
.pill--sleep{background:var(--violet-100);color:var(--violet-700);}
.pill--ops{background:var(--ops-100);color:var(--ops-700);}
.pill--neutral,.fm-pill--neutral{background:var(--line-2);color:var(--ink-700);}
.pill--outline{background:transparent;border:1px solid var(--line);color:var(--ink-700);}
.pill--solid{background:var(--brand);color:#fff;}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}

/* ==========================================================================
   Table
   ========================================================================== */
.tbl,.fm-table{font-size:var(--fs-sm);}
.tbl th,.fm-table th{
  text-align:left;font-weight:700;color:var(--ink-700);
  padding:11px 14px;background:var(--bg-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td,.fm-table td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.tbl tbody tr:last-child td,.fm-table tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background var(--t-fast);}
.tbl tbody tr:hover{background:var(--brand-50);}
.tbl-wrap,.fm-table-wrap{
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;overflow-x:auto;background:var(--surface);-webkit-overflow-scrolling:touch;
}
.tbl-wrap .tbl,.fm-table-wrap .fm-table{min-width:520px;}

/* ==========================================================================
   Feedback —— Toast / Skeleton / Empty / Error / Modal
   ========================================================================== */
.toasts{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{
  display:flex;align-items:center;gap:10px;min-width:220px;max-width:min(92vw,420px);
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--dark-800);color:#EAF3EE;font-size:13.5px;font-weight:600;
  box-shadow:var(--e3);pointer-events:auto;
  animation:toast-in var(--t-base) both;
}
.toast--ok{background:var(--green-700);}
.toast--warn{background:var(--amber-700);}
.toast--err{background:var(--red-700);}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}

.skel{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--line-2) 25%,#F7F5EE 37%,var(--line-2) 63%);
  background-size:400% 100%;animation:skel 1.4s ease infinite;
}
.skel--text{height:13px;margin:7px 0;}
.skel--title{height:20px;width:42%;margin:9px 0;}
.skel--block{height:88px;}
@keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;}
.state__icon{width:56px;height:56px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--brand-50);color:var(--brand-700);}
.state--error .state__icon{background:var(--red-100);color:var(--red-700);}
.state__title{font-size:15px;font-weight:700;color:var(--ink-900);}
.state__desc{font-size:13px;color:var(--ink-500);max-width:340px;line-height:1.7;}

.modal-mask{position:fixed;inset:0;z-index:9000;background:rgba(11,21,18,.46);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:fade var(--t-fast) both;}
.modal{
  width:100%;max-width:520px;max-height:86vh;overflow:auto;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e4);
  animation:modal-in var(--t-base) both;
}
.modal__hd{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line-2);}
.modal__bd{padding:20px 24px;}
.modal__ft{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line-2);}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

.drawer-mask{position:fixed;inset:0;z-index:9000;background:rgba(11,21,18,.42);animation:fade var(--t-fast) both;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9001;width:min(560px,94vw);
  background:var(--surface);box-shadow:var(--e4);overflow:auto;
  animation:drawer-in var(--t-base) both;
}
@keyframes drawer-in{from{transform:translateX(28px);opacity:.6;}to{transform:none;opacity:1;}}

/* ==========================================================================
   Progress Ring —— 保质期环（新鲜/临期/过期三色）
   ========================================================================== */
.ring{text-align:center;}
.ring svg{margin:0 auto;transform:rotate(-90deg);}
.ring__track{stroke:var(--line-2);}
.ring__bar{stroke:var(--green-600);stroke-linecap:round;transition:stroke-dashoffset var(--t-slow);}
.ring__bar.is-warn{stroke:var(--amber-600);}
.ring__bar.is-danger{stroke:var(--red-600);}
.ring b{display:block;font-size:12px;font-weight:730;color:var(--ink-900);margin-top:7px;}
.ring span{display:block;font-size:11px;color:var(--ink-400);}

/* ==========================================================================
   Navigation
   ========================================================================== */
.fm-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,244,236,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.fm-nav__inner{display:flex;align-items:center;gap:var(--s6);height:62px;}
.fm-nav__brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink-900);}
.fm-nav__mark{width:28px;height:28px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;box-shadow:var(--brand-sh);}
.fm-nav__links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.fm-nav__link{padding:8px 14px;border-radius:var(--r-full);font-size:13.5px;font-weight:620;color:var(--ink-700);transition:all var(--t-fast);}
.fm-nav__link:hover{background:var(--brand-50);color:var(--brand-700);}
.fm-nav__link.is-active{background:var(--brand);color:#fff;}

/* 左侧边栏（酒店 Web / 运营端） */
.side{background:var(--dark-800);color:#C9D6CF;display:flex;flex-direction:column;}
body.t-ops .side{background:var(--ops-800);color:#D9D5F2;}
.side__brand{display:flex;align-items:center;gap:10px;padding:20px;font-weight:800;color:#fff;font-size:15px;}
.side__item{
  display:flex;align-items:center;gap:11px;padding:11px 18px;margin:2px 10px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:620;color:inherit;
  cursor:pointer;transition:background var(--t-fast),color var(--t-fast);
}
.side__item:hover{background:rgba(255,255,255,.08);color:#fff;}
.side__item.is-active{background:var(--brand);color:#fff;}
.side__group{padding:16px 20px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5;}

/* 移动端底部 Tab */
.tabbar{
  position:sticky;bottom:0;z-index:80;display:flex;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:var(--r-sm);
  font-size:10.5px;font-weight:640;color:var(--ink-400);
  cursor:pointer;transition:color var(--t-fast);
}
.tabbar__item.is-active{color:var(--brand);}
.tabbar__item svg{width:22px;height:22px;}

/* ==========================================================================
   Footer / Confidential
   ========================================================================== */
.fm-foot{border-top:1px solid var(--line);padding:var(--s10) 0;margin-top:var(--s20);color:var(--ink-500);font-size:12.5px;}
.fm-confid{background:var(--dark-800);color:#C9D6CF;font-size:11.5px;letter-spacing:.04em;text-align:center;padding:7px 16px;}
.fm-confid b{color:#F0C674;font-weight:700;}

/* ==========================================================================
   动效：入场淡入上移
   ========================================================================== */
.fade-up{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow),transform var(--t-slow);}
.fade-up.is-in{opacity:1;transform:none;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:900px){
  :root{--fs-display:34px;--fs-h1:26px;--fs-h2:21px;
        --fm-fs-display:34px;--fm-fs-h1:26px;--fm-fs-h2:21px;}
  .fm-nav__links{display:none;}
  .toasts{right:12px;left:12px;bottom:12px;}
  .toast{max-width:none;}
}
@media print{
  .fm-nav{position:static;}
  body{background:#fff;}
}