/* =========================================================
   掌尚婚礼季 · 共享设计系统（对齐模板粉金婚庆风）
   主色 #D6437D  香槟金 #C79A3E  墨色 #2A1622
   ========================================================= */
:root{
  --primary:#D6437D;
  --primary-light:#E15C8A;
  --primary-dark:#BC2E67;
  --primary-50:#FCECF3;
  --gold:#C79A3E;
  --gold-light:#D8B25A;
  --gold-dark:#B0842C;
  --gold-50:#FBF4E4;
  --ink:#2A1622;
  --line:#F1E7EC;
  --bg1:#FBF4F7;
  --bg2:#F4EAF0;
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
body{ font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif; color:var(--ink); background:linear-gradient(180deg,#FCF6F9,#F4EAF0); }

/* 滚动条 */
.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-thin::-webkit-scrollbar{ width:6px;height:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:#E4B9CE; border-radius:3px; }

/* 顶部 tab（商家后台 概览/我的店铺） */
.tab-btn{ padding:14px 18px; font-size:14px; font-weight:600; color:#94a3b8; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; }
.tab-btn:hover{ color:#C2416E; }
.tab-btn.tab-on{ color:var(--primary); border-bottom-color:var(--primary); }

/* 渐变 */
.grad-rose{ background:linear-gradient(135deg,#E15C8A,#BC2E67); }
.grad-rose-2{ background:linear-gradient(135deg,#D6437D,#BC2E67); }
.grad-gold{ background:linear-gradient(135deg,#D8B25A,#B0842C); }
.grad-rose-soft{ background:linear-gradient(135deg,#FCECF3,#F9D8E6); }

/* 圆角白卡 */
.card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 28px -16px rgba(214,67,125,.22); }
.card-pad{ padding:20px; }

/* KPI 数据卡 */
.kpi{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 10px 28px -18px rgba(0,0,0,.16); transition:.2s; }
.kpi:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -18px rgba(214,67,125,.3); }
.kpi-ico{ width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px; box-shadow:0 8px 16px -8px rgba(214,67,125,.6); }
.kpi-num{ font-size:27px;font-weight:800;line-height:1.1;color:#111827; }
.badge-up{ background:#ECFDF3;color:#067647;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px; }
.badge-down{ background:#FEF2F2;color:#B42318;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px; }

/* 区块标题（编号徽章 + 标题 + 更多） */
.sec{ display:flex;align-items:center;gap:11px; }
.sec-num{ width:36px;height:36px;border-radius:13px;background:linear-gradient(135deg,#E15C8A,#BC2E67);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 8px 16px -8px rgba(214,67,125,.6); }
.sec-h{ font-size:21px;font-weight:800;color:#111827; }
.sec-sub{ font-size:12.5px;color:#94a3b8; }

/* 顶栏标签胶囊 */
.tag{ font-size:12px;font-weight:600;color:#64748b;background:#fff;border-radius:999px;padding:6px 12px;box-shadow:0 4px 10px -8px rgba(0,0,0,.2); display:inline-flex;align-items:center;gap:6px; }

/* 筛选胶囊 */
.chip{ font-size:12.5px;font-weight:600;border-radius:999px;padding:8px 15px;border:1px solid var(--line);background:#fff;color:#64748b;cursor:pointer;transition:.15s;white-space:nowrap; }
.chip:hover{ border-color:var(--primary-light); color:var(--primary); }
.chip-on{ background:linear-gradient(90deg,#D6437D,#BC2E67);color:#fff;border-color:transparent;box-shadow:0 8px 16px -8px rgba(214,67,125,.6); }

/* 按钮 */
.btn-primary{ background:linear-gradient(90deg,#D6437D,#BC2E67);color:#fff;font-weight:700;border-radius:999px;padding:12px 22px;box-shadow:0 12px 24px -10px rgba(214,67,125,.6); border:none; cursor:pointer; transition:.15s; }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line);background:#fff;color:#475569;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer; transition:.15s; }
.btn-ghost:hover{ border-color:var(--primary-light); color:var(--primary); }
.btn-gold{ background:linear-gradient(90deg,#D8B25A,#B0842C);color:#fff;font-weight:700;border-radius:999px;padding:12px 22px;box-shadow:0 12px 24px -10px rgba(184,132,44,.6); border:none; cursor:pointer; }

/* =========================================================
   推荐套餐卡（C 端详情页，2026-09-17 精致化重做）
   ⚠️ 此处**刻意不用** .btn-primary：它在 @media(max-width:767px) 被强制
      min-height:44px，再配上 w-full 就变成一整条实心玫红大块（就是"太蠢"的根因）。
   设计口径：整张卡本身已可点（.pkg-card 挂 onclick），底部按钮只是"指路"，
      所以做成**右对齐的轻量药丸**，不再抢主体视觉；点击靠卡片冒泡，不单独绑事件。
   ========================================================= */
.pkg-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 14px; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.pkg-card:hover{ border-color:#F2C9DC; box-shadow:0 12px 26px -20px rgba(214,67,125,.6); }
.pkg-card:active{ transform:scale(.995); }
.pkg-foot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.pkg-go{ display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:999px; line-height:1;
  background:var(--primary-50); color:var(--primary-dark); border:1px solid #F2D3E1;
  font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:.18s; }
.pkg-go i{ font-size:9.5px; }
.pkg-go:hover{ background:#F9D8E6; border-color:#E8AFCA; }
.pkg-go:active{ transform:scale(.96); }
.pkg-go-line{ background:#fff; color:#64748b; border-color:var(--line); }
.pkg-go-line i{ font-size:11px; }
.pkg-go-line:hover{ background:#FCF6F9; color:var(--primary-dark); border-color:#F2D3E1; }
/* 价格数字等宽对齐，避免不同套餐位数不同导致右边缘参差 */
.pkg-price{ font-variant-numeric:tabular-nums; }

/* 场地卡 */
.venue-card{ background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px -18px rgba(0,0,0,.22);transition:.22s; }
.venue-card:hover{ transform:translateY(-4px);box-shadow:0 22px 44px -18px rgba(214,67,125,.34); }
.venue-cover{ height:158px;position:relative;flex:0 0 auto; }
/* 卡片等高（2026-09-17）：正文撑满 + 价格行贴底 → 横滑行内所有卡片同尺寸。
   ⚠️ .venue-cover 必须 flex:0 0 auto，否则在纵向 flex 里会被压扁（封面高度不再固定）。 */
.venue-card{ display:flex;flex-direction:column; }
.venue-body{ flex:1 1 auto;display:flex;flex-direction:column; }
.venue-price{ margin-top:auto;padding-top:12px; }
#homeRecList .venue-card{ height:auto; }
#homeRecList .venue-title{ min-height:45px; }   /* 预留两行，1 行标题不再把下方内容顶高 */
.venue-cover .deco{ position:absolute;border-radius:999px;background:rgba(255,255,255,.16); }
.rating-pill{ position:absolute;top:11px;right:11px;background:rgba(0,0,0,.42);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800; backdrop-filter:blur(4px); }
.area-pill{ position:absolute;top:11px;left:11px;background:rgba(0,0,0,.32);color:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600; backdrop-filter:blur(4px); }
.tiny-tag{ font-size:11px;font-weight:600;color:var(--primary-dark);background:var(--primary-50);border-radius:999px;padding:3px 9px; }

/* 状态徽章（客资） */
.st{ font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 11px; }
.st-wait{ background:#FFF7ED;color:#C2410C; }
.st-contact{ background:#EFF6FF;color:#1D4ED8; }
.st-deal{ background:#ECFDF3;color:#067647; }
.st-lose{ background:#F1F5F9;color:#64748b; }

/* 顶栏品牌条 */
.brandbar{ background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40; }
.logo{ width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#E15C8A,#BC2E67);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 10px 22px -10px rgba(214,67,125,.6); }

/* 侧边栏 */
.side{ background:#fff;border-right:1px solid var(--line); }
.side-item{ display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;color:#64748b;font-weight:600;cursor:pointer;transition:.15s; margin:4px 10px; font-size:14.5px; }
.side-item i{ width:20px;text-align:center; }
.side-item:hover{ background:var(--bg1);color:var(--primary); }
.side-on{ background:linear-gradient(135deg,#FCECF3,#F9D8E6);color:var(--primary-dark);font-weight:800; }

/* 底部手机导航 */
.bottom-nav{ position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;z-index:50;box-shadow:0 -8px 24px -16px rgba(0,0,0,.3); }
.nav-btn{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;color:#94a3b8;font-size:11px;font-weight:600;cursor:pointer; }
.nav-on{ color:var(--primary); }

/* 容器 */
.wrap480{ max-width:480px;margin:0 auto; }
.wrap1400{ max-width:1400px;margin:0 auto; }

/* 表单 */
.fld{ width:100%;border:1px solid var(--line);border-radius:13px;padding:12px 14px;font-size:14px;color:#334155;background:#fff; outline:none; transition:.15s; }
.fld:focus{ border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(225,92,138,.15); }

/* 弹层 */
.modal-mask{ position:fixed;inset:0;background:rgba(42,22,34,.5);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;z-index:60; }
.modal-mask.show{ display:flex; }
.modal{ background:#fff;width:100%;max-width:480px;border-radius:24px 24px 0 0;max-height:92vh;overflow-y:auto;animation:up .25s ease; }
@keyframes up{ from{ transform:translateY(30px);opacity:.6 } to{ transform:translateY(0);opacity:1 } }

/* 表格（B端/总后台） */
.tbl{ width:100%;border-collapse:separate;border-spacing:0; }
.tbl th{ text-align:left;font-size:12px;color:#94a3b8;font-weight:700;padding:12px 14px;background:#FBF4F7; border-bottom:1px solid var(--line); }
.tbl td{ padding:13px 14px;font-size:13.5px;color:#334155;border-bottom:1px solid #F7EEF3; }
.tbl tbody tr:hover{ background:#FCF6F9; }

/* 进度条 */
.bar{ height:9px;border-radius:999px;background:#F1E7EC;overflow:hidden; }
.bar > i{ display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#E15C8A,#BC2E67); }

/* 空状态 */
.empty{ text-align:center;color:#94a3b8;padding:40px 0;font-size:13.5px; }

/* 装饰圆点（hero用） */
.hero-deco{ position:absolute;border-radius:999px;background:rgba(255,255,255,.12); pointer-events:none; }

/* =========================================================
   可折叠面板（商家后台「店铺展示」等长表单分区）
   .acc > .acc-head（可点标题）+ .acc-body（内容）
   展开态由 .acc-on 控制；箭头 .acc-arrow 旋转 90°
   ========================================================= */
.acc{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 28px -16px rgba(214,67,125,.22); overflow:hidden; }
.acc + .acc{ margin-top:14px; }
.acc-head{ display:flex; align-items:center; gap:11px; width:100%; padding:15px 18px; background:none; border:none; cursor:pointer; text-align:left; transition:.15s; }
.acc-head:hover{ background:#FCF6F9; }
.acc-ico{ width:32px; height:32px; flex:0 0 32px; border-radius:11px; background:linear-gradient(135deg,#FCECF3,#F9D8E6); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-size:14px; }
.acc-title{ flex:1; min-width:0; }
.acc-name{ display:block; font-size:15px; font-weight:800; color:#111827; line-height:1.3; }
.acc-sub{ display:block; font-size:12px; color:#94a3b8; margin-top:1px; }
.acc-arrow{ flex:0 0 auto; color:#C08AA5; font-size:13px; transition:transform .2s ease; }
.acc-on > .acc-head .acc-arrow{ transform:rotate(90deg); }
.acc-body{ display:none; padding:2px 18px 18px; border-top:1px solid #F7EEF3; }
.acc-on > .acc-body{ display:block; }
/* 无 JS 兜底：JS 未执行时全部可见 */
html.no-js .acc-body{ display:block; }

/* 字段标签（所有输入项上方的中文说明） */
.lab{ display:block; font-size:12px; font-weight:700; color:#64748b; margin:0 0 6px 2px; }
.lab .lab-req{ color:var(--primary); margin-left:2px; }
.lab .lab-hint{ font-weight:500; color:#A8B0BD; margin-left:5px; font-size:11.5px; }

/* 折叠区内的字段网格：桌面多列，移动单列 */
.acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acc-grid .span-2{ grid-column:1 / -1; }

/* 触达尺寸：上传/操作类按钮 ≥44px（移动端手指友好） */
.btn-touch{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }

@media (max-width:767px){
  .acc-grid{ grid-template-columns:1fr; }
  .acc-grid .span-2{ grid-column:auto; }
  .card-pad{ padding:15px; }
  .acc-head{ padding:14px 15px; }
  .acc-body{ padding:2px 15px 15px; }
  /* 名称 + 前缀 flex 行在窄屏允许换行，避免挤压 */
  .row-wrap{ flex-wrap:wrap; }
  /* 表单按钮在手机上可整行点按 */
  .btn-primary, .btn-ghost, .btn-gold{ min-height:44px; }
  .btn-block-m{ width:100%; }
}