:root {
    color-scheme: light;
    --ink: #1b2430;
    --muted: #6b7686;
    --line: #e3e8ee;
    --line-soft: #eef2f6;
    --surface: #ffffff;
    --canvas: #e9efed;
    --primary: #176a57;
    --primary-dark: #0f4c3e;
    --primary-soft: #e5f1ec;
    --accent: #c98732;
    --warm: #cc7a27;
    --danger: #a43b3b;
    /* 圆角 / 阴影做成令牌，全站（含后台）一起变，视觉才统一 */
    --radius: 12px;
    --radius-sm: 9px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(20, 34, 29, .06);
    --shadow: 0 4px 14px rgba(20, 34, 29, .08);
    --shadow-lg: 0 20px 48px rgba(12, 30, 24, .18);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; -text-size-adjust: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: var(--surface); box-shadow: 0 0 0 1px rgba(20, 34, 29, .05), 0 22px 60px rgba(20, 34, 29, .06); }
/* ---------- 后台（admin.js）顶部条 ---------- */
.topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.brand { color: var(--ink); font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -.2px; }
.icon-link, .text-link { color: var(--primary-dark); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 8px 0; }

/* ---------- 顾客端顶部品牌区 ---------- */
.app-header { position: relative; overflow: hidden; background: linear-gradient(135deg, #1c8168 0%, #14604e 58%, var(--primary-dark) 100%); color: #fff; }
/* 右上角一层极淡的高光，让大色块不那么平 */
.app-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 96% at 100% 0%, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 62%); pointer-events: none; }
.app-header-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px 16px; }
.app-header .brand { display: grid; gap: 2px; color: #fff; }
.app-header .brand:hover { color: #fff; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
/* 试运行标记：跟在店名后面，不抢主标题的字重 */
.brand-badge { display: inline-block; margin: 0 0 0 7px; padding: 1px 7px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .6px; vertical-align: 2px; }
.brand-note { color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 500; letter-spacing: .5px; }
.app-header-actions { display: flex; align-items: center; gap: 14px; }
.app-header-actions .text-link { color: #fff; opacity: .9; padding: 6px 0; }
.app-header-actions .text-link:hover { opacity: 1; text-decoration: underline; }
/* 三个快捷入口各占一列，永远不换行、不挤压品牌行 */
.app-nav { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-nav-item { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 4px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; background: rgba(255, 255, 255, .13); color: #fff; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.app-nav-item:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .72); }

/* 首页右下角的齿轮：管理入口 */
.admin-fab { position: fixed; right: 18px; bottom: 18px; z-index: 4; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(15, 76, 62, .16); border-radius: 50%; background: #fff; color: var(--primary-dark); box-shadow: 0 8px 22px rgba(15, 76, 62, .2); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.admin-fab:hover { background: var(--primary-soft); transform: translateY(-1px); box-shadow: 0 11px 26px rgba(15, 76, 62, .26); }
.main { padding: 30px 24px 40px; }
.main.has-fab { padding-bottom: 96px; }
.page-title { font-size: 26px; line-height: 1.28; margin: 0 0 6px; letter-spacing: -.3px; }
.subtle { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.62; }
.eyebrow { margin: 0 0 6px; color: var(--primary); font-size: 13px; font-weight: 700; }
.admin-hero { padding: 8px 0 2px; }
.admin-panel { display: grid; gap: 12px; }
.admin-main { padding-bottom: 48px; }
.admin-login-panel { max-width: 440px; }
.admin-page-head, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-page-head { align-items: flex-start; }
.admin-page-actions { display: flex; align-items: center; gap: 12px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.admin-metric { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8faf9; }
.admin-metric span { color: var(--muted); font-size: 12px; }
.admin-metric strong { font-size: 21px; line-height: 1.15; }
.admin-metric.good { background: var(--primary-soft); border-color: #b7dbce; color: var(--primary-dark); }
.admin-metric.good span { color: #2c6f5c; }
.admin-metric.warm { background: #fff4e3; border-color: #efd5ae; color: #825114; }
.admin-metric.warm span { color: #96601d; }
.admin-metric.danger { background: #fbeeee; border-color: #ebc8c8; color: var(--danger); }
.admin-metric.danger span { color: #8a3030; }
/* 日期 Tab 数量随预约窗口变化（本周一到周五，最多 5 个 + 今天），用 auto-fit 自适应换行 */
.admin-date-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 18px 0 14px; }
.admin-date-tab { display: grid; gap: 3px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; color: var(--ink); }
.admin-date-tab.active { border-color: var(--primary); background: var(--primary-soft); }
.admin-tab-top { display: flex; align-items: center; gap: 5px; }
.admin-tab-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.admin-date-tab.active .admin-tab-label { color: var(--primary-dark); }
/* 「已截止」单独占一行：窄屏下挤在标题行会把「今天」压成竖排 */
.admin-tab-note { justify-self: start; font-style: normal; font-size: 10px; line-height: 1.6; padding: 1px 4px; border-radius: 3px; background: #f0e2e2; color: var(--danger); white-space: nowrap; }
.admin-tab-count { margin-left: auto; flex: none; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.admin-tab-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.admin-day { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; }
.admin-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.admin-day-meta { display: grid; gap: 2px; }
.admin-day-meta strong { font-size: 15px; }
.admin-day-meta span { color: var(--muted); font-size: 12px; }
.admin-filter { display: flex; gap: 4px; }
.admin-filter button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; }
.admin-filter button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.admin-blocks { display: grid; gap: 10px; margin-top: 12px; }
.admin-block { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-block-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f6f9f7; border-bottom: 1px solid var(--line); }
.admin-block-head strong { font-size: 13px; }
.admin-block-range { color: var(--muted); font-size: 12px; }
.admin-block-load { margin-left: auto; color: var(--muted); font-size: 12px; }
.admin-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.slot-tile { display: grid; gap: 3px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: left; }
.tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tile-head strong { font-size: 13px; }
.tile-names { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-tile.level-1 { background: #fdebd3; border-color: #eda63c; }
.slot-tile.level-1 .tile-names { color: #8a4b06; font-weight: 600; }
/* level-2 = 超额占用：管理员登记的临时到访不受「一个时段 1 个名额」限制，
   occupied_count 可能大于 capacity（2026-09-30 第十六轮）。用深红标出来，
   别让管理员误以为这个时段还空着。 */
.slot-tile.level-2 { background: #8c1d1d; border-color: #6b1414; }
.slot-tile.level-2 .tile-head strong, .slot-tile.level-2 .tile-names { color: #fff; }
.tile-over { margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #fff; color: #8c1d1d; font-size: 10px; font-weight: 700; }
.admin-block-empty { margin: 0; padding: 12px 10px; color: var(--muted); font-size: 13px; }
.admin-break { padding: 5px 10px; border: 1px dashed #d5dce2; border-radius: var(--radius); background: #fafbfc; color: var(--muted); font-size: 12px; text-align: center; }
.admin-actions { margin-top: 10px; }
.admin-actions .button { min-height: 38px; padding: 7px 13px; }
.admin-empty { margin: 0; padding: 13px; color: var(--muted); font-size: 14px; }
.admin-walkin { border-top: 1px solid var(--line); padding-top: 22px; }
.admin-walkin-list { display: grid; gap: 6px; margin-top: 12px; }
.admin-walkin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-walkin-row small { display: block; color: var(--muted); font-size: 12px; }
.admin-walkin-meta { display: flex; align-items: center; gap: 8px; }
.sheet-meta { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.sheet-entry { padding: 11px 0; border-top: 1px solid #edf0f2; }
.sheet-entry:first-of-type { border-top: 0; padding-top: 0; }
.sheet-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-entry-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.sheet-hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
/* 本周额度提示（2026-09-30 需求 5）：一个手机号一周只服务一次、改签+取消 ≤ 3 次 */
.quota-hint { margin: 10px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8faf9; color: var(--muted); font-size: 13px; }
.quota-hint b { color: var(--text); }
.sheet-actions { margin-top: 14px; }
.admin-form { margin-top: 14px; padding: 15px; border: 1px solid #cfe0d9; border-radius: var(--radius); background: #f8fcfa; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 8px 0; font-weight: 600; font-size: 14px; }
.check-row input { width: 18px; height: 18px; }
.field select { min-height: 46px; width: 100%; border: 1px solid #bfc8d2; border-radius: 6px; padding: 10px 12px; background: #fff; color: var(--ink); }
.field select:focus { outline: 2px solid #a7d7c6; border-color: var(--primary); }
.notice { margin: 20px 0 0; padding: 12px 15px; border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--primary-soft); color: var(--primary-dark); font-size: 14px; line-height: 1.6; }
.section { margin-top: 26px; }
.section-title { margin: 0 0 12px; font-size: 16px; letter-spacing: -.1px; }
.section-heading .section-title { margin-bottom: 0; }
.section-note { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- 首页概览卡（2026-09-30 第十八轮新增） ---------- */
.overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.overview-item { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #fbfdfc, #f3f8f6); }
.overview-item span { color: var(--muted); font-size: 12px; }
.overview-item strong { color: var(--primary-dark); font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* 可预约日期是「本周一到周五」，天数会随星期变化（最多 5 天），用 auto-fit 自适应铺满 */
.date-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.date-button { min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); display: grid; place-content: center; gap: 1px; white-space: nowrap; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.date-button strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.date-button:hover { border-color: #9ecbb9; transform: translateY(-1px); box-shadow: var(--shadow); }
.date-button.active { border-color: var(--primary); background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); color: rgba(255, 255, 255, .9); box-shadow: 0 8px 18px rgba(15, 76, 62, .26); }
.date-button.active strong { color: #fff; }

/* ---------- 时段列表（第十八轮：按上午 / 下午分区 + 已过时段折叠） ---------- */
.slot-sections { display: block; }
.slot-group + .slot-group { margin-top: 16px; }
.slot-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.slot-group-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.slot-group-head h3::before { content: ''; display: inline-block; width: 3px; height: 13px; margin-right: 7px; border-radius: 2px; background: var(--primary); vertical-align: -1px; }
.slot-group-head span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.slot-past { margin-top: 10px; }
.slot-past > summary { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px dashed #d5dce2; border-radius: var(--radius-sm); background: #fafbfc; color: var(--muted); font-size: 13px; list-style: none; cursor: pointer; }
.slot-past > summary::-webkit-details-marker { display: none; }
.slot-past > summary::after { content: '展开'; margin-left: auto; color: var(--primary); font-weight: 600; }
.slot-past[open] > summary::after { content: '收起'; }
.slot-past[open] > summary { margin-bottom: 9px; }
.slot-past .slot-grid { opacity: .76; }

.slot-list, .slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot-button { min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; padding: 10px 12px; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.slot-button strong { display: block; font-size: 15.5px; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.slot-button span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.slot-button.available { border-color: #a4cfbf; background: #fbfefc; }
.slot-button.available:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.slot-button.selected { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-soft); }
/* 已被预约：一个时段只有 1 个名额，被约走就整体变成暖色，和后台「已约」的橙色呼应 */
.slot-button.booked { background: #fdebd3; border-color: #eda63c; }
.slot-button.booked strong { color: #8a4b06; }
.slot-button.booked span { color: #a76517; }
.slot-button.started { background: #f1f3f4; color: #78828c; border-color: #d9dee3; box-shadow: none; }
.slot-button.started strong { text-decoration: line-through; text-decoration-color: #b0b7bf; }
.slot-button.started span { color: #7c858f; }
.loading, .empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* 时段网格：窄屏 2 列，够宽就 3~4 列，16 个时段不必拖得很长 */
@media (min-width: 560px) {
    .slot-list, .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
    .slot-list, .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 12px; }
.field { display: grid; gap: 6px; margin-bottom: 15px; }
.field label { font-weight: 600; font-size: 14px; }
.field label small { color: var(--muted); font-weight: 400; }
.field input { min-height: 48px; width: 100%; border: 1px solid #c6cfd8; border-radius: var(--radius-sm); padding: 10px 13px; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 106, 87, .16); }
.field input[readonly] { background: #f2f5f3; color: var(--primary-dark); }
.field-error { min-height: 20px; color: var(--danger); font-size: 13px; }
.field-hint { color: var(--muted); font-size: 13px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* inline-flex 而不是默认的 inline-block：`<a class="button">` 这种链接按钮也要吃 min-height / width:100% */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 700; box-shadow: var(--shadow-sm); transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.button:active { transform: translateY(0); }
.button.primary { background: linear-gradient(180deg, #1a7a64 0%, var(--primary) 100%); color: #fff; border-color: #125b4a; }
.button.primary:hover { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); }
.button.secondary { background: #fff; color: var(--primary-dark); border-color: #a4cfbf; }
.button.secondary:hover { background: var(--primary-soft); }
.button.danger { background: #fff; color: var(--danger); border-color: #d9aaaa; }
.button.danger:hover { background: #fbf0f0; }
.button.warm { background: #fff; color: var(--warm); border-color: #e8cfa6; }
.button.warm:hover { background: #fdf6ec; }
.button.full { width: 100%; }

/* inset: 0 + flex 底部对齐：遮罩必须实实在在铺满整个视口。
   只用 min-height 时弹层会按自身高度撑开，盖不住下层的弹层（第九轮踩过的坑）。 */
.sheet { position: fixed; inset: 0; z-index: 5; display: none; background: rgba(12, 28, 23, .5); align-items: flex-end; overscroll-behavior: contain; }
.sheet.open { display: flex; }
.sheet-inner { width: min(100%, 720px); max-height: 100%; overflow-y: auto; margin: 0 auto; background: #fff; padding: 22px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.sheet-heading h2 { margin: 0; font-size: 18px; }
.close { width: 40px; height: 40px; background: #eef2f0; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-size: 24px; line-height: 1; transition: background .15s ease, color .15s ease; }
.close:hover { background: var(--primary-soft); color: var(--primary-dark); }

.appointment { display: grid; grid-template-columns: 100px 1fr; gap: 7px 14px; font-size: 15px; }
.appointment dt { color: var(--muted); }
.appointment dd { margin: 0; font-weight: 600; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status.booked { background: #fff3dd; color: #875107; }
.status.checked_in, .status.completed { background: var(--primary-soft); color: var(--primary-dark); }
.status.served { background: var(--primary-soft); color: var(--primary-dark); }
.status.pending { background: #fff3dd; color: #875107; }
.status.late { background: #fff3dd; color: #875107; }
.status.cancelled, .status.no_show { background: #f7e9e9; color: var(--danger); }

.copy-box { border: 1px dashed #97b8ab; background: #f7fcf9; border-radius: var(--radius-sm); padding: 12px; overflow-wrap: anywhere; font-size: 13px; color: var(--primary-dark); }
/* 恢复链接的时效说明：CSP 的 style-src 'self' 会丢掉内联 style，所以必须给类名 */
.recovery-note { margin-top: 10px; }
.message { margin: 15px 0; padding: 12px 15px; border-radius: var(--radius-sm); background: #f2f4f7; }
.message.error { background: #fbeeee; color: #8a3030; }
.message.success { background: var(--primary-soft); color: var(--primary-dark); }
.hidden { display: none !important; }

/* ---------- 改签 ---------- */
.section-subtitle { margin: 18px 0 10px; font-size: 15px; }
.form-actions { margin-top: 14px; }
.date-list.compact { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); overflow: visible; padding-bottom: 0; }
.date-button .date-note { color: var(--muted); font-size: 11px; font-style: normal; }
.date-button.current { border-color: var(--accent); }
.date-button:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 理发记录 ---------- */
.history-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.history-metric { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8faf9; }
.history-metric span { color: var(--muted); font-size: 12px; }
.history-metric strong { font-size: 20px; line-height: 1.2; }
.history-metric .history-last { font-size: 14px; padding-top: 5px; }
.history-list { display: grid; gap: 6px; margin-top: 14px; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.history-when { display: grid; gap: 2px; }
.history-when strong { font-size: 15px; }
.history-when small { color: var(--muted); font-size: 12px; }
.history-tag { flex: none; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- 使用规则页（rules.html） ---------- */
.rules .panel { margin-top: 14px; }
.rules .section-title { margin-bottom: 8px; }
.rules-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; }
.rules-list li { line-height: 1.65; }
/* 第十九轮：第三点下面挂了「待确认的四种归宿」二级清单 */
.rules-list .rules-sublist { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; }
.rules-list strong { color: var(--primary-dark); }
.rules-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- 后台服务记录（/admin/records/） ---------- */
.records-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.records-range { flex-wrap: wrap; }
.records-span { color: var(--muted); font-size: 13px; }
.records-hint { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.records-days { display: grid; gap: 14px; margin-top: 16px; }
.records-day { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.records-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f4f7f6; }
.records-weekday { margin-left: 6px; color: var(--muted); font-weight: 500; }
.records-day-count { color: var(--muted); font-size: 12px; }
.records-rows { display: grid; }
.records-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #f0f3f4; }
.records-row:first-child { border-top: 0; }
.records-time { color: var(--primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.records-who { display: grid; gap: 2px; min-width: 0; }
.records-who small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.records-tags { display: flex; align-items: center; gap: 6px; }
.records-tags em { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }

/* ---------- 候补（灵活安排）：顾客端 ---------- */
.identity-card { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #cfe0d9; border-radius: var(--radius); background: #f8fcfa; }
.identity-label { color: var(--muted); font-size: 12px; }
.identity-name { font-size: 19px; }
.identity-phone { color: var(--primary-dark); font-size: 14px; font-variant-numeric: tabular-nums; }
/* 「不是本人？更换手机号」已在第十七轮永久下线（设备身份锁定），
   取而代之的是一行说明，让顾客知道为什么改不了。 */
.identity-note { justify-self: start; color: var(--muted); font-size: 12px; }
/* 二次确认：整屏遮罩 + 居中对话框，完全盖住下层「确认预约」弹层 */
.sheet-top { z-index: 6; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 28, 23, .58); }
.sheet-top .sheet-inner { width: min(100%, 440px); margin: auto; padding: 22px 20px 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.sheet-top .sheet-heading { align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sheet-top .sheet-heading h2 { font-size: 19px; line-height: 1.4; }
.sheet-top .close { flex: none; width: 36px; height: 36px; margin: -4px -4px 0 0; border-radius: 50%; background: #eef2f0; color: var(--muted); font-size: 22px; }
.sheet-top .close:hover { background: var(--primary-soft); color: var(--primary-dark); }
.flex-hero { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid #d8e7e0; border-radius: 12px; background: linear-gradient(180deg, #f8fcf9, #f1f8f5); }
.flex-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #cfe3da; border-radius: 50%; background: #fff; color: var(--primary); }
.flex-icon svg { width: 20px; height: 20px; }
.flex-desc { margin: 0; color: #2c4239; font-size: 14.5px; line-height: 1.7; }
.flex-points { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.flex-points li { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfc; font-size: 13.5px; line-height: 1.62; }
.flex-points b { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.flex-points .point-yes b { background: var(--primary-soft); color: var(--primary-dark); }
.flex-points .point-no b { background: #fdf1de; color: #8c5109; }
.flex-actions { display: grid; gap: 10px; margin-top: 16px; }
.flex-foot { margin-top: 12px; }
.flex-note { margin-top: 18px; }
/* 老顾客换了设备：找回之后直接在弹层里显示真实预约时间 */
.recovery-card { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid #cfe0d9; border-radius: 10px; background: #f8fcfa; }
.recovery-card strong { color: var(--primary-dark); font-size: 15px; }
.recovery-card .actions { display: grid; gap: 8px; }
/* 当前预约卡片：找回预约 / 已识别且已有预约时展示 */
.booked-card { display: grid; gap: 6px; margin: 14px 0 0; padding: 14px; border: 1px solid #cfe0d9; border-radius: 10px; background: #f8fcfa; }
.booked-label { color: var(--muted); font-size: 12px; }
.booked-when { color: #16241d; font-size: 17px; font-variant-numeric: tabular-nums; }
.booked-card .status { justify-self: start; }
.booking-force { display: block; margin: 10px auto 0; font-size: 13px; }
/* 复制链接的兜底载体：贴屏幕左上角、1px、透明，不参与布局也不引起滚动 */
.copy-fallback { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.refresh-status { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.refresh-status.failed { color: var(--danger); }
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag.promoted { background: #fbe3d4; color: #9c4310; border: 1px solid #eab28c; }
.tag.flexible { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid #b7dbce; }
.panel.is-promoted { border-color: #e0a173; box-shadow: inset 3px 0 0 #d9761f; }
.promotion-note { margin: 8px 0 0; color: #9c4310; font-size: 13px; }
.promotion-alert { margin: 16px 0; padding: 14px 16px; border: 1px solid #e0913f; border-left-width: 4px; border-radius: var(--radius); background: #fff4e3; color: #7a4210; }
.promotion-alert strong { display: block; color: #8c4207; font-size: 16px; }
.promotion-alert p { margin: 8px 0 12px; font-size: 14px; line-height: 1.65; }
.promotion-alert b { color: #8c4207; }

/* ---------- 候补（灵活安排）：后台 ---------- */
.waitlist-alert { margin: 16px 0; padding: 12px 14px; border: 1px solid #e0913f; border-left-width: 4px; border-radius: var(--radius); background: #fff4e3; }
.waitlist-alert-head strong { display: block; color: #8c4207; font-size: 15px; }
.waitlist-alert-head span { display: block; margin-top: 3px; color: #96601d; font-size: 12px; }
.waitlist-people { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.waitlist-people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #efd5ae; border-radius: 6px; background: #fffdf9; }
.waitlist-when { display: flex; align-items: baseline; gap: 6px; }
.waitlist-when b { font-size: 14px; font-variant-numeric: tabular-nums; }
.waitlist-when em { color: #96601d; font-size: 11px; font-style: normal; }
.waitlist-nophone { color: var(--muted); font-size: 13px; }
.call-link { color: var(--primary-dark); font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--primary-dark); font-variant-numeric: tabular-nums; }
.call-link:hover { color: #8c4207; border-bottom-color: #8c4207; }
.waitlist-badge { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #d9761f; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-tab-promoted { flex: none; padding: 0 5px; border-radius: 10px; background: #d9761f; color: #fff; font-size: 11px; font-weight: 700; }
.tile-waitlist { justify-self: start; margin-top: 2px; padding: 1px 6px; border-radius: 999px; background: #d9761f; color: #fff; font-size: 10px; font-weight: 700; }
.slot-tile.has-waitlist { border-color: #d9761f; box-shadow: inset 0 0 0 1px #f0c9a4; }
.slot-tile.level-2.has-waitlist { box-shadow: inset 0 0 0 2px #f0a35b; }
.sheet-entry.is-promoted { background: #fffaf3; }
.sheet-entry-name { display: flex; align-items: center; }

/* —— 第十一轮：超级管理员 / 待确认 / 用户导入 / 违规提醒 —— */
.button.small { min-height: 30px; padding: 4px 12px; font-size: 13px; flex: none; width: auto; }

.pending-confirm { margin: 16px 0; padding: 12px 14px; border: 1px solid #b28b3d; border-left-width: 4px; border-radius: var(--radius); background: #fdf6e7; }
.pending-confirm-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.pending-confirm-head strong { color: #7a5b1a; font-size: 15px; }
.pending-confirm-head span { color: #96601d; font-size: 12px; }
.pending-confirm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pending-confirm-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #ead9ae; border-radius: 6px; background: #fffdf7; }
.pending-when b { font-size: 13px; font-variant-numeric: tabular-nums; color: #5f4a12; }
.pending-who { color: var(--muted); font-size: 13px; }
.pending-actions { display: flex; gap: 6px; flex: none; }

/* —— 第十二轮：应到未到（电话通知）提醒 —— */
.overdue-alert { margin: 16px 0; padding: 12px 14px; border: 1px solid #c96a4a; border-left-width: 4px; border-radius: var(--radius); background: #fdeeea; }
.overdue-alert-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.overdue-alert-head strong { color: #9c3d1d; font-size: 15px; }
.overdue-alert-head span { color: #b35a33; font-size: 12px; }
.overdue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.overdue-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #f0cdbf; border-radius: 6px; background: #fffaf8; }
.overdue-when b { font-size: 14px; font-variant-numeric: tabular-nums; color: #7a3a22; }
.overdue-who { display: flex; align-items: center; gap: 8px; }
.overdue-call { flex: none; padding: 2px 7px; border-radius: 999px; background: #c94f2c; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.overdue-wait { flex: none; padding: 2px 7px; border-radius: 999px; background: #d3d1c7; color: #5f5e5a; font-size: 11px; font-weight: 700; white-space: nowrap; }
.overdue-nophone { color: var(--muted); font-size: 13px; }

/* —— 第十三轮：候补补位面板 + 已过时时段灰底 —— */
.assign-panel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: #f6f8fb; }
.assign-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.assign-head strong { color: var(--primary-dark); font-size: 14px; }
.assign-head span { color: var(--muted); font-size: 12px; }
.assign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.assign-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #e3e8ef; border-radius: 6px; background: #fff; }
.assign-when b { font-size: 13px; font-variant-numeric: tabular-nums; color: #555; }
.assign-who { color: var(--muted); font-size: 13px; flex: 1; }
.slot-tile.is-past.level-0 { background: #ececea; border-color: #d8d6d0; }
.slot-tile.is-past.level-0 .tile-names, .slot-tile.is-past.level-0 .tile-head strong { color: #9a9a94; }
.slot-tile.is-past:not(.level-0) { opacity: 0.5; }
/* 2026-09-30 需求 5：「未服务」= 时间过了却没人来。它和「空闲」是两回事 ——
   空闲是「还能约」，未服务是「这单没做成」，所以给一个偏警示的浅红底，
   而不是跟过去的空时段一样灰掉。（写在 .is-past.level-0 之后，同权重靠顺序取胜） */
.slot-tile.is-past.is-unserved { background: #fdf3f3; border-color: #e8c9c9; }
.slot-tile.is-past.is-unserved .tile-names,
.slot-tile.is-past.is-unserved .tile-head strong { color: #8a3030; }
.slot-tile.is-past.is-unserved .tile-names { font-weight: 700; }
/* 第二十轮：时间过了、但**这单确实做完了**（已服务 / 迟到 / 爽约）的时段。
   它跟上面「未服务」的浅红底必须区分开 —— 那是「没人做」，这是「做完了」，
   给一个偏绿的底色 + 姓名后面挂一个 [已服务 / 迟到 / 爽约] 小标签。
   （同权重写在 .is-past.level-0 与 .is-unserved 之后，靠顺序取胜） */
.slot-tile.is-past.is-settled { background: #eef5f1; border-color: #cfe2d9; }
.slot-tile.is-past.is-settled .tile-names,
.slot-tile.is-past.is-settled .tile-head strong { color: #3f6f5f; }
.tile-names .tile-state { font-style: normal; font-weight: 700; }

/* ---------- 用户管理 / 数据查看（第十七轮） ---------- */
.admin-users-toolbar { display: grid; gap: 12px; }
.users-search { display: flex; gap: 8px; flex-wrap: wrap; }
.users-search input { flex: 1 1 200px; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.users-panel { display: grid; gap: 12px; }
.users-list { display: grid; }
.users-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid #f0f3f4; }
.users-row:first-child { border-top: 0; }
.users-seq { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.users-who { display: grid; gap: 2px; min-width: 0; }
.users-who small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.users-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.users-stats em { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.users-stats em.warn { color: #8a3030; border-color: #e3c2c2; }
.users-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.users-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.users-pager-note { margin: 0; color: var(--muted); font-size: 13px; }
.admin-user-form { display: grid; gap: 12px; }
.status.pending_confirm { background: #fdf0e3; color: #8a4b06; }
.status.voided { background: #f0f0ee; color: var(--muted); }

.admin-placeholder { text-align: center; padding: 40px 20px; }
.admin-import { display: grid; gap: 14px; }
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.import-file-label { cursor: pointer; }
.import-summary { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8faf9; }
.import-summary p { margin: 0; font-size: 14px; }
.import-summary strong { color: var(--primary-dark); }
.import-summary .import-ok { color: var(--primary-dark); font-weight: 700; }
.import-failed { margin: 10px 0 0; padding-left: 20px; color: #8a3030; font-size: 13px; }

.conduct-alert { margin: 16px 0; padding: 14px 16px; border: 1px solid #c0392b; border-left-width: 4px; border-radius: var(--radius); background: #fdeeee; color: #7a1f1f; }
.conduct-alert strong { display: block; color: #8c1d1d; font-size: 16px; }
.conduct-alert p { margin: 8px 0 12px; font-size: 14px; line-height: 1.65; }
.conduct-alert .button { flex: none; width: auto; }

@media (min-width: 600px) {
    .admin-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 宽屏时把齿轮贴到 .shell 的右下角，而不是浏览器窗口的最右边 */
@media (min-width: 800px) {
    .admin-fab { right: calc((100vw - 760px) / 2 + 18px); }
}

@media (max-width: 520px) {
    .main { padding: 20px 16px 30px; }
    .topbar { min-height: 62px; padding: 10px 16px; align-items: flex-start; }
    .topbar-actions { gap: 10px; flex-wrap: wrap; }
    .topbar .brand { max-width: 185px; font-size: 16px; line-height: 1.35; }
    .app-header-bar { padding: 14px 16px 13px; }
    .brand-name { font-size: 16px; }
    .app-nav-item { min-height: 40px; font-size: 13px; }
    .admin-fab { width: 44px; height: 44px; right: 14px; bottom: 14px; }
    .main.has-fab { padding-bottom: 88px; }
    .date-list { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); margin-right: 0; }
    .date-list.compact { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); margin-right: 0; }
    .admin-page-head, .section-heading { align-items: flex-start; }
    .section-heading { flex-wrap: wrap; }
    .admin-page-actions { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .records-row { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; }
    .records-tags { grid-column: 1 / -1; }
    .users-row { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 8px; }
    .users-stats, .users-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .admin-metric { padding: 7px 8px; }
    .admin-metric strong { font-size: 18px; }
    .admin-date-tab { padding: 7px; }
    .admin-tab-label { font-size: 13px; }
    .admin-tab-date { font-size: 11px; }
    .button { flex: 1 1 auto; }
    .rules-cta .button { flex: 1 1 auto; }
    .waitlist-people li { flex-wrap: wrap; }
    .promotion-alert { padding: 12px 13px; }
    .sheet-top { padding: 14px; }
    .sheet-top .sheet-inner { padding: 18px 16px 16px; }
    .flex-hero { gap: 10px; padding: 11px 12px; }
    .overview { gap: 6px; margin-top: 16px; }
    .overview-item { padding: 9px 10px; }
    .overview-item strong { font-size: 15px; }
    .slot-group-head h3 { font-size: 13px; }
    .slot-button { min-height: 60px; padding: 9px 10px; }
    .slot-button strong { font-size: 14.5px; }
    .panel { padding: 16px; }
    .sheet-inner { padding: 18px 16px; }
}