/* ============================================
   同盛祥 · 双主题系统
   年轻版：纯白干净 / 老年版：米黄大字
   ============================================ */

/* ---------- 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* ============================================
   【年轻版】默认变量
   ============================================ */
:root{
  --bg:          #FFFFFF;
  --bg-2:        #FAF7F2;
  --surface:     #FFFFFF;
  --surface-2:   #F5F1EA;
  --ink:         #1A0E05;
  --ink-2:       #6B4A2E;
  --line:        rgba(42,19,8,.12);
  --accent:      #C8412A;
  --accent-2:    #8B3A1E;
  --accent-glow: rgba(200,65,42,.18);
  --radius:      20px;
  --nav-h:       68px;
  --font-base:   14px;
  --ease:        cubic-bezier(.22,1,.36,1);
}

/* ============================================
   【老年版】覆盖变量
   ============================================ */
body.mode-elder{
  --bg:          #FFF6E6;
  --bg-2:        #FFF0D9;
  --surface:     #FFFFFF;
  --surface-2:   #F8EBD4;
  --ink:         #1A0E05;
  --ink-2:       #6B4A2E;
  --line:        #D4BC94;
  --accent:      #C8412A;
  --accent-2:    #C8412A;
  --accent-glow: transparent;
  --radius:      10px;
  --nav-h:       84px;
  --font-base:   20px;
  --ease:        ease;
}

body{
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "HarmonyOS Sans SC",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:var(--font-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  transition:background .35s var(--ease), color .35s var(--ease);
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}

/* ============================================
   加载动画
   ============================================ */
.loader{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s ease;
}
.loader.hide{opacity:0;pointer-events:none;}
.loader-ring{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================
   页面容器
   ============================================ */
.page{max-width:560px;margin:0 auto;}

/* ============================================
   底部导航
   ============================================ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  border-top:1px solid var(--line);
  transition:background .35s var(--ease);
}
body:not(.mode-elder) .tabbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.mode-elder .tabbar{
  background:#FFF6E6;
  border-top:4px solid #1A0E05;
}

.tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  color:var(--ink-2);
  transition:color .2s, transform .2s;
}
body:not(.mode-elder) .tab{font-size:10px;}
body.mode-elder .tab{font-size:16px;font-weight:700;}

.tab svg{
  width:22px;height:22px;fill:currentColor;
  transition:transform .2s, filter .2s;
}
body.mode-elder .tab svg{width:30px;height:30px;}

.tab.on{color:var(--accent);}
body:not(.mode-elder) .tab.on svg{
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.tab:active svg{transform:scale(.9);}

/* ============================================
   首页 · 滚动搓帧 Hero
   ============================================ */

.hero-video{
  position:relative;
  height:100vh;
  width:100%;
}

.hero-pin{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:#1a0a04;   /* 深棕兜底，切换瞬间不刺眼 */
}
body.mode-elder .hero-pin{
  position:relative;
  height:auto;
  background:#FFF6E6;
}

/* ---------- 双层帧容器（防闪白关键） ---------- */
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:1;
  pointer-events:none;
  background:#1a0a04;
}
body.mode-elder .hero-media{display:none;}

.hero-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  user-select:none;
  -webkit-user-drag:none;
  will-change:opacity;
  pointer-events:none;
}
.hero-frame.is-active{
  opacity:1;
}

/* 遮罩废弃 */
.hero-shade{display:none;}

/* ---------- 顶部品牌（深色胶囊） ---------- */
.hero-brand{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  left:20px;
  z-index:20;
  font-weight:800;
  letter-spacing:3px;
  line-height:1;
  text-decoration:none;
  color:#FFFFFF;
  font-size:18px;
  padding:11px 22px;
  background:rgba(26,14,5,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:100px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 16px rgba(26,14,5,.20);
  animation:brandIn .8s cubic-bezier(.16,1,.3,1) both;
}
body.mode-elder .hero-brand{
  position:static;
  display:block;
  padding:28px 24px 20px;
  font-size:36px;
  letter-spacing:4px;
  color:#1A0E05;
  border-bottom:4px solid #1A0E05;
  background:none;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  animation:none;
}

/* ---------- 右上按钮 ---------- */
.hero-actions{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  right:20px;
  z-index:20;
  display:flex;
  gap:6px;
  animation:brandIn .8s cubic-bezier(.16,1,.3,1) .15s both;
}
body.mode-elder .hero-actions{
  position:static;
  padding:0 24px 24px;
  border-bottom:4px solid #1A0E05;
  gap:12px;
  animation:none;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:700;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s;
}
body:not(.mode-elder) .hero-btn{
  padding:11px 22px;
  font-size:13px;
  letter-spacing:1px;
  color:#FFFFFF;
  background:rgba(26,14,5,.78);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:100px;
  box-shadow:0 4px 16px rgba(26,14,5,.20);
}
body:not(.mode-elder) .hero-btn:active{
  background:rgba(26,14,5,.95);
  transform:scale(.96);
}
body.mode-elder .hero-btn{
  flex:1;
  padding:24px 16px;
  font-size:24px;
  font-weight:900;
  letter-spacing:2px;
  color:#FFFFFF;
  background:#C8412A;
  border:4px solid #1A0E05;
  border-radius:10px;
  box-shadow:0 4px 0 #1A0E05;
}
body.mode-elder .hero-btn:active{
  background:#A03020;
  transform:translateY(2px);
  box-shadow:0 2px 0 #1A0E05;
}

/* ---------- 左下大标题（白字 + 深色投影 + 入场动画） ---------- */
.hero-title{
  position:absolute;
  left:0;right:0;
  bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:20;
  pointer-events:none;
  padding:0 24px;
}
body.mode-elder .hero-title{
  position:static;
  padding:32px 24px 40px;
  pointer-events:auto;
}

.hero-title h1{
  margin:0;
  font-family:
    'Inter',
    'HarmonyOS Sans SC',
    'PingFang SC',
    'Noto Sans SC',
    system-ui,
    sans-serif;
  font-weight:900;
  line-height:0.94;
  letter-spacing:-0.055em;
  color:#FFFFFF;
  font-size:clamp(56px, 17vw, 108px);
  text-shadow:
    0 2px 8px rgba(0,0,0,.45),
    0 4px 24px rgba(0,0,0,.30);
  animation:speedReveal 1s cubic-bezier(.16,1,.3,1) .5s both;
}
body.mode-elder .hero-title h1{
  color:#1A0E05;
  font-size:clamp(64px, 20vw, 96px);
  letter-spacing:-0.03em;
  text-shadow:none;
  font-weight:900;
  animation:none;
}
.hero-title h1 span{display:block;}

.hero-title p{
  margin:20px 0 0;
  font-weight:600;
  font-size:13px;
  letter-spacing:4px;
  color:rgba(255,255,255,.88);
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  animation:fadeSlideUp .9s cubic-bezier(.16,1,.3,1) 1s both;
}
body.mode-elder .hero-title p{
  font-size:26px;
  letter-spacing:2px;
  color:#8B3A1E;
  font-weight:700;
  text-shadow:none;
  animation:none;
}

/* ---------- 滚动提示 ---------- */
.hero-cue{
  position:absolute;
  left:50%;bottom:28px;
  transform:translateX(-50%);
  z-index:20;
  width:22px;height:36px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:12px;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  animation:fadeIn 1s ease-out 1.3s both;
}
body.mode-elder .hero-cue{display:none;}
.hero-cue span{
  position:absolute;
  left:50%;top:8px;
  width:3px;height:7px;
  margin-left:-1.5px;
  border-radius:2px;
  background:#FFFFFF;
  animation:cueDot 1.8s ease-in-out infinite;
}

@keyframes brandIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:none;}
}
@keyframes speedReveal{
  0%{opacity:0;transform:translateX(-100%) skewX(-8deg);filter:blur(8px);}
  60%{opacity:1;transform:translateX(4%) skewX(-2deg);filter:blur(0);}
  100%{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);}
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes cueDot{
  0%,100%{transform:translateY(0);opacity:1;}
  60%{transform:translateY(10px);opacity:0;}
}

/* ---------- 老年版静态封面 ---------- */
body.mode-elder .hero-pin{
  background:#FFF6E6;
  padding-bottom:40px;
}

/* ============================================
   通用 block
   ============================================ */
.block{padding:44px 24px 0;}
.block-label{
  font-size:11px;letter-spacing:3px;
  color:var(--accent);margin-bottom:14px;
  font-weight:800;
}
body.mode-elder .block-label{font-size:16px;letter-spacing:1px;color:#C8412A;}

.block-title{
  font-size:clamp(22px,6vw,28px);
  font-weight:900;line-height:1.5;
  letter-spacing:-0.01em;margin-bottom:16px;
}
body.mode-elder .block-title{
  font-size:36px;line-height:1.4;letter-spacing:0;color:#1A0E05;
}

.block-text{
  font-size:14px;line-height:1.95;
  color:var(--ink-2);
}
body.mode-elder .block-text{
  font-size:20px;line-height:2.0;color:#1A0E05;
}

/* ============================================
   数据 · facts
   ============================================ */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;margin-top:40px;
  padding:0 24px;
}
.fact{
  text-align:center;padding:20px 0;
  border-top:1px solid var(--line);
}
body.mode-elder .fact{
  border-top:3px solid #1A0E05;
  padding:24px 0;
}

.fact-num{
  display:block;font-size:22px;font-weight:900;
  color:var(--accent);letter-spacing:-0.02em;
  margin-bottom:6px;font-variant-numeric:tabular-nums;
}
body.mode-elder .fact-num{font-size:32px;color:#C8412A;}

.fact-label{
  font-size:11px;color:var(--ink-2);
  letter-spacing:1px;
}
body.mode-elder .fact-label{font-size:18px;color:#6B4A2E;}

/* ============================================
   首页入口卡片
   ============================================ */
.entry{
  padding:48px 24px 56px;
  display:flex;flex-direction:column;gap:14px;
}
.entry-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;
  border-radius:var(--radius);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
body:not(.mode-elder) .entry-card{
  background:#FFFFFF;
  border:1px solid var(--line);
}
body:not(.mode-elder) .entry-card:active{
  transform:scale(.985);
  box-shadow:0 0 0 1px var(--accent), 0 0 20px var(--accent-glow);
}
body.mode-elder .entry-card{
  background:#FFFFFF;
  border:4px solid #1A0E05;
  box-shadow:0 4px 0 #1A0E05;
}
body.mode-elder .entry-card:active{
  background:#F8EBD4;
  transform:translateY(2px);
  box-shadow:0 2px 0 #1A0E05;
}

.entry-name{
  font-size:15px;font-weight:800;letter-spacing:.5px;
}
body.mode-elder .entry-name{font-size:24px;font-weight:900;color:#1A0E05;}

.entry-arrow{
  font-size:16px;color:var(--accent);
}
body.mode-elder .entry-arrow{font-size:28px;color:#C8412A;font-weight:900;}

/* ============================================
   内页头部
   ============================================ */
.page-head{padding:52px 24px 32px;}
.page-title{
  font-size:30px;font-weight:900;
  letter-spacing:-0.02em;margin-bottom:8px;
}
body.mode-elder .page-title{
  font-size:44px;letter-spacing:1px;color:#1A0E05;font-weight:900;
}
.page-sub{
  font-size:13px;color:var(--ink-2);
  letter-spacing:1px;
}
body.mode-elder .page-sub{font-size:22px;color:#6B4A2E;}

/* ============================================
   菜单页
   ============================================ */
.menu-list{padding:0 24px 56px;}
.menu-group{margin-bottom:40px;}
.menu-cat{
  font-size:12px;letter-spacing:3px;
  color:var(--accent);font-weight:800;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
body.mode-elder .menu-cat{
  font-size:24px;letter-spacing:1px;
  color:#C8412A;
  border-bottom:3px solid #1A0E05;
  padding-bottom:14px;
  font-weight:900;
}

.dish{
  display:flex;align-items:center;gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.dish:last-child{border-bottom:none;}
body.mode-elder .dish{
  border-bottom:1px solid #D4BC94;
  padding:24px 0;gap:20px;
}

.dish-thumb{
  flex-shrink:0;
  width:64px;height:64px;
  border-radius:14px;
  background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;overflow:hidden;
}
body.mode-elder .dish-thumb{
  width:88px;height:88px;
  border-radius:10px;
  background:#F8EBD4;
  font-size:42px;
}

.dish-info{flex:1;min-width:0;}
.dish-name{
  font-size:15px;font-weight:800;
  margin-bottom:5px;letter-spacing:.2px;
}
body.mode-elder .dish-name{font-size:26px;font-weight:900;color:#1A0E05;}

.dish-desc{
  font-size:12px;color:var(--ink-2);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.mode-elder .dish-desc{
  font-size:18px;line-height:1.7;
  color:#6B4A2E;display:block;
  -webkit-line-clamp:unset;
}

.dish-price{
  flex-shrink:0;font-size:15px;font-weight:900;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
body.mode-elder .dish-price{font-size:28px;color:#C8412A;font-weight:900;}

/* 骨架屏 */
.skeleton-list{
  height:320px;border-radius:var(--radius);
  background:linear-gradient(100deg,rgba(42,19,8,.06) 30%,rgba(42,19,8,.03) 50%,rgba(42,19,8,.06) 70%);
  background-size:200% 100%;
  animation:shimmer 1.3s infinite linear;
}
@keyframes shimmer{to{background-position:-200% 0;}}
.empty{
  text-align:center;color:var(--ink-2);
  font-size:14px;padding:60px 0;
}
body.mode-elder .empty{font-size:22px;color:#6B4A2E;}

/* ============================================
   门店页
   ============================================ */
.map-card{
  display:block;margin:0 24px 28px;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s var(--ease);
}
body:not(.mode-elder) .map-card{
  background:#FFFFFF;
  border:1px solid var(--line);
}
body:not(.mode-elder) .map-card:active{transform:scale(.985);}
body.mode-elder .map-card{
  background:#FFFFFF;
  border:4px solid #1A0E05;
  box-shadow:0 4px 0 #1A0E05;
}

.map-visual{
  position:relative;height:170px;
  display:flex;align-items:center;justify-content:center;
}
body:not(.mode-elder) .map-visual{
  background:
    repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(42,19,8,.05) 27px,rgba(42,19,8,.05) 28px),
    repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(42,19,8,.05) 27px,rgba(42,19,8,.05) 28px),
    var(--bg-2);
}
body.mode-elder .map-visual{
  height:200px;
  background:#F8EBD4;
}

.map-pin{
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
}
body:not(.mode-elder) .map-pin{
  box-shadow:0 0 0 10px rgba(200,65,42,.15), 0 0 0 22px rgba(200,65,42,.05);
  animation:pulseNeon 2.4s ease-in-out infinite;
}
body.mode-elder .map-pin{
  width:22px;height:22px;
  background:#C8412A;
  box-shadow:0 0 0 12px rgba(200,65,42,.15);
}

@keyframes pulseNeon{
  0%,100%{box-shadow:0 0 0 10px rgba(200,65,42,.15), 0 0 0 22px rgba(200,65,42,.05);}
  50%{box-shadow:0 0 0 14px rgba(200,65,42,.20), 0 0 0 30px rgba(200,65,42,.03);}
}

.map-hint{
  position:absolute;right:14px;bottom:12px;
  font-size:11px;
  padding:4px 10px;border-radius:20px;
}
body:not(.mode-elder) .map-hint{
  color:var(--accent);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(200,65,42,.30);
}
body.mode-elder .map-hint{
  font-size:18px;color:#C8412A;
  background:#FFFFFF;
  border:3px solid #1A0E05;
  font-weight:900;
  padding:6px 14px;
}

.map-info{padding:16px 18px 18px;}
body.mode-elder .map-info{padding:22px 20px 24px;}

.map-name{
  font-size:15px;font-weight:800;margin-bottom:5px;
}
body.mode-elder .map-name{font-size:26px;font-weight:900;color:#1A0E05;}

.map-addr{font-size:12px;color:var(--ink-2);}
body.mode-elder .map-addr{font-size:20px;color:#6B4A2E;}

.info-list{
  list-style:none;margin:0 24px;
  border-radius:var(--radius);
  overflow:hidden;
}
body:not(.mode-elder) .info-list{
  background:#FFFFFF;
  border:1px solid var(--line);
}
body.mode-elder .info-list{
  background:#FFFFFF;
  border:4px solid #1A0E05;
  box-shadow:0 4px 0 #1A0E05;
}

.info-list li{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.info-list li:last-child{border-bottom:none;}
body.mode-elder .info-list li{
  padding:24px 20px;
  border-bottom:1px solid #D4BC94;
}
body.mode-elder .info-list li:last-child{border-bottom:none;}

.info-k{
  flex-shrink:0;width:66px;
  font-size:12px;color:var(--ink-2);
  padding-top:1px;
}
body.mode-elder .info-k{
  width:90px;font-size:20px;color:#6B4A2E;font-weight:700;
}

.info-v{font-size:14px;line-height:1.55;flex:1;}
body.mode-elder .info-v{font-size:22px;line-height:1.6;color:#1A0E05;font-weight:600;}

.info-link{color:var(--accent);font-weight:800;}
body.mode-elder .info-link{color:#C8412A;text-decoration:underline;font-weight:900;}

/* ============================================
   留言表单
   ============================================ */
.msg-block{padding:44px 24px 56px;}
.msg-head{margin-bottom:22px;}
.msg-title{
  font-size:16px;font-weight:900;
  letter-spacing:-0.01em;margin-bottom:6px;
}
body.mode-elder .msg-title{font-size:28px;font-weight:900;letter-spacing:0;color:#1A0E05;}

.msg-sub{font-size:12px;color:var(--ink-2);letter-spacing:.5px;}
body.mode-elder .msg-sub{font-size:20px;color:#6B4A2E;}

.field-wrap{position:relative;margin-bottom:14px;}

.field{
  width:100%;
  padding:15px 18px;
  font-size:14px;
  font-family:inherit;
  line-height:1.5;
  border-radius:14px;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
  appearance:none;
}
body:not(.mode-elder) .field{
  background:#FFFFFF;
  border:1.5px solid rgba(42,19,8,.18);
}
body:not(.mode-elder) .field::placeholder{color:#8A6A4A;}
body:not(.mode-elder) .field:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(200,65,42,.12);
}

body.mode-elder .field{
  background:#FFFFFF;
  border:4px solid #1A0E05;
  font-size:22px;
  padding:20px 20px;
  border-radius:10px;
  color:#1A0E05;
}
body.mode-elder .field::placeholder{color:#8A6A4A;}
body.mode-elder .field:focus{
  outline:none;
  border-color:#C8412A;
  box-shadow:0 0 0 4px rgba(200,65,42,.15);
}

.field-area{
  resize:none;
  min-height:96px;
  padding-bottom:30px;
}
body.mode-elder .field-area{min-height:140px;}

.char-count{
  position:absolute;right:14px;bottom:10px;
  font-size:11px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
body.mode-elder .char-count{font-size:18px;color:#6B4A2E;bottom:16px;}

.submit{
  position:relative;width:100%;
  padding:15px;
  font-size:15px;font-weight:800;
  font-family:inherit;letter-spacing:1px;
  border:none;border-radius:14px;
  cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s, transform .15s, opacity .2s, box-shadow .2s;
}

body:not(.mode-elder) .submit{
  color:#FFFFFF;
  background:linear-gradient(135deg, #C8412A, #8B3A1E);
  font-weight:800;
}
body:not(.mode-elder) .submit:hover{
  box-shadow:0 0 24px rgba(200,65,42,.30), 0 0 48px rgba(139,58,30,.15);
}
body:not(.mode-elder) .submit:active:not(:disabled){transform:scale(.98);}

body.mode-elder .submit{
  color:#FFFFFF;
  background:#C8412A;
  font-size:26px;
  font-weight:900;
  padding:24px;
  border-radius:10px;
  letter-spacing:4px;
  border:4px solid #1A0E05;
  box-shadow:0 4px 0 #1A0E05;
}
body.mode-elder .submit:active:not(:disabled){
  background:#A03020;
  transform:translateY(2px);
  box-shadow:0 2px 0 #1A0E05;
}

.submit:disabled{opacity:.6;cursor:not-allowed;}

.submit-spinner{
  position:absolute;width:16px;height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  opacity:0;
  animation:spin .7s linear infinite;
}
.submit.loading .submit-text{opacity:0;}
.submit.loading .submit-spinner{opacity:1;}
.submit-check{
  position:absolute;
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.6);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.submit.success .submit-check{
  opacity:1;
  transform:scale(1);
}
.form-tip{
  min-height:18px;margin-top:10px;
  font-size:12px;text-align:center;
}
body.mode-elder .form-tip{font-size:20px;margin-top:14px;}
.form-tip.error{color:#C8412A;}
body.mode-elder .form-tip.error{color:#C62828;font-weight:700;}

.thanks-card{
  display:flex;align-items:center;gap:14px;
  margin-top:20px;padding:16px 18px;
  border-radius:14px;
  opacity:0;transform:translateY(10px);
  max-height:0;overflow:hidden;
  transition:opacity .4s, transform .4s, max-height .4s;
}
body:not(.mode-elder) .thanks-card{
  background:rgba(200,65,42,.06);
  border:1px solid rgba(200,65,42,.20);
}
body.mode-elder .thanks-card{
  background:#E8F5E9;
  border:4px solid #2E7D32;
  border-radius:10px;
}
.thanks-card.show{
  opacity:1;transform:translateY(0);max-height:140px;
}
.thanks-emoji{font-size:24px;}
body.mode-elder .thanks-emoji{font-size:36px;}
.thanks-title{
  font-size:14px;font-weight:900;margin-bottom:3px;
}
body:not(.mode-elder) .thanks-title{color:#C8412A;}
body.mode-elder .thanks-title{font-size:22px;color:#2E7D32;font-weight:900;}
.thanks-desc{font-size:12px;color:var(--ink-2);line-height:1.5;}
body.mode-elder .thanks-desc{font-size:18px;color:#2E7D32;}

/* ============================================
   模式切换按钮
   ============================================ */
.mode-toggle{
  position:fixed;
  right:16px;
  bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  z-index:950;
  display:flex;align-items:center;gap:6px;
  padding:11px 18px;
  font-size:12px;font-family:inherit;font-weight:800;
  border-radius:100px;
  cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .3s;
  -webkit-tap-highlight-color:transparent;
  border:none;
}
body:not(.mode-elder) .mode-toggle{
  color:#FFFFFF;
  background:rgba(26,14,5,.75);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 12px rgba(26,14,5,.15);
}
body:not(.mode-elder) .mode-toggle:active{transform:scale(.95);}

body.mode-elder .mode-toggle{
  color:#FFFFFF;
  background:#C8412A;
  border:4px solid #1A0E05;
  font-size:20px;
  padding:16px 24px;
  border-radius:10px;
  font-weight:900;
  box-shadow:0 4px 0 #1A0E05;
}
body.mode-elder .mode-toggle:active{
  background:#A03020;
  transform:translateY(2px);
  box-shadow:0 2px 0 #1A0E05;
}

.mode-toggle.pulse{
  animation:togglePulse .32s ease;
}
@keyframes togglePulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.12);}
  100%{transform:scale(1);}
}

/* ============================================
   老年版 · 全局关闭动效
   ============================================ */
body.mode-elder *,
body.mode-elder *::before,
body.mode-elder *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.15s !important;
}

/* ============================================
   大屏微调
   ============================================ */
@media (min-width:600px){
  .block,.menu-list,.msg-block{padding-left:32px;padding-right:32px;}
  .map-card,.info-list{margin-left:32px;margin-right:32px;}
  .page-head{padding-left:32px;padding-right:32px;}
}

/* ============================================
   系统级 prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* ============================================
   AI 聊天页
   ============================================ */
.chat-wrap{
  padding:0 24px 40px;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 200px);
}
.chat-box{
  flex:1;
  overflow-y:auto;
  padding:12px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-msg{
  display:flex;
}
.chat-msg.user{justify-content:flex-end;}
.chat-msg.bot{justify-content:flex-start;}

.chat-bubble{
  max-width:78%;
  padding:12px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.6;
  word-break:break-word;
}
.chat-msg.user .chat-bubble{
  background:#C8412A;
  color:#fff;
  border-bottom-right-radius:4px;
}
.chat-msg.bot .chat-bubble{
  background:#F5F1EA;
  color:#1A0E05;
  border-bottom-left-radius:4px;
}

.chat-input-bar{
  display:flex;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.chat-input{
  flex:1;
  padding:14px 18px;
  font-size:14px;
  border:1.5px solid rgba(42,19,8,.18);
  border-radius:100px;
  background:#fff;
  font-family:inherit;
}
.chat-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(200,65,42,.12);
}
.chat-send{
  padding:0 22px;
  font-size:14px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#C8412A,#8B3A1E);
  border:none;
  border-radius:100px;
  cursor:pointer;
  font-family:inherit;
}
.chat-send:active{transform:scale(.97);}

body.mode-elder .chat-bubble{font-size:20px;line-height:1.7;}
body.mode-elder .chat-input{font-size:20px;padding:18px 22px;}
body.mode-elder .chat-send{font-size:20px;padding:0 28px;}

/* ============================================
   聊天页专用：模式切换按钮移到右上角
   避免遮挡底部的发送按钮
   ============================================ */
body:has(.chat-wrap) .mode-toggle{
  bottom: auto;
  top: calc(20px + env(safe-area-inset-top));
  right: 16px;
}

/* ============================================
   购物车
   ============================================ */

/* 悬浮按钮 */
.cart-btn{
  position: fixed;
  right: 24px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(200,65,42,.35);
  z-index: 940;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.cart-btn:active{ transform: scale(.92); }

.cart-count{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #FFBA60;
  color: #1A0E05;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.cart-count[data-zero="true"],
.cart-btn[data-empty="true"] .cart-count{ display: none; }

/* 弹窗 */
.cart-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.cart-modal.show{
  opacity: 1;
  pointer-events: auto;
}

.cart-panel{
  background: #fff;
  width: 100%;
  max-height: 70vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-modal.show .cart-panel{
  transform: translateY(0);
}

.cart-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #EDE6DC;
}
.cart-head h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #1A0E05;
}
.cart-head button{
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
}

.cart-items{
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}
.cart-empty{
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

.cart-item{
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F5F1EA;
  gap: 10px;
}
.ci-name{
  flex: 1;
  font-size: 14px;
  color: #1A0E05;
  font-weight: 600;
}
.ci-ctrl{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ci-ctrl button{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5F1EA;
  border: none;
  font-size: 16px;
  font-weight: 900;
  color: #C8412A;
  cursor: pointer;
}
.ci-ctrl button:active{
  background: #C8412A;
  color: #fff;
}
.ci-qty{
  min-width: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ci-sub{
  min-width: 70px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #C8412A;
}

.cart-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #EDE6DC;
  gap: 12px;
}
.cart-foot span{
  font-size: 16px;
  font-weight: 900;
  color: #1A0E05;
}
.cart-foot button{
  padding: 12px 32px;
  border-radius: 100px;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
}
.cart-foot button:active{
  transform: scale(.97);
}

/* Toast */
.cart-toast{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: rgba(26,14,5,.9);
  color: #fff;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.cart-toast.show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 菜品卡片右侧 */
.dish-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.dish-add{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.dish-add:active{
  transform: scale(.9);
}

/* ============================================
   聊天页订单卡片
   ============================================ */
.order-card{
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  min-width: 240px;
  max-width: 78%;
  box-shadow: 0 4px 20px rgba(200,65,42,.12);
  border: 1px solid #F5F1EA;
}
.oc-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.oc-tag{
  font-size: 12px;
  color: #C8412A;
  font-weight: 900;
  letter-spacing: 1px;
}
.oc-status{
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 700;
}
.oc-status.pending{ background: #FFF3E0; color: #E67E22; }
.oc-status.paid{ background: #E3F2FD; color: #1976D2; }
.oc-status.cooking{ background: #FFF8E1; color: #F9A825; }
.oc-status.done{ background: #E8F5E9; color: #2E7D32; }
.oc-status.cancelled{ background: #F5F5F5; color: #999; }

.oc-id{
  font-size: 12px;
  color: #999;
  font-family: monospace;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #EDE6DC;
}

.oc-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.oc-item{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4A3B2F;
}

.oc-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #EDE6DC;
  font-size: 14px;
  color: #999;
}
.oc-foot b{
  font-size: 18px;
  color: #C8412A;
  font-weight: 900;
}

body.mode-elder .order-card{ max-width: 90%; }
body.mode-elder .oc-item{ font-size: 18px; }
body.mode-elder .oc-foot b{ font-size: 22px; }

/* ============================================
   个人中心
   ============================================ */
.profile-box{padding:0 24px 40px;}

.pf-card{
  background: linear-gradient(135deg, #C8412A 0%, #8B3A1E 100%);
  border-radius: 20px;
  padding: 24px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(200,65,42,.25);
}
.pf-user{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.pf-nick{
  font-size: 18px;
  font-weight: 700;
}
.pf-level{
  font-size: 12px;
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 1px;
}
.pf-points{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.pf-points b{
  font-size: 48px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pf-points span{
  font-size: 14px;
  opacity: .8;
}
.pf-next{
  font-size: 13px;
  opacity: .9;
}
.pf-bar{
  height: 6px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.pf-bar > div{
  height: 100%;
  background: #FFBA60;
  border-radius: 3px;
  transition: width .4s;
}
.pf-max{
  font-size: 13px;
  opacity: .9;
}

.pf-section-title{
  font-size: 16px;
  font-weight: 900;
  color: #1A0E05;
  margin: 24px 0 14px;
  letter-spacing: 1px;
}

.pf-exchange{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 14px;
  padding: 14px 18px;
}
.pf-item-name{
  font-size: 15px;
  font-weight: 700;
  color: #1A0E05;
  margin-bottom: 4px;
}
.pf-item-cost{
  font-size: 12px;
  color: #C8412A;
  font-weight: 700;
}
.pf-exchange-btn{
  padding: 8px 20px;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.pf-exchange-btn:disabled{
  background: #CCC;
  cursor: not-allowed;
}

.pf-orders{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-order{
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 14px;
  padding: 14px 18px;
}
.pf-order-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #EDE6DC;
}
.pf-order-id{
  font-size: 12px;
  color: #999;
  font-family: monospace;
}
.pf-order-status{
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 700;
}
.pf-order-status.pending{ background:#FFF3E0; color:#E67E22; }
.pf-order-status.paid{ background:#E3F2FD; color:#1976D2; }
.pf-order-status.cooking{ background:#FFF8E1; color:#F9A825; }
.pf-order-status.done{ background:#E8F5E9; color:#2E7D32; }
.pf-order-status.cancelled{ background:#F5F5F5; color:#999; }

.pf-order-items{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #4A3B2F;
}
.pf-order-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #EDE6DC;
  font-size: 12px;
  color: #999;
}
.pf-order-foot b{
  font-size: 16px;
  color: #C8412A;
  font-weight: 900;
}

.pf-login{
  text-align: center;
  padding: 60px 0;
}
.pf-login p{
  color: #999;
  margin-bottom: 20px;
}
.pf-btn{
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

/* ============================================
   管理看板
   ============================================ */
.admin-box{padding:0 24px 40px;}

.ad-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.ad-card{
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-card-label{
  font-size: 12px;
  color: #999;
}
.ad-card-num{
  font-size: 28px;
  font-weight: 900;
  color: #C8412A;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ad-section-title{
  font-size: 15px;
  font-weight: 900;
  color: #1A0E05;
  margin: 20px 0 12px;
  letter-spacing: 1px;
}

.ad-summary{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px;
  color: #6B4A2E;
}
.ad-summary b{
  color: #C8412A;
  font-weight: 900;
}

.ad-bars{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ad-bar-row{
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.ad-bar-label{ color: #6B4A2E; }
.ad-bar-track{
  height: 8px;
  background: #F5F1EA;
  border-radius: 4px;
  overflow: hidden;
}
.ad-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, #C8412A, #8B3A1E);
  border-radius: 4px;
  transition: width .4s;
}
.ad-bar-value{
  text-align: right;
  font-weight: 900;
  color: #C8412A;
  font-variant-numeric: tabular-nums;
}

.ad-questions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-q{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1A0E05;
}
.ad-q b{
  color: #C8412A;
  font-weight: 900;
}
/* ============================================
   订单成功弹窗
   ============================================ */
.order-success-content{
  padding: 40px 24px 32px;
  text-align: center;
}
.os-icon{
  font-size: 56px;
  margin-bottom: 12px;
  animation: osPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes osPop{
  0%{ transform: scale(.3); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}
.os-title{
  font-size: 22px;
  font-weight: 900;
  color: #1A0E05;
  margin-bottom: 8px;
}
.os-order-id{
  font-size: 12px;
  color: #999;
  font-family: monospace;
  margin-bottom: 24px;
}
.os-items{
  background: #FAF7F2;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.os-item{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4A3B2F;
}
.os-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px dashed #EDE6DC;
  margin-bottom: 24px;
  font-size: 14px;
  color: #6B4A2E;
}
.os-total b{
  font-size: 24px;
  color: #C8412A;
  font-weight: 900;
}
.os-actions{
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.os-btn{
  flex: 1;
  padding: 14px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: none;
  font-family: inherit;
  letter-spacing: .5px;
  transition: transform .15s;
}
.os-btn:active{ transform: scale(.97); }
.os-btn-ghost{
  background: #F5F1EA;
  color: #6B4A2E;
}
.os-btn-primary{
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
}
.os-login-tip{
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 知识库管理 */
.kb-files{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.kb-file-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #EDE6DC;
  border-radius: 12px;
}
.kb-file-name{
  font-size: 14px;
  font-weight: 700;
  color: #C8412A;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kb-file-size{
  font-size: 12px;
  color: #999;
}
.kb-editor{
  margin-top: 20px;
}
.kb-editor-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.kb-editor-head span{
  font-size: 14px;
  font-weight: 700;
  color: #1A0E05;
}
.kb-editor-head button{
  padding: 10px 20px;
  flex: none;
  width: auto;
}
.kb-textarea{
  width: 100%;
  padding: 16px;
  border: 1px solid #EDE6DC;
  border-radius: 12px;
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", monospace;
  line-height: 1.6;
  resize: vertical;
  color: #1A0E05;
  background: #fff;
}
.kb-textarea:focus{
  outline: none;
  border-color: #C8412A;
}


/* ============================================
   P7 · 大字版按钮移位（v3.0 S7）
   原来：右下角，与购物车按钮重叠
   现在：右上角，与购物车按钮分离
   ============================================ */

/* 大字版按钮 → 右上角 */
.mode-toggle{
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  bottom: auto;
}

/* 首页 Hero 里的"菜单 / AI 客服"按钮下移一行，
   避免被移到右上角的大字版按钮盖住 */
.hero-actions{
  top: calc(74px + env(safe-area-inset-top));
}

/* 大字版模式下，按钮更大，Hero 按钮再下移一点 */
body.mode-elder .hero-actions{
  top: calc(96px + env(safe-area-inset-top));
}

/* 聊天页原有规则作废（全局已改右上角） */
body:has(.chat-wrap) .mode-toggle{
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  bottom: auto;
}


/* ============================================
   P6 · 订单跟踪页
   ============================================ */
.track-wrap{padding:24px 20px 80px;max-width:560px;margin:0 auto;}

.track-head{
  background:linear-gradient(135deg,#C8412A,#8B3A1E);
  color:#fff;border-radius:16px;
  padding:22px 22px 20px;margin-bottom:22px;
  box-shadow:0 6px 20px rgba(200,65,42,.22);
}
.track-head-label{font-size:12px;letter-spacing:2px;opacity:.75;margin-bottom:4px;}
.track-head-id{font-family:ui-monospace,Consolas,monospace;font-size:16px;font-weight:700;
                letter-spacing:.5px;word-break:break-all;margin-bottom:8px;}
.track-head-time{font-size:12px;opacity:.75;}

.track-cancelled{
  display:flex;gap:14px;align-items:center;
  background:#FEE2E2;color:#991B1B;
  padding:18px 20px;border-radius:14px;margin-bottom:22px;
  border-left:4px solid #DC2626;
}
.track-cancelled span{font-size:28px;}
.track-cancelled b{display:block;font-size:16px;margin-bottom:4px;}
.track-cancelled p{font-size:12px;opacity:.8;margin:0;}

.timeline{
  background:#fff;border-radius:16px;
  padding:22px 20px;margin-bottom:22px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.tl-row{display:flex;gap:14px;align-items:center;padding:2px 0;}
.tl-icon{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:16px;font-weight:700;
  transition:.3s;
}
.tl-done .tl-icon{background:#D1FAE5;color:#059669;}
.tl-active .tl-icon{
  background:#C8412A;color:#fff;
  box-shadow:0 0 0 6px rgba(200,65,42,.15);
  animation:tlPulse 1.6s ease-in-out infinite;
}
.tl-todo .tl-icon{background:#F3F4F6;color:#9CA3AF;}
@keyframes tlPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(200,65,42,.15);}
  50%{box-shadow:0 0 0 10px rgba(200,65,42,.08);}
}

.tl-body{flex:1;}
.tl-label{font-size:15px;font-weight:700;color:#1F2937;margin-bottom:2px;}
.tl-done .tl-label{color:#059669;}
.tl-todo .tl-label{color:#9CA3AF;font-weight:500;}
.tl-desc{font-size:12px;color:#6B7280;}
.tl-todo .tl-desc{color:#D1D5DB;}

.tl-line{
  width:2px;height:20px;margin-left:17px;
  background:#E5E7EB;border-radius:1px;
}
.tl-line-done{background:#10B981;}

.track-block{
  background:#fff;border-radius:16px;
  padding:20px 22px;margin-bottom:22px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.track-block-title{
  font-size:14px;font-weight:700;color:#1F2937;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px dashed #E5E7EB;
}

.track-items{display:flex;flex-direction:column;gap:10px;}
.track-item{
  display:grid;grid-template-columns:1fr auto auto;
  gap:12px;font-size:14px;color:#374151;
  padding:6px 0;
}
.ti-name{font-weight:500;}
.ti-qty{color:#9CA3AF;min-width:36px;text-align:right;}
.ti-sub{font-weight:700;color:#1F2937;min-width:56px;text-align:right;
        font-variant-numeric:tabular-nums;}
.track-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:14px;margin-top:14px;
  border-top:1px solid #E5E7EB;font-size:14px;color:#6B7280;
}
.track-total b{font-size:24px;color:#C8412A;font-weight:800;
               font-variant-numeric:tabular-nums;}

.track-info{display:flex;flex-direction:column;gap:12px;}
.track-info-row{
  display:flex;justify-content:space-between;
  font-size:13px;color:#6B7280;
}
.track-info-row b{color:#1F2937;font-weight:600;text-align:right;max-width:60%;
                  word-break:break-word;}

.track-actions{display:flex;gap:12px;margin-top:8px;}
.track-btn{
  flex:1;text-align:center;text-decoration:none;
  padding:14px;background:linear-gradient(135deg,#C8412A,#8B3A1E);
  color:#fff;border-radius:100px;font-size:14px;font-weight:700;
  letter-spacing:1px;transition:.15s;
}
.track-btn:active{transform:scale(.97);}
.track-btn-ghost{
  flex:1;text-align:center;text-decoration:none;
  padding:14px;background:#F5F1EA;color:#6B4A2E;
  border-radius:100px;font-size:14px;font-weight:700;
  letter-spacing:1px;
}

.track-empty{
  text-align:center;padding:80px 20px;
}
.track-empty-icon{font-size:56px;margin-bottom:16px;opacity:.5;}
.track-empty h2{font-size:20px;color:#1F2937;margin-bottom:10px;}
.track-empty p{font-size:13px;color:#6B7280;margin-bottom:24px;}
.track-mono{font-family:ui-monospace,Consolas,monospace;
            background:#F3F4F6;padding:2px 8px;border-radius:4px;font-size:12px;}

/* 老年版适配 */
body.mode-elder .track-head{padding:28px 24px 26px;}
body.mode-elder .track-head-id{font-size:20px;}
body.mode-elder .tl-label{font-size:20px;}
body.mode-elder .tl-desc{font-size:16px;}
body.mode-elder .track-item{font-size:18px;}
body.mode-elder .track-total b{font-size:28px;}
body.mode-elder .track-btn,body.mode-elder .track-btn-ghost{font-size:20px;padding:18px;}


/* ============================================
   P6 · 个人中心访客态 + 登录弹窗
   ============================================ */
.pf-guest{
  text-align:center;padding:60px 24px;
}
.pf-guest-icon{font-size:64px;margin-bottom:16px;opacity:.35;}
.pf-guest h2{font-size:20px;color:#1F2937;margin-bottom:10px;}
.pf-guest p{font-size:13px;color:#6B7280;margin-bottom:28px;line-height:1.7;}
.pf-guest-btns{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:0 auto;}
.pf-btn{
  display:block;padding:14px;background:linear-gradient(135deg,#C8412A,#8B3A1E);
  color:#fff;border:none;border-radius:100px;font-size:14px;font-weight:700;
  letter-spacing:1px;cursor:pointer;font-family:inherit;
}
.pf-btn-ghost{
  display:block;padding:14px;background:#F5F1EA;color:#6B4A2E;
  border:none;border-radius:100px;font-size:14px;font-weight:700;
  letter-spacing:1px;cursor:pointer;font-family:inherit;
}

.pf-logout{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.25);text-align:right;}
.pf-logout button{
  background:transparent;border:1px solid rgba(255,255,255,.4);
  color:#fff;padding:6px 16px;border-radius:100px;
  font-size:12px;cursor:pointer;font-family:inherit;
}

.pf-order-actions{margin-top:10px;text-align:right;}
.pf-order-track{
  display:inline-block;font-size:12px;color:#C8412A;font-weight:700;
  text-decoration:none;padding:4px 0;
}
.pf-order-track:hover{text-decoration:underline;}

.auth-modal .nf-label{display:block;font-size:13px;color:#4B5563;margin-bottom:6px;font-weight:500;}
.auth-modal .nf-input{width:100%;padding:12px 14px;border:1px solid #D1D5DB;
                      border-radius:8px;font-size:14px;outline:none;box-sizing:border-box;font-family:inherit;}
.auth-modal .nf-input:focus{border-color:#C8412A;box-shadow:0 0 0 3px rgba(200,65,42,.12);}
.auth-msg{min-height:18px;font-size:12px;color:#C8412A;margin-top:12px;text-align:center;}

body.mode-elder .pf-btn,body.mode-elder .pf-btn-ghost{font-size:20px;padding:18px;}
body.mode-elder .pf-guest h2{font-size:28px;}
body.mode-elder .pf-guest p{font-size:18px;}


/* ============================================
   P6 · 通用弹窗（modal / modal-panel / modal-head / modal-body / modal-foot）
   前台所有页面共享，例如登录框、订单详情等
   ============================================ */
.modal{
  position:fixed;
  inset:0;
  background:rgba(26,14,5,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
  opacity:0;
  transition:opacity .2s ease;
}
.modal.show{
  display:flex;
  opacity:1;
}
.modal-panel{
  background:#fff;
  border-radius:20px;
  width:100%;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(26,14,5,.30);
  transform:translateY(20px);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.modal.show .modal-panel{
  transform:translateY(0);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid #F0EAE0;
}
.modal-head h3{
  font-size:17px;
  font-weight:800;
  color:#1A0E05;
  margin:0;
  letter-spacing:.5px;
}
.modal-close{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  font-size:24px;line-height:1;
  color:#9CA3AF;cursor:pointer;
  border-radius:50%;
  transition:.15s;
  padding:0;
}
.modal-close:hover{
  background:#F3F4F6;
  color:#1A0E05;
}
.modal-body{
  padding:20px 22px;
  overflow-y:auto;
  flex:1;
}
.modal-foot{
  display:flex;
  gap:10px;
  padding:16px 22px;
  border-top:1px solid #F0EAE0;
  background:#FAFAFA;
}

/* 大字版适配 */
body.mode-elder .modal-head h3{font-size:24px;}
body.mode-elder .modal-head{padding:22px 24px;}
body.mode-elder .modal-body{padding:24px;}
body.mode-elder .modal-close{font-size:32px;width:40px;height:40px;}
body.mode-elder .modal-foot{padding:20px 24px;}


/* ============================================
   P6 · 聊天页美化
   ============================================ */

/* ---------- 页面容器 ---------- */
.chat-wrap{
  padding:0 16px 20px !important;
  height:calc(100vh - 140px) !important;
  max-width:640px !important;
  margin:0 auto !important;
}

/* ---------- 消息滚动区 ---------- */
.chat-box{
  padding:14px 4px 20px !important;
  gap:16px !important;
  scroll-behavior:smooth;
}
.chat-box::-webkit-scrollbar{width:6px;}
.chat-box::-webkit-scrollbar-thumb{
  background:rgba(200,65,42,.20);
  border-radius:3px;
}

/* ---------- 消息行 ---------- */
.chat-msg{
  display:flex !important;
  align-items:flex-end !important;
  gap:8px !important;
}

/* ---------- 气泡 ---------- */
.chat-bubble{
  max-width:76% !important;
  padding:12px 16px !important;
  border-radius:20px !important;
  font-size:14px !important;
  line-height:1.65 !important;
  word-break:break-word;
  position:relative;
  box-shadow:0 2px 6px rgba(139,58,30,.06);
  animation:bubbleIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bubbleIn{
  from{opacity:0;transform:translateY(6px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* 用户气泡：暖红渐变 */
.chat-msg.user .chat-bubble{
  background:linear-gradient(135deg,#C8412A 0%,#B8381F 100%) !important;
  color:#fff !important;
  border-bottom-right-radius:6px !important;
  box-shadow:0 4px 12px rgba(200,65,42,.22) !important;
}

/* AI 气泡：奶白 + 细边 */
.chat-msg.bot .chat-bubble{
  background:#FFFFFF !important;
  color:#1A0E05 !important;
  border-bottom-left-radius:6px !important;
  border:1px solid rgba(139,58,30,.08);
  box-shadow:0 2px 8px rgba(139,58,30,.05) !important;
}

/* ---------- 订单卡片（在聊天里）---------- */
.chat-bubble .order-card{
  margin-top:8px;
  padding:14px;
  border-radius:14px;
  background:#FFF8F0;
  border:1px solid rgba(200,65,42,.12);
}

/* ---------- 输入栏 ---------- */
.chat-input-bar{
  padding:12px 4px 4px !important;
  gap:10px !important;
  border-top:1px solid rgba(139,58,30,.10) !important;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--bg) 40%);
  position:sticky;
  bottom:0;
}

.chat-input{
  flex:1;
  padding:12px 18px !important;
  font-size:14px !important;
  border:1.5px solid rgba(139,58,30,.18) !important;
  border-radius:100px !important;
  background:#FFFFFF !important;
  color:#1A0E05;
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.chat-input:focus{
  border-color:#C8412A !important;
  box-shadow:0 0 0 4px rgba(200,65,42,.10) !important;
}
.chat-input::placeholder{color:#B8A089;}

.chat-send{
  min-width:72px;
  padding:0 22px !important;
  height:44px;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:1px;
  color:#fff !important;
  background:linear-gradient(135deg,#C8412A,#8B3A1E) !important;
  border:none !important;
  border-radius:100px !important;
  cursor:pointer;
  font-family:inherit;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 12px rgba(200,65,42,.22);
}
.chat-send:active{
  transform:scale(.95);
  box-shadow:0 2px 6px rgba(200,65,42,.18);
}
.chat-send:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- 打字指示器（如果有的话）---------- */
.typing-dots{
  display:inline-flex;
  gap:4px;
  padding:10px 16px;
  background:#FFF;
  border-radius:20px;
  border:1px solid rgba(139,58,30,.08);
}
.typing-dots span{
  width:6px;
  height:6px;
  background:#B8A089;
  border-radius:50%;
  animation:typing 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes typing{
  0%,60%,100%{opacity:.3;transform:translateY(0);}
  30%{opacity:1;transform:translateY(-3px);}
}

/* ---------- 快捷问题 chips（如果页面有）---------- */
.quick-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 4px 12px;
  overflow-x:auto;
}
.quick-chip{
  padding:8px 14px;
  background:#FFF;
  border:1px solid rgba(200,65,42,.20);
  border-radius:100px;
  font-size:12px;
  color:#8B3A1E;
  cursor:pointer;
  white-space:nowrap;
  transition:.15s;
}
.quick-chip:hover{
  background:#FFF3E6;
  border-color:#C8412A;
  color:#C8412A;
}

/* ---------- 大字版适配 ---------- */
body.mode-elder .chat-bubble{
  font-size:19px !important;
  line-height:1.7 !important;
  padding:16px 20px !important;
  max-width:88% !important;
  border-radius:14px !important;
}
body.mode-elder .chat-input{
  font-size:19px !important;
  padding:16px 22px !important;
  height:56px;
}
body.mode-elder .chat-send{
  font-size:19px !important;
  min-width:88px;
  height:56px;
}
body.mode-elder .chat-wrap{
  height:calc(100vh - 180px) !important;
}


/* ============================================
   用户取消订单
   ============================================ */
.track-cancel-wrap{
  text-align:center;
  margin:20px 0 8px;
}
.track-cancel-btn{
  display:inline-block;
  padding:12px 36px;
  background:#fff;
  color:#C8412A;
  border:1.5px solid rgba(200,65,42,.35);
  border-radius:100px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.track-cancel-btn:hover{
  background:#FEE2E2;
  border-color:#C8412A;
}
.track-cancel-btn:active{transform:scale(.97);}
.track-cancel-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.track-cancel-hint{
  font-size:11px;
  color:#9CA3AF;
  margin-top:8px;
}

.pf-order-cancel{
  background:transparent;
  border:1px solid rgba(200,65,42,.35);
  color:#C8412A;
  padding:4px 14px;
  border-radius:100px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  margin-right:8px;
  transition:all .15s;
}
.pf-order-cancel:hover{
  background:#FEE2E2;
  border-color:#C8412A;
}
.pf-order-cancel:active{transform:scale(.95);}
.pf-order-cancel:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.pf-order-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

body.mode-elder .track-cancel-btn{font-size:20px;padding:16px 44px;}
body.mode-elder .pf-order-cancel{font-size:16px;padding:8px 20px;}


/* ============================================
   匿名用户的"我的"页 · 本机订单
   ============================================ */
.pf-orders-hint{
  font-size:11px;
  color:#9CA3AF;
  margin:-8px 0 12px;
  letter-spacing:.3px;
}
.pf-orders-guest .pf-order{
  background:#FFFFFF;
  border:1px dashed rgba(139,58,30,.20);
}


/* ============================================
   订单成功弹窗 · 取消订单按钮
   ============================================ */
.os-btn-danger{
  background:#FFFFFF !important;
  color:#C8412A !important;
  border:1.5px solid rgba(200,65,42,.35) !important;
}
.os-btn-danger:hover{
  background:#FEE2E2 !important;
  border-color:#C8412A !important;
}
.os-btn-danger:active{transform:scale(.97);}
.os-btn-danger:disabled{
  opacity:.55;
  cursor:not-allowed;
}

body.mode-elder .os-btn-danger{
  font-size:20px !important;
  padding:18px 0 !important;
  border-width:3px !important;
}


/* ============================================
   付款按钮
   ============================================ */
.track-pay-wrap{
  text-align:center;
  margin:20px 0 12px;
}
.track-pay-btn{
  display:block;
  width:100%;
  max-width:320px;
  margin:0 auto;
  padding:16px 0;
  background:linear-gradient(135deg,#10B981,#059669);
  color:#fff;
  border:none;
  border-radius:100px;
  font-size:16px;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 6px 18px rgba(16,185,129,.28);
  transition:transform .15s, box-shadow .15s;
}
.track-pay-btn:hover{
  box-shadow:0 8px 24px rgba(16,185,129,.35);
}
.track-pay-btn:active{
  transform:scale(.97);
  box-shadow:0 3px 10px rgba(16,185,129,.22);
}
.track-pay-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.track-pay-hint{
  font-size:11px;
  color:#059669;
  margin-top:8px;
  font-weight:600;
}
body.mode-elder .track-pay-btn{font-size:20px;padding:20px 0;}


/* ============================================================
   P8 · 首页高级感微调（v3.0）
   不改结构，只做 6 处精细调整
   只作用于年轻版首页（body:not(.mode-elder):has(.hero-video)）
   老浏览器不支持 :has() 会跳过，不影响原有渲染
   ============================================================ */

/* 1. 首页整体：背景从纯白改成极淡暖白 */
body:not(.mode-elder):has(.hero-video){
  --bg:   #FCFAF6;
  --bg-2: #F5F1E8;
}

/* 2. Hero 大标题：字距从 -0.055em 收到 -0.03em；
      投影从两重浓影换成三重柔和影（近+中+远） */
body:not(.mode-elder):has(.hero-video) .hero-title h1{
  letter-spacing: -0.03em;
  text-shadow:
    0 1px 3px  rgba(0,0,0,.35),
    0 6px 30px rgba(0,0,0,.22),
    0 20px 60px rgba(0,0,0,.15);
}

/* 3. 分区间距：从 44px → 48px（更透气） */
body:not(.mode-elder):has(.hero-video) .block{
  padding-top: 48px;
}

/* 4. 数据卡片：数字 22px → 24px，label 加大间距 */
body:not(.mode-elder):has(.hero-video) .fact{
  padding: 22px 0;
}
body:not(.mode-elder):has(.hero-video) .fact-num{
  font-size: 24px;
  letter-spacing: -0.01em;
}
body:not(.mode-elder):has(.hero-video) .fact-label{
  letter-spacing: 2px;
  opacity: .65;
}

/* 5. 入口卡片：圆角 20 → 16px，激活态加边框高亮 */
body:not(.mode-elder):has(.hero-video) .entry-card{
  border-radius: 16px;
  padding: 24px 26px;
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s cubic-bezier(.22,1,.36,1),
    border-color .22s;
}
body:not(.mode-elder):has(.hero-video) .entry-card:active{
  transform: scale(.99);
  border-color: rgba(200,65,42,.35);
}

/* 6. 入口卡片：hover 箭头右移 4px（仅桌面端） */
@media (hover: hover){
  body:not(.mode-elder):has(.hero-video) .entry-card .entry-arrow{
    display: inline-block;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
  }
  body:not(.mode-elder):has(.hero-video) .entry-card:hover .entry-arrow{
    transform: translateX(4px);
  }
}


/* ============================================================
   P8-v2 · 首页视觉升级（明显版）
   不使用 :has()，直接命中 class，兼容所有浏览器
   ============================================================ */

/* ---------- 1. 首页背景：暖米白渐变 ---------- */
body:not(.mode-elder){
  background: linear-gradient(180deg, #FCFAF6 0%, #F6EFE4 100%);
  background-attachment: fixed;
}

/* ---------- 2. Hero 大标题：加大 + 金色装饰 ---------- */
body:not(.mode-elder) .hero-title h1{
  font-size: clamp(64px, 19vw, 120px);
  letter-spacing: -0.025em;
  text-shadow:
    0 2px 6px  rgba(0,0,0,.38),
    0 8px 32px rgba(0,0,0,.25),
    0 24px 72px rgba(0,0,0,.15),
    0 0 80px   rgba(255,186,96,.18);
}
/* 大标题下方加金色装饰线 */
body:not(.mode-elder) .hero-title p::after{
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFBA60, transparent);
  margin-top: 12px;
}

/* ---------- 3. 数据卡片：加图标 + 加大数字 + 描边 ---------- */
body:not(.mode-elder) .facts{
  gap: 10px;
  margin-top: 48px;
}
body:not(.mode-elder) .fact{
  border: 1px solid rgba(139,58,30,.12);
  border-top: 3px solid #C8412A;
  border-radius: 12px;
  padding: 24px 8px 22px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(139,58,30,.06);
  position: relative;
}
body:not(.mode-elder) .fact::before{
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: #C8412A;
  border: 3px solid #FCFAF6;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C8412A;
}
body:not(.mode-elder) .fact-num{
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #C8412A;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
body:not(.mode-elder) .fact-label{
  font-size: 12px;
  letter-spacing: 2.5px;
  color: #6B4A2E;
  font-weight: 600;
  margin-top: 4px;
}

/* ---------- 4. 入口卡片：加左金色条 + 图标间距 + 大阴影 ---------- */
body:not(.mode-elder) .entry{
  padding: 52px 24px 72px;
  gap: 14px;
}
body:not(.mode-elder) .entry-card{
  border-radius: 18px;
  padding: 22px 26px 22px 30px;
  border-left: 4px solid #C8412A;
  background: #FFFFFF;
  box-shadow:
    0 2px 4px rgba(139,58,30,.04),
    0 8px 24px rgba(139,58,30,.08);
  position: relative;
  overflow: hidden;
}
body:not(.mode-elder) .entry-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #C8412A, #8B3A1E);
}
body:not(.mode-elder) .entry-card:active{
  transform: scale(.985);
  box-shadow:
    0 0 0 1px #C8412A,
    0 12px 32px rgba(200,65,42,.15);
}
body:not(.mode-elder) .entry-name{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}
body:not(.mode-elder) .entry-arrow{
  font-size: 20px;
  color: #C8412A;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover){
  body:not(.mode-elder) .entry-card:hover .entry-arrow{
    transform: translateX(6px);
  }
  body:not(.mode-elder) .entry-card:hover{
    box-shadow:
      0 4px 8px rgba(139,58,30,.06),
      0 16px 40px rgba(139,58,30,.12);
  }
}

/* ---------- 5. 通用 block：更大间距 ---------- */
body:not(.mode-elder) .block{
  padding: 52px 24px 0;
}
body:not(.mode-elder) .block-label{
  font-size: 12px;
  letter-spacing: 5px;
  padding-left: 14px;
  position: relative;
}
body:not(.mode-elder) .block-label::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 2px;
  background: #C8412A;
}
body:not(.mode-elder) .block-title{
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* ---------- 6. 底部 tabbar 微调 ---------- */
body:not(.mode-elder) .tabbar{
  border-top: 1px solid rgba(139,58,30,.08);
  box-shadow: 0 -4px 20px rgba(139,58,30,.04);
}


/* ============================================
   P9 · 聊天页升级（头像 + 思考态 + 打字光标 + Emoji 开关）
   ============================================ */

/* ---------- 页面头部：给 emoji 开关定位 ---------- */
.page-head{ position: relative; }

/* ---------- 消息行：头像 + 内容 ---------- */
.chat-msg{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  animation: chatMsgIn .32s cubic-bezier(.22,1,.36,1) both;
}
.chat-msg.user{ flex-direction: row; justify-content: flex-end; }
.chat-msg.bot{ flex-direction: row; justify-content: flex-start; }

@keyframes chatMsgIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- 头像 ---------- */
.chat-avatar{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: #FFF8F0;
  border: 1px solid rgba(200,65,42,.18);
  box-shadow: 0 1px 4px rgba(139,58,30,.06);
  user-select: none;
}
.chat-msg.user .chat-avatar{
  background: #F0EBFF;
  border-color: rgba(120,90,200,.18);
  order: 2;
}
.chat-msg.user .chat-content{ order: 1; }

/* ---------- 内容区 ---------- */
.chat-content{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 78%;
  min-width: 0;
}
.chat-msg.user .chat-content{ align-items: flex-end; }
.chat-msg.bot  .chat-content{ align-items: flex-start; }

/* ---------- 思考状态 ---------- */
.chat-bubble.thinking{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF;
  border: 1px dashed rgba(200,65,42,.25);
  color: #8B6A4E;
  font-size: 13px;
  padding: 12px 16px;
  min-height: 44px;
  box-sizing: border-box;
}
.thinking-dots{
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 12px;
}
.thinking-dots i{
  width: 6px; height: 6px;
  background: #C8412A;
  border-radius: 50%;
  opacity: .35;
  animation: thinkingBounce 1.2s infinite ease-in-out;
}
.thinking-dots i:nth-child(2){ animation-delay: .15s; }
.thinking-dots i:nth-child(3){ animation-delay: .30s; }

@keyframes thinkingBounce{
  0%, 60%, 100%{ transform: translateY(0); opacity: .35; }
  30%{ transform: translateY(-4px); opacity: 1; }
}

/* ---------- 打字光标 ---------- */
.chat-bubble.typing::after{
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: -2px;
  margin-left: 2px;
  background: currentColor;
  opacity: .8;
  animation: caretBlink 1s steps(2, start) infinite;
}
@keyframes caretBlink{
  0%, 50%{ opacity: .8; }
  51%, 100%{ opacity: 0; }
}

/* ---------- 元信息 ---------- */
.chat-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9CA3AF;
  padding: 0 4px;
  animation: metaFadeIn .3s ease both;
}
@keyframes metaFadeIn{
  from{ opacity: 0; transform: translateY(-2px); }
  to{ opacity: 1; transform: none; }
}
.chat-status{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
}
.chat-copy{
  background: transparent;
  border: 1px solid rgba(200,65,42,.2);
  color: #C8412A;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.chat-copy:hover{
  background: rgba(200,65,42,.08);
  border-color: #C8412A;
}
.chat-copy:active{ transform: scale(.96); }

/* ---------- 错误气泡 ---------- */
.chat-bubble.error{
  background: #FEF2F2;
  border-color: rgba(220,38,38,.25);
  color: #991B1B;
}

/* ---------- Emoji 开关 ---------- */
.emoji-toggle{
  position: absolute;
  top: 56px;
  right: 24px;
  width: 36px; height: 36px;
  background: #FFF;
  border: 1px solid rgba(200,65,42,.2);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(139,58,30,.08);
  transition: .15s;
  padding: 0;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.emoji-toggle:hover{
  background: #FFF3E6;
  border-color: #C8412A;
}
.emoji-toggle:active{ transform: scale(.95); }
.emoji-toggle[aria-pressed="false"]{
  background: #F3F4F6;
  border-color: #D1D5DB;
  opacity: .65;
}

/* 全局关闭 emoji */
body.no-emoji .emoji{ display: none !important; }

/* ---------- 可访问性：减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .chat-msg,
  .chat-meta,
  .thinking-dots i,
  .chat-bubble.typing::after{
    animation: none !important;
  }
  .chat-msg{ opacity: 1; transform: none; }
  .chat-meta{ opacity: 1; }
  .thinking-dots i{ opacity: 1; transform: none; }
  .chat-bubble.typing::after{ opacity: 1; }
}

/* ---------- 大字版兼容 ---------- */
body.mode-elder .chat-avatar{
  width: 42px; height: 42px;
  font-size: 22px;
}
body.mode-elder .chat-content{ max-width: 82%; }
body.mode-elder .chat-meta{ font-size: 14px; }
body.mode-elder .chat-copy{ font-size: 14px; padding: 4px 12px; }
body.mode-elder .chat-bubble.thinking{ font-size: 17px; }


/* ============================================
   P9-fix · 气泡宽度修复
   强制按内容宽度，覆盖旧的 max-width:76% !important
   ============================================ */

/* 让 .chat-content 成为 flex 布局的可压缩容器 */
.chat-msg .chat-content{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-width: 78% !important;
  min-width: 0 !important;
}
.chat-msg.user .chat-content{ align-items: flex-end !important; }
.chat-msg.bot  .chat-content{ align-items: flex-start !important; }

/* 气泡：按内容宽度，绝不强压 */
.chat-msg .chat-bubble{
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
  display: inline-block;
  text-align: left;
}

/* 长英文/URL 不撑破布局 */
.chat-msg .chat-bubble{ overflow-wrap: anywhere; }

/* 订单卡片：占满 chat-content 宽度 */
.chat-msg .order-card{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 思考气泡：也是内容宽 */
.chat-msg .chat-bubble.thinking{
  width: fit-content !important;
  max-width: 100% !important;
}


/* ============================================
   v3.2 · 店长入口（前台极不显眼）
   ============================================ */
.staff-entry{
  text-align: center;
  padding: 48px 0 32px;
  user-select: none;
}
.staff-entry a{
  display: inline-block;
  width: 24px; height: 24px;
  line-height: 20px;
  color: rgba(139, 58, 30, .08);
  font-size: 40px;
  text-decoration: none;
  transition: color .3s;
}
.staff-entry a:hover{
  color: rgba(200, 65, 42, .45);
}
body.mode-elder .staff-entry a{
  font-size: 56px;
  width: 32px; height: 32px;
  color: rgba(139, 58, 30, .15);
}




/* ============================================
   v3.4 · 登录注册弹窗美化
   ============================================ */
.auth-panel{
  width: min(400px, 92vw) !important;
  border-radius: 24px !important;
  overflow: hidden;
  position: relative;
}
.auth-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: .15s;
}
.auth-close:hover{
  background: rgba(255,255,255,.3);
  transform: rotate(90deg);
}

.auth-head{
  background: linear-gradient(135deg, #C8412A 0%, #8B3A1E 100%);
  padding: 32px 24px 24px;
  text-align: center;
  color: #fff;
  border-radius: 24px 24px 0 0;
  position: relative;
}
.auth-head::after{
  content: '';
  position: absolute;
  bottom: -20px; left: 0; right: 0;
  height: 40px;
  background: #fff;
  border-radius: 20px 20px 0 0;
}
.auth-logo{
  font-size: 40px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.auth-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 6px;
}
.auth-sub{
  font-size: 12px;
  opacity: .85;
  letter-spacing: .5px;
  margin: 0;
}

.auth-tabs{
  display: flex;
  position: relative;
  margin: 8px 24px 0;
  padding: 4px;
  background: #F5F1EA;
  border-radius: 100px;
  z-index: 1;
}
.auth-tab{
  flex: 1;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #8A6A4E;
  cursor: pointer;
  border-radius: 100px;
  position: relative;
  z-index: 2;
  transition: color .2s;
  font-family: inherit;
}
.auth-tab.active{
  color: #C8412A;
}
.auth-tab-slider{
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(139,58,30,.08);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

.auth-body{
  padding: 24px 24px 28px;
}
.auth-field{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #F9F6F0;
  border: 1.5px solid transparent;
  border-radius: 14px;
  margin-bottom: 12px;
  transition: border-color .2s, background .2s;
}
.auth-field:focus-within{
  background: #fff;
  border-color: #C8412A;
  box-shadow: 0 0 0 4px rgba(200,65,42,.10);
}
.field-icon{
  font-size: 16px;
  opacity: .7;
  flex-shrink: 0;
}
.auth-field input{
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: #1A0E05;
  font-family: inherit;
  padding: 0;
  min-width: 0;
}
.auth-field input::placeholder{
  color: #B8A089;
}

.auth-msg{
  min-height: 18px;
  font-size: 12px;
  color: #C8412A;
  text-align: center;
  margin: 4px 0 8px;
}

.auth-submit{
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(200,65,42,.25);
  transition: transform .15s, box-shadow .15s;
  margin-top: 4px;
}
.auth-submit:active{
  transform: scale(.98);
  box-shadow: 0 3px 10px rgba(200,65,42,.2);
}
.auth-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}

.auth-staff-link{
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #B8A089;
  text-decoration: none;
  transition: color .15s;
  letter-spacing: .5px;
}
.auth-staff-link:hover{
  color: #C8412A;
}
.auth-staff-link span{
  margin-right: 4px;
  opacity: .7;
}

/* 大字版适配 */
body.mode-elder .auth-title{font-size: 26px;}
body.mode-elder .auth-tab{font-size: 18px; padding: 14px 0;}
body.mode-elder .auth-field input{font-size: 20px;}
body.mode-elder .auth-submit{font-size: 20px; padding: 18px;}
body.mode-elder .auth-staff-link{font-size: 16px; margin-top: 24px;}


/* ============================================
   v3.5 · 聊天页输入栏底部跟随
   解决：输入栏被 tabbar 遮挡 / 键盘弹出时不上移
   ============================================ */

/* 聊天页不需要 body 的 padding-bottom（tabbar 是 fixed） */
body:has(.chat-wrap){
  padding-bottom: 0 !important;
}

/* chat-wrap 高度：视口 - page-head - tabbar */
.chat-wrap{
  height: calc(100vh - 200px) !important;      /* 旧浏览器 fallback */
  height: calc(100dvh - 200px) !important;     /* 新浏览器用动态视口 */
  padding: 0 16px calc(68px + env(safe-area-inset-bottom)) 20px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 消息滚动区：撑满剩余高度 */
.chat-box{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 4px 20px !important;
  gap: 16px !important;
  scroll-behavior: smooth;
}

/* 输入栏：固定在 chat-wrap 底部（tabbar 上方） */
.chat-input-bar{
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 10px !important;
  padding: 12px 4px 12px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(139,58,30,.10) !important;
  background: #FFFFFF !important;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(139,58,30,.06);
  z-index: 20;
}

/* 大字版适配 */
body.mode-elder:has(.chat-wrap){
  padding-bottom: 0 !important;
}
body.mode-elder .chat-wrap{
  height: calc(100vh - 240px) !important;
  height: calc(100dvh - 240px) !important;
  padding: 0 16px calc(84px + env(safe-area-inset-bottom)) 20px !important;
}

/* 超矮屏（键盘弹出时）：输入栏不重叠 */
@media (max-height: 500px){
  .chat-wrap{
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
}


/* ============================================
   v3.6 · 用户订单分页
   ============================================ */
.pf-order-pager{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pf-pager-btn{
  padding: 8px 18px;
  background: linear-gradient(135deg, #C8412A, #8B3A1E);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.pf-pager-btn:active:not(:disabled){ transform: scale(.96); }
.pf-pager-btn:disabled{
  background: #E5E0D8;
  color: #B8A089;
  cursor: not-allowed;
  opacity: .7;
}
.pf-pager-info{
  font-size: 12px;
  color: #6B4A2E;
  font-variant-numeric: tabular-nums;
  min-width: 100px;
  text-align: center;
}
.pf-pager-info.single{
  display: block;
  text-align: center;
  margin: 16px 0 0;
  font-size: 12px;
  color: #B8A089;
}

body.mode-elder .pf-pager-btn{ font-size: 16px; padding: 10px 22px; }
body.mode-elder .pf-pager-info{ font-size: 16px; }

/* ============================================
   v3.6 · 聊天输入栏固定（覆盖所有旧规则）
   ============================================ */

/* 聊天页：让 body 不预留 tabbar 高度（输入栏已自己 fixed） */
body:has(.chat-wrap){
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* chat-wrap：自然高度，不再限制 */
body:has(.chat-wrap) .chat-wrap{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 16px 0 16px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* chat-box：滚动区，底部留出输入栏高度 */
body:has(.chat-wrap) .chat-box{
  padding: 14px 4px 100px 4px !important;    /* 100px = 输入栏高度 */
  gap: 16px !important;
  max-height: calc(100vh - 140px) !important;
  max-height: calc(100dvh - 140px) !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

/* chat-input-bar：固定到 tabbar 上方 */
body:has(.chat-wrap) .chat-input-bar{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(139,58,30,.10) !important;
  box-shadow: 0 -4px 16px rgba(139,58,30,.06) !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  display: flex !important;
  gap: 10px !important;
}

/* 大字版：tabbar 更高 */
body.mode-elder:has(.chat-wrap) .chat-input-bar{
  bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}
body.mode-elder:has(.chat-wrap) .chat-box{
  max-height: calc(100vh - 180px) !important;
  max-height: calc(100dvh - 180px) !important;
  padding-bottom: 110px !important;
}


/* ============================================
   v3.8 · 聊天页可视高度修复
   问题：最后一条 AI 回复被输入框遮住
   方案：chat-box 改 fixed，上下边界精确计算
   ============================================ */

/* body 锁滚 */
body:has(.chat-wrap){
  padding-bottom: 0 !important;
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
}

/* chat-wrap 只作占位（子元素都 fixed 了） */
body:has(.chat-wrap) .chat-wrap{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* chat-box：fixed 定位，占据 page-head 底部 → 输入栏顶部 */
body:has(.chat-wrap) .chat-box{
  position: fixed !important;
  top: calc(140px + env(safe-area-inset-top)) !important;
  bottom: calc(136px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 640px !important;
  overflow-y: auto !important;
  padding: 14px 20px 20px !important;
  box-sizing: border-box !important;
  gap: 16px !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  max-height: none !important;
}

/* 输入栏：位置保持在 tabbar 上方 */
body:has(.chat-wrap) .chat-input-bar{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(139,58,30,.10) !important;
  box-shadow: 0 -4px 16px rgba(139,58,30,.06) !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  display: flex !important;
  gap: 10px !important;
}

/* 大字版 page-head 更高 */
body.mode-elder:has(.chat-wrap) .chat-box{
  top: calc(180px + env(safe-area-inset-top)) !important;
  bottom: calc(160px + env(safe-area-inset-bottom)) !important;
}

/* 矮屏兜底（如键盘弹出） */
@media (max-height: 600px){
  body:has(.chat-wrap) .chat-box{
    top: calc(110px + env(safe-area-inset-top)) !important;
  }
}


/* ============================================
   v3.8 · 售罄 / 库存提示
   ============================================ */
.dish.sold-out{
  opacity: .5;
  filter: grayscale(.5);
}
.dish-add[disabled]{
  background: #9CA3AF !important;
  cursor: not-allowed;
  font-size: 12px !important;
  padding: 6px 10px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
}
.dish-tag{
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 100px;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
}
.dish-tag.out{ background: #FEE2E2; color: #991B1B; }
.dish-tag.low{ background: #FEF3C7; color: #92400E; }

/* 后台菜单库存列 */
.stock-ok  { color: #059669; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-low { color: #D97706; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-out { color: #DC2626; font-weight: 700; }
.stock-inf { color: #9CA3AF; font-size: 12px; }

body.mode-elder .dish-tag{ font-size: 14px; padding: 3px 10px; }


/* ============================================
   v3.9 · 全屏 Hero（首页）
   ============================================ */

.hero-full{
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #1a0a04;
}

/* 视频舞台 */
.hero-stage{
  position: absolute;
  inset: 0;
  background: #1a0a04;
}
.hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: opacity;
  pointer-events: none;
}
.hero-media.is-active{
  opacity: 1;
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 骨架 */
.hero-skeleton{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  gap: 12px;
}
.hero-skeleton-icon{
  font-size: 56px;
  opacity: .6;
  animation: heroSkelPulse 1.6s ease-in-out infinite;
}
@keyframes heroSkelPulse{
  0%,100%{ opacity: .3; transform: scale(.96); }
  50%   { opacity: .7; transform: scale(1); }
}

/* 顶部深色渐隐（提升文字可读性） */
.hero-full::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  z-index: 5;
  pointer-events: none;
}

/* 中央菜名 */
.hero-title-wrap{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  padding: 0 24px;
}
.hero-dish-name{
  margin: 0;
  color: #FFFFFF;
  font-family: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 12vw, 84px);
  letter-spacing: .05em;
  line-height: 1.05;
  text-shadow:
    0 2px 8px rgba(0,0,0,.55),
    0 8px 40px rgba(0,0,0,.45),
    0 0 80px rgba(200,65,42,.25);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.hero-dish-name.is-show{
  opacity: 1;
  transform: translateY(0);
}
.hero-dish-line{
  width: 60px;
  height: 3px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, #FFBA60, transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .5s ease .2s;
}
.hero-dish-name.is-show + .hero-dish-line{
  opacity: 1;
}

/* 左右切换按钮 */
.hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.hero-nav:hover{ background: rgba(0,0,0,.55); }
.hero-nav:active{ transform: translateY(-50%) scale(.92); }
.hero-nav svg{ width: 26px; height: 26px; fill: currentColor; }
.hero-nav-prev{ left: 16px; }
.hero-nav-next{ right: 16px; }

/* 进度点 */
.hero-dots{
  position: absolute;
  bottom: calc(120px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 15;
  pointer-events: none;
}
.hero-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: all .3s ease;
}
.hero-dot.is-active{
  width: 24px;
  border-radius: 3px;
  background: #FFBA60;
  box-shadow: 0 0 12px rgba(255,186,96,.6);
}

/* 底部标签栏 */
.hero-label-bar{
  position: absolute;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  z-index: 15;
  flex-wrap: wrap;
}
.hero-label{
  padding: 10px 20px;
  border-radius: 100px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.hero-label:hover{
  background: rgba(255,186,96,.9);
  border-color: #FFBA60;
  color: #1A0E05;
  transform: translateY(-2px);
}
.hero-label:active{
  transform: translateY(0) scale(.97);
}

/* 极简版隐藏 Hero（自动跳菜单，不显示首页） */
body.mode-elder .hero-full{ display: none; }

/* 桌面端箭头更大一点 */
@media (min-width: 768px){
  .hero-nav{ width: 54px; height: 54px; }
  .hero-nav svg{ width: 30px; height: 30px; }
  .hero-nav-prev{ left: 32px; }
  .hero-nav-next{ right: 32px; }
}

/* 超窄屏隐藏箭头（用点 + 滑动代替） */
@media (max-width: 380px){
  .hero-nav{ width: 38px; height: 38px; }
  .hero-nav svg{ width: 20px; height: 20px; }
}


/* ============================================
   v3.9 · Hero v2（删箭头 / 品牌左上 / 标签 glow）
   ============================================ */

/* 保险：即使 HTML 里有残留也隐藏 */
.hero-nav,
.hero-title-wrap { display: none !important; }

/* 左上角品牌 */
.hero-brand-tl {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top));
  left: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  color: #F5F2EC;
  font-size: 15px;
  letter-spacing: .28em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  animation: heroBrandIn .9s cubic-bezier(.22,1,.36,1) both;
  padding: 10px 18px;
  background: rgba(26,26,24,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184,155,104,.45);
  border-radius: 2px;
}
.hero-brand-tl .hb-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: #B89B68;
  opacity: .85;
}
.hero-brand-tl .hb-name {
  font-weight: 500;
  color: #F5F2EC;
  letter-spacing: .3em;
}
.hero-brand-tl .hb-dot {
  color: #B89B68;
  font-size: 12px;
  opacity: .8;
  letter-spacing: 0;
}
.hero-brand-tl .hb-welcome {
  color: rgba(245,242,236,.85);
  letter-spacing: .3em;
  font-size: 13px;
}
@keyframes heroBrandIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 底部标签：glow + 细横线 */
.hero-label-bar {
  bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  gap: 36px !important;
  padding: 0 24px !important;
  align-items: flex-start !important;
}
.hero-label {
  padding: 10px 4px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(245,242,236,.92) !important;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .35em !important;
  text-indent: .35em !important;
  text-shadow:
    0 0 8px rgba(255,215,150,.55),
    0 0 20px rgba(255,186,96,.30),
    0 2px 6px rgba(0,0,0,.55) !important;
  position: relative !important;
  transition: all .35s cubic-bezier(.22,1,.36,1) !important;
  white-space: nowrap !important;
}
.hero-label::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184,155,104,.85) 50%,
    transparent 100%);
  opacity: .75;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.hero-label:hover {
  color: #FFD896 !important;
  text-shadow:
    0 0 12px rgba(255,215,150,.95),
    0 0 28px rgba(255,186,96,.65),
    0 2px 8px rgba(0,0,0,.6) !important;
  transform: translateY(-2px) !important;
}
.hero-label:hover::after {
  height: 2px;
  opacity: 1;
  background: linear-gradient(90deg,
    transparent 0%,
    #FFBA60 50%,
    transparent 100%);
}

body.mode-elder .hero-brand-tl { display: none; }

@media (max-width: 640px){
  .hero-brand-tl {
    top: calc(18px + env(safe-area-inset-top));
    left: 16px;
    font-size: 13px;
    padding: 8px 14px;
    gap: 8px;
  }
  .hero-brand-tl .hb-line { width: 12px; }
  .hero-brand-tl .hb-welcome { font-size: 12px; }
  .hero-label-bar { gap: 24px !important; }
  .hero-label { font-size: 13px !important; }
}


/* ============================================
   v3.9 · Hero 高度 2/3 + 首页门店板块
   ============================================ */

/* Hero 从 100vh → 66vh */
.hero-full{
  height: 66vh !important;
  height: 66dvh !important;
  min-height: 420px;
  max-height: 720px;
}

/* 内部元素位置跟着调 */
.hero-dots{
  bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}
.hero-label-bar{
  bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  gap: 28px !important;
}

@media (max-width: 640px){
  .hero-full{
    height: 62vh !important;
    height: 62dvh !important;
    min-height: 380px;
  }
  .hero-dots{
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .hero-label-bar{
    bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }
}

/* 首页门店板块 */
.home-loc{
  padding: 44px 24px 64px;
  max-width: 560px;
  margin: 0 auto;
}
.home-loc-head{
  margin-bottom: 28px;
  text-align: left;
}
.home-loc-label{
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--accent, #C8412A);
  margin-bottom: 12px;
  opacity: .85;
}
.home-loc-title{
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink, #1A0E05);
  line-height: 1.35;
  position: relative;
  padding-bottom: 12px;
}
.home-loc-title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: #B89B68;
}

/* 页面滚动自然衔接：把原来的 body padding-bottom 去掉一点（tabbar 是 fixed）*/
.home-loc + .staff-entry{ margin-top: 0; }


/* ============================================
   v3.9 · Hero 底部优化 + 品牌故事 + 入口
   ============================================ */

/* 视频构图：往下偏一点，让碗露出来 */
.hero-media{
  object-position: center 45% !important;
}

/* 底部深色渐隐遮罩（保标签可读，不遮主画面） */
.hero-shade-bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(180deg,
    rgba(26,26,24,0) 0%,
    rgba(26,26,24,.55) 55%,
    rgba(26,26,24,.78) 100%);
  z-index: 8;
  pointer-events: none;
}

/* 标签下移 */
.hero-dots{
  bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}
.hero-label-bar{
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  gap: 28px !important;
}

@media (max-width: 640px){
  .hero-dots{
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .hero-label-bar{
    bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }
  .hero-shade-bottom{ height: 160px; }
}

/* ============ 品牌故事 ============ */
.home-story{
  padding: 56px 24px 32px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg, #FAF7F2);
}
.hs-head{
  margin-bottom: 24px;
}
.hs-label{
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 12px;
  letter-spacing: .5em;
  color: #C8412A;
  margin: 0 0 14px;
  opacity: .85;
  text-indent: .5em;
}
.hs-title{
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink, #1A0E05);
  line-height: 1.35;
  margin: 0;
  position: relative;
  padding-bottom: 16px;
}
.hs-title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 1px;
  background: #B89B68;
}
.hs-text{
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--ink-2, #6B4A2E);
  margin: 0;
}

/* 三个数据 */
.hs-facts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 44px;
  padding: 28px 0;
  border-top: 1px solid rgba(139,58,30,.12);
  border-bottom: 1px solid rgba(139,58,30,.12);
  position: relative;
}
.hs-fact{
  text-align: center;
  padding: 0 8px;
  position: relative;
}
.hs-fact + .hs-fact::before{
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(139,58,30,.10);
}
.hs-num{
  display: block;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #C8412A;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hs-lab{
  display: block;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--ink-2, #6B4A2E);
  text-indent: .35em;
}

/* ============ 入口 ============ */
.home-entry{
  padding: 20px 24px 64px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.he-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid rgba(139,58,30,.10);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink, #1A0E05);
  transition: all .35s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.he-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: #2C3A38;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.he-card:hover::before,
.he-card:active::before{
  transform: scaleY(1);
}
.he-card:hover{
  border-color: rgba(44,58,56,.35);
  transform: translateY(-2px);
}
.he-name{
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .25em;
}
.he-arrow{
  font-family: Lora, serif;
  font-size: 18px;
  color: #B89B68;
  transition: transform .35s;
}
.he-card:hover .he-arrow{
  transform: translateX(4px);
}

@media (max-width: 640px){
  .home-story{ padding: 44px 24px 24px; }
  .hs-title{ font-size: 28px; }
  .hs-num{ font-size: 26px; }
  .hs-lab{ font-size: 11px; letter-spacing: .25em; text-indent: .25em; }
  .home-entry{ padding: 16px 24px 56px; }
}


/* ============================================
   v3.9 · Hero 按 9:16 完整显示
   ============================================ */

/* 关键：容器用 aspect-ratio 9/16，max-height 兜底 */
.hero-full{
  width: 100% !important;
  height: auto !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 85vh !important;
  min-height: 380px !important;
  margin: 0 auto !important;
  background: #1a0a04 !important;
}

/* 视频/图：contain 保证完整，不裁切 */
.hero-media{
  object-fit: contain !important;
  object-position: center center !important;
}

/* 视频底背景色（黑边融合） */
.hero-stage{
  background: #1a0a04 !important;
}

/* 底部遮罩收窄（视频短了，遮罩不用那么高） */
.hero-shade-bottom{
  height: 130px !important;
}

/* 标签位置上移一点（视频短了，标签别贴边） */
.hero-dots{
  bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
.hero-label-bar{
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  gap: 24px !important;
}

@media (max-width: 640px){
  .hero-full{
    max-height: 88vh !important;
  }
  .hero-shade-bottom{ height: 110px !important; }
  .hero-dots{
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  .hero-label-bar{
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    gap: 20px !important;
  }
}

/* 极简版隐藏 */
body.mode-elder .hero-full{ display: none; }


/* v3.9 · 欢迎气泡换行 */
.welcome-bubble{ white-space: pre-wrap !important; line-height: 1.7 !important; }


/* v3.9 · 欢迎气泡换行（最终版） */
.welcome-bubble{
  white-space: normal !important;
  line-height: 1.75 !important;
  padding: 14px 18px !important;
  max-width: 82% !important;
}
.welcome-bubble br{
  line-height: 1.75 !important;
}