/* =========================================================
   化妆师管家 SaaS —— 公共样式（设计系统）
   风格：柔和美妆调性 · 品牌色渐变 · 圆角卡片

   主题机制（需求 O）：
     品牌色 / 装饰色 / 中性色一律走 CSS 变量，由 [data-theme] 覆盖。
     切换主题 = 改 <html data-theme="cool">，无需重新加载。
     !!! 语义色（--ok/--warn/--danger/--info）、档期类型色、订单块色、
         标签语义色、冲突红 —— 一律 **不跟随主题**，保持跨主题可辨识。
   ========================================================= */

:root{
  /* ---- 品牌色（跟随主题） ---- */
  --brand:#c2619a;
  --brand-light:#e8a8cd;
  --brand-dark:#9d3f76;
  --brand-soft:#fdf2f8;
  --brand-rgb:194,97,154;
  --accent:#8b6fd4;

  /* ---- 中性色（跟随主题冷/暖平移） ---- */
  --text:#2c2333;
  --text-2:#5d5364;
  --muted:#8d8194;
  --line:#efe7f2;
  --bg:#faf8fb;
  --white:#fff;

  /* ---- 中性色阶（暖白系列，跟随主题） ---- */
  --tint-1:#fdfcfe;   /* 表单底 */
  --tint-2:#fcfafd;   /* 表头 / 代码块底 */
  --tint-3:#fdfbfe;   /* 行 hover */
  --tint-4:#f7f3f9;   /* 分隔线 */
  --tint-5:#f1f0f5;   /* 分段控件底 */
  --tint-6:#faf9fc;   /* 格子底 */
  --tint-7:#fcfbfd;   /* 卡片浅底 */
  --tint-line:#e4d8ec;
  --tint-line-2:#e2d5e8;
  --scroll-1:#e2d8e8;
  --scroll-2:#d0c2d8;

  /* ---- 品牌色浅调（跟随主题） ---- */
  --tint-brand:#f7edfb;
  --tint-brand-line:#f5d0e0;

  /* ---- 图表柱（跟随主题） ---- */
  --bar-1:#f0a1c6;
  --bar-2:#d977ab;
  --bar-3:#e884b5;
  --bar-4:#c95f97;

  /* ---- 登录页渐变（跟随主题） ---- */
  --login-1:#fdf2f6;
  --login-2:#f3ecfb;
  --login-3:#eef3fd;

  /* ---- 阴影基色（跟随主题） ---- */
  --shadow-rgb:160,110,150;
  --overlay-rgb:44,35,51;

  /* ---- 语义色（!!! 不跟随主题，跨主题固定） ---- */
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --info:#3b82f6;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 4px 16px rgba(var(--shadow-rgb),.08);
  --shadow-lg:0 16px 48px rgba(var(--shadow-rgb),.16);
}

/* =========================================================
   冷色主题（需求 O）—— 高级冷青灰蓝
   覆盖块必须写在 :root 之后：两者特异性同为 (0,1,0)，靠源码顺序取胜。
   ========================================================= */
[data-theme="cool"]{
  --brand:#4a6b8a;
  --brand-light:#8fabc4;
  --brand-dark:#33506c;
  --brand-soft:#eef3f8;
  --brand-rgb:74,107,138;
  --accent:#5f8ba8;

  --text:#1f2a35;
  --text-2:#4b5b6a;
  --muted:#7c8b99;
  --line:#e4eaf0;
  --bg:#f5f7fa;

  --tint-1:#fbfcfd;
  --tint-2:#f7f9fb;
  --tint-3:#f8fafc;
  --tint-4:#eef2f6;
  --tint-5:#eef1f5;
  --tint-6:#f7f9fb;
  --tint-7:#f9fbfc;
  --tint-line:#d4dfe9;
  --tint-line-2:#cfdae4;
  --scroll-1:#d6dfe7;
  --scroll-2:#c2ced9;

  --tint-brand:#eaf1f7;
  --tint-brand-line:#c3d5e3;

  --bar-1:#8fabc4;
  --bar-2:#5f8ba8;
  --bar-3:#7fa1bd;
  --bar-4:#4a6b8a;

  --login-1:#f2f6f9;
  --login-2:#eaf0f5;
  --login-3:#eef4f8;

  --shadow-rgb:70,95,120;
  --overlay-rgb:31,42,53;
}

/* =========================================================
   渐变紫主题（需求 O · 第三套）—— 高级渐变紫
   冷调紫罗兰，落在「品牌 + 装饰」两色上：
     --brand 偏紫罗兰（#7c5cd6），--accent 偏暖紫（#9d6fd8）
   两者互为邻近色，使 .btn-primary / .brand-logo / .card-head::before
   这类「--brand-light → --brand」渐变自然拉出层次感（这是本套主题的设计重点）。
   覆盖块同样必须写在 :root 与 cool 之后。
   ========================================================= */
[data-theme="violet"]{
  --brand:#7c5cd6;
  --brand-light:#b39ceb;
  --brand-dark:#5b3fa8;
  --brand-soft:#f5f1fd;
  --brand-rgb:124,92,214;
  --accent:#9d6fd8;

  --text:#251f38;
  --text-2:#524a68;
  --muted:#857c9b;
  --line:#ebe5f7;
  --bg:#faf9fd;

  --tint-1:#fdfcff;
  --tint-2:#faf8fe;
  --tint-3:#fbf9ff;
  --tint-4:#f3eefa;
  --tint-5:#f2eefb;
  --tint-6:#faf8fe;
  --tint-7:#fbfaff;
  --tint-line:#dbd0f0;
  --tint-line-2:#d6c9ee;
  --scroll-1:#ded3f2;
  --scroll-2:#cbbce8;

  --tint-brand:#f1ebfc;
  --tint-brand-line:#d5c3f0;

  --bar-1:#b39ceb;
  --bar-2:#7c5cd6;
  --bar-3:#a288e2;
  --bar-4:#6d4bc4;

  --login-1:#f7f3fd;
  --login-2:#f1ebfb;
  --login-3:#f4f0fc;

  --shadow-rgb:110,80,180;
  --overlay-rgb:37,31,56;
}

/* 渐变紫专属：把「单色块」升级为「有方向的渐变块」，强化主题名里的「渐变」感。
   仅作用于装饰性元素，不触碰语义色与档期类型色。 */
[data-theme="violet"] .brand-logo{
  background:linear-gradient(135deg,#b39ceb 0%,#7c5cd6 55%,#6d4bc4 100%);
}
[data-theme="violet"] .btn-primary{
  background:linear-gradient(135deg,#9d6fd8 0%,#7c5cd6 60%,#6d4bc4 100%);
}
[data-theme="violet"] .card-head h3::before{
  background:linear-gradient(180deg,#b39ceb,#7c5cd6 60%,#6d4bc4);
}
[data-theme="violet"] #nav a.active{
  background:linear-gradient(135deg,#f5f1fd,#efe8fb);
}

*{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;
  color:var(--text);background:var(--bg);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--scroll-1);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-2)}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- 登录页 ---------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,var(--login-1) 0%,var(--login-2) 55%,var(--login-3) 100%);
}
.login-card{
  background:#fff;border-radius:22px;padding:38px 34px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);
}
.brand{display:flex;align-items:center;gap:13px;margin-bottom:30px}
.brand-logo{
  width:50px;height:50px;border-radius:15px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;box-shadow:0 6px 16px rgba(var(--brand-rgb),.3);
}
.brand-logo.sm{width:37px;height:37px;font-size:16px;border-radius:11px;box-shadow:none}
.brand h1{font-size:17px;letter-spacing:-.2px}
.brand p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.form-item{margin-bottom:17px}
.form-item label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px;font-weight:500}
.form-item input,.form-item select,.form-item textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--tint-1);transition:.18s;outline:none;
}
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{
  border-color:var(--brand-light);background:#fff;box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14);
}
.form-item textarea{resize:vertical;min-height:78px;line-height:1.6}
.tip{font-size:12px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.7}
.tip code{background:var(--brand-soft);color:var(--brand-dark);padding:2px 7px;border-radius:5px;font-size:11.5px}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 17px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;
  transition:.18s;white-space:nowrap;border:1.5px solid transparent;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(135deg,var(--brand-light),var(--brand));color:#fff;
  box-shadow:0 3px 12px rgba(var(--brand-rgb),.26)}
.btn-primary:hover{box-shadow:0 5px 18px rgba(var(--brand-rgb),.36)}
.btn-ghost{border-color:var(--line);color:var(--text-2);background:#fff}
.btn-ghost:hover{border-color:var(--brand-light);color:var(--brand-dark);background:var(--brand-soft)}
.btn-danger{background:#fef2f2;color:var(--danger);border-color:#fecaca}
.btn-danger:hover{background:#fee2e2}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-xs{padding:4px 9px;font-size:11.5px;border-radius:6px}
.btn-block{width:100%;padding:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------------- 布局 ---------------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:214px;background:#fff;border-right:1px solid var(--line);flex-shrink:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--line)}
.sb-brand b{display:block;font-size:14px}
.sb-brand span{font-size:11px;color:var(--muted)}
#nav{flex:1;padding:12px 10px;overflow-y:auto}
#nav a{
  display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--text-2);margin-bottom:3px;transition:.16s;cursor:pointer;
}
#nav a i{font-style:normal;font-size:15px;width:19px;text-align:center}
#nav a:hover{background:var(--brand-soft);color:var(--brand-dark)}
#nav a.active{background:linear-gradient(135deg,var(--brand-soft),var(--tint-brand));color:var(--brand-dark);font-weight:600}
.sb-foot{padding:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
#userInfo{margin-bottom:9px;line-height:1.5}
#userInfo b{display:block;color:var(--text);font-size:13px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:15px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:20;
}
.topbar h2{font-size:17px;letter-spacing:-.2px}
.topbar-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.content{padding:22px 24px 60px;flex:1}

/* ---------------- 卡片 ---------------- */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:18px;margin-bottom:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.card-head h3{font-size:14.5px;display:flex;align-items:center;gap:7px}
.card-head h3::before{content:"";width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-light),var(--brand))}
.card-head .sub{font-size:12px;color:var(--muted);font-weight:400}

/* ---------------- 表格 ---------------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th{
  text-align:left;padding:11px 13px;background:var(--tint-2);color:var(--muted);
  font-weight:500;font-size:12px;white-space:nowrap;border-bottom:1px solid var(--line);
}
td{padding:12px 13px;border-bottom:1px solid var(--tint-4);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:.13s}
tbody tr:hover{background:var(--tint-3)}
.td-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------- 标签 ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:3px;padding:2.5px 9px;border-radius:20px;
  font-size:11.5px;font-weight:500;white-space:nowrap;line-height:1.6;
}
.tag-pink{background:#fce7f3;color:#be185d}
.tag-purple{background:#f3e8ff;color:#7c3aed}
.tag-blue{background:#dbeafe;color:#1d4ed8}
.tag-green{background:#d1fae5;color:#047857}
.tag-amber{background:#fef3c7;color:#b45309}
.tag-red{background:#fee2e2;color:#b91c1c}
.tag-gray{background:#f3f4f6;color:#6b7280}
.tag-cyan{background:#e0f2fe;color:#0369a1}
.tag-teal{background:#ccfbf1;color:#0f766e}
.tag-orange{background:#ffedd5;color:#9a3412}

/* ---------------- 统计卡 ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.stat{background:#fff;border-radius:var(--radius);padding:17px;border:1px solid var(--line);transition:.2s}
.stat:hover{border-color:var(--brand-light);box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--muted);margin-bottom:7px}
.stat .v{font-size:23px;font-weight:700;letter-spacing:-.6px;line-height:1.25}
.stat .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.stat .d{font-size:11px;color:var(--muted);margin-top:5px}
.stat.hi{background:linear-gradient(135deg,#fff,var(--brand-soft));border-color:var(--tint-brand-line)}

/* 可点击的数据卡片（经营看板 → 对应页面）。
   .stat 已有 :hover 边框/阴影规则，这里只补 cursor 与状态。 */
.dash-card{position:relative;cursor:pointer}
/* 右上角「›」提示可点：淡灰常驻（手机没有悬停，不能只靠 hover 才出现）。
   pointer-events:none 保证它不吃掉整卡的点击。 */
.dash-go{position:absolute;top:12px;right:13px;font-size:17px;line-height:1;
  color:var(--muted);opacity:.45;font-weight:400;pointer-events:none;transition:.2s}
.dash-card:hover .dash-go{opacity:1;color:var(--brand);transform:translateX(2px)}
/* 卡片正文里的细分入口（如「待付 2 · 取消 26」的数字），点了带筛选跳转 */
.dash-sub{color:var(--brand-dark);font-weight:600;cursor:pointer;
  border-bottom:1px dashed var(--brand-light)}
.dash-sub:hover{color:var(--brand);border-bottom-style:solid}
/* 从看板「待收尾款」跳来时的定位高亮，1.6s 后自动淡出 */
.dash-focus{animation:dashFocus 1.6s ease-out}
@keyframes dashFocus{
  0%,55%{box-shadow:0 0 0 3px var(--brand-light);border-color:var(--brand)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------------- 筛选栏 ---------------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:15px}
.filters input,.filters select{
  padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;outline:none;transition:.16s;font-size:13px;
}
.filters input:focus,.filters select:focus{border-color:var(--brand-light)}
.filters input[type=text]{min-width:180px}

/* ---------------- 表单 ---------------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.req::after{content:" *";color:var(--danger)}

/* ---------------- 弹窗 ---------------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(var(--overlay-rgb),.42);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-mask.show{display:flex;animation:fadeIn .18s}
.modal{
  background:#fff;border-radius:18px;padding:26px;width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .22s;
}
.modal.wide{max-width:820px}
.modal h3{font-size:16.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;top:22px;left:50%;transform:translate(-50%,-24px);z-index:200;
  background:rgba(var(--overlay-rgb),.94);color:#fff;padding:11px 22px;border-radius:24px;
  font-size:13.5px;opacity:0;transition:.26s;pointer-events:none;max-width:80vw;
  box-shadow:0 8px 26px rgba(0,0,0,.2);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:linear-gradient(135deg,#059669,#10b981)}
.toast.err{background:linear-gradient(135deg,#dc2626,#ef4444)}

/* ---------------- 空态 / 加载 ---------------- */
.empty{text-align:center;padding:52px 20px;color:var(--muted);font-size:13.5px}
.empty .ico{font-size:38px;display:block;margin-bottom:11px;opacity:.42}
.loading{text-align:center;padding:42px;color:var(--muted);font-size:13px}
.spinner{
  width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:spin .75s linear infinite;margin:0 auto 11px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- 分页 ---------------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px;color:var(--muted)}
.pager-btns{display:flex;gap:6px}

/* ---------------- 其他 ---------------- */
.hint{font-size:12px;color:var(--muted);line-height:1.7}
.divider{height:1px;background:var(--line);margin:16px 0}
.flex-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt12{margin-top:12px}.mt16{margin-top:16px}.mb12{margin-bottom:12px}
.text-muted{color:var(--muted)}
.text-brand{color:var(--brand-dark)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.code-box{
  background:var(--tint-2);border:1px dashed var(--tint-line);border-radius:var(--radius-sm);
  padding:13px;font-size:12.5px;line-height:1.8;color:var(--text-2);
}

/* ---------------- 图表（柱状趋势图，renderBars 输出） ---------------- */
.chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding:10px 0}
.chart .bar{
  flex:1;background:linear-gradient(180deg,var(--bar-1),var(--bar-2));border-radius:4px 4px 0 0;
  min-height:3px;transition:.3s;position:relative;
}
.chart .bar:hover{background:linear-gradient(180deg,var(--bar-3),var(--bar-4))}
.chart .bar span{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--muted);white-space:nowrap;opacity:0;transition:.2s;
}
.chart .bar:hover span{opacity:1}
.chart-x{display:flex;gap:4px;font-size:10px;color:var(--muted)}
.chart-x div{flex:1;text-align:center}

/* ---------------- 侧边栏抽屉（移动端由下方媒体查询启用） ---------------- */
.hb-btn{display:none}
.scrim{display:none}

/* ---------------- 底部 TabBar（小程序风格，≤640px 由媒体查询启用） ---------------- */
#tabbar{display:none}

/* ---------------- 「更多」宫格导航（TabBar 的更多页） ---------------- */
.grid-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gn-item{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:18px 14px;display:flex;flex-direction:column;gap:4px;cursor:pointer;
  transition:.15s;-webkit-tap-highlight-color:transparent;
}
.gn-item:active{transform:scale(.97);border-color:var(--brand-light)}
.gn-icon{font-size:30px;line-height:1;margin-bottom:6px}
.gn-item b{font-size:15px}
.gn-item span{font-size:11.5px;color:var(--muted)}
.gn-disabled{opacity:.55}

/* ---------------- 档期查询（需求 D） ---------------- */
.q-staffs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.qchip{
  font-size:12.5px;line-height:1;padding:8px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text-2);user-select:none;
  transition:.15s;-webkit-tap-highlight-color:transparent;
}
.qchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.qchip[data-all].on{background:var(--brand-dark);border-color:var(--brand-dark)}
.q-scope{font-size:13px;color:var(--text-2);padding:8px 0}
.q-scope b{color:var(--brand-dark)}
.q-staff-head{display:flex;align-items:center;gap:10px}
.q-staff-head .tm-avatar{width:38px;height:38px;font-size:15px}
.q-staff-head b{font-size:14.5px}
.q-staff-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.q-staff-tags .tag{font-size:11px;padding:3px 9px}

/* 分段控件（列表 / 周视图，周 / 双周） */
.seg{display:inline-flex;background:var(--tint-5);border-radius:9px;padding:3px;user-select:none}
.seg-i{padding:6px 14px;font-size:12.5px;border-radius:7px;cursor:pointer;color:var(--text-2);transition:.15s}
.seg-i.on{background:#fff;color:var(--brand-dark);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg-sm .seg-i{padding:5px 11px;font-size:12px}

/* 周视图 */
.q-view-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 4px}
.q-week-bar{display:flex;align-items:center;gap:8px;margin-left:auto}
.q-range{font-size:12.5px;color:var(--text-2);min-width:92px;text-align:center}
.q-week-card{padding:10px;overflow:hidden}
.q-week-grid{display:grid;grid-template-columns:60px repeat(var(--cols), minmax(0,1fr));gap:5px;align-items:stretch}
.q-wrow,.q-whead{display:contents}
.q-wname{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--tint-6);border-radius:7px;padding:4px 2px;font-size:11px;color:var(--text-2);
  border-bottom:1px solid var(--line);min-height:40px;text-align:center}
.q-wname.head{font-weight:600;color:var(--text)}
.q-wname span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-wname .tm-avatar.sm{width:24px;height:24px;font-size:11px}
.q-wd{text-align:center;font-size:11px;padding:5px 0;background:var(--tint-6);border-radius:7px;border-bottom:1px solid var(--line)}
.q-wd-d{display:block;font-weight:600;color:var(--text)}
.q-wd-w{display:block;font-size:10px;color:var(--muted)}
.q-wd.we .q-wd-d{color:var(--brand)}
.q-wd.today{background:var(--brand-light)}
.q-wd.today .q-wd-d{color:var(--brand-dark)}
.q-wc{display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;padding:4px 3px;min-height:40px;
  border-bottom:1px solid var(--line);border-radius:5px}
.q-wc.out,.q-wd.out{opacity:.38}
.q-wchip{display:block;width:100%;border-left:3px solid var(--c);border-radius:4px;background:var(--tint-4);
  padding:2px 4px;font-size:10.5px;line-height:1.3;overflow:hidden;cursor:default}
.q-wchip .q-wt{color:var(--c);font-weight:600}
.q-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin:1px}
.q-wmore{font-size:10px;color:var(--muted);align-self:center}

/* 团队矩阵总览：行=化妆师 · 列=日期（一屏看全团队当日档期） */
.q-matrix-card{padding:10px;overflow:hidden}
.q-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mx-grid{display:grid;grid-template-columns:88px repeat(var(--cols), minmax(64px,1fr));gap:4px;min-width:max-content}
.mx-whead{display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--muted);
  background:var(--tint-6);border-radius:7px;border-bottom:1px solid var(--line);padding:4px 2px;text-align:center}
.mx-wd{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--tint-6);border-radius:7px;border-bottom:1px solid var(--line);padding:5px 2px;line-height:1.2}
.mx-wd span{font-weight:600;font-size:12px;color:var(--text)}
.mx-wd i{font-style:normal;font-size:10px;color:var(--muted)}
.mx-wd.we span{color:var(--brand)}
.mx-wd.today{background:var(--brand-light)}
.mx-wd.today span{color:var(--brand-dark)}
.mx-row{display:contents}
.mx-name{display:flex;align-items:center;gap:6px;background:var(--tint-6);border-radius:7px;
  padding:5px 7px;font-size:11.5px;border-bottom:1px solid var(--line);min-height:42px}
.mx-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-name .tm-avatar.sm{width:24px;height:24px;font-size:11px;flex-shrink:0}
.mx-c{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;
  border-bottom:1px solid var(--line);border-radius:5px;padding:4px 3px;min-height:42px}
.mx-chip{display:block;width:100%;border-left:3px solid var(--c,var(--brand));border-radius:4px;
  background:var(--tint-4);padding:2px 4px;font-size:10px;line-height:1.35;font-weight:600;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.mx-chip.wk{--c:#ec4899;background:#fce7f3;color:#9d174d}
.mx-chip.sh{--c:#6366f1;background:#e0e7ff;color:#4338ca}
.mx-chip.fd{--c:#8b6fd4;background:#f3e8ff;color:#6d28d9}
.mx-chip.st{--c:#0ea5e9;background:#e0f2fe;color:#0369a1}
.mx-chip.lv{--c:#14b8a6;background:#ccfbf1;color:#0f766e}
.mx-chip.bl{--c:#78716c;background:#efeeec;color:#57534e}
.mx-chip.od{--c:#ea580c;background:#ffedd5;color:#9a3412}
/* 以下四个是「需求 X 档期类型自定义」扩出来的预设色（翠绿/琥珀/朱红/暖橙）。
   格式与上面六条保持完全一致 —— 后端按 PRESET_COLORS 反查 mxCls 时用的就是这些类名，
   漏写一个会让店主选到该颜色后矩阵 chip 退回默认色（颜色看起来"没生效"）。 */
.mx-chip.gr{--c:#10b981;background:#d1fae5;color:#047857}
.mx-chip.am{--c:#f59e0b;background:#fef3c7;color:#b45309}
.mx-chip.rd{--c:#ef4444;background:#fee2e2;color:#b91c1c}
.mx-chip.or{--c:#f97316;background:#ffedd5;color:#9a3412}
.mx-chip.conflict{background:#fef2f2;color:#b91c1c;border-left-color:#ef4444;box-shadow:0 0 0 1px #fecaca inset}
.mx-more{font-size:9.5px;color:var(--muted);align-self:center}

/* 查询结果操作条（导出 / 打印）与冲突高亮 */
.q-actions{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.q-actions .btn{flex:1 1 auto;min-width:0}
.q-conflict-tip{margin-top:10px;padding:9px 12px;border-radius:10px;background:#fef2f2;color:#b91c1c;
  font-size:12.5px;line-height:1.5;border:1px solid #fecaca}
.q-conflict-tip b{color:#991b1b}
.stat.warn{background:#fef2f2;border-color:#fecaca}
.stat.warn .v{color:#b91c1c}
.slot-item.conflict{border-left:3px solid #ef4444;background:#fff7f7}
.slot-item.conflict .q-conf{color:#dc2626;font-weight:600;font-size:11px;margin-left:6px}
.q-wchip.conflict,.q-dot.conflict{outline:2px solid #ef4444;outline-offset:1px}

/* 档期冲突明细列表（弹窗内） */
.conflict-list{list-style:none;margin:0 0 4px;padding:0;max-height:240px;overflow:auto}
.conflict-list li{position:relative;padding:8px 10px 8px 26px;margin-bottom:6px;border-radius:9px;
  background:#fef2f2;color:#b91c1c;font-size:12.5px;line-height:1.5;border:1px solid #fecaca}
.conflict-list li::before{content:'•';position:absolute;left:11px;top:7px;color:#ef4444;font-weight:700}
.conflict-list li.hint{background:transparent;border:none;color:var(--muted);padding-left:10px}
.conflict-list li.hint::before{content:''}

@media (min-width:641px){
  .q-week-grid{grid-template-columns:96px repeat(var(--cols), minmax(0,1fr))}
  .q-wname{font-size:12.5px;flex-direction:row;justify-content:flex-start;gap:8px;padding:6px 10px}
  .q-wname .tm-avatar.sm{width:30px;height:30px;font-size:13px}
  .q-wchip{font-size:11.5px;padding:3px 6px}
  /* 桌面端：操作条按钮按内容宽度，不撑满整行；统计卡限制最大宽度更协调 */
  .q-actions .btn{flex:0 0 auto;min-width:132px;justify-content:center}
  #queryResult .stat-grid{justify-content:flex-start}
  #queryResult .stat{max-width:260px}
}

/* ---------------- 业绩 / 流水卡片（手机端表格的替代形态） ---------------- */
.perf-cards{display:flex;flex-direction:column;gap:10px}
.perf-card{border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--tint-7)}
.perf-head{display:flex;align-items:center;gap:10px}
.perf-name{flex:1;min-width:0;display:flex;flex-direction:column}
.perf-name b{font-size:14.5px}
.perf-name .hint{line-height:1.4}
.perf-comm{text-align:right;flex-shrink:0}
.perf-comm small{display:block;font-size:10.5px;color:var(--muted)}
.perf-comm b{font-size:16px;color:var(--brand-dark)}
.perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}
.perf-grid div{background:#fff;border-radius:9px;padding:8px 4px;text-align:center}
.perf-grid i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.perf-grid b{font-size:12.5px}

.pay-list{display:flex;flex-direction:column}
.pay-item{padding:11px 2px;border-bottom:1px solid var(--line)}
.pay-item:last-child{border-bottom:none}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pay-main{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.pay-cust{font-size:14px}
.pay-amt{font-size:15px;white-space:nowrap}
.pay-sub{margin-top:4px}
.pay-sub .mono{font-size:10.5px;color:var(--muted)}
.pay-sub .hint{font-size:10.5px;white-space:nowrap}

/* 客户详情「服务历史」卡片（手机端表格的替代形态）
   桌面表格在 356px 宽下被压成 5 列、每行折 2-3 行；改卡片后一层放下。
   用分隔线而非边框：20 条记录不能变成 20 个盒子。
   注意：前缀用 sh-（service history），不能叫 .svc-* —— 那组 class 是
   shop.css 里「服务项目」页在用的，会串样式。 */
.sh-list{display:flex;flex-direction:column}
.sh-item{padding:9px 2px;border-bottom:1px solid var(--line)}
.sh-item:last-child{border-bottom:none}
.sh-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;line-height:1.35}
.sh-name{font-size:14px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-amt{font-size:15px;font-weight:700;color:var(--brand-dark);white-space:nowrap;flex-shrink:0}
.sh-sub{margin-top:2px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sh-sub .hint{font-size:11px;line-height:1.5;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 状态标签在 11px 小字旁显得过高，收一下内边距让两行贴紧 */
.sh-sub .tag{flex-shrink:0;padding:1px 7px;font-size:10.5px;line-height:1.6}

/* =========================================================
   响应式 —— 全部规则包裹在媒体查询内，≥901px 完全不受影响
   ========================================================= */

/* ---------- ≤900px：iPad 竖屏 / 大屏手机横屏 ---------- */
@media(max-width:900px){
  .content{padding:18px 18px 56px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ---------- ≤640px：标准手机（375~430px）· 小程序风格 ---------- */
@media(max-width:640px){
  /* 侧边栏改为侧滑抽屉（手机端主导航已交给底部 TabBar，抽屉仅作备用） */
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;width:78%;max-width:300px;
    z-index:80;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:var(--shadow-lg);will-change:transform;
  }
  .sidebar.open{transform:translateX(0)}

  .scrim{
    display:block;position:fixed;inset:0;background:rgba(var(--overlay-rgb),.5);
    z-index:79;opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  .scrim.show{opacity:1;pointer-events:auto}

  /* 导航项加大可点区域（触摸友好） */
  #nav a{min-height:44px;font-size:14.5px;padding:11px 14px}

  .main{width:100%}

  /* 小程序式顶栏：吸顶 + 毛玻璃；标题独占一行居中，操作按钮独占一行，
     避免「标题与按钮同层重叠」（真机 412px 双按钮时标题被盖的回归） */
  .topbar{
    position:sticky;top:0;z-index:50;
    display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;
    padding:10px 12px 9px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .topbar h2{
    flex:1 1 100%;
    font-size:16.5px;font-weight:600;margin:0;
    text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar-actions{flex:1 1 100%;gap:8px;justify-content:flex-end}
  .topbar-actions:empty{display:none}   /* 无操作按钮的页面恢复单行顶栏 */
  .topbar-actions .btn{padding:7px 11px;font-size:12.5px;border-radius:9px;white-space:nowrap}

  /* 底部给 TabBar 留位（含 iOS 安全区） */
  .content{padding:13px 13px calc(86px + env(safe-area-inset-bottom))}

  .card{padding:14px;border-radius:16px}
  .card-head{flex-wrap:wrap;gap:9px}

  /* 统计卡：两列大卡（原单列竖条挤压难看） */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px 13px;border-radius:14px}
  .stat .v{font-size:22px}
  .stat .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 卡片收窄，「›」同步缩小并贴近边角 */
  .dash-go{top:9px;right:10px;font-size:15px}
  .dash-sub{border-bottom:none}

  /* 筛选栏：搜索一行，下拉 + 查询 + 重置 一行 */
  .filters{flex-wrap:wrap;gap:8px}
  .filters input{flex:1 1 100%;min-width:0;width:auto}
  .filters select{flex:1.4 1 0;min-width:0;width:auto}
  .filters button{flex:1 1 0;width:auto}
  .filters .hint{flex-basis:100%;text-align:right;margin-left:0!important}

  /* 分页纵向堆叠 */
  .pager{flex-direction:column;gap:10px;align-items:stretch}
  .pager-btns{justify-content:space-between}
  .pager-btns .btn{flex:1}

  /* 弹窗：底部 Sheet + 抓手条 + 标题居中 */
  .modal-mask{padding:0;align-items:flex-end}
  .modal{
    position:relative;
    max-width:100%;width:100%;max-height:92vh;
    border-radius:20px 20px 0 0;padding:28px 16px calc(18px + env(safe-area-inset-bottom));
    animation:sheetUp .26s ease;
  }
  .modal::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:var(--tint-line-2);
  }
  .modal.wide{max-width:100%}
  .modal h3{text-align:center;font-size:16px;margin-bottom:14px}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal-foot{flex-direction:column-reverse;gap:9px;margin-top:18px}
  .modal-foot .btn{width:100%}

  /* 表单单列（修掉 minmax(220px,1fr) 在窄屏的溢出） */
  .form-grid{grid-template-columns:1fr;gap:12px}

  /* 表格横向滚动提示 */
  .table-wrap{-webkit-overflow-scrolling:touch}

  .chart{height:96px;gap:3px}
  .chart-x{font-size:9px}

  /* 行内小按钮撑到 36px 高，保住触摸可点区 */
  .btn-xs{padding:8px 12px;font-size:12.5px;border-radius:8px}

  /* 底部 TabBar：毛玻璃 + 品牌色高亮 */
  #tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  #tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:46px;padding:2px 0;color:var(--muted);text-decoration:none;
    -webkit-tap-highlight-color:transparent;transition:.15s;
  }
  #tabbar a i{font-style:normal;font-size:20px;line-height:1;filter:grayscale(1);opacity:.6}
  #tabbar a span{font-size:10.5px;line-height:1}
  #tabbar a.active{color:var(--brand);font-weight:600}
  #tabbar a.active i{filter:none;opacity:1;transform:translateY(-1px)}
  #tabbar a:active{transform:scale(.92)}

  /* 矩阵总览：手机端收窄化妆师列，格子横向滚动 */
  .mx-grid{grid-template-columns:64px repeat(var(--cols), minmax(56px,1fr))}
  .mx-name{font-size:11px;padding:4px 5px;gap:4px}
  .mx-wd span{font-size:11px}
  .mx-chip{font-size:9.5px;padding:1px 3px}
}

/* ---------- ≤420px：小屏（320~375px） ---------- */
@media(max-width:420px){
  .content{padding:12px 11px calc(86px + env(safe-area-inset-bottom))}
  .card{padding:13px;margin-bottom:12px}
  .stat{padding:12px}
  .stat .v{font-size:20px}
  .stat .k{font-size:11px}
  .btn{padding:10px 14px}
  .chart{height:84px}
  .chart .bar span{display:none}
  /* 小屏业绩卡 4 列放不下，改 2×2 */
  .perf-grid{grid-template-columns:repeat(2,1fr)}
}