/* =========================================================
   小宴席 · 生日宴体系   通用样式
   ========================================================= */
:root {
  --pink-50:#FDF4F7; --pink-100:#F9E6EC; --pink-200:#EFC0D0;
  --pink-400:#D4879F; --pink-600:#B85C7C; --pink-800:#7A3450;
  --ink-900:#1F1B1D; --ink-700:#4A4247; --ink-500:#7C7278; --ink-300:#B5AEB2;
  --line:#EDE7EA; --line-2:#E0D8DC;
  --bg:#FBF9FA; --card:#FFFFFF;
  --ok:#1D9E75; --ok-bg:#E1F5EE;
  --warn:#BA7517; --warn-bg:#FAEEDA;
  --danger:#D14343; --danger-bg:#FCEBEB;
  --info:#3A6EA5; --info-bg:#E9F1F9;
  --purple:#6B5CA5; --purple-bg:#EFEDF8;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;
  --shadow:0 1px 3px rgba(31,27,29,.06);
  --shadow-lg:0 6px 24px rgba(31,27,29,.10);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink-900);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { margin:0; font-weight:600; }
p { margin:0; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:inherit; font-size:15px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ---------- 布局 ---------- */
.mobile { max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg); position:relative; }
.desk { max-width:1240px; margin:0 auto; padding:0 20px; }
.pad { padding:16px; }
.pb-safe { padding-bottom:92px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.topbar-in { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.topbar h1 { font-size:16px; }
.topbar .sub { font-size:12px; color:var(--ink-500); margin-top:1px; }

/* ---------- 卡片 ---------- */
.card {
  background:var(--card); border-radius:var(--r-l); border:1px solid var(--line);
  padding:16px; margin-bottom:12px;
}
.card.tight { padding:12px 14px; }
.card.flat { border:none; box-shadow:none; }

/* ---------- 章节标题 ---------- */
.sec { margin:22px 0 10px; display:flex; align-items:baseline; gap:8px; }
.sec h2 { font-size:16px; }
.sec .n {
  width:20px; height:20px; border-radius:50%; background:var(--pink-600); color:#fff;
  font-size:11px; display:flex; align-items:center; justify-content:center; flex:none;
  font-weight:600;
}
.sec .hint { font-size:12px; color:var(--ink-500); margin-left:auto; }

/* ---------- 表单 ---------- */
.field { margin-bottom:14px; }
.field > label { display:block; font-size:13px; color:var(--ink-700); margin-bottom:6px; font-weight:500; }
.field .req { color:var(--danger); margin-left:2px; }
.inp, select.inp, textarea.inp {
  width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:#fff; color:var(--ink-900); outline:none; transition:border-color .15s;
}
.inp:focus { border-color:var(--pink-400); }
textarea.inp { min-height:84px; resize:vertical; line-height:1.6; }
select.inp { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C7278' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.err { color:var(--danger); font-size:12px; margin-top:5px; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border-radius:var(--r-s); font-size:15px; font-weight:500;
  background:#fff; border:1px solid var(--line-2); color:var(--ink-900); transition:all .15s;
}
.btn:hover { border-color:var(--ink-300); }
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--pink-600); border-color:var(--pink-600); color:#fff; }
.btn-primary:hover { background:var(--pink-800); border-color:var(--pink-800); }
.btn-dark { background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.btn-ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-sm { padding:7px 12px; font-size:13px; }
.btn-xs { padding:5px 10px; font-size:12px; }
.btn-danger { background:#e5484d; border-color:#e5484d; color:#fff; }
.btn-danger:hover { background:#c93b40; border-color:#c93b40; }
.btn-danger:disabled { background:#e9a3a5; border-color:#e9a3a5; }
.btn-block { display:flex; width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--ink-500); }

/* ---------- 徽标 ---------- */
.tag {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:500; background:var(--pink-100); color:var(--pink-800);
}
.tag-line { background:transparent; border:1px solid var(--line-2); color:var(--ink-500); }
.tag-std { background:var(--pink-100); border:1px solid var(--pink-200); color:var(--pink-800); }
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px; font-size:12px; font-weight:500; }
.b-amber { background:var(--warn-bg); color:var(--warn); }
.b-blue  { background:var(--info-bg); color:var(--info); }
.b-purple{ background:var(--purple-bg); color:var(--purple); }
.b-teal  { background:var(--ok-bg); color:var(--ok); }
.b-green { background:#EAF3DE; color:#3B6D11; }
.b-gray  { background:#F1EFE8; color:#5F5E5A; }
.b-red   { background:var(--danger-bg); color:var(--danger); }

/* ---------- 场景卡 ---------- */
.scene-grid { display:grid; gap:12px; }
.scene {
  border:1.5px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  background:#fff; cursor:pointer; transition:all .18s;
}
.scene:hover { border-color:var(--pink-200); }
.scene.on { border-color:var(--pink-600); }
.scene-vis { height:128px; position:relative; display:flex; background-size:cover; background-position:center; overflow:hidden; background-color:#efeae2; }
.scene-vis i { flex:1; display:block; }
.scene-vis.has-cover { background-color:#ddd; }
.scene-vis-grad { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.32)); }
.scene-vis .chk {
  position:absolute; top:9px; right:9px; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s; z-index:2;
}
.scene.on .scene-vis .chk { opacity:1; }
.scene-body { padding:12px 14px; }
.scene-body h3 { font-size:15px; display:flex; align-items:center; gap:8px; }
.scene-body .tl { font-size:12px; color:var(--pink-600); margin-top:2px; }
.scene-body .ds { font-size:12.5px; color:var(--ink-500); margin-top:7px; line-height:1.55; }
.scene-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }

/* ---------- 档位卡 ---------- */
.tier {
  border:1.5px solid var(--line); border-radius:var(--r-m); padding:13px 14px;
  cursor:pointer; background:#fff; transition:all .18s; margin-bottom:10px; position:relative;
}
.tier:hover { border-color:var(--pink-200); }
.tier.on { border-color:var(--pink-600); background:var(--pink-50); }
.tier-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tier-hd h4 { font-size:15px; display:flex; align-items:center; gap:7px; }
.tier-price { font-size:17px; font-weight:600; color:var(--pink-800); white-space:nowrap; }
.tier ul { margin:9px 0 0; padding-left:0; list-style:none; }
.tier li {
  font-size:12.5px; color:var(--ink-700); padding-left:15px; position:relative; margin-bottom:3px; line-height:1.5;
}
.tier li:before {
  content:''; position:absolute; left:3px; top:8px; width:4px; height:4px;
  border-radius:50%; background:var(--pink-200);
}

/* ---------- 勾选行 ---------- */
.opt {
  display:flex; align-items:flex-start; gap:11px; padding:12px 13px; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-m); margin-bottom:8px;
  cursor:pointer; transition:all .16s;
}
.opt:hover { border-color:var(--pink-200); }
.opt.on { border-color:var(--pink-600); background:var(--pink-50); }
.opt.std { background:var(--pink-50); border-color:var(--pink-200); border-style:dashed; }
.opt.std.on { border-color:var(--pink-400); }
.cb {
  width:19px; height:19px; border:1.5px solid var(--line-2); border-radius:5px; flex:none;
  margin-top:1px; display:flex; align-items:center; justify-content:center; background:#fff; transition:all .16s;
}
.opt.on .cb { background:var(--pink-600); border-color:var(--pink-600); }
.cb svg { opacity:0; }
.opt.on .cb svg { opacity:1; }
.opt-main { flex:1; min-width:0; }
.opt-main .t { font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opt-main .d { font-size:12px; color:var(--ink-500); margin-top:2px; line-height:1.5; }
.opt-price { font-size:14px; font-weight:600; color:var(--pink-800); white-space:nowrap; margin-left:auto; }
.opt-price.free { color:var(--ok); font-weight:500; font-size:12.5px; }

/* ---------- 数量步进 ---------- */
.stepper { display:flex; align-items:center; gap:9px; }
.stepper button {
  width:27px; height:27px; border-radius:7px; border:1px solid var(--line-2);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-700);
}
.stepper button:disabled { opacity:.35; }
.stepper .v { min-width:20px; text-align:center; font-size:14px; font-weight:500; }

/* ---------- 底部结算条 ---------- */
.bar {
  position:fixed; bottom:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:11px 16px 14px;
}
.bar-in { max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.bar .sum { flex:1; min-width:0; }
.bar .sum .lb { font-size:11px; color:var(--ink-500); }
.bar .sum .vl { font-size:21px; font-weight:600; color:var(--pink-800); line-height:1.2; }
.bar .sum .dt { font-size:11px; color:var(--ink-500); }

/* ---------- 明细 ---------- */
.lines { font-size:13.5px; }
.line { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); }
.line:last-child { border-bottom:none; }
.line .nm { color:var(--ink-700); flex:1; min-width:0; }
.line .nm small { color:var(--ink-300); margin-left:5px; }
.line .am { font-weight:500; white-space:nowrap; }
.line-total {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:11px; margin-top:7px; border-top:1.5px solid var(--ink-900);
}
.line-total .am { font-size:20px; font-weight:600; color:var(--pink-800); }

/* ---------- 弹层 ---------- */
.mask {
  position:fixed; inset:0; background:rgba(31,27,29,.42); z-index:200;
  display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .22s;
}
.mask.show { opacity:1; pointer-events:auto; }
.sheet {
  background:#fff; width:100%; max-width:480px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:20px 18px 26px; max-height:88vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.mask.show .sheet { transform:translateY(0); }
.sheet-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-hd h3 { font-size:17px; }
.modal-center { align-items:center; padding:20px; }
.modal-center .sheet {
  border-radius:var(--r-l); max-width:560px; transform:scale(.96); opacity:0; padding:22px;
}
.mask.show .modal-center-in { transform:scale(1); opacity:1; }

/* ---------- 空状态 ---------- */
.empty { text-align:center; padding:52px 20px; color:var(--ink-300); }
.empty .ic { font-size:34px; margin-bottom:10px; opacity:.5; }
.empty p { font-size:13.5px; }

/* ---------- 提示 ---------- */
.xy-toast {
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,14px);
  background:rgba(31,27,29,.93); color:#fff; padding:11px 20px; border-radius:24px;
  font-size:13.5px; z-index:999; opacity:0; pointer-events:none; transition:all .24s;
  max-width:86%; text-align:center; line-height:1.5;
}
.xy-toast.show { opacity:1; transform:translate(-50%,0); }
.xy-toast.err { background:#B03A3A; }
.xy-toast.ok { background:#177A5B; }

/* ---------- 提示条 ---------- */
.note { padding:11px 13px; border-radius:var(--r-s); font-size:12.5px; line-height:1.6; }
.note-warn { background:var(--warn-bg); color:#7A4C0A; }
.note-info { background:var(--info-bg); color:#204A73; }
.note-ok { background:var(--ok-bg); color:#0B5842; }
.note-danger { background:var(--danger-bg); color:#8E2626; }
.tip { margin-top:7px; padding-left:8px; border-left:2px solid var(--line-2); font-size:11.5px; line-height:1.55; color:var(--ink-500); }
.tip b { color:var(--ink-700); font-weight:600; }

/* ---- 素材（图片/视频）展示 ---- */
.scene-vis .vis-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.opt-media { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.om-thumb { width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid var(--line); cursor:pointer; background:#f3f3f3; display:block; }
.tier-vis { width:46px; height:46px; border-radius:8px; object-fit:cover; margin-left:auto; border:1px solid var(--line); background:#f3f3f3; flex:none; }
.media-head { font-size:12px; color:var(--ink-500); margin:16px 0 2px; }
.media-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.media-row .mb { width:74px; height:74px; border-radius:10px; object-fit:cover; border:1px solid var(--line); background:#f3f3f3; cursor:pointer; display:block; }
.media-row .mb.video { position:relative; }
.media-row .mb.video::after { content:'▶'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.lightbox img, .lightbox video { max-width:100%; max-height:86vh; border-radius:10px; }
.lightbox .lb-close { position:fixed; top:18px; right:20px; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.mm-x { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; font-size:12px; line-height:18px; text-align:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.bare-prev { width:120px; height:80px; border-radius:8px; object-fit:cover; border:1px solid var(--line); background:#f3f3f3; cursor:pointer; display:block; }
.std-tbl td, .std-tbl th { text-align:center; }
.std-tbl td:first-child, .std-tbl th:first-child { text-align:left; }
.std-tbl input[type=checkbox] { width:16px; height:16px; accent-color:var(--pink-600); }
.fold-caret { display:inline-block; width:14px; color:var(--ink-400); font-size:12px; transition:transform .15s; }

/* ---------- 步骤指示 ---------- */
.steps { display:flex; align-items:center; gap:0; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); }
.steps .s { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-300); }
.steps .s .d {
  width:19px; height:19px; border-radius:50%; background:var(--line); color:var(--ink-500);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600;
}
.steps .s.on { color:var(--pink-800); font-weight:500; }
.steps .s.on .d { background:var(--pink-600); color:#fff; }
.steps .s.ok .d { background:var(--ok); color:#fff; }
.steps .ln { flex:1; height:1px; background:var(--line); margin:0 7px; }

/* ---------- 进度条 ---------- */
.pbar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.pbar i { display:block; height:100%; background:var(--ok); border-radius:3px; transition:width .3s; }

/* ---------- 星级 ---------- */
.stars { display:flex; gap:5px; }
.star { width:31px; height:31px; cursor:pointer; transition:transform .12s; }
.star:active { transform:scale(.86); }

/* ---------- 表格 ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th {
  text-align:left; padding:9px 11px; background:#F7F4F5; color:var(--ink-700);
  font-weight:500; font-size:12.5px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td { padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:hover td { background:#FCFAFB; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- 媒体缩略 ---------- */
.thumbs { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.thumb {
  width:62px; height:62px; border-radius:var(--r-s); overflow:hidden; position:relative;
  border:1px solid var(--line); background:#F5F2F3; flex:none; cursor:pointer;
}
.thumb:hover { border-color:var(--pink-600); }
.thumb img,.thumb video { width:100%; height:100%; object-fit:cover; }
.thumb .del {
  position:absolute; top:2px; right:2px; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--danger); color:#fff; font-size:11px; line-height:1; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.thumb-dl { position:absolute; right:2px; bottom:2px; width:17px; height:17px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; line-height:17px; text-align:center;
  cursor:pointer; text-decoration:none; }
.link { color:var(--pink-600); text-decoration:underline dashed; text-underline-offset:5px; text-decoration-thickness:1px; cursor:pointer; }
.link:hover { color:var(--pink-800); text-decoration:underline; text-underline-offset:5px; }
.thumb:hover .thumb-dl { background:rgba(0,0,0,.85); }
.thumb.big { width:96px; height:96px; cursor:pointer; }
.thumb-add {
  width:62px; height:62px; border-radius:var(--r-s); border:1.5px dashed var(--line-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ink-300); font-size:10px; gap:2px; flex:none; background:#fff; cursor:pointer;
}
.thumb-add.need { border-color:var(--warn); color:var(--warn); background:var(--warn-bg); }

/* ---------- 工单项 ---------- */
.task { background:#fff; border:1px solid var(--line); border-radius:var(--r-m); margin-bottom:10px; overflow:hidden; }
.task.done { background:#FAFCFA; border-color:#D9E8DC; }
.task-hd { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; cursor:pointer; }
.task-hd .tk {
  width:21px; height:21px; border-radius:6px; border:1.5px solid var(--line-2); flex:none;
  display:flex; align-items:center; justify-content:center; margin-top:1px; background:#fff;
}
.task.done .task-hd .tk { background:var(--ok); border-color:var(--ok); }
.task-hd .ti { flex:1; min-width:0; }
.task-hd .ti .t1 { font-size:14.5px; font-weight:500; }
.task.done .task-hd .ti .t1 { color:var(--ink-500); text-decoration:line-through; }
.task-hd .ti .t2 { font-size:11.5px; color:var(--ink-500); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }
.task-bd { padding:0 14px 14px; border-top:1px solid var(--line); padding-top:12px; }
.task-bd h5 { font-size:12px; color:var(--ink-500); font-weight:500; margin-bottom:5px; }
.task-bd ol,.task-bd ul { margin:0 0 12px; padding-left:17px; font-size:13px; color:var(--ink-700); line-height:1.65; }
.task-bd li { margin-bottom:3px; }
.chk-list { list-style:none; padding-left:0 !important; }
.chk-list li { padding-left:19px; position:relative; }
.chk-list li:before {
  content:''; position:absolute; left:2px; top:7px; width:9px; height:5px;
  border-left:1.5px solid var(--ok); border-bottom:1.5px solid var(--ok); transform:rotate(-45deg);
}

/* ---------- 时间线 ---------- */
.tl-item { display:flex; gap:11px; padding-bottom:15px; position:relative; }
.tl-item:before {
  content:''; position:absolute; left:4px; top:14px; bottom:0; width:1px; background:var(--line);
}
.tl-item:last-child:before { display:none; }
.tl-dot { width:9px; height:9px; border-radius:50%; background:var(--pink-200); flex:none; margin-top:5px; z-index:1; }
.tl-item:first-child .tl-dot { background:var(--pink-600); }
.tl-bd { flex:1; min-width:0; }
.tl-bd .t { font-size:13.5px; }
.tl-bd .m { font-size:11.5px; color:var(--ink-300); margin-top:1px; }

/* ---------- 指标卡 ---------- */
.mgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; }
.mcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:14px 15px; }
.mcard .lb { font-size:12px; color:var(--ink-500); }
.mcard .vl { font-size:25px; font-weight:600; margin-top:3px; line-height:1.15; }
.mcard .dt { font-size:11.5px; color:var(--ink-300); margin-top:3px; }
.mcard.risk { border-color:#F0D0D0; background:#FEF8F8; }
.mcard.risk .vl { color:var(--danger); }

/* ---------- 侧栏 ---------- */
.layout { display:grid; grid-template-columns:212px 1fr; gap:22px; align-items:start; }
/* 订单详情用：两等列（避免被 .layout 的 212px 1fr 误用成侧边栏布局） */
.layout-2col { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.side { position:sticky; top:74px; }
.side-nav { background:#fff; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.side-nav a {
  display:flex; align-items:center; gap:9px; padding:11px 14px; font-size:14px;
  color:var(--ink-700); border-bottom:1px solid var(--line); cursor:pointer;
}
.side-nav a:last-child { border-bottom:none; }
.side-nav a:hover { background:#FBF8F9; }
.side-nav a.on { background:var(--pink-50); color:var(--pink-800); font-weight:500; }

/* ---------- 分段控件 ---------- */
.segs,.seg { display:flex; gap:6px; background:#F2EFF0; padding:3px; border-radius:9px; }
.segs button,.seg-btn {
  flex:1; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--ink-500); white-space:nowrap;
  border:0; background:transparent; cursor:pointer;
}
.segs button.on,.seg-btn.on { background:#fff; color:var(--ink-900); font-weight:500; box-shadow:var(--shadow); }

/* ---------- 工具类 ---------- */
.flex { display:flex; }
.between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.center { display:flex; align-items:center; gap:8px; }
.gap6 { gap:6px; } .gap10 { gap:10px; }
.wrap { flex-wrap:wrap; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb0{margin-bottom:0}.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.f11{font-size:11px}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}
.muted{color:var(--ink-500)}.dim{color:var(--ink-300)}
.b5{font-weight:500}.b6{font-weight:600}
.right{text-align:right}.tcenter{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none !important}
.pink{color:var(--pink-800)}.ok{color:var(--ok)}.danger{color:var(--danger)}.warn{color:var(--warn)}
.divider{height:1px;background:var(--line);margin:14px 0}

@media (max-width:880px){
  .layout{grid-template-columns:1fr}
  .layout-2col{grid-template-columns:1fr}
  .side{position:static}
  .side-nav{display:flex;overflow-x:auto}
  .side-nav a{border-bottom:none;border-right:1px solid var(--line);white-space:nowrap}
}

/* ---------- 档位卡缩略图（与价格同处表头右侧，改为文档流避免重叠） ---------- */
.tier-vis {
  width:46px; height:46px; border-radius:8px; object-fit:cover;
  margin-left:auto; border:1px solid var(--line); background:#f3f3f3; flex:none; cursor:pointer;
}
.tier.on .tier-vis { border-color:var(--pink-300); }

/* ---------- 流程项缩略图 ---------- */
.opt-media { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.om-thumb {
  width:58px; height:58px; border-radius:9px; object-fit:cover; border:1px solid var(--line);
  cursor:pointer; background:#f3f3f3; display:block; transition:transform .15s, box-shadow .15s;
}
.om-thumb:hover { transform:scale(1.06); box-shadow:0 3px 10px rgba(0,0,0,.18); }

/* ---------- 顶部大轮播 ---------- */
.carousel {
  position:relative; border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 6px 20px rgba(0,0,0,.13); margin-top:10px;
}
.carousel-track { position:relative; }
.carousel .slide { display:none; }
.carousel .slide.on { display:block; }
.carousel .slide img, .carousel .slide video { width:100%; height:208px; object-fit:cover; display:block; }
.carousel .slide-cap {
  position:absolute; left:11px; bottom:11px; color:#fff; font-size:12px;
  background:rgba(0,0,0,.45); padding:3px 9px; border-radius:20px; backdrop-filter:blur(4px);
}
.car-btn {
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border-radius:50%; border:none; background:rgba(255,255,255,.88); color:#222;
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28); transition:background .15s;
}
.car-btn:hover { background:#fff; }
.car-prev { left:9px; } .car-next { right:9px; }
.car-dots { position:absolute; left:0; right:0; bottom:9px; display:flex; gap:6px; justify-content:center; }
.car-dots i {
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s;
}
.car-dots i.on { background:#fff; width:18px; border-radius:4px; }

/* ---------- 升级灯箱 ---------- */
.lightbox { flex-direction:column; padding:18px; background:rgba(0,0,0,.92); }
.lightbox img, .lightbox video { max-width:100%; max-height:76vh; border-radius:12px; display:block; }
.lb-close {
  position:fixed; top:15px; right:17px; color:#fff; font-size:30px; line-height:1;
  cursor:pointer; z-index:5; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.lb-nav {
  position:fixed; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:#222; font-size:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.32); z-index:5;
}
.lb-prev { left:13px; } .lb-next { right:13px; }
.lb-count {
  position:fixed; top:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px;
  background:rgba(0,0,0,.45); padding:4px 13px; border-radius:20px; z-index:5;
}
.lb-thumbs {
  position:fixed; bottom:15px; left:0; right:0; display:flex; gap:8px; justify-content:center;
  flex-wrap:wrap; padding:0 16px; z-index:5;
}
.lb-thumbs span {
  width:48px; height:48px; border-radius:9px; overflow:hidden; border:2px solid transparent;
  cursor:pointer; opacity:.55; transition:all .15s;
}
.lb-thumbs span.on { border-color:#fff; opacity:1; }
.lb-thumbs span img { width:100%; height:100%; object-fit:cover; }


/* ===== 移动端真机适配（iPhone 刘海屏 / 触摸手感）===== */

/* iOS 底部 Home 横条：底栏整体抬高，按钮不被压住 */
.bar { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.pb-safe { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* 底部弹层同样避让 */
.sheet, .v3-sum-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* 地址栏收起/展开时高度不跳（支持则用 dvh） */
@supports (height: 100dvh) {
  body .mobile, body .phone { min-height: 100dvh; }
}

/* 触摸设备专属手感 */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: contain; }
  /* 可点区域禁止长按弹出系统菜单 */
  .opt, .scene, .tier, .btn, button, .v3-step, .v2-gl, .film-i { -webkit-touch-callout: none; }
  /* 触摸设备不做 3D 倾斜（无鼠标，避免残留 transform） */
  [data-tilt] { transform: none !important; }
  /* 手指目标最小 44px，符合触控规范 */
  .btn, button { min-height: 44px; }
}

/* 横屏时收窄超高元素，避免一屏放不下 */
@media (orientation: landscape) and (max-height: 480px) {
  .v2-hero { min-height: 240px; }
  .v2-ba, .v3-stage { height: 200px; }
}


/* ===== v3 真机优化（亮哥 4 个反馈 一次修完） ===== */

/* 1) 封面缩小 + 吸顶：滚动后主题名/小图始终在视线内 */
.v2-hero { transition: min-height .25s ease, padding .25s ease; }
.v2-hero.has-scene {
  position: relative; z-index: 1;
  min-height: 200px; padding: 18px 18px 16px;
  box-shadow: 0 6px 16px rgba(60,30,45,.18);
}
.v2-hero.has-scene h1 { font-size: 22px; margin: 4px 0 2px; }
.v2-hero.has-scene p { font-size: 12px; line-height: 1.55; max-width: 100%; }
.v2-hero.has-scene .ds { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-hero.has-scene .v2-scroll-cue { display: none; }
.v2-hero.has-scene .v2-hero-pal i { width: 14px; height: 14px; }
.v2-hero:not(.has-scene) { position: relative; min-height: 0; }

/* 步骤条要压住吸顶 hero */
.v3-steps { z-index: 80; }

/* 2) 窄屏 row2 单列：避免日期/时段、桌数/人数挤压重叠 */
@media (max-width: 380px) {
  .row2 { grid-template-columns: 1fr; }
}

/* 3) 档位卡：图与价格并存（之前 tier-vis 用 margin-left:auto 顶到最右，会盖住价格） */
.tier-hd { flex-wrap: nowrap; }
.tier-hd h4 { flex: 1 1 auto; min-width: 0; }
.tier-hd .tier-price { flex: 0 0 auto; margin-left: auto; }
.tier-vis { margin-left: 8px !important; }

/* 4) 吸顶：桌面端与手机端保持一致（原先桌面被覆盖成 relative，已取消） */





/* ===== 吸顶头 · 迷你主题条（封面滚走后常驻视线） ===== */
.v3-mini { display: none; }
.v3-mini.on {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 6px;
  border-bottom: 1px solid rgba(184,92,124,.12);
}
.v3-mini .v3-mini-th {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(90,42,60,.22);
}
.v3-mini b {
  font-size: 13px; font-weight: 600; color: #4A2036;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40%;
}
.v3-mini .v3-mini-tier {
  font-size: 11px; color: #8A3A55; background: #FDF0F4;
  border: 1px solid rgba(184,92,124,.2); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; flex: 0 0 auto;
}
.v3-mini .v3-mini-tip {
  font-size: 11px; color: #A79AA1; white-space: nowrap;
}
.v3-mini em {
  font-style: normal; font-size: 13px; font-weight: 700; color: #B8385C;
  white-space: nowrap;
}
.v3-mini .v3-mini-up {
  margin-left: auto; flex: 0 0 auto; cursor: pointer;
  font-size: 11px; color: #B85C7C; opacity: .85;
  padding: 3px 7px; border-radius: 8px; background: rgba(184,92,124,.08);
}
.v3-mini .v3-mini-up:active { opacity: 1; }
@media (max-width: 340px) { .v3-mini .v3-mini-up { display: none; } }

/* 费用明细分组（套餐已含 / 增值服务 / 加购 / 特殊调整） */
.quote-detail .sub-h {
  font-size: 12px; color: #8a8a8a; font-weight: 600; letter-spacing: .3px;
  margin: 12px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.quote-detail .line.included .nm { color: #6c6c6c; }
.quote-detail .am-inc { color: #9a9a9a; font-size: 12px; font-weight: 400; }
.quote-detail .am-free { color: #1D9E75; font-weight: 600; }

/* 员工端：锁单前「执行工单」引导卡 */
.guide-lock .note-info { margin-bottom: 12px; }
.steps-mini { display: flex; flex-direction: column; gap: 9px; }
.step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 11px; background: #F6F2F4; }
.step .dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #E0D8DC; color: #7C7278; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step.done .dot { background: var(--ok-bg); color: var(--ok); }
.step.active .dot { background: var(--pink-600); color: #fff; }
.step.active { box-shadow: 0 0 0 1.5px var(--pink-600); }
.step b { font-size: 13px; color: var(--ink-900); }

/* 账号管理 · 角色权限说明 */
.role-perm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.rp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-h b { font-size: 14px; color: var(--ink-900); }
.rp ul { margin: 0; padding-left: 18px; }
.rp li { line-height: 1.9; }
.hl { background: var(--pink-bg); color: var(--pink-600); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
@media (max-width: 640px) {
  .role-perm { grid-template-columns: 1fr; }
}
/* SOP 教程缩略图（后台 sopCard） */
.sop-media { display: flex; gap: 6px; flex-wrap: wrap; }
.sop-thumb { width: 44px; height: 44px; border-radius: 8px; background: #eee center/cover no-repeat; flex: none; border: 1px solid var(--line); }
.sop-thumb.sop-video { background: #2b2b3a; position: relative; }
.sop-thumb.sop-video::after { content: '▶'; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
/* 客户端加购项缩略图 */
.addon-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.addon-thumb { width: 48px; height: 48px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid var(--line); flex: none; }