/* ============================================================
   Osphere · 医美管理系统样式
   设计语言：高端、清爽、医美机构感
   主色：深青绿 #1e6b6b（专业 + 安抚）
   辅色：玫瑰金 #b87333（高级感）
   ============================================================ */

:root {
  --ink: #1f2a37;
  --ink-soft: #4a5663;
  --soft: #8693a3;
  --line: #e3e7ec;
  --bg: #f7f5f0;
  --bg-card: #ffffff;
  --primary: #1e6b6b;
  --primary-dark: #144848;
  --primary-light: #e6f1f0;
  --accent: #b87333;
  --accent-soft: #f5ebe0;
  --success: #2d8659;
  --warn: #b87333;
  --danger: #b54040;
  --shadow: 0 2px 8px rgba(20,30,40,0.06);
  --shadow-lg: 0 6px 24px rgba(20,30,40,0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

/* ===== Header ===== */
.osphere-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}
.osphere-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.osphere-brand .brand-mark {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--primary);
}
.osphere-brand .brand-sub {
  font-size: 11px;
  color: var(--soft);
  letter-spacing: 0.2em;
  margin-top: 4px;
}
.page-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-left: 8px;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.badge {
  white-space: nowrap;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.btn-text {
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--soft);
  padding: 6px 10px;
  font-size: 14px;
}
.btn-text:hover { color: var(--primary); }
/* v90 顶栏最左边的「首页」；v92 老板嫌不明显 → 实心深绿按钮、白字、大一点 */
.btn-home {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  color: #fff;
  background: var(--primary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-home:hover, .btn-home:active { background: var(--primary-dark); color: #fff; }
@media (max-width: 760px) {
  .btn-home { padding: 6px 12px; font-size: 15px; min-height: 40px; }
}
@media (max-width: 1024px), (pointer: coarse) {
  .osphere-header .osphere-brand { display: none; }   /* 手机 / iPad 上「首页」已经能回首页，省出地方给标题 */
}

/* ===== 容器 ===== */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.page-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

/* ===== 卡片 ===== */
.card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card h2, .card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--ink);
  font-weight: 500;
}
.card h2 { font-size: 18px; }
.card h3 { font-size: 16px; }

/* ===== 按钮 ===== */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  text-align: center;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn:disabled { background: var(--soft); cursor: not-allowed; }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #95591f; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8e2929; }
.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: #ebe9e3; }
.btn-block { display: block; width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 17px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ===== 表单 ===== */
label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
input[type=text], input[type=number], input[type=tel],
input[type=date], input[type=datetime-local], input[type=password],
input[type=email], input[type=search], input[type=time], input[type=url],
input:not([type]),
select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s;
}
/* 搜索框去掉浏览器自带的内凹边框，和其它输入框一个样 */
input[type=search] { -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-group { margin-bottom: 14px; }

/* ===== 表格 ===== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th {
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
}
tr:hover td { background: #fafaf7; }
.tbl-empty { text-align: center; color: var(--soft); padding: 32px; }

/* ===== 状态 chip ===== */
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.chip-scheduled { background: #eef3f8; color: #2c5878; }
.chip-checked_in { background: #fff4d9; color: #a06d00; }
.chip-in_service { background: var(--primary-light); color: var(--primary-dark); }
.chip-completed { background: #e3f1ea; color: var(--success); }
.chip-paid { background: #d9efe0; color: #1f6b3f; }
.chip-cancelled { background: #f1e3e3; color: var(--danger); }
.chip-waiting { background: #f3eada; color: #8a5a00; }

/* ===== 统计卡片 ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.stat-card .label { font-size: 13px; color: var(--soft); margin-bottom: 6px; }
.stat-card .value { font-size: 26px; font-weight: 600; color: var(--ink); }
.stat-card .sub { font-size: 12px; color: var(--soft); margin-top: 4px; }
.stat-card.accent { border-left-color: var(--accent); }
.stat-card.success { border-left-color: var(--success); }
.stat-card.warn { border-left-color: var(--warn); }

/* ===== 登录页 ===== */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-box {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}
.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo .name {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--primary);
}
.auth-logo .sub {
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--soft);
  margin-top: 6px;
}
.big-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.big-btn:hover { background: var(--primary-dark); text-decoration: none; }
.big-btn.alt { background: var(--accent); }
.big-btn.alt:hover { background: #95591f; }
.big-btn.ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.big-btn.ghost:hover { background: var(--primary-light); }

/* ===== Modal ===== */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-box {
  background: var(--bg-card);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.modal-box.wide { max-width: 800px; }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--soft); padding: 4px 8px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ===== Tab ===== */
.tabs {
  display: flex;
  gap: 0;
  /* 底线用内阴影画：不占高度，tab 不用 -2px 负边距，就不会多出 2px 竖向滚动条 */
  box-shadow: inset 0 -2px 0 var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
}
.tab {
  padding: 12px 22px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}
.tab:hover:not(.active) { color: var(--ink); }

/* ===== List items ===== */
.list-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  gap: 14px;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: #fafaf7; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.list-item .li-sub { font-size: 13px; color: var(--soft); }
.list-item .li-action { flex-shrink: 0; }

/* ===== Grid for service buttons ===== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.service-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.service-btn:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.service-btn.selected { background: var(--primary-light); border-color: var(--primary); }
.service-btn .sb-name { font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.service-btn .sb-price { font-size: 13px; color: var(--accent); font-weight: 500; }

/* ===== Helper ===== */
.muted { color: var(--soft); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }
.flex { display: flex; gap: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gap-2 { gap: 16px; }

/* 长网址 / key 不撑破卡片 */
code { overflow-wrap: anywhere; }
/* 只在手机上显示的小东西（默认藏） */
.show-phone { display: none; }
/* iPad 竖屏和手机上藏掉的次要列（例如同意书的英文 key）；表格格子左右边距小一点，多放得下一列 */
@media (max-width: 1024px) {
  .hide-tab { display: none !important; }
  .tbl-wrap th, .tbl-wrap td { padding-left: 8px; padding-right: 8px; }
}
/* 宽表格外面套这个：表格自己左右滑，不把整页撑宽 */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ===== 响应式（iPad/手机） ===== */
@media (max-width: 760px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .osphere-header { padding: 10px 14px; gap: 10px; }
  .osphere-brand .brand-mark { font-size: 18px; }
  .osphere-brand .brand-sub { display: none; }
  .page-title { font-size: 15px; }
  .page, .page-narrow { padding: 14px; }
  .card { padding: 16px; }
  .stat-card .value { font-size: 22px; }
}

/* ============================================================
   v77 手机 / iPad 排版（桌面不受影响）
   TOUCH = 手机 + iPad（竖屏按宽度，横屏按触屏）
   ============================================================ */
@media (max-width: 1024px), (pointer: coarse) {
  /* 保险：哪个元素再宽也不把整页撑出横向滚动（手机上一撑宽，整页和弹窗都会歪） */
  html, body { overflow-x: clip; }

  /* 标题栏：副标题藏掉，标题一行省略，右边按钮不折行 */
  .osphere-brand .brand-sub { display: none; }
  .page-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-right { flex-shrink: 0; }
  .header-right > * { white-space: nowrap; }

  /* 按钮：实心 / 描边 / 灰底同一行一样高；小按钮够手指点 */
  .btn { border: 1.5px solid transparent; line-height: 1.25; max-width: 100%; }
  .btn-outline { border-color: var(--primary); }
  .btn-ghost { border-color: var(--line); }
  /* 小按钮在一行里被挤时不再一字一行：至少保持一行字那么宽（字本身比容器还长才折行） */
  .btn-sm { min-height: 36px; padding: 8px 14px; min-width: -webkit-fit-content; min-width: fit-content; }
  .chip { white-space: nowrap; }
  .modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  input[type=checkbox], input[type=radio] { width: 20px !important; height: 20px !important; flex-shrink: 0; accent-color: var(--primary); vertical-align: middle; }
  /* 宽表格表头：中文词不拆开（不再一个字一行），中英之间的空格处照常换行，
     表格不会因为一行写不下的表头被撑得比屏幕宽，最右边的「操作」列还看得到 */
  .tbl-wrap th, .tbl-wrap td code { word-break: keep-all; overflow-wrap: normal; }
  .tbl-wrap th { white-space: normal; }
  /* 表格里的按钮不折成一字一行；一格里按钮多了就上下排，不把表格撑宽 */
  .tbl-wrap td .btn { white-space: nowrap; }
  .tbl-wrap td .flex { flex-wrap: wrap; }
  .tbl-wrap td.text-right .flex { justify-content: flex-end; }
  /* 表格里的 key（英文代号）不在中间断开 */
  .tbl-wrap td code { white-space: nowrap; }

  /* 输入框 / 下拉统一高度 */
  input[type=text], input[type=number], input[type=tel], input[type=email], input[type=search],
  input[type=time], input[type=url], input[type=date], input[type=datetime-local], input[type=password],
  input:not([type]), select { min-height: 42px; }

  /* 列表行：信息栏不被按钮挤成一条，按钮多了自己换行、靠右 */
  .list-item { flex-wrap: wrap; }
  .list-item .li-main { flex: 1 1 220px; }
  .list-item .li-action { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-left: auto; max-width: 100%; min-width: 0; flex-shrink: 1; }

  /* 弹窗：标题和底部按钮钉住，长表单不用滚到底找「保存」 */
  .modal-box { --mpad: 24px; }
  .modal-head {
    position: sticky; top: calc(-1 * var(--mpad)); z-index: 3;
    background: var(--bg-card);
    margin: calc(-1 * var(--mpad)) calc(-1 * var(--mpad)) 14px;
    padding: 12px var(--mpad) 10px;
    gap: 8px;
  }
  .modal-head h2 { min-width: 0; }
  .modal-foot {
    position: sticky; bottom: calc(-1 * var(--mpad)); z-index: 3;
    background: var(--bg-card);
    margin: 20px calc(-1 * var(--mpad)) calc(-1 * var(--mpad));
    padding: 12px var(--mpad) calc(12px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
  }
  .modal-foot .btn { white-space: nowrap; }
  /* 底部只有「取消预约 / 删除」这类危险按钮的弹窗：不钉住，跟在表单最后（和电脑上一样） */
  .modal-foot.no-stick { position: static; margin: 20px 0 0; padding: 16px 0 0; background: none; }
  /* 预约详情的「保存修改 / 客户档案」那一行：往下滑表单时钉在弹窗底部，保存一直够得着 */
  .modal-box .save-row {
    position: sticky; bottom: calc(-1 * var(--mpad)); z-index: 3;
    background: var(--bg-card);
    margin-left: calc(-1 * var(--mpad)); margin-right: calc(-1 * var(--mpad));
    padding: 10px var(--mpad) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }

  /* 统计卡：标签折成两行时，同一排的数字仍然在同一高度（标签贴着数字，上面留空） */
  .stat-card .label { min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-end; }
  /* 工资表：钉住的员工名字那一列别被挤成一条，提醒小字缩小 */
  .tbl-sticky1 > tbody > tr > td:first-child:not([colspan]) { min-width: 150px; }
  .tbl-sticky1 > tbody > tr > td:first-child .muted { font-size: 11px; line-height: 1.3; }
  /* 日期范围：「自定义」换到下一行时不缩进 */
  .range-custom > span:first-child { margin-left: 0 !important; }
  /* 在店客人卡片：删除离档案远一点 */
  .q-actions > .q-del { margin-left: 8px; }
  /* 表格「操作」格：红色删除离编辑远一点，手指不容易点错 */
  .tbl-wrap td.text-right .btn-danger:not(:first-child) { margin-left: 12px !important; }
}

@media (max-width: 1240px), (pointer: coarse) {
  /* tab 栏：改成一格一格的按钮，自动折行，不再藏在右边滑不到 */
  .tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    box-shadow: none;
    overflow: visible;
  }
  .tab {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 9px 8px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    min-height: 42px;
    /* 中文词不拆开、几行一样长，不再出现「列 / 表」「Follow- / ups」这种断法 */
    word-break: keep-all;
    text-wrap: balance;
  }
  .tab.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
  /* 设置里的子 tab（宽一点的电脑窗口也一样）：圆角小按钮，不像第二排主菜单 */
  .tabs.settings-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .settings-subtabs > .tab { flex: 0 0 auto; border-radius: 18px; min-height: 38px; padding: 8px 14px; white-space: nowrap; }
}
/* iPad 横屏 / 窄电脑窗口：一行 4 个，每个字一行放得下 */
@media (min-width: 1025px) and (max-width: 1240px), (min-width: 1025px) and (pointer: coarse) {
  .tabs:not(.settings-subtabs) { grid-template-columns: repeat(auto-fit, minmax(calc(25% - 6px), 1fr)); }
}

/* iPad 竖屏 + 手机：tab 一行最多 4 个 */
@media (max-width: 1024px) {
  .tabs { grid-template-columns: repeat(auto-fit, minmax(calc(25% - 6px), 1fr)); }
}
/* iPad：9 张统计卡 = 3×3，不留单独一张 */
@media (min-width: 761px) and (max-width: 1240px), (min-width: 761px) and (pointer: coarse) {
  .stats-grid.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 弹窗 / 表单里同一行的格子：有的标签折成两行时，输入框仍然在同一高度 */
  .modal-box .form-row > .form-group:has(> label:first-child),
  .modal-box .form-row-3 > .form-group:has(> label:first-child),
  .form-row-3 > .form-group:has(> label:first-child) {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(calc(2.6em + 6px), auto); align-content: start;
  }
  .modal-box .form-row > .form-group > label:first-child,
  .modal-box .form-row-3 > .form-group > label:first-child,
  .form-row-3 > .form-group > label:first-child { align-self: end; }
}
@media (min-width: 761px) {
  .stats-grid.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 手机 ===== */
@media (max-width: 760px) {
  /* iPhone 点进 16px 以下的输入框会自动放大、放大后不缩回 → 整页看着歪 */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.ck-input):not(.sign-input),
  select, textarea { font-size: 16px !important; }

  /* 标题栏一行放下：标题省略，角色徽章藏掉（右边只留语言 + 退出） */
  .osphere-header { padding: 8px 12px; gap: 8px; }
  .osphere-brand .brand-mark { font-size: 16px; letter-spacing: 0.12em; }
  .page-title { font-size: 14px; margin-left: 0; }
  .header-right { gap: 2px; }
  .header-right .badge { display: none; }
  .header-right .btn-text { padding: 8px 6px; font-size: 13px; min-height: 40px; }

  .tab { font-size: 13px; padding: 7px 4px; line-height: 1.2; }
  /* 主菜单一行 3 个：每格够放下「在店 + 列表」，中英各一行 */
  .tabs:not(.settings-subtabs) { grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - 6px), 1fr)); }

  /* 标题 + 按钮那种行：放不下就换行，不互相挤 */
  .flex-between { flex-wrap: wrap; gap: 8px; }
  /* 折到下一行的金额 / 按钮仍然靠右 */
  .flex-between > :last-child:not(:first-child) { margin-left: auto; }
  .flex-between > :last-child:not(:first-child):not(.btn):not(button) { text-align: right; }

  /* 表单：一列排时间距统一 14px */
  .form-row > .form-group, .form-row-3 > .form-group { margin-bottom: 0; }

  /* 统计卡片两列，别一张占一整行 */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 12px 14px; min-width: 0; overflow-wrap: anywhere; }
  .stat-card .label { font-size: 12px; }
  .stat-card .value { font-size: 20px; }
  .stat-card .sub { font-size: 11px; }
  /* 单数张时最后一张占整行，不留半边空 */
  .stats-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 选名字：两列 */
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-btn { padding: 14px 8px; }

  /* 弹窗从底部弹出，占满宽度 */
  .modal-mask { padding: 8px; }
  .modal-mask:has(> .modal-box) { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box.wide {
    --mpad: 16px;
    max-width: 100% !important;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .modal-head h2 { font-size: 17px; }
  .modal-foot { margin-top: 16px; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; min-height: 44px; }
  /* 只有「先不录 / 取消」+ 主按钮两个时：灰按钮窄一点，两个排一行，底栏不占半屏 */
  .modal-foot > .btn-ghost:first-child:nth-last-child(2) { flex: 0 1 34%; min-width: 0; white-space: normal; padding-left: 8px; padding-right: 8px; line-height: 1.2; }
  .modal-foot > .btn-ghost:first-child:nth-last-child(2) + .btn {
    flex: 1 1 0; min-width: 0; white-space: normal; padding-left: 10px !important; padding-right: 10px !important;
  }
  /* 长占位字不出滚动条；输入框里放不下的占位字用 … 结尾，看得出还有字 */
  textarea { min-height: 72px; }
  input[type=text], input[type=search], input:not([type]), select { text-overflow: ellipsis; }
  /* 取消预约 / 删除记录：两个一样宽排一行（字长就折两行），不再一大一小参差靠右 */
  .modal-foot.no-stick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-foot.no-stick .btn { min-height: 44px; white-space: normal; }
  .modal-foot.no-stick > .btn:only-child { grid-column: 2; }

  /* 列表行按钮换到下一行时：每一行按钮铺满，不再参差不齐 */
  .list-item .li-action > .btn { flex: 1 1 auto; }

  /* 工资表员工名字列：手机上稍窄一点，给右边的数字留地方 */
  .tbl-sticky1 > tbody > tr > td:first-child:not([colspan]) { min-width: 128px; }
  /* 设置里限宽的输入框（老板密码）：手机上和上面的框一样宽 */
  .card > .form-group[style*='max-width'] { max-width: none !important; }

  /* 只在宽屏显示的小东西 */
  .hide-phone { display: none !important; }
  .show-phone { display: inline; }
}

/* ============================================================
   工作台 tech.html
   ============================================================ */
/* 订单行：时间 | 名字 + 项目 | 按钮。时间和名字顶端对齐 */
.list-item.ord-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
}
.ord-row > .ord-actions { justify-content: flex-end; }
.q-actions { flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-add-row > .btn { flex: 0 1 auto; }
@media (max-width: 1024px) {
  .list-item.ord-row { align-items: start; }
  .ord-row > .ord-time { padding-top: 1px; }
  /* 按钮一行放不下 → 第二行，从名字那一列开始 */
  .ord-row > .ord-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .list-item.ord-row { row-gap: 10px; }
  /* 状态 + 没来/改单 一行，主按钮（接单 / 录单）下一行等宽铺满 */
  .ord-row > .ord-actions { grid-column: 1 / -1; gap: 0 8px !important; }
  .ord-actions > .chip { order: 0; margin-right: auto; }
  .ord-actions > .btn-sm { order: 1; }
  .ord-actions::before { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .ord-actions > .btn:not(.btn-sm) {
    order: 3; flex: 1 1 0; margin-top: 8px; min-height: 44px; white-space: nowrap;
    padding: 10px 12px !important; font-size: 15px !important;
  }
  /* 在店客人卡片：主按钮整行，档案 + 删除 第二行，删除离档案远一点 */
  .q-actions > .q-main { flex: 1 1 100% !important; min-height: 48px; }
  .q-actions > .q-prof { flex: 1 1 0; min-height: 40px; }
  .q-actions > .q-del { flex: 0 0 52px; min-height: 40px; margin-left: 8px; }
  /* 录单：搜索框占一整行，卖产品 / 卖套餐 第二行平分 */
  .rec-add-row > input { flex: 1 1 100% !important; }
  .rec-add-row > .btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 14px; min-height: 44px; white-space: normal !important; }
  /* 搜索结果：一条一行，整齐的列表 */
  .rec-hits { flex-direction: column; }
  .rec-hits > .btn { width: 100%; text-align: left; white-space: normal; padding: 10px 12px; font-size: 14px !important; }
  /* 录单里每一项的字段：同一行的格子不额外加底边距 */
  .rec-row > .form-group { margin-bottom: 0; }
  .rec-staff > .form-group:nth-child(3) { grid-column: 1 / -1; }
  /* 「本店其他人的」折叠条：去掉框中框 */
  .others-card { padding: 0 !important; overflow: hidden; }
  .others-toggle { border: none !important; background: transparent !important; color: var(--ink) !important; border-radius: 12px !important; padding: 14px 16px !important; font-size: 15px !important; white-space: normal; }
  .others-hint { display: block; margin-left: 0 !important; margin-top: 2px; font-size: 13px; }
  /* 卡片标题后面的小提示换到下一行 */
  .h2-hint { display: block; margin-left: 0 !important; margin-top: 4px; font-size: 13px !important; }
  /* 日期条：「+ 散客」整行；前一天 | 日期 | 后一天 一行，「回到今天」下一行整行 */
  .day-bar > .btn { width: 100%; }
  .day-bar > .flex { width: 100%; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; }
  .day-bar > .flex > strong { text-align: center; }
  .day-bar > .flex > .btn:not(.btn-ghost) { grid-column: 1 / -1; min-height: 40px; }
  /* 我的业绩：时间段按钮 2×2 */
  .period-bar > .btn { flex: 1 1 40%; }
  .period-bar > span { flex-basis: 100%; text-align: right; }
}
/* 窄表格：格子边距小一点 */
@media (max-width: 760px) {
  .tbl-tight th, .tbl-tight td { padding: 8px 6px; }
}
/* 同一行的格子：标签折成两行时输入框仍然对齐 */
.rec-row { align-items: end; }
@media (max-width: 1024px), (pointer: coarse) {
  /* 在店客人卡片：同一排卡片的按钮底边对齐 */
  .q-card { display: flex; flex-direction: column; }
  .q-card > .q-actions { margin-top: auto !important; padding-top: 8px; }
  /* 小费谁收：两个按钮等宽并排（窄了就上下排） */
  .tip-goes { align-items: stretch !important; }
  .tip-goes > span:first-child { flex-basis: 100%; }
  .tip-goes > .btn { flex: 1 1 220px; min-width: 0; white-space: normal; }
  .rec-hits > .btn { white-space: normal; text-align: left; }
  .rec-row > .form-group { margin-bottom: 0; }
}

/* ============================================================
   lib.js 共用：套餐 / 排班
   ============================================================ */
/* 班表：横向滑动时员工名字那一列钉在左边 */
.sched-grid .sched-name { position: sticky; left: 0; z-index: 1; background: #fff; max-width: 140px; }
.sched-grid th.sched-name { background: var(--bg); }
@media (max-width: 1024px), (pointer: coarse) {
  /* 套餐编辑里的二选一按钮：两半一样宽 */
  .seg-btn { flex: 1 1 0; min-width: 0 !important; white-space: normal; }
}
@media (max-width: 760px) {
  .seg-row { display: grid !important; grid-template-columns: 1fr 1fr; }
  .seg-row > .btn { min-width: 0 !important; white-space: normal; }
}

/* ============================================================
   老板 boss.html
   ============================================================ */
/* 工资表：横向滑动时员工名字钉在左边 */
.tbl-sticky1 > thead > tr > th:first-child,
.tbl-sticky1 > tbody > tr > td:first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: #fff; }
.tbl-sticky1 > thead > tr > th:first-child { background: var(--bg); z-index: 2; }
/* v84 展开后的明细表（每天 / 每一单）在自己的框里横向滑，不再把整张表撑宽、把钉住的名字列撑到快占满屏幕 */
.tbl-sticky1 td[colspan] .tbl-wrap { width: 0; min-width: 100%; }
/* 勾选列表（员工技能等）：整齐的格子，每格够手指点 */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skill-grid > label { padding: 6px 4px; min-height: 36px; margin: 0; line-height: 1.3; }
/* 长名字（Microderm/Dermaplaning）在格子里换行，不顶出弹窗 */
.skill-grid > label { min-width: 0; overflow-wrap: anywhere; }
/* 宽屏照旧直接显示说明，手机上折起来 */
@media (min-width: 1025px) and (pointer: fine) { .fold-phone > summary { display: none; } }
/* 设置页：点了下面的子 tab（员工 / 项目 / 套餐 / 密码）后，主菜单的「⚙️ 设置」仍然亮着，知道自己在哪 */
.tabs:has(+ #tab-body .settings-subtabs) > .tab:last-child { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
@media (max-width: 1240px), (pointer: coarse) {
  .tabs:has(+ #tab-body .settings-subtabs) > .tab:last-child { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
}
@media (max-width: 1024px), (pointer: coarse) {
  /* 子 tab（工资 / 客户 / 项目 / 库存）：折行时变成一颗颗圆角按钮，不再像散落的灰字 */
  .subtabs { border-bottom: none !important; gap: 6px !important; }
  .subtabs > button {
    border: 1px solid var(--line) !important; border-radius: 18px; margin: 0 !important;
    padding: 8px 14px !important; background: var(--bg-card) !important; white-space: nowrap; min-height: 38px;
  }
  .subtabs > button.on { background: var(--primary-light) !important; border-color: var(--primary) !important; color: var(--primary-dark) !important; }
}
@media (max-width: 760px) {
  .range-presets { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; align-items: stretch !important; }
  .range-presets > .btn { width: 100%; min-width: 0; font-size: 12.5px; padding: 6px 4px; line-height: 1.25; }
  .range-custom { flex: 1 1 100%; min-width: 0; }
  /* 「自定义」标签单独一行，两个日期框各占一半，日期不再被截断 */
  .range-custom { flex-wrap: wrap !important; row-gap: 4px !important; }
  .range-custom > span:first-child { margin-left: 0 !important; flex-basis: 100%; }
  .range-custom > input { flex: 1 1 0; min-width: 0; width: auto !important; }
}

/* ============================================================
   前台 reception.html
   ============================================================ */
.cal-grid-card { max-height: calc(100dvh - 120px) !important; }
.banner-why summary { list-style-position: inside; }
/* 电脑上照旧直接展开说明（不显示「为什么？」那一行）；手机 / iPad 默认收起 */
@media (min-width: 1025px) and (pointer: fine) { .banner-why > summary { display: none; } }
/* 刷新按钮的 ⟳ 原来只有 13px，看着像个点 */
.cal-nav-info > .cal-refresh { font-size: 18px; line-height: 1; }
@media (max-width: 1024px), (pointer: coarse) {
  /* 日期导航：按钮、日期、门店一样高 */
  .cal-nav .btn-sm { min-height: 42px; }
  /* 当天概况一行放下，放不下整块换到下一行（不再剩一个 store 单独一行） */
  .cal-nav-info { flex-wrap: wrap; }
  .cal-nav-info > .cal-nav-sum { white-space: nowrap; }
  /* 刷新按钮：⟳ 放大，看得出是刷新 */
  .cal-nav-info > .cal-refresh { font-size: 24px; line-height: 1; padding-top: 2px; padding-bottom: 2px; }
}
@media (max-width: 760px) {
  .cal-nav-days { width: 100%; }
  /* 前一天 / 今天 / 后一天 三个一样宽排一行，日期框下一行整行 */
  .cal-nav-days > .btn { flex: 1 1 0; min-width: 0 !important; padding: 8px 4px; font-size: 13px; white-space: nowrap; }
  .cal-nav-days > input { flex: 1 1 100%; margin-left: 0 !important; width: 100% !important; }
  .cal-nav-info { flex-wrap: wrap; }
  .cal-nav-info > select { flex: 1 1 0; min-width: 0; }
  .cal-nav-info > span:first-of-type { display: none; }
  .cal-nav-info > .cal-nav-sum { order: 3; flex-basis: 100%; text-align: left !important; white-space: normal; }
  /* 日历卡片：时间 + 名字最多两行，字大一点 */
  .cal-appt:not(.compact) .cal-appt-l1 { font-size: 11.5px !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* 15-30 分钟的矮卡片只放得下一行：一行省略，不把第二行切半 */
  .cal-appt.compact .cal-appt-l1 { display: block; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .cal-appt .cal-appt-l2 { font-size: 11px !important; }
  /* 红 / 黄条：按钮整行靠左 */
  .banner-actions { margin-left: 0 !important; width: 100%; }
  .banner-actions > .btn { flex: 1 1 auto; }
  /* 预约详情：保存 / 客户档案 两个等宽；同意书按钮两列 */
  .save-row { display: grid !important; grid-template-columns: 1fr 1fr; }
  .save-row > .btn { width: 100%; min-width: 0; min-height: 44px; padding: 10px 8px; font-size: 14px; }
  .consent-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .consent-btns > .btn { width: 100%; min-width: 0; white-space: normal; }
  /* 在店中 / 客户列表：每行按钮排成整齐的两列，铺满整行 */
  .list-item .li-action.li-grid { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px !important; }
  .list-item .li-action.li-grid > .btn { width: 100%; min-width: 0; min-height: 40px; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.2; }
  /* 同意书模板表：手机上只剩图标的三个按钮排一行，不竖着叠成三层 */
  .tbl-wrap td .form-acts { flex-wrap: nowrap !important; gap: 4px !important; }
  .form-acts > .btn { padding-left: 8px; padding-right: 8px; min-width: 36px; }
  /* 客户档案头部：编辑 / 卖套餐 / 预约 三个一样宽一行 */
  .prof-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .prof-actions > .btn { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: normal !important; line-height: 1.2; }
}
/* 今日预约：手机上每个预约是一张小卡片（时间 名字 状态 / 项目 / 员工 / 到店登记 未到），
   不用横着滑到最右边才找到「到店登记」 */
@media (max-width: 760px) {
  .today-tbl, .today-tbl > tbody { display: block; width: 100%; }
  .today-tbl > thead { display: none; }
  .today-tbl > tbody > tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 3px; align-items: center;
    padding: 12px 2px; border-bottom: 1px solid var(--line);
  }
  .today-tbl > tbody > tr > td { border: none; padding: 0; background: none !important; min-width: 0; }
  .today-tbl > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; white-space: nowrap; }
  .today-tbl > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 500; overflow-wrap: anywhere; }
  .today-tbl > tbody > tr > td:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; }
  .today-tbl > tbody > tr > td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; font-size: 13px; color: var(--ink-soft); }
  .today-tbl > tbody > tr > td:nth-child(4) { grid-column: 2 / -1; grid-row: 3; font-size: 12px; color: var(--soft); }
  .today-tbl > tbody > tr > td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; text-align: left; }
  .today-tbl > tbody > tr > td:nth-child(6):has(> .muted) { display: none; }
  .today-tbl > tbody > tr > td:nth-child(6) > .flex { justify-content: stretch !important; gap: 8px !important; }
  .today-tbl > tbody > tr > td:nth-child(6) .btn { flex: 1 1 0; min-height: 42px; }
  .today-tbl > tbody > tr > td:nth-child(6) > .btn { width: 100%; }
}
/* iPad：列太多放不下的表格，最右边的「操作」列钉在右边，编辑 / 删除一直看得到，中间的列左右滑 */
@media (min-width: 761px) and (max-width: 1024px), (min-width: 761px) and (pointer: coarse) {
  .tbl-wrap > table > tbody > tr > td.text-right:last-child,
  .tbl-wrap > table > thead > tr > th.text-right:last-child {
    position: sticky; right: 0; z-index: 1; background: #fff;
    box-shadow: inset 1px 0 0 var(--line);
  }
  .tbl-wrap > table > thead > tr > th.text-right:last-child { background: var(--bg); z-index: 2; }
}
/* iPad 横屏：名字、时间一行，不折成「名 / 姓」两行（竖屏地方不够，照常折行） */
@media (min-width: 1025px) and (max-width: 1240px), (min-width: 1025px) and (pointer: coarse) {
  .today-tbl td:nth-child(1), .today-tbl td:nth-child(2) { white-space: nowrap; }
}
@media (max-width: 1024px), (pointer: coarse) {
  /* 在店中：红色删除离「客人走了」远一点，不容易误点 */
  .li-action > .btn-danger:not(:first-child) { margin-left: 8px; }
}
@media (max-width: 760px) {
  .list-item .li-action.li-grid > .btn-danger:not(:first-child) { margin-left: 0; }
}

/* ===== Print-friendly ===== */
@media print {
  .osphere-header, .header-right, .modal-mask { display: none !important; }
}

/* v84 窄手机（≤420px）：子 tab 长标签允许折行，不再顶出屏幕 */
@media (max-width: 420px) { .subtabs > button { white-space: normal !important; } }
/* v84 在店中两列按钮：「帮TA接单」占满一行，其余四个排成 2×2；同一行按钮一样高 */
@media (max-width: 1024px), (pointer: coarse) {
  .list-item .li-action.li-grid { align-items: stretch; }
  .list-item .li-action.li-grid > .li-span2 { grid-column: 1 / -1; }
}