/* ============ 店铺后台专属样式 ============ */

/* ---------------- 档期管理 · 页内子导航（日历管理 / 档期查询） ---------------- */
.sched-shell{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;min-width:0}
.sched-tabs{min-width:0}
.sched-shell-meta{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
.sched-pane[data-active="0"]{display:none}
@media(max-width:640px){
  /* 手机端：分段控件撑满一行，紧贴内容区顶部 */
  .sched-shell{margin:0 0 11px;padding:0;border:none;background:none}
  .sched-tabs{display:flex;width:100%}
  .sched-tabs .seg-i{flex:1;text-align:center;padding:8px 0;font-size:13px}
  .sched-shell-meta{display:none}
  .q-run-mobile{margin-top:12px}
}
@media(min-width:641px){
  .sched-shell{padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
  .sched-tabs .seg-i{padding:7px 22px;font-size:13px}
  .q-run-mobile{display:none}
}

/* ---------------- 日历（档期管理核心） ---------------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cal-title{font-size:16px;font-weight:600;min-width:130px;text-align:center}
.cal-nav{display:flex;gap:6px;align-items:center}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-wd{text-align:center;font-size:12px;color:var(--muted);padding:6px 0;font-weight:500}
.cal-cell{
  min-height:82px;border:1.5px solid var(--line);border-radius:10px;padding:6px;
  background:#fff;cursor:pointer;transition:.15s;position:relative;overflow:hidden;
}
.cal-cell:hover{border-color:var(--brand-light);box-shadow:var(--shadow)}
.cal-cell.other{background:var(--tint-2);opacity:.45}
.cal-cell.today{border-color:var(--brand);background:linear-gradient(180deg,#fff,var(--brand-soft))}
.cal-cell.today .d-num{color:var(--brand);font-weight:700}
.cal-cell.selected{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.13)}
.d-num{font-size:13px;font-weight:500;margin-bottom:4px}
.d-num .d-h{font-size:10px;color:var(--brand-dark);background:var(--brand-soft);
  padding:1px 5px;border-radius:8px;margin-left:3px;font-weight:500}
.ev{
  font-size:10.5px;padding:2px 6px;border-radius:5px;margin-bottom:2.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.55;
}
.ev-work{background:#fce7f3;color:#9d174d}
.ev-shop{background:#e0e7ff;color:#4338ca}
.ev-field{background:#f3e8ff;color:#6d28d9}
.ev-study{background:#e0f2fe;color:#0369a1}
.ev-leave{background:#ccfbf1;color:#0f766e}
.ev-block{background:#efeeec;color:#57534e}
/* 订单叠加条目：深橙 + 左侧色条，与六类档期一眼区分（只读，点击查看订单） */
.ev-order{background:#ffedd5;color:#9a3412;border-left:3px solid #ea580c}
.ev-more{font-size:10px;color:var(--muted);padding-left:4px}

/* 档期列表（选中某天） */
.slot-list{max-height:420px;overflow-y:auto}
.slot-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line);margin-bottom:8px;transition:.15s;background:#fff;
}
.slot-item:hover{border-color:var(--brand-light);background:var(--tint-3)}
.slot-time{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;min-width:96px}
.slot-body{flex:1;min-width:0}
.slot-title{font-size:13px;font-weight:500}
.slot-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.slot-bar{width:3.5px;align-self:stretch;border-radius:3px;flex-shrink:0}

/* 团队档期泳道 */
.lane{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px;background:#fff}
.lane-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.lane-avatar{
  width:31px;height:31px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;
}
.lane-track{position:relative;height:30px;background:var(--bg);border-radius:7px;overflow:hidden}
.lane-block{
  position:absolute;top:3px;height:24px;border-radius:5px;font-size:10.5px;
  display:flex;align-items:center;padding:0 7px;color:#fff;overflow:hidden;white-space:nowrap;
}
.lane-hours{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px}

/* ---------------- 订单看板视图 ---------------- */
.order-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:13px}
.oc{
  background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:14px;
  cursor:pointer;transition:.18s;position:relative;
}
.oc:hover{border-color:var(--brand-light);box-shadow:var(--shadow);transform:translateY(-2px)}
.oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:9px}
.oc-name{font-size:14px;font-weight:600}
.oc-svc{font-size:12px;color:var(--text-2);margin-top:2px}
.oc-meta{font-size:12px;color:var(--muted);line-height:1.85;padding-top:9px;border-top:1px dashed var(--line)}
.oc-price{margin-top:9px;display:flex;justify-content:space-between;align-items:center}
.oc-amount{font-size:16px;font-weight:700;color:var(--brand-dark)}
.oc-left{font-size:11px;color:var(--warn)}

/* ---------------- 客户卡 ---------------- */
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px}
.cust{background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:15px;cursor:pointer;transition:.18s}
.cust:hover{border-color:var(--brand-light);box-shadow:var(--shadow)}
.cust-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.cust-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-soft),var(--tint-brand));color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;
}
.cust-stats{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.cust-stats b{display:block;font-size:14px;color:var(--text);font-weight:600}

/* ---------------- 客户跟进（CRM） ---------------- */

/* 列表卡片「待跟进」红点
   注意：手机端已有 .cust::after 画「›」箭头（见 ≤640px 媒体查询），
   故此处用独立 class 而非伪元素，避免互相覆盖。 */
.cust{position:relative}
.red-dot{
  position:absolute;top:11px;right:11px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.16);
}
.red-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%}

/* 待办提醒条 */
.pending-bar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:#fffbeb;border:1.5px solid #fde68a;border-left:3px solid var(--warn);
  border-radius:var(--radius-sm);padding:9px 13px;margin-bottom:12px;
  font-size:12.5px;color:#92400e;
}
.pending-bar .pb-ico{font-size:15px;line-height:1}
.pending-bar .pb-text{flex:1;min-width:0}

/* 跟进时间线 */
.tl{position:relative;padding-left:20px;margin-bottom:12px}
.tl::before{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;
  border-left:2px solid var(--line);
}
.tl-item{position:relative;padding-bottom:14px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-19px;top:5px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);
}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.tl-time{font-size:11.5px;color:var(--muted)}
.tl-by{font-size:11.5px;color:var(--muted)}
.tl-body{
  font-size:13px;color:var(--text-2);line-height:1.7;
  background:var(--tint-1);border-radius:var(--radius-sm);padding:8px 11px;
  word-break:break-word;
}
.tl-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:6px}
.tl-meta.due{color:var(--warn);font-weight:500}
.tl-ops{display:flex;gap:6px;margin-top:6px}
.tl-ops .btn-xs{padding:2px 8px;font-size:11px}

/* ---------------- 案例瀑布流 ---------------- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.case-card{
  background:#fff;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;
  transition:.2s;cursor:pointer;
}
.case-card:hover{border-color:var(--brand-light);box-shadow:var(--shadow);transform:translateY(-3px)}
.case-cover{
  height:150px;background:linear-gradient(135deg,var(--brand-soft),var(--tint-brand));
  display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--brand-light);position:relative;
  overflow:hidden;
}
.case-cover .vis{
  position:absolute;top:8px;right:8px;font-size:10px;padding:2px 7px;border-radius:9px;
  background:rgba(255,255,255,.92);color:var(--brand-dark);font-weight:500;
}
.case-body{padding:11px 12px}
.case-title{font-size:13px;font-weight:600;line-height:1.5;margin-bottom:6px}
.case-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}
.case-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* 封面图 —— 完整显示，不裁剪
   店主上传的多为竖构图人像（手机拍摄），而卡片是宽扁的。
   若用 object-fit:cover，上下会被裁掉一大截，经常切到头部。
   这里改为「完整显示 + 主题色底衬」：
     - 图片按比例完整呈现，永远不切人
     - 左右留白落在渐变底色上，视觉上是有意的设计，而非破绽
   注意：不要用 object-fit:contain —— 它会让留白露出纯色，
   且在不同浏览器下透明区域的渲染不一致，观感生硬。 */
.case-cover img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;display:block;
  position:relative;z-index:1;
}

/* ---------------- 案例图片上传 ---------------- */
.img-picker{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:9px;padding:3px 0;
}
.img-cell{
  position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
  border:1.5px solid var(--line);background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;
}
.img-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.img-badge{
  position:absolute;left:5px;bottom:5px;font-size:10px;padding:1px 6px;border-radius:7px;
  background:rgba(0,0,0,.62);color:#fff;font-weight:500;letter-spacing:.3px;
}
.img-del{
  position:absolute;top:4px;right:4px;width:19px;height:19px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;
}
.img-del:hover{background:#e5484d;transform:scale(1.08)}
.img-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  aspect-ratio:1;border:1.5px dashed var(--brand-light);border-radius:10px;cursor:pointer;
  background:var(--brand-soft);color:var(--brand-dark);transition:.18s;user-select:none;
}
.img-add:hover{border-color:var(--brand);background:var(--tint-brand)}
.img-add span{font-size:20px;line-height:1}
.img-add small{font-size:10.5px}
.img-tip{font-size:11px;color:var(--muted);margin-top:7px}
.img-tip b{color:var(--brand-dark)}
/* 弹窗内图片放大查看 */
.img-viewer{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:26px;cursor:zoom-out;
  animation:fadeIn .16s;
}
.img-viewer img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.5)}

/* ---------------- 服务项目 ---------------- */
.svc-item{
  display:flex;align-items:center;gap:13px;padding:14px;border:1.5px solid var(--line);
  border-radius:12px;margin-bottom:10px;background:#fff;transition:.16s;
}
.svc-item:hover{border-color:var(--brand-light);background:var(--tint-3)}
.svc-info{flex:1;min-width:0}
.svc-name{font-size:14px;font-weight:600;margin-bottom:3px}
.svc-desc{font-size:11.5px;color:var(--muted)}
.svc-price{text-align:right;flex-shrink:0}
.svc-price .p{font-size:16px;font-weight:700;color:var(--brand-dark)}
.svc-price .d{font-size:11px;color:var(--muted)}

/* ---------------- 化妆师卡 ---------------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:13px}
.tm{background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:16px;transition:.18s}
.tm:hover{border-color:var(--brand-light);box-shadow:var(--shadow)}
.tm-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tm-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;
}
.tm-body{font-size:11.5px;color:var(--muted);line-height:1.9;padding-top:10px;border-top:1px solid var(--line)}

/* ---------------- 设置 ---------------- */
.set-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-row .lbl{font-size:13.5px}
.set-row .desc{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------------- 进度条 ---------------- */
.progress{height:7px;background:var(--tint-4);border-radius:5px;overflow:hidden;margin-top:7px}
.progress i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--brand-light),var(--brand));transition:.4s}

/* =========================================================
   响应式（≥901px 不受影响）
   ========================================================= */

/* ---------- ≤900px：iPad 竖屏 / 大屏手机横屏 ---------- */
@media(max-width:900px){
  .cal-cell{min-height:64px}
  .d-num{font-size:12px}
  .ev{font-size:9.5px}
  .case-cover{height:130px}
}

/* ---------- ≤640px：标准手机 ---------- */
@media(max-width:640px){
  .cal-head{gap:9px;margin-bottom:11px}
  .cal-title{font-size:14px;min-width:0;flex:1}
  .cal-nav{gap:5px}
  .cal-cell{min-height:58px;padding:4px;border-radius:8px}
  .d-num{font-size:11.5px;margin-bottom:2px}
  .ev{font-size:9px;padding:1px 4px}
  .cal-wd{font-size:11px;padding:4px 0}

  .slot-item{padding:10px 11px;gap:9px}
  .slot-time{min-width:74px;font-size:12px}
  /* 手机端：时间独立一行，避免「14:00-17:00」把正文挤成竖条 */
  .slot-item{flex-wrap:wrap}
  .slot-time{flex:1 1 100%;min-width:0;margin-bottom:2px}
  .slot-bar{width:3.5px;align-self:auto;height:34px;margin-top:-2px}
  .slot-body{flex:1 1 60%}
  .slot-title{font-size:13.5px}
  .slot-item .flex-row{flex:0 0 auto;gap:6px}

  .lane{padding:10px 11px}
  .lane-block{font-size:9.5px;padding:0 5px}

  .order-cards{grid-template-columns:1fr}
  .cust-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .team-grid{grid-template-columns:1fr}
  .case-cover{height:118px}
  .svc-item{flex-wrap:wrap}

  /* 可点卡片加「›」暗示（小程序列表质感） */
  .oc{padding:13px 14px}
  .oc::after,.cust::after{
    content:'›';position:absolute;right:13px;top:50%;transform:translateY(-58%);
    font-size:22px;color:var(--tint-line);font-weight:300;line-height:1;
  }
  .oc{position:relative}
  .cust{position:relative}
  .cust::after{top:auto;bottom:18px;transform:none}
  .oc-top{padding-right:18px}
  .cust-head{padding-right:18px}
  .oc-price{margin-top:10px}
  .oc-amount{font-size:17px}

  /* 跟进时间线：窄屏收窄左边距、缩小正文留白 */
  .tl{padding-left:16px}
  .tl::before{left:4px}
  .tl-dot{left:-15px;width:10px;height:10px}
  .tl-body{padding:7px 10px;font-size:12.5px}
  .pending-bar{padding:8px 11px;font-size:12px}
}

/* ---------- ≤420px：小屏，日历只留色点 ---------- */
@media(max-width:420px){
  .cal-grid{gap:3px}
  .cal-cell{min-height:44px;padding:3px}
  .cal-wd{font-size:10px}
  .d-num{font-size:11px;margin-bottom:1px}
  .d-num .d-h{display:none}

  /* 42px 宽格子放不下文字：隐藏文字，仅保留颜色圆点表示档期 */
  .ev{
    width:6px;height:6px;border-radius:50%;padding:0;margin:0 2px 0 0;
    display:inline-block;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;
  }
  .ev-more{font-size:9px;padding-left:2px}

  .slot-time{min-width:66px;font-size:11.5px}
  .lane-block{font-size:9px;padding:0 4px}
  .case-grid{grid-template-columns:1fr}
}

/* =========================================================
   主题外观（需求 O）—— 设置页主题卡片
   预览色块用内联 style 写死「目标主题的色值」，不受当前主题影响：
   这样在粉主题下也能准确预览冷色卡片的样子（反之亦然）。
   ========================================================= */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:640px}
.theme-card{
  position:relative;border:2px solid var(--line);border-radius:14px;padding:12px;
  cursor:pointer;transition:.18s;background:#fff;-webkit-tap-highlight-color:transparent;
}
.theme-card:hover{border-color:var(--brand-light)}
.theme-card.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.13)}
.tk-preview{height:74px;border-radius:10px;overflow:hidden;position:relative;margin-bottom:9px}
.tk-swatch{position:absolute;inset:0}
.tk-dots{position:absolute;left:9px;bottom:9px;display:flex;gap:5px}
.tk-dot{width:15px;height:15px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tk-dot.lg{width:23px;height:23px}
.tk-line{position:absolute;right:9px;top:9px;width:52px;height:38px;border-radius:7px;background:rgba(255,255,255,.86)}
.tk-bar{position:absolute;right:14px;top:15px;width:42px;height:5px;border-radius:3px}
.tk-bar+.tk-bar{top:25px;width:30px}
.tk-bar+.tk-bar+.tk-bar{top:35px;width:36px}
.tk-name{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tk-name b{font-size:13.5px}
.tk-name span{font-size:11px;color:var(--muted)}
.tk-check{
  position:absolute;right:9px;top:9px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:12px;line-height:20px;text-align:center;
  display:none;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:2;
}
.theme-card.on .tk-check{display:block}
@media(max-width:640px){
  /* 窄屏单列（3 张卡并排会挤到看不清预览） */
  .theme-grid{grid-template-columns:1fr;max-width:none}
  .tk-preview{height:64px}
}

/* ---------------- 档期类型管理（设置页 · 需求 X） ----------------
   为什么用「横排一行一条」而不是卡片网格：
   类型条数会随店主新增而增长（4~12 个都正常），网格布局在条数变化时
   会导致每行个数跳动、视觉不稳定；横排列表加编号感不强但**增长时最稳**，
   且能放下「编辑/停用/删除」三个按钮而不换行。 */
.type-row{gap:10px;align-items:center}
.type-row.type-off{opacity:.56}
.type-swatch{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.type-acts{display:flex;gap:6px;flex-shrink:0}
/* 三个小按钮在窄屏要能收进一行，否则会把名称挤成一列字。
   桌面端 29px 够用（鼠标精度高）；手机端在下面媒体查询里放大到 40px ——
   44px 是三按钮并排时的上限，再大会换行。 */
.type-acts .btn{padding:5px 9px;font-size:12px;white-space:nowrap;min-height:29px}

/* 预设色卡选择器（新增/编辑类型弹窗内） */
.cp-grid{display:flex;flex-wrap:wrap;gap:9px;padding:2px 0}
.cp-dot{
  width:28px;height:28px;border-radius:50%;cursor:pointer;position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.16);transition:.15s;
  border:2px solid transparent;-webkit-tap-highlight-color:transparent;
}
.cp-dot:hover{transform:scale(1.08)}
.cp-dot.on{border-color:var(--text);transform:scale(1.08)}
.cp-dot.on::after{
  content:'✓';position:absolute;inset:0;color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media(max-width:640px){
  /* 手机端：按钮组换成第二行，否则类型名只剩两三个字宽 */
  .type-row{flex-wrap:wrap}
  .type-acts{width:100%;justify-content:flex-end}
  .type-acts .btn{flex:1;text-align:center;min-height:40px}
  /* 色卡在手机上只有 28px，手指很难点准 —— 放大到 40px。
     上限是 40 而非 44：一行要放下 10 个色卡，再大会被迫换行成两排。 */
  .cp-grid{gap:10px}
  .cp-dot{width:40px;height:40px}
  .cp-dot.on::after{font-size:17px}
}

/* ---------------- 角色权限矩阵（员工与团队 → 角色权限 页签） ----------------
   为什么用表格：权限天然是「能力点 × 角色」的二维矩阵，表格是唯一
   能让店主一眼看出"这个角色能做什么、不能做什么"的布局。
   为什么不是"每个角色一张卡片"：那样要上下滚动比对，而店主的核心动作
   恰恰是横向比较（"化妆师和助理有什么区别"）。 */
.tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--line);padding-bottom:0}
.tabs .tab{
  background:none;border:none;border-bottom:2.5px solid transparent;
  padding:8px 14px;font-size:13px;color:var(--muted);cursor:pointer;
  font-family:inherit;margin-bottom:-1.5px;transition:.18s;
}
.tabs .tab:hover{color:var(--text-2)}
.tabs .tab.active{color:var(--brand-dark);border-bottom-color:var(--brand);font-weight:600}

.perm-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.perm-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1.5px solid var(--line);border-radius:13px;overflow:hidden;
}
.perm-table th{
  background:var(--tint-2);font-size:12px;font-weight:600;color:var(--text-2);
  padding:11px 10px;text-align:center;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
.perm-table td{
  padding:11px 10px;border-bottom:1px solid var(--line);
  font-size:13px;vertical-align:middle;
}
.perm-table tr:last-child td{border-bottom:none}
.perm-table td:first-child{min-width:200px}
.perm-table td.c{text-align:center;width:88px}
.perm-table .hint{font-size:11.5px;line-height:1.6;margin-top:2px}
/* 复选框放大到 17px：默认的 13px 在投影/手机上太难点中 */
.perm-table input[type=checkbox]{width:17px;height:17px;cursor:pointer;accent-color:var(--brand)}
.perm-table input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}
/* 店主列的「恒定全权限」标记：必须一眼看出"已开启且锁住"，
   不能做成 disabled 复选框（那看起来和未勾选几乎一样，会吓到店主）。 */
.perm-lock{
  display:inline-block;width:19px;height:19px;line-height:19px;border-radius:5px;
  background:var(--brand);color:#fff;font-size:12px;font-weight:700;text-align:center;
  cursor:not-allowed;opacity:.62;
}
.perm-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

@media(max-width:640px){
  /* 窄屏：权限项列收窄，靠横向滚动保证勾选框够大能点中 */
  .perm-table td:first-child{min-width:150px}
  .perm-table td.c{width:64px}
  .perm-table th,.perm-table td{padding:9px 6px;font-size:12px}
}

/* ---------------- 操作记录（档期/订单修改留痕） ----------------
 * 时间线的视觉重点只有一个：**从什么变成了什么**。
 * 所以 from 用弱化的灰 + 删除线，to 用品牌色加粗 —— 扫一眼就能看出
 * 方向，不必逐字读。这是变更记录唯一真正需要传达的信息。
 */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-i{position:relative;padding:12px 0;border-bottom:1px solid var(--line)}
.tl-i:last-child{border-bottom:none}
/* 时间线圆点：用 ::before 画，颜色由 action 决定（见 tl-dot-*） */
.tl-i::before{content:"";position:absolute;left:-21px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--muted);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl-i.act-create::before{background:#10b981}
.tl-i.act-delete::before{background:#ef4444}
.tl-i.act-cancel::before{background:#ef4444}
.tl-i.act-update::before{background:#f59e0b}
.tl-i.act-reschedule::before{background:#6366f1}
.tl-i.act-pay::before{background:#0ea5e9}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.tl-sum{font-size:13.5px;font-weight:600;line-height:1.5}
.tl-meta{font-size:11.5px;color:var(--muted)}
/* 字段差异：一行一个字段，label 定宽保证多行时 from/to 对齐 */
.chg{margin-top:8px;background:var(--tint-3);border-radius:8px;padding:9px 11px}
.chg-r{display:flex;gap:8px;font-size:12.5px;line-height:1.9;align-items:baseline}
.chg-l{color:var(--muted);flex:0 0 76px}
.chg-from{color:var(--muted);text-decoration:line-through;word-break:break-all}
.chg-arrow{color:var(--muted);flex:0 0 auto}
.chg-to{color:var(--brand-dark);font-weight:600;word-break:break-all}
.chg-none{font-size:12px;color:var(--muted);margin-top:6px}
@media(max-width:520px){
  /* 窄屏：label 换行成单独一行，否则 from/to 的空间会被挤到只剩几个字 */
  .chg-r{flex-wrap:wrap;gap:2px 6px}
  .chg-l{flex:0 0 100%}
  .chg-from,.chg-to{flex:1 1 auto}
}

/* ---------------- 客户资料选项（肤质/肤色管理） ---------------- */
/* 与档期类型管理共用 .set-row / .type-acts，这里只补分组相关样式。 */
.co-section{padding:6px 0}
.co-section + .co-divider{height:1px;background:var(--line);margin:14px 0}
.co-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.co-sec-head .hint{font-size:11.5px}
/* 复用 .type-off 的降透明效果：停用的选项行也变淡，与档期类型一致 */
.set-row.type-off{opacity:.56}
@media(max-width:520px){
  /* 窄屏下「编辑/停用/删除」按钮占满一行，避免和选项名挤在一起 */
  .co-section .type-acts{width:100%;justify-content:flex-end}
  .co-section .type-acts .btn{flex:1;min-height:40px}
}