/* SHUKR 独立页完整样式 — 来源于 preview_all_pages.html V6 示例
 * 包含 Banner 轮播(V4 scroll-snap) / 券卡(预览风格大圆角) / 攻略页 / 活动页 / 活动子页(左分类+右卡片)
 * / 底部抽屉(Bottom Sheet + 全屏展开 + 图片放大 + Lightbox)
 *
 * ⚠️ SSOT 单一实现原则（2026-09-04 券卡 MODIFIED 版重构）：
 *   - :root 变量 / 全局 reset / Tab(.ip-tabs*) / .ip-wrap / .ip-hero / .ip-empty
 *     的唯一来源 = api_server.py :: _page_shell → shell_extra_style
 *   - 本文件只定义：Banner / 券卡(to-*) / 攻略(gd-*) / 活动(ac-*) / 子页(aw-*) / 底部抽屉(bs-*)
 *   - 禁止在此文件重复定义上述 SSOT 项，避免双份覆盖
 */

/* ===== 统一外壳 ===== */
/* 注：:root / *reset / body / a 已由 shell_extra_style 注入，此处不再重复定义 */

/* SSOT 说明：
   - 全局 Tab(.ip-tabs/.ip-tabs-inner/.ip-tab-item) → api_server.py :: shell_extra_style
   - 全局容器(.ip-wrap/.ip-footer/.ip-hero/.ip-empty) → 同上
   - 前后端边界/admin 调试浮球(.tab-debug-*) → 同上（仅 shell 注入的预览态调试控件）
   - 本文件仅保留 Banner / 券卡(to-*) / 攻略 / 活动 / 子页 / 底部抽屉 的业务样式。
*/

/* ====================================================================
   ★ 统一 Banner（V4：极简扁平化 · 对齐用户截图风格）
==================================================================== */
.ip-banner{
  position:relative;margin:0 0 16px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#fffbf7 0%,#fff 100%);
  border:1px solid rgba(255,146,94,.22);
  box-shadow:0 10px 28px rgba(255,106,0,.06);
}
.ip-banner-track{
  position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y pan-x;cursor:grab;
}
.ip-banner-track::-webkit-scrollbar{display:none}
.ip-banner-track.is-dragging{cursor:grabbing}
.ip-banner-slide{
  position:relative;min-width:100%;min-height:110px;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px 28px;
}
.ip-banner-slide[data-tint="guide"]{background:linear-gradient(135deg,#f4fbf6 0%,#fff 100%)}
.ip-banner-slide[data-tint="activity"]{background:linear-gradient(135deg,#fff9f0 0%,#fff 100%)}
.ip-banner-slide[data-tint="hot"]{background:linear-gradient(135deg,#fff6ee 0%,#fff 100%)}
.ip-banner-slide[data-tint="milk"]{background:linear-gradient(135deg,#fffaf0 0%,#fff 100%)}

/* 左侧文案区 */
.ip-banner-copy{min-width:0;flex:1}
.ip-banner-kicker{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
  padding:3px 10px 3px 8px;background:var(--pg);color:var(--p);
  font-size:11px;font-weight:800;border-radius:999px;line-height:1;
}
.ip-banner-kicker .ip-banner-dotme{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--p);
  box-shadow:0 0 0 3px rgba(255,106,0,.18);
}
.ip-banner-slide h2{color:var(--bk);font-size:clamp(13px,4.2vw,16.5px);line-height:1.35;margin:0 0 4px;font-weight:850;letter-spacing:.2px;word-break:keep-all}
.ip-banner-slide p{color:var(--m);font-size:clamp(11.5px,3.2vw,12.5px);line-height:1.45}

/* 右侧：CTA 跳转按钮 + 独立图标卡（截图风格）*/
.ip-banner-right{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding-left:4px;
}
.ip-banner-cta{
  display:inline-flex;align-items:center;gap:4px;
  padding:8px 13px;border-radius:10px;
  background:var(--p);color:#fff;
  font-size:12px;font-weight:800;line-height:1;
  box-shadow:0 6px 14px var(--ps);
  cursor:pointer;white-space:nowrap;
  transition:transform .12s;
}
.ip-banner-cta:active{transform:scale(.97)}
.ip-banner-cta .arr{font-weight:900;font-size:13px}

.ip-banner-icon-card{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#ffffff,#f0f7ff);
  color:#3b82f6;font-size:26px;line-height:1;
  box-shadow:0 10px 20px rgba(59,130,246,.14),inset 0 0 0 1px rgba(255,255,255,.95);
}
.ip-banner-slide[data-tint="guide"] .ip-banner-icon-card{background:linear-gradient(135deg,#ffffff,#e9f8ef);color:#22a06b;box-shadow:0 10px 20px rgba(34,160,107,.12),inset 0 0 0 1px rgba(255,255,255,.95)}
.ip-banner-slide[data-tint="activity"] .ip-banner-icon-card{background:linear-gradient(135deg,#ffffff,#fff1e0);color:#e06d0a;box-shadow:0 10px 20px rgba(224,109,10,.12),inset 0 0 0 1px rgba(255,255,255,.95)}
.ip-banner-slide[data-tint="hot"] .ip-banner-icon-card{background:linear-gradient(135deg,#ffffff,#ffe8d4);color:#dc4b00;box-shadow:0 10px 20px rgba(220,75,0,.14),inset 0 0 0 1px rgba(255,255,255,.95)}
.ip-banner-slide[data-tint="milk"] .ip-banner-icon-card{background:linear-gradient(135deg,#ffffff,#fff2cc);color:#c77700;box-shadow:0 10px 20px rgba(199,119,0,.12),inset 0 0 0 1px rgba(255,255,255,.95)}

/* 底部 UI 块：左圆点 · 右计数胶囊 */
.ip-banner-bottom{
  position:absolute;left:14px;right:14px;bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ip-banner-dots{display:flex;gap:5px;align-items:center}
.ip-banner-dot{
  width:6px;height:6px;border:0;padding:0;border-radius:999px;
  background:rgba(148,163,184,.55);cursor:pointer;transition:all .25s;
}
.ip-banner-dot.is-on{width:16px;background:var(--p);border-radius:999px}

.ip-banner-count{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#9a4b11;font-size:11px;font-weight:800;
  border:1px solid rgba(251,146,60,.22);
  box-shadow:0 4px 10px rgba(255,106,0,.06);
}
.ip-banner-count .arr{font-size:12px;opacity:.8;line-height:1}

@media(max-width:768px){
  .ip-banner-slide{min-height:100px;padding:14px 14px 26px;gap:10px}
  .ip-banner-slide h2{font-size:15px}
  .ip-banner-slide p{font-size:11.5px}
  .ip-banner-icon-card{width:46px;height:46px;border-radius:12px;font-size:22px}
  .ip-banner-cta{padding:7px 11px;font-size:11.5px;border-radius:9px}
}

/* ====================================================================
   ★ 统一外卖券卡（预览现代风格：大圆角 · 橙红渐变 · 高级阴影）
   ★ 三页共用仅此一套样式，不搞两套
   ★ 功能：<a> 直接跳转（对齐服务器行为，不弹抽屉）
   ★ 样式：预览现代风格（橙红+大圆角+暖色调，不搞朴素绿色）
==================================================================== */
.to-search-wrap{position:relative;margin:0 0 12px}
.to-search{width:100%;height:42px;padding:0 12px 0 38px;border:1px solid #dde7f2;border-radius:10px;background:rgba(255,255,255,.94);font-size:14px;outline:none;box-shadow:0 8px 20px rgba(25,38,60,.04)}
.to-search:focus{border-color:var(--p);background:#fff;box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.to-si{position:absolute;left:12px;top:50%;width:17px;height:17px;color:#8994a3;transform:translateY(-50%);pointer-events:none}
.to-nav{display:flex;gap:8px;margin:0 0 16px;padding-bottom:4px;overflow-x:auto;scrollbar-width:none}
.to-nav::-webkit-scrollbar{display:none}
.to-nav-item{flex:0 0 auto;min-height:30px;padding:6px 11px;border:1px solid #e3e9f2;border-radius:999px;background:#fff;color:#526071;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 5px 14px rgba(25,38,60,.04);cursor:pointer}
.to-nav-item.is-on{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-color:transparent;box-shadow:0 4px 12px var(--ps);font-weight:800}
.to-sec{margin-bottom:18px}
.to-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.to-sec-h h2{color:#172033;font-size:16px;font-weight:800}
.to-sec-h span{color:#8a95a5;font-size:12px;font-weight:700}
.to-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:768px){.to-grid{grid-template-columns:1fr}}

/* ============================================================
   ★ 外卖券卡（MODIFIED 版 2026-09-04）
   宽屏(≥769px)双列保持原卡尺寸；窄屏(≤768px)单列下执行"缩装饰腾空间给主列·信息优先"策略：
   - ① 缩装饰(图标/按钮/padding/gap) → 主列变宽
   - ② 去掉 min-height → 卡高自适应（不空洞）
   - ③ ⚡⚡ absolute 钉死左上角 + padding-left:26px 绝对安全让位 → 永不叠字
   - ④ 字距 -0.1px（不压虚）
   - ⑤ break-word + overflow-wrap:anywhere（顿号/斜杠处自然断，不把69-25砍成6\n9-25）
   - ⑥ align-items:start（顶部对齐，卡站稳不悬空）
   - ⑦ border/box-shadow 引用 shell 的 --card-bd/--card-shadow（薄纸感）
   - T0 阶梯缩放：390/360/340 三档
   ============================================================ */
/* ---------- ★ 统一券卡（宽屏(≥421px)默认，保持原尺寸 + 渐变/高光/按钮特色不变）---------- */
.to-card{
  display:grid;min-width:0;min-height:88px;grid-template-columns:48px minmax(0,1fr) auto;
  gap:10px 14px;align-items:center;padding:14px;
  border:1px solid var(--card-bd);
  border-radius:14px;
  background:linear-gradient(135deg,#fff 0%, #fff8f0 100%);
  box-shadow: var(--card-shadow);
  transition:transform .16s ease, box-shadow .16s ease;
  cursor:pointer;position:relative;overflow:hidden;
}
/* 卡片左上角 radial 高光装饰（系统特色保留） */
.to-card::before{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle, rgba(255,106,0,.10) 0%, transparent 70%);
  pointer-events:none;
}
.to-card:active{transform:scale(.985);box-shadow:0 6px 16px rgba(255,106,0,.12)}

/* ★ 图标（保持原渐变底色/阴影结构，尺寸在窄屏下阶梯缩放）*/
.to-ico{
  display:flex;width:48px;height:48px;align-items:center;justify-content:center;
  overflow:hidden;border-radius:12px;
  background:linear-gradient(135deg, #fff3ea, #ffe0c7);
  color:var(--p);
  font-size:22px;font-weight:800;
  box-shadow:0 8px 18px var(--ps), inset 0 0 0 1px rgba(255,255,255,.9);
}
/* [图标尺寸修复 v1.0.0] 保留 img 完整显示规则 */
.to-ico img{
  display:block;width:100% !important;height:100% !important;
  max-width:100% !important;max-height:100% !important;
  object-fit:contain !important;object-position:center center !important;
  border-radius:0;margin:0;padding:0;background:transparent;
}
.to-ico span{display:none;}
.to-ico:has(img[src]):not(:has(img[src=""])) span{display:none !important;}

/* 标题（保持 1 行 nowrap ellipsis，窄屏下微缩字号） */
.to-ti{
  overflow:hidden;color:#111827;font-size:15px;font-weight:800;
  line-height:1.4;text-overflow:ellipsis;white-space:nowrap;
}

/* ★ [T4 核心] 副描述：2 行 line-clamp + padding-left 26px 让位 + ⚡⚡ 绝对钉死 + 左对齐（单重心）*/
.to-sub{
  margin-top:7px;overflow:hidden;color:#ef4444;font-size:12px;font-weight:800;
  line-height:1.32;letter-spacing:-.1px;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  -webkit-box-pack:start;text-align:left;
  white-space:normal;word-break:break-word;overflow-wrap:anywhere;
  position:relative;padding-left:26px; /* ⚡⚡ 让位 22+4 安全距 */
}
/* ⚡⚡ absolute 钉死左上角 22px 固定宽 → 永不叠字 永不跟正文换行 */
.to-sub::before{
  content:"⚡⚡";color:#f59e0b;font-weight:900;font-size:10.5px;line-height:1.32;
  position:absolute;left:0;top:1px;
  white-space:nowrap;width:22px;height:1.32em;
  display:inline-flex;align-items:center;
}

/* ★ 按钮：保持渐变底色 + ::after 光扫动效（系统特色），尺寸/对齐窄屏下阶梯调
   ★ 居中修复：display:flex 双向居中（原 line-height:1 会让文字在椭圆内偏上） */
.to-btn{
  align-self:center;justify-self:end;
  min-width:64px;min-height:34px;
  padding:9px 14px;border-radius:999px;
  background:linear-gradient(135deg, var(--p), var(--p2));
  color:#fff;font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:.2px;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  box-shadow:0 6px 16px var(--ps), inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;overflow:hidden;
}
.to-btn::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-100%);
  transition:transform .6s;pointer-events:none;
}
.to-card:active .to-btn::after{transform:translateX(100%)}

/* ★ 弹窗卡片按钮：蓝色区分（橙=跳转，蓝=弹窗查看） */
.to-card.is-popup .to-btn{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow:0 6px 16px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.to-card.is-popup.is-disabled .to-btn{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
}

/* ============================================================
   T0 窄屏单列阶梯（to-grid 已在 768px 切 1fr，这里在 768/390/360/340 四档调卡内部密度）
   ============================================================ */
/* —— 档 1：≤768px（核心档·所有手机）· 52/1fr/68 → 主列变宽 —— */
@media(max-width:768px){
  .to-card{grid-template-columns:52px minmax(0,1fr) auto;align-items:center;min-height:0;padding:12px 12px;padding-top:13px;gap:10px 12px;}
  .to-ico{width:52px;height:52px;border-radius:13px;font-size:24px;}
  .to-ti{font-size:14.5px;letter-spacing:.1px;}
  .to-sub{margin-top:7px;font-size:12px;}
  .to-btn{min-width:68px;min-height:36px;padding:9px 15px;font-size:12.5px;align-self:center;}
}
/* —— 档 2：≤390px · 46/1fr/58 —— */
@media(max-width:390px){
  .to-card{grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px 11px;padding:12px 11px;padding-top:12px;}
  .to-ico{width:46px;height:46px;border-radius:12px;font-size:22px;}
  .to-ti{font-size:14px;}
  .to-sub{font-size:11.8px;padding-left:25px;}
  .to-sub::before{font-size:10px;width:21px;}
  .to-btn{min-width:58px;min-height:34px;padding:8px 12px;font-size:12px;}
}
/* —— 档 3：≤360px（Android 窄屏核心）· 36/1fr/48 · 主列≈242px≈基准 —— */
@media(max-width:360px){
  .to-card{grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px 10px;padding:12px 12px;padding-top:13px;}
  .to-ico{width:36px;height:36px;border-radius:10px;font-size:20px;}
  .to-ti{font-size:14.5px;}
  .to-sub{margin-top:7px;font-size:11.5px;line-height:1.32;letter-spacing:-.1px;padding-left:26px;}
  .to-sub::before{font-size:10.5px;left:0;top:1px;width:22px;height:1.32em;}
  .to-btn{min-width:54px;min-height:30px;padding:6px 12px;font-size:12px;}
}
/* —— 档 4：≤340px（超窄兜底）· 34/1fr/46 —— */
@media(max-width:340px){
  .to-card{grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px 9px;padding:11px 10px;padding-top:12px;border-radius:13px;}
  .to-ico{width:34px;height:34px;border-radius:9px;font-size:19px;}
  .to-ti{font-size:13.5px;line-height:1.35;}
  .to-sub{font-size:11px;letter-spacing:-.35px;padding-left:24px;line-height:1.28;}
  .to-sub::before{font-size:9.5px;width:20px;height:1.28em;}
  .to-btn{min-width:46px;min-height:30px;padding:6px 9px;font-size:11px;}
}

/* ===== 攻略合集页 ===== */
.gd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:768px){.gd-grid{grid-template-columns:1fr}}
.gd-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.05);cursor:pointer;transition:transform .15s}
.gd-card:active{transform:scale(.985)}
.gd-cov{position:relative;aspect-ratio:16/10;overflow:hidden}
.gd-cov-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.15))}
.gd-bd{padding:10px 12px 12px}
.gd-top{margin-bottom:6px;display:flex;gap:4px;flex-wrap:wrap}
.gd-ti{font-size:14px;font-weight:700;line-height:1.4;margin:0 0 6px;color:var(--bk)}
.gd-desc{font-size:12px;color:var(--m);line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gd-ft{display:flex;justify-content:space-between;align-items:center}
.ch{display:inline-block;padding:2px 8px;background:var(--pg);color:var(--p);font-size:11px;border-radius:999px}
.ch-s{display:inline-block;padding:2px 8px;background:#f3f4f6;color:#666;font-size:11px;border-radius:999px}
.bdg{display:inline-block;padding:2px 6px;background:rgba(66,185,131,.12);color:#42b983;font-size:10px;border-radius:4px;font-weight:600}
.more{font-size:12px;color:var(--p);font-weight:600}

/* ===== 攻略子页 ===== */
.gdh{padding:18px 6px 10px}
.gdh h1{font-size:24px;line-height:1.4;margin:0 0 10px;color:var(--bk);font-weight:800}
.gdm{font-size:12px;color:var(--m);margin-bottom:8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.gds{background:#fff8e1;border-left:3px solid #f5a623;padding:8px 10px;border-radius:4px;font-size:13px;color:#7c5a11;line-height:1.55}
.gdc{margin:10px 0 18px;border-radius:14px;overflow:hidden;background:#f1f2f4;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:48px}
/* .gdx* 一组规则已删除：全仓（api_server.py / static/pages/*.html / static/js）无任何生产者，
   攻略子页正文容器现为 <article class="ip-wx-article">，其样式内联在 api_server 渲染器里。
   富文本清洗器 _RichTextSanitizer.handle_starttag 输出标签时不带任何属性，
   故用户存的内容也不可能带 class="gdx" —— 这 11 条浏览器永不命中。 */

/* 攻略正文里引用的"活动推广卡"（非外卖券，活动可以继续弹抽屉或跳活动页）*/
.gd-act{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:10px 0;background:linear-gradient(135deg,#fff3e0,#fff);border:1px solid #ffcc80;border-radius:12px;cursor:pointer;transition:transform .15s}
.gd-act:active{transform:scale(.99)}
.gd-act-img{flex:0 0 auto;width:54px;height:54px;border-radius:10px;background:#ffe3cb;display:flex;align-items:center;justify-content:center;font-size:26px}
.gd-act-bd{flex:1;min-width:0}
.gd-act-bd strong{display:block;font-size:15px;color:var(--bk);margin-bottom:3px}
.gd-act-bd span{display:block;font-size:12px;color:var(--m)}
.gd-act-go{flex:0 0 auto;color:var(--p);font-size:20px;font-weight:700}

.gd-src{margin-top:14px;padding:8px 4px;font-size:12px;color:#9ca3af;word-break:break-all}

/* ===== 活动合集 ===== */
.ac-grid{display:grid;gap:12px}
.ac-card{display:block;padding:14px;border-radius:14px;background:linear-gradient(135deg,#fff,#fff7ed);border:1px solid #fed7aa;box-shadow:0 2px 8px rgba(255,106,0,.06);cursor:pointer;transition:transform .15s}
.ac-card:active{transform:scale(.98)}
.ac-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.ac-card-ti{margin:0;font-size:16px;font-weight:800;color:var(--bk)}
.ac-card-go{flex:0 0 auto;color:var(--p);font-size:12px;font-weight:700}
.ac-card-desc{margin:0 0 8px;font-size:13px;line-height:1.55;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 活动子页（左分类+右卡片）===== */
.aw{margin:10px 0 0}
.ai{margin:0 0 10px;font-size:13px;color:#999}
.al{display:flex;gap:0;border:1px solid #e4e7ed;border-radius:14px;background:#fff}
.an{width:80px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #e4e7ed;background:#fafbfc}
.ani{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;font-size:12px;color:#666;border-left:3px solid transparent;transition:all .2s;cursor:pointer;white-space:nowrap}
.ani:hover{color:var(--p);background:#fff3ea}
.ani.is-on{color:var(--p);border-left-color:var(--p);background:#fff3ea;font-weight:600}
.ane{font-size:18px;line-height:1}
.ann{max-width:4em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.ax{flex:1;min-width:0;padding:14px}
.asec{margin-bottom:18px}
.asec-h{font-size:13px;color:#555;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed #e4e7ed}
.acl{display:flex;flex-direction:column;gap:10px}
.acd{display:flex;gap:10px;padding:12px;border:1px solid #e4e7ed;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s}
.acd:hover{border-color:var(--p);box-shadow:0 2px 8px var(--ps)}
.acd-img{width:64px;height:64px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center}
.acd-img.fb{background:linear-gradient(135deg,#e8edf2,#f0f3f7)}
.acd-img .ic{font-size:26px;opacity:.7}
.acd-bd{flex:1;min-width:0}
.acd-bd h3{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}
.acd-bd p{font-size:12px;color:#666;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:480px){.an{width:64px}.ann{font-size:11px}.ane{font-size:16px}.acd-img{width:56px;height:56px}.acd-bd h3{font-size:13px}.acd-bd p{font-size:11px}}

/* ====================================================================
   ★ 底部抽屉 Bottom Sheet（完整版交互：长内容滚动+拖拽关闭）
   保留：因为非外卖类活动（到店团购/快餐/奶茶）仍然需要先看详情
==================================================================== */
.bs-mask{
  display:none;position:fixed;inset:0;z-index:120;
  background:rgba(15,23,42,.52);
  opacity:0;transition:opacity .26s ease;
}
.bs-mask.on{display:block;opacity:1}

.bs-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:121;
  max-width:720px;margin:0 auto;
  /* 高度自适应：auto（短内容不撑）+ 最大 90vh + 最小 30vh */
  max-height:90vh;min-height:30vh;height:auto;
  background:#fff;border-radius:20px 20px 0 0;
  box-shadow:0 -18px 48px rgba(15,23,42,.28);
  display:flex;flex-direction:column;
  transform:translateY(102%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  padding-bottom:env(safe-area-inset-bottom,0);
  will-change:transform;
}
.bs-drawer.on{transform:translateY(0)}
.bs-drawer.is-dragging{transition:none !important;}

/* 顶部拖动小手柄 */
.bs-handle{
  display:flex;align-items:center;justify-content:center;
  padding:10px 0 6px;cursor:grab;flex:0 0 auto;
  min-height:32px;
}
.bs-handle::after{
  content:"";display:block;width:40px;height:5px;border-radius:999px;background:#e2e8f0;
}
.bs-handle:active{cursor:grabbing}

/* 头部：标题 + 关闭 */
.bs-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 18px 12px;border-bottom:1px solid #edf1f6;flex:0 0 auto;
}
.bs-title{
  min-width:0;color:var(--bk);font-size:17px;font-weight:900;line-height:1.35;
  display:flex;align-items:center;gap:8px;
}
.bs-title .bs-emoji{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--pg);color:var(--p);font-size:16px;flex:0 0 auto;
  box-shadow:0 4px 10px var(--ps);
}
.bs-x{
  width:32px;height:32px;flex:0 0 auto;border:0;border-radius:50%;
  background:#f1f5f9;color:#64748b;font-size:18px;cursor:pointer;
}
.bs-x:active{background:#e2e8f0}

/* meta 标签 */
.bs-meta{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;
  padding:6px 18px 0;flex:0 0 auto;
}
.bs-meta span{
  display:inline-block;padding:3px 9px;font-size:11.5px;font-weight:700;border-radius:999px;
  background:var(--pg);color:var(--p);
}
.bs-meta span.s2{background:#f3f4f6;color:#555}
.bs-meta span.s3{background:#fef3c7;color:#92400e}

/* body：可滚动 */
.bs-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:14px 18px 16px;
  -webkit-overflow-scrolling:touch;
}
.bs-body .txt{color:#334155;font-size:14.5px;line-height:1.85}
.bs-body .txt .demo-long-block{
  margin:12px 0;padding:12px;border-radius:10px;background:#fff8f0;border:1px dashed #fed7aa;color:#92400e;
  font-size:13px;line-height:1.6;
}

/* footer 吸底 */
.bs-foot{
  display:flex;gap:10px;padding:10px 18px 16px;
  border-top:1px solid #e4e7ed;background:#fafbfc;
  flex:0 0 auto;
}
.bs-svc{
  flex:0 0 auto;padding:10px 12px;border:1px solid #e4e7ed;border-radius:10px;
  background:#fff;color:#666;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;
}
.bs-cta{
  flex:1;padding:11px 14px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--p),var(--p2));
  color:#fff;font-size:14px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 8px 20px var(--ps);
  text-decoration:none;
}
.bs-cta:active{transform:scale(.99)}

/* ====================================================================
   ★ 新增 1：抽屉全屏展开态（解决长内容+图片展示区太小）
==================================================================== */
.bs-drawer.is-expanded{
  max-height:98vh;       /* 几乎全屏，只留 2vh 遮罩 */
  border-radius:14px 14px 0 0;
}
.bs-expand{
  width:32px;height:32px;flex:0 0 auto;border:0;border-radius:50%;
  background:#fff7ed;color:#c2410c;font-size:17px;cursor:pointer;
  margin-right:6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px var(--ps);
  transition:transform .18s, background .18s, color .18s;
}
.bs-expand:active{transform:scale(.93)}
.bs-drawer.is-expanded .bs-expand{
  background:#ecfdf5;color:#047857;
  box-shadow:0 2px 6px rgba(16,185,129,.18);
}

/* ====================================================================
   ★ 新增 2：内容区图片可放大（解决"一张图都看不全"）
==================================================================== */
.bs-body .txt img{
  max-width:100%;
  border-radius:10px;
  display:block;margin:0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.zoom-wrap{
  position:relative;display:block;width:100%;text-align:center;margin:14px 0;
}
.bs-body .txt .zoom-wrap img{margin:0 auto}
.zoom-wrap .zoom-tag{
  position:absolute;top:10px;right:14px;
  padding:3px 8px;background:rgba(0,0,0,.58);color:#fff;
  font-size:11px;border-radius:6px;pointer-events:none;
  display:flex;align-items:center;gap:4px;font-weight:600;
  backdrop-filter:blur(2px);
}
.zoom-wrap img.zoomable{
  cursor:zoom-in;
  transition:transform .2s,box-shadow .2s;
}
.zoom-wrap:hover img.zoomable{
  transform:scale(1.01);
  box-shadow:0 10px 28px rgba(255,106,0,.18);
  outline:2px dashed rgba(255,106,0,.45);
  outline-offset:3px;
}

/* ====================================================================
   ★ 新增 3：全屏图片查看器（Lightbox）· 点击任意图片弹出，ESC/遮罩/× 关闭
==================================================================== */
.lb-mask{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.92);
  padding:20px 16px 28px;
}
.lb-mask.on{
  display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;
}
.lb-x{
  position:fixed;top:18px;right:18px;z-index:1000;
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.32);
}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-img{
  max-width:100%;max-height:86vh;
  border-radius:10px;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.lb-cap{
  color:rgba(255,255,255,.82);font-size:12.5px;text-align:center;
  max-width:720px;line-height:1.6;
}

/* ====================================================================
   ★ CouponPicker 可复用组件样式（引用券勾选器）· z-index 1300 最高
   ==================================================================== */
.cp-mask{display:none;position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.60);opacity:0;transition:opacity .25s}
.cp-mask.on{display:block;opacity:1}
.cp-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:1301;
  max-width:720px;margin:0 auto;max-height:88vh;min-height:60vh;
  background:#fff;border-radius:20px 20px 0 0;
  box-shadow:0 -22px 60px rgba(15,23,42,.35);
  display:flex;flex-direction:column;
  transform:translateY(104%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.cp-drawer.on{transform:translateY(0)}
.cp-head{padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f6;flex:0 0 auto}
.cp-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;color:#111}
.cp-title .cp-ico{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#fff3ea,#ffe0c7);color:#ff6a00;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 10px var(--ps)}
.cp-x{width:32px;height:32px;border:0;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:20px;cursor:pointer}
.cp-bar{padding:10px 18px;background:#fafbfc;border-bottom:1px solid #eef0f3;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.cp-count{color:#666;font-size:13px;font-weight:700}
.cp-count b{color:#ff6a00;font-size:15px}
.cp-confirm{padding:8px 16px;border:0;border-radius:10px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 5px 12px rgba(22,163,74,.26)}
.cp-confirm:disabled{background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed}
.cp-body{display:flex;flex:1;min-height:0;overflow:hidden}
.cp-nav{width:92px;flex-shrink:0;border-right:1px solid #eef0f3;background:#f8fafc;overflow-y:auto}
.cp-nav-item{
  padding:12px 6px;font-size:11.5px;color:#526071;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border-left:3px solid transparent;cursor:pointer;transition:all .15s;
  text-align:center;white-space:nowrap;line-height:1.1;
}
.cp-nav-item:hover{background:#fff}
.cp-nav-item.is-on{background:#fff;border-left-color:var(--p);color:var(--p)}
.cp-nav-item.is-group{
  padding:14px 8px 8px;
  font-size:12.5px;font-weight:900;color:#111;
  border-left:0;cursor:default;background:linear-gradient(180deg,#eef2ff,#f8fafc);
  border-top:1px solid #eef0f3;
}
.cp-nav-item.is-group:first-child{border-top:0}
.cp-nav-item .cp-nav-emoji{font-size:18px;line-height:1}
.cp-list{flex:1;min-width:0;padding:14px;overflow-y:auto}
.cp-list-title{font-size:13px;font-weight:900;color:#111;margin-bottom:10px;padding:2px 4px 8px;border-bottom:1px dashed #e2e8f0;display:flex;align-items:center;gap:6px}
.cp-list-title .tag{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:900}
.cp-list-title .tag.take{background:rgba(255,106,0,.12);color:#c2410c}
.cp-list-title .tag.act{background:rgba(59,130,246,.12);color:#1d4ed8}
.cp-item{position:relative;margin-bottom:12px;border-radius:12px;overflow:hidden}
.cp-item:last-child{margin-bottom:0}
.cp-check{
  position:absolute;top:10px;right:10px;z-index:5;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid #cbd5e1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.10);transition:all .15s;
}
.cp-item.is-selected .cp-check{background:var(--p);border-color:var(--p)}
.cp-item.is-selected{transform:scale(.995);box-shadow:0 0 0 3px rgba(255,106,0,.18), 0 6px 18px rgba(255,106,0,.10)}
.cp-check::after{content:"";width:10px;height:5px;border:0 solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg);margin-top:-2px;display:none}
.cp-item.is-selected .cp-check::after{display:block}
.cp-src{
  position:absolute;top:8px;left:8px;z-index:5;
  padding:2px 7px;font-size:10px;font-weight:900;border-radius:6px;letter-spacing:.2px;
}
.cp-src.take{background:rgba(255,106,0,.92);color:#fff}
.cp-src.act{background:rgba(59,130,246,.92);color:#fff}
.add-reuse-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;
  border:1px dashed rgba(59,130,246,.45);
  font-size:12px;font-weight:800;cursor:pointer;
  transition:transform .12s;
}
.add-reuse-btn:active{transform:scale(.98)}
.add-reuse-btn.plus{background:linear-gradient(135deg,#fff3ea,#ffe0c7);color:#c2410c;border-color:rgba(255,106,0,.45)}
.add-reuse-btn.teal{background:linear-gradient(135deg,#ccfbf1,#99f6e4);color:#0f766e;border-color:rgba(20,184,166,.45)}

/* ====================================================================
   ★ 引用券删除按钮（方案 A1 · 卡片右上角半透明悬浮圆）
   - 不悬停 40% 透明不喧宾；悬停 100% + 红底 + 轻微放大
   - 防止卡片内链接/click 冒泡误跳转：含 pointer-events + stopPropagation
   ==================================================================== */
.ref-del{
  position:absolute;top:-6px;right:-6px;z-index:6;
  width:24px;height:24px;border-radius:50%;
  background:#fff;color:#94a3b8;font-size:14px;line-height:22px;text-align:center;
  border:1px solid #e2e8f0;cursor:pointer;
  opacity:.40;transition:all .15s;
  box-shadow:0 4px 14px rgba(15,23,42,.12);
  user-select:none;font-weight:800;
}
.ref-del:hover,.ref-del:active{
  opacity:1;background:linear-gradient(180deg,#f87171,#ef4444);color:#fff;border-color:#ef4444;
  transform:scale(1.08);box-shadow:0 6px 16px rgba(239,68,68,.32);
}
/* 给每个插入的引用券外层（data-cpkey）加 relative 定位，保证×能悬浮在右上角 */
[data-cpkey]{position:relative;padding-right:2px;padding-top:2px;}
/* 引用券空态 wrapper 与其它样式的过渡 */
.ref-empty{display:block;}
.ref-empty[hidden], [data-empty-state][hidden]{display:none !important;}


/* ===== 活动子页（旧 class 兼容，新样式）===== */
.takeout-activity-panel-wrap { margin: 10px 0 0; }
.takeout-activity-notice { margin: 0 0 10px; padding: 9px 11px; border: 1px solid rgba(251,146,60,.22); border-radius: 8px; background: linear-gradient(135deg, rgba(255,247,237,.96), rgba(239,246,255,.96)); color: #9a4b11; font-size: 12px; line-height: 1.55; }
.takeout-activity-layout { display:flex; gap:0; min-height:300px; border:1px solid #e4e7ed; border-radius:10px; overflow:hidden; background:#fff; }
.takeout-activity-nav { width:80px; flex-shrink:0; display:flex; flex-direction:column; border-right:1px solid #e4e7ed; background:#fafbfc; max-height:500px; overflow-y:auto; }
.takeout-activity-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; font-size:12px; color:#666; border-left:3px solid transparent; transition:all .2s; cursor:pointer; white-space:nowrap; }
.takeout-activity-nav-item:hover { color:#ff6a00; background:#fff3ea; }
.takeout-activity-nav-item.is-on { color:#ff6a00; border-left-color:#ff6a00; background:#fff3ea; font-weight:600; }
.takeout-activity-cat-emoji { font-size:18px; line-height:1; }
.takeout-activity-cat-img { width:20px; height:20px; object-fit:contain; border-radius:4px; }
.takeout-activity-cat-name { max-width:4em; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.takeout-activity-content { flex:1; min-width:0; padding:12px; max-height:500px; overflow-y:auto; }
.takeout-activity-category { margin-bottom:16px; }
.takeout-activity-category-head { font-size:12px; color:#999; margin-bottom:8px; padding-bottom:6px; border-bottom:1px dashed #e4e7ed; }
.takeout-activity-card-list { display:flex; flex-direction:column; gap:8px; }
.takeout-activity-card { display:flex; gap:10px; padding:10px; border:1px solid #e4e7ed; border-radius:8px; background:#fff; cursor:pointer; transition:all .2s; }
.takeout-activity-card:hover { border-color:#ff6a00; box-shadow:0 2px 8px rgba(255,106,0,.12); }
.takeout-activity-card-clickable { cursor:pointer; }
.takeout-activity-card-img { width:64px; height:64px; flex-shrink:0; border-radius:6px; overflow:hidden; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.takeout-activity-card-img.is-fallback { background:linear-gradient(135deg,#e8edf2,#f0f3f7); }
.takeout-activity-card-fallback { display:none; width:100%; height:100%; align-items:center; justify-content:center; }
.takeout-activity-card-img.is-fallback .takeout-activity-card-fallback { display:flex; }
.takeout-activity-card-fallback-emoji { font-size:26px; opacity:.7; line-height:1; }
.takeout-activity-card-fallback-img { width:60%; height:60%; object-fit:contain; opacity:.7; }
.takeout-activity-card-body { flex:1; min-width:0; }
.takeout-activity-card-body h3 { font-size:14px; font-weight:600; color:#333; margin-bottom:4px; }
.takeout-activity-card-body p { font-size:12px; color:#666; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.takeout-activity-panel { display:block; }
.takeout-collections { margin-bottom:16px; }

/* ===== 详情弹框（底部抽屉风格）===== */
.takeout-detail-overlay { display:none; position:fixed; inset:0; z-index:130; background:rgba(15,23,42,.52); opacity:0; transition:opacity .26s ease; }
.takeout-detail-overlay.show { display:block; opacity:1; }
.takeout-detail-dialog { position:fixed; left:0; right:0; bottom:0; z-index:131; max-width:720px; margin:0 auto; max-height:80vh; min-height:30vh; height:auto; background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -18px 48px rgba(15,23,42,.28); display:flex; flex-direction:column; transform:translateY(102%); transition:transform .3s cubic-bezier(.22,.61,.36,1); padding-bottom:env(safe-area-inset-bottom,0); will-change:transform; }
.takeout-detail-overlay.show .takeout-detail-dialog { transform:translateY(0); }
.takeout-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 12px; border-bottom:1px solid #edf1f6; flex:0 0 auto; position:relative; }
.takeout-detail-head::before { content:""; position:absolute; top:6px; left:50%; width:40px; height:5px; border-radius:999px; background:#e2e8f0; transform:translateX(-50%); }
.takeout-detail-title { min-width:0; color:#111; font-size:17px; font-weight:900; line-height:1.35; padding-top:4px; }
.takeout-detail-close { width:32px; height:32px; flex:0 0 auto; border:0; border-radius:50%; background:#f1f5f9; color:#64748b; font-size:18px; cursor:pointer; margin-top:4px; }
.takeout-detail-close:active { background:#e2e8f0; }
.takeout-detail-body { flex:1; min-height:0; overflow-y:auto; padding:14px 18px 16px; -webkit-overflow-scrolling:touch; }
.takeout-detail-body .content-text, .takeout-detail-body .txt { color:#334155; font-size:14.5px; line-height:1.85; }
.takeout-detail-body img { max-width:100%; border-radius:10px; display:block; margin:0 auto; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.takeout-detail-footer { display:flex; gap:10px; padding:10px 18px 16px; border-top:1px solid #e4e7ed; background:#fafbfc; flex:0 0 auto; align-items:center; }
.takeout-detail-service-btn { flex:0 0 auto; padding:10px 12px; border:1px solid #e4e7ed; border-radius:10px; background:#fff; color:#666; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:4px; }
.takeout-detail-service-btn:hover { border-color:#ff6a00; color:#ff6a00; }
.takeout-detail-cta-btn { flex:1; padding:11px 14px; border:0; border-radius:12px; background:linear-gradient(135deg,#ff6a00,#ff8a3d); color:#fff; font-size:14px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 8px 20px rgba(255,106,0,.22); text-decoration:none; }
.takeout-detail-cta-btn:active { transform:scale(.99); }

@media (max-width:480px){ .takeout-activity-nav{width:64px;} .takeout-activity-card-img{width:56px;height:56px;} }

/* ====================================================================
   ★ V6 新增组件样式（优惠速览 carousel / 服务网格 / 引流卡 / 分区标题）
   来源：mockup-takeout-v6.html · 2026-10-11
==================================================================== */

/* ===== SECTION HEADER（分区标题）===== */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px;
}
.section-title { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; }
.section-title svg { color: #ff6a00; }
.section-badge {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: #ff6a00; background: #fff3e8;
  padding: 3px 10px; border-radius: 10px;
}

/* ===== COUPON CAROUSEL（优惠速览）===== */
.coupon-hero { position: relative; }
.coupon-hero::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  background: linear-gradient(to right, transparent, var(--bg, #f5f5f5));
  pointer-events: none; z-index: 2;
}
.coupon-carousel {
  display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 16px 12px;
  scroll-padding: 16px;
}
.coupon-carousel::-webkit-scrollbar { display: none; }
@keyframes carouselHint {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-50px); }
}
.coupon-carousel.hint-anim {
  animation: carouselHint 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s 1;
}
/* 卡片：方案 B 左图右文布局（角标挂左上角 + 图标+信息左对齐） */
.coupon-card {
  flex: 0 0 130px; scroll-snap-align: start;
  background: var(--card-bg, #fff); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  position: relative; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
  border: 1px solid rgba(0,0,0,0.05);
  display: flex; flex-direction: column; min-height: 162px;
  will-change: transform;
}
.coupon-card:active { transform: scale(0.95); box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.coupon-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 3px; z-index: 1;
}
.coupon-card.hot::before { background: linear-gradient(90deg, #ff4444, #ff6b6b); }
.coupon-card.new::before { background: linear-gradient(90deg, #00c853, #69f0ae); }
.coupon-card.promo::before { background: linear-gradient(90deg, #ff6a00, #ffb347); }
/* 左上角挂签角标 — 真正伸出边界的标签效果 */
.coupon-corner-badge {
  position: absolute; top: -6px; left: -6px; z-index: 10;
  font-size: 9px; font-weight: 800; padding: 4px 10px 4px 8px;
  color: #fff; line-height: 1.3;
  border-radius: 0 0 8px 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  min-width: 36px;
  text-align: center;
}
.coupon-card.hot .coupon-corner-badge { background: linear-gradient(135deg, #ff4444, #ff6b6b); }
.coupon-card.new .coupon-corner-badge { background: linear-gradient(135deg, #00c853, #69f0ae); }
.coupon-card.promo .coupon-corner-badge { background: linear-gradient(135deg, #ff6a00, #ffb347); }
.coupon-corner-badge.coupon-tag-group { background: #f9f0ff !important; color: #722ed1 !important; }
/* 内容区：圆角裁剪 + overflow 限制在内部 */
.coupon-card-inner {
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; flex: 1;
}
/* 顶部区域：左图右文（图标 + 平台+金额） */
.coupon-top {
  padding: 14px 12px 8px;
  display: flex; align-items: center; gap: 8px;
}
/* 左侧：图标 */
.coupon-icon-wrap {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.coupon-icon-wrap img {
  width: 28px; height: 28px; border-radius: 7px; object-fit: cover;
  border: 1px solid rgba(0,0,0,0.06);
}
.coupon-icon-wrap .coupon-emoji {
  width: 28px; height: 28px; border-radius: 7px;
  background: #f5f5f5; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
/* 右侧：平台名称+金额 */
.coupon-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.coupon-platform-name {
  font-size: 10px; font-weight: 700; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.coupon-amount-row {
  display: flex; align-items: baseline; gap: 3px;
}
/* 金额区：方案 B 紧凑版 */
.coupon-amount-block { padding: 0 12px; min-height: 30px; }
.coupon-amount-symbol { font-size: 12px; font-weight: 800; color: #ff4444; vertical-align: top; }
.coupon-amount-value { font-size: 16px; font-weight: 900; color: #ff4444; letter-spacing: -1px; line-height: 1; }
.coupon-amount-group { font-size: 15px; font-weight: 900; color: #ff6a00; line-height: 1; }
.coupon-amount-group.is-text { font-size: 12px; line-height: 1.2; word-break: break-all; }
.coupon-amount-group small { font-size: 12px; font-weight: 800; }
.coupon-amount-group.is-text small { display: none; }
/* 单券卡文字型金额（如「叠加红包」） */
.coupon-amount-text { font-size: 12px; font-weight: 800; color: #ff4444; line-height: 1.2; word-break: break-all; }
.coupon-amount-empty { font-size: 12px; font-weight: 800; color: #fa8c16; }
/* 票根分割线 */
.coupon-perforation {
  position: relative; height: 0; margin: 0 12px;
  border-top: 1px dashed #e8e8e8;
}
.coupon-perforation::before,
.coupon-perforation::after {
  content: ''; position: absolute; top: -5px; width: 10px; height: 10px;
  background: var(--bg, #f5f5f5); border-radius: 50%;
}
.coupon-perforation::before { left: -16px; }
.coupon-perforation::after { right: -16px; }
/* 描述：填充剩余空间，单行时垂直居中 */
.coupon-desc {
  flex: 1; display: flex; align-items: center;
  padding: 6px 12px 0; margin: 0;
  overflow: hidden;
}
/* 描述文字：最多2行省略 */
.coupon-desc span {
  font-size: 12px; color: #5a6370; line-height: 1.6;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
/* 全宽按钮 */
.coupon-claim-btn {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(135deg, #ff6a00, #ff8c38);
  color: #fff; font-size: 12px; padding: 8px 0; width: calc(100% - 24px);
  border-radius: 16px; border: none; cursor: pointer; font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,106,0,0.25);
  transition: box-shadow 0.2s;
  margin: 8px 12px 12px;
}
.coupon-claim-btn:active { box-shadow: 0 1px 3px rgba(255,106,0,0.15); }
.coupon-card.hot .coupon-claim-btn { background: linear-gradient(135deg, #ff4444, #ff6b6b); box-shadow: 0 2px 8px rgba(255,68,68,0.25); }
.coupon-card.new .coupon-claim-btn { background: linear-gradient(135deg, #00c853, #69f0ae); box-shadow: 0 2px 8px rgba(0,200,83,0.25); }
.coupon-card.promo .coupon-claim-btn { background: linear-gradient(135deg, #ff6a00, #ff8c38); }
/* 合集卡虚线边框 */
.coupon-card-group { border: 1.5px dashed #fa8c16 !important; background: linear-gradient(135deg, #fff7ed, #fff); }
.coupon-card-group .coupon-claim-btn { background: linear-gradient(135deg, #fa8c16, #ffa940); }

/* ===== PLATFORM BUNDLES（平台领券包·手风琴）===== */
.bundles { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.bundle-card {
  background: var(--card-bg, #fff); border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden;
  border: 1px solid rgba(0,0,0,0.03);
  transition: box-shadow 0.2s;
}
.bundle-card.open { box-shadow: 0 4px 18px rgba(255,106,0,0.10); }
.bundle-header {
  display: flex; align-items: center; padding: 12px 14px;
  cursor: pointer; gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.bundle-header:active { background: rgba(0,0,0,0.01); }
.bundle-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; background: #f5f5f5;
}
.bundle-icon img { width: 100%; height: 100%; object-fit: cover; }
.bundle-info { flex: 1; min-width: 0; }
.bundle-name { font-size: 14px; font-weight: 600; color: #172033; }
.bundle-meta { font-size: 11px; color: #999; margin-top: 1px; }
.bundle-meta em { color: #ff4444; font-style: normal; font-weight: 600; }
.bundle-count {
  display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 11px;
  background: #fff3e8; color: #ff6a00;
  font-size: 11px; font-weight: 700; padding: 0 6px;
  flex-shrink: 0;
}
.bundle-arrow {
  color: #999; font-size: 14px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: transform 0.25s ease;
}
.bundle-card.open .bundle-arrow { transform: rotate(180deg); }
.bundle-items {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bundle-card.open .bundle-items { max-height: 4000px; }
.bundle-items-inner {
  padding: 6px 12px 12px; border-top: 1px solid #f0f0f0;
  display: flex; flex-direction: column; gap: 8px;
}
.bundle-items-inner > .acd { width: 100%; box-sizing: border-box; }
.bundle-item {
  display: flex; align-items: center; padding: 12px; gap: 10px;
  background: #fafafa; border-radius: 10px; border: 1px solid #f0f0f0;
  cursor: pointer; transition: opacity 0.15s; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.bundle-item:active { opacity: 0.6; }
.bundle-item-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover; background: #f5f5f5; flex-shrink: 0;
  overflow: hidden; border: 1px solid rgba(0,0,0,0.04);
}
.bundle-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.bundle-item-info { flex: 1; min-width: 0; }
.bundle-item-title {
  font-size: 14px; font-weight: 600; color: #172033;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bundle-item-desc {
  font-size: 12px; color: #999; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bundle-item-btn {
  display: flex; align-items: center; gap: 2px;
  background: #fff3e8; color: #ff6a00;
  font-size: 12px; padding: 8px 16px; border-radius: 18px;
  border: none; cursor: pointer; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s;
}
.bundle-item-btn:active { background: #ffe8d4; }
.bundle-item.is-disabled { opacity: 0.5; }
.bundle-item.is-disabled .bundle-item-btn { background: #f1f5f9; color: #94a3b8; }

/* ===== SERVICES GRID（更多服务）===== */
.services-grid {
  padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.service-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.service-item:active { opacity: 0.6; }
.service-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: all 0.15s;
  border: 1px solid rgba(0,0,0,0.03);
}
.service-icon.t-orange { color: #ff6a00; background: linear-gradient(135deg, #fff8f0, #fff); }
.service-icon.t-red { color: #e53935; background: linear-gradient(135deg, #fff5f5, #fff); }
.service-icon.t-blue { color: #1e88e5; background: linear-gradient(135deg, #f0f7ff, #fff); }
.service-icon.t-green { color: #00c853; background: linear-gradient(135deg, #f0fff4, #fff); }
.service-icon.t-purple { color: #7b1fa2; background: linear-gradient(135deg, #faf0ff, #fff); }
.service-icon.t-teal { color: #00897b; background: linear-gradient(135deg, #f0fff8, #fff); }
.service-icon.t-amber { color: #f57f17; background: linear-gradient(135deg, #fffdf0, #fff); }
.service-icon.t-gray { color: #546e7a; background: linear-gradient(135deg, #f5f7f8, #fff); }
.service-name {
  font-size: 11px; color: #666; text-align: center;
}

/* ===== TRAFFIC ROW（发现更多）===== */
.traffic-row { padding: 0 16px; display: flex; gap: 10px; }
.traffic-card {
  flex: 1; border-radius: 12px; padding: 16px;
  cursor: pointer; transition: transform 0.15s;
  border: 1px solid rgba(0,0,0,0.04);
  -webkit-tap-highlight-color: transparent;
}
.traffic-card:active { transform: scale(0.97); }
.traffic-card-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 8px;
}
.traffic-card-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.traffic-card-desc { font-size: 11px; color: #999; line-height: 1.4; }
.traffic-card-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; color: #ff6a00; margin-top: 8px; font-weight: 500;
}
.traffic-card-link i { font-size: 12px; transition: transform 0.2s; }
.traffic-card:active .traffic-card-link i { transform: translateX(2px); }

/* ===== V6 公开页对齐 mockup-takeout-v6.html（2026-10-11）===== */
/* 移动端适配：整页收进 420px 列 + 禁横向溢出（对齐示例 body 约束；margin 需 !important 覆盖 shell 内联 margin:0） */
body.to-v6-body{max-width:420px;margin:0 auto!important;min-height:100vh;overflow-x:hidden}
.ip-wrap.to-v6-wrap{max-width:420px;margin:0 auto;padding:0 0 48px}
.to-mini-header{background:linear-gradient(135deg,#ff6a00 0%,#ff8c38 60%,#ffb347 100%);padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}
.to-mini-header-left{display:flex;align-items:center;gap:10px;min-width:0}
.to-mini-header-logo{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.to-mini-header-text{min-width:0}
.to-mini-header-title{color:#fff;font-size:15px;font-weight:600}
.to-mini-header-sub{color:rgba(255,255,255,.7);font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.to-mini-header-notice{color:rgba(255,255,255,.5);font-size:11px;margin-top:2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.to-mini-header .shukr-fav-tab-btn.to-mini-fav{height:26px!important;padding:0 10px!important;border-radius:14px!important;background:rgba(255,255,255,.12)!important;border-color:transparent!important;color:rgba(255,255,255,.9)!important;font-size:11px!important;gap:4px!important}
.to-mini-header .shukr-fav-tab-btn.to-mini-fav svg{width:13px;height:13px}
.to-v6-wrap .to-search-wrap{margin:12px 16px 4px}
.to-v6-wrap .to-search{height:38px;border-radius:20px;border:1px solid #eee;background:#fff;padding:0 14px 0 36px;font-size:13px;box-shadow:none}
.to-v6-wrap .to-search:focus{border-color:#ff6a00;box-shadow:none}
.to-v6-wrap .to-si{left:13px;width:16px;height:16px;color:#999}
.to-v6-wrap .to-nav{margin:8px 16px 4px}
.sheet-coupon-list{display:flex;flex-direction:column;gap:8px}
.sheet-coupon-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fafafa;border-radius:10px;border:1px solid #f0f0f0;cursor:pointer;text-decoration:none;color:inherit}
.sheet-coupon-item:active{background:#f5f5f5}
.sheet-coupon-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#f5f5f5;flex-shrink:0;border:1px solid rgba(0,0,0,.04)}
.sheet-coupon-icon-emoji{display:flex;align-items:center;justify-content:center;font-size:18px}
.sheet-coupon-info{flex:1;min-width:0}
.sheet-coupon-title{font-size:13px;font-weight:600}
.sheet-coupon-desc{font-size:11px;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-coupon-go{display:flex;align-items:center;gap:2px;background:#fff3e8;color:#ff6a00;font-size:11px;padding:5px 12px;border-radius:14px;font-weight:600;flex-shrink:0}

/* 图片下方说明 .shukr-img-caption 的样式不在这里定义：该页由 api_server._page_shell 注入
   （唯一定义见 api_server.py 的 _IMG_CAPTION_CSS），此处重复定义即两套实现。 */