/* ══════════════════════════════════════════════════════════════
   UJII 运营后台 · Treatwell Connect-inspired workspace
   布局参照客户在用的日历形态：左侧月历 + 右侧按摩师当天时间轴（04:00–23:00）
   ══════════════════════════════════════════════════════════════ */
:root {
  --ink: #1e3761;
  --blue: #2b68c8;
  --blue-dark: #102b5c;
  --blue-mid: #2458aa;
  --blue-soft: #edf3ff;
  --blue-line: #d8e4f5;
  --bg: #f5f7fb;
  --paper: #ffffff;
  --line: #dce5f0;
  --muted: #70809a;
  --green: #3e8c68;
  --warn: #5f78b0;
  --danger: #a05b64;
  --sidebar: 208px;
  --hour: 120px;
}

.editor-field .field-hint { margin: -2px 0 0; color: #8795aa; font-size: 11px; line-height: 1.45; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* ── 登录 ─────────────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: grid; place-items: center; background: #f4f6fa; }
.login-box { width: min(400px, calc(100% - 40px)); background: var(--paper); padding: 42px; border-radius: 6px; box-shadow: 0 16px 50px rgba(18,41,75,.14); }
.login-box small { letter-spacing: .15em; color: var(--blue); font-size: 10px; }
.login-box h1 { font-size: 34px; margin: 12px 0 8px; color: var(--blue-dark); }
.login-box p { color: var(--muted); margin-bottom: 22px; }
.login-box input { display: block; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 10px 0 14px; }
.login-box button { width: 100%; padding: 13px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 600; }
.login-box button:hover { background: var(--blue-mid); }
.login-box em { display: block; color: var(--danger); margin-top: 14px; font-style: normal; font-size: 12px; }

/* ── 顶栏 ─────────────────────────────────────────────────────── */
.topbar {
  background: var(--blue-dark); color: #fff;
  display: flex; align-items: center; gap: 0;
  padding: 0; height: 64px; position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; flex-direction: column; justify-content: center; width: var(--sidebar); min-width: var(--sidebar); height: 100%; padding: 0 14px; background: #0b214c; overflow: hidden; }
.brand small { font-size: 9px; letter-spacing: .16em; color: #8fb3dd; }
.brand strong { display:block; font-size: 13px; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topnav { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; height: 100%; }
.topnav::-webkit-scrollbar{display:none}
.topnav button {
  border: 0; background: transparent; color: #cfe0f3;
  padding: 0 13px; border-radius: 0; white-space: nowrap; font-size: 13px; font-weight: 600; height: 100%;
}
.topnav button:hover { background: rgba(255,255,255,.1); color: #fff; }
.topnav button.active { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 -3px #fff; }
.topnav button:focus { outline: none; }
.topnav button:focus-visible { outline: 2px solid rgba(255,255,255,.72); outline-offset: -3px; }
.topbar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 0 10px; flex: none; }
.conn { display: inline-flex; align-items: center; gap: 6px; color: #f0b9b9; }
.conn.online { color: #9fe0b8; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.topbar-right button { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; padding: 6px 12px; border-radius: 5px; font-size: 12.5px; }
.topbar-right button:hover { background: rgba(255,255,255,.14); }
.lang-select { display: inline-flex; align-items: center; }
.lang-select select {
  min-width: 104px;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 5px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lang-select select:hover,
.lang-select select:focus { background: rgba(255,255,255,.2); outline: 2px solid rgba(255,255,255,.3); outline-offset: 1px; }
.lang-select option { background: #173566; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon-btn{position:relative;border:0!important;font-size:22px!important;padding:6px 8px!important;line-height:1}.notice-dot{position:absolute;right:4px;top:3px;width:7px;height:7px;border-radius:50%;background:#ff7865}.avatar-user{width:32px;height:32px;padding:0!important;border:0!important;border-radius:50%!important;background:#20b8c6!important;font-weight:700}.logout-btn{font-size:11px!important;border:0!important;padding:5px!important;color:#dbe6ff!important}

/* ── 主体：左栏 + 内容 ────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 18px 9px 40px; }
.content { padding: 28px 32px 60px; min-width: 0; background: #fff; }
.content:has(.cal-wrap) { padding: 14px 0 60px; }

.side-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 8px 14px; }
.side-title strong { font-size: 14px; }
.side-title small { color: var(--muted); font-size: 11px; }
.btn-new {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 7px; margin-bottom: 16px;
  border: 0; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 600; font-size: 12px;
}
.btn-new:hover { background: var(--blue-mid); }

/* 月历 */
.mini-cal { border: 0; border-radius: 0; padding: 8px 4px; margin-bottom: 18px; }
.mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mini-cal-head strong { font-size: 13.5px; }
.mini-cal-head button { border: 1px solid var(--line); background: #fff; width: 26px; height: 26px; border-radius: 6px; color: var(--muted); line-height: 1; }
.mini-cal-head button:hover { border-color: var(--blue); color: var(--blue); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal-grid span { text-align: center; font-size: 10.5px; color: var(--muted); padding-bottom: 4px; }
.mini-cal-grid button {
  border: 0; background: transparent; border-radius: 6px;
  aspect-ratio: 1; font-size: 12px; color: var(--ink); position: relative;
}
.mini-cal-grid button:hover { background: var(--blue-soft); }
.mini-cal-grid button.other { color: #b9c6d6; }
.mini-cal-grid button.today { font-weight: 800; color: var(--blue); box-shadow: inset 0 0 0 2px #8db8ff, 0 0 0 1px rgba(36, 97, 216, .16); }
.mini-cal-grid button.selected { background: var(--blue); color: #fff; font-weight: 700; }
.mini-cal-grid button.selected.today { box-shadow: inset 0 0 0 2px #d7e7ff, 0 0 0 2px rgba(36, 97, 216, .24); }
.mini-cal-grid button .dot { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.mini-cal-grid button.selected .dot { background: #fff; }
.mini-cal-empty { grid-column: 1 / -1; }

.side-links { display: grid; gap: 2px; margin-top: 8px; }
.side-links button { border: 0; background: none; text-align: left; padding: 11px 10px; border-radius: 4px; color: var(--ink); font-size: 12.5px; }
.side-links button:hover { background: var(--blue-soft); }
.context-nav { display: grid; gap: 5px; margin-top: 18px; }
.context-nav-heading { padding: 0 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
.context-nav-kicker { display: block; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.context-nav-heading strong { display: block; color: var(--blue-dark); font-size: 14px; line-height: 1.3; }
.context-nav button { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; width: 100%; min-height: 42px; border: 1px solid transparent; background: transparent; text-align: left; padding: 9px 10px; border-radius: 6px; color: var(--ink); font-size: 12.5px; }
.context-nav button:hover { background: var(--blue-soft); border-color: #d6e5f6; color: var(--blue); }
.context-nav button.active { background: var(--blue-soft); border-color: #c5d9ef; color: var(--blue-dark); font-weight: 700; box-shadow: inset 3px 0 0 var(--blue); }
.context-nav-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--blue); font-size: 14px; font-weight: 700; }
.context-nav-label { min-width: 0; line-height: 1.25; }

/* 工具栏 */
.toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 24px; border-bottom: 1px solid var(--line); min-height: 64px; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav button { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 7px 12px; color: var(--ink); }
.date-nav button:hover { border-color: var(--blue); color: var(--blue); }
.date-nav .today-label { font-weight: 600; min-width: 128px; text-align: center; }
.toolbar-row .spacer { flex: 1; }
.toolbar-row select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }

/* 日历主体：时间轴 + 按摩师列 */
.cal-wrap { background: var(--paper); border: 0; border-radius: 0; overflow: auto; max-width: 100%; max-height: calc(100vh - 158px); }
.cal-head {
  position: sticky; top: 0; z-index: 5;
  display: grid; width: 100%; min-width: 100%; border-bottom: 1px solid var(--line); background: #fff;
}
.cal-head .h-time { border-right: 1px solid var(--line); }
.cal-head .h-col {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px; font-weight: 500; font-size: 14px;
  border-right: 1px solid var(--line);
}
.cal-head .h-col:last-child { border-right: 0; }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }

.cal-body { display: grid; width: 100%; min-width: 100%; background:#fff; }
.rail { border-right: 1px solid var(--line); background: #fbfcfe; }
.rail div {
  height: var(--hour);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding: 8px 10px 0 0;
  border-bottom: 2px solid #b8cbe2;
}
.rail div:last-child { border-bottom: 0; }
.col { position: relative; border-right: 1px solid var(--line); }
.col:last-child { border-right: 0; }
.col .hour-block {
  height: var(--hour);
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 #b8cbe2;
  background: #fff;
}
.col .hour-block:last-child { box-shadow: none; }
.col .hour-block.past { background: #fafbfd; }
.col .slot {
  min-height: 0;
  border-bottom: 1px solid rgba(220, 228, 239, .62);
}
.col .slot:last-child { border-bottom: 0; }
.col .cal-slot { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; appearance: none; border-top: 0; border-left: 0; border-right: 0; background: transparent; cursor: pointer; }
.col .cal-slot:hover:not(:disabled) { background: #edf5ff; box-shadow: inset 0 0 0 1px #9bbbe5; }
.col .cal-slot:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--blue); outline-offset: -2px; }
.col .cal-slot:disabled { background: rgba(238, 242, 247, .58); cursor: not-allowed; }
.col .hour-block.past .cal-slot:disabled { background: rgba(246, 248, 251, .72); }

.appt {
  position: absolute; left: 0; right: 0; z-index: 3;
  border: 1px solid #c9d8ee; border-left: 4px solid var(--blue); border-radius: 2px;
  background: #f2f6fd; color: var(--ink);
  padding: 9px 12px 8px; text-align: left; overflow: hidden;
  box-shadow: 0 2px 5px rgba(18,41,75,.07);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.appt.draggable { cursor: grab; touch-action: none; user-select: none; }
.appt.dragging { z-index: 5; cursor: grabbing; transition: none; box-shadow: 0 10px 24px rgba(30,80,150,.24); }
.appt.drag-invalid { outline: 2px solid #c84d4d; outline-offset: 1px; }
.appt:hover { transform: translateY(-1px); background: #e5efff; border-color: #aac4e8; box-shadow: 0 7px 16px rgba(30,80,150,.16); z-index: 4; }
.appt.dragging:hover { transform: none; cursor: grabbing; z-index: 5; }
.appt b { display: block; margin-top: 18px; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .appt .svc { display: -webkit-box; max-height: 30px; overflow: hidden; font-size: 12px; color: var(--blue); margin-top: 4px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.appt .meta { position:absolute; left:12px; top:9px; display: block; font-size: 11px; color: #647b9f; margin: 0; white-space: nowrap; }
.appt .tag { position: absolute; right: 9px; top: 8px; font-size: 10px; line-height: 18px; height: 18px; padding: 0 7px; border-radius: 2px; background: rgba(255,255,255,.72); color: var(--blue); }
.appt[data-status="pending"] { border-left-color: #5f78b0; background: #e9effb; border-color:#cbd8ed; }
.appt[data-status="pending"] .tag { color: #4c659b; }
.appt[data-status="confirmed"] { border-left-color: #3e8c68; background: #e8f3ec; border-color:#c5dfcf; }
.appt[data-status="confirmed"] .tag { color: #327653; }
.appt[data-status="cancelled"] { border-left-color: #a05b64; background: #f2e9eb; border-color:#dfcbd0; opacity: .72; }
.appt[data-status="cancelled"] .tag { color: #8c4f58; }
.appt[data-status="completed"] { border-left-color: #8795aa; background: #edf0f4; border-color:#d4dce6; }
.appt[data-status="completed"] .tag { color: #68778d; }

.break-block {
  position: absolute; left: 5px; right: 5px;
  background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 6px, #e6eaf0 6px, #e6eaf0 12px);
  border-radius: 5px; color: var(--muted); font-size: 11px; padding: 4px 8px;
}

.cal-empty { padding: 60px 20px; text-align: center; color: var(--muted); }

/* ── 通用卡片 / 表格 ─────────────────────────────────────────── */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.stats div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.stats span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.stats strong { font-size: 26px; color: var(--blue-dark); }

.page-head { margin-bottom: 16px; }
.page-head h2 { font-size: 20px; margin-bottom: 4px; }
.page-head p { color: var(--muted); font-size: 13px; }

.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
th { background: #f7fafd; color: var(--muted); font-weight: 600; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcff; }
.booking-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:18px}.booking-page-head h2{margin:5px 0 4px;color:var(--blue-dark);font-size:28px}.booking-head-actions{display:flex;gap:8px;flex-wrap:wrap}.booking-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:14px 16px;border:1px solid #dce5f0;background:#fff}.booking-filters>input{flex:1 1 245px;min-width:200px;height:38px;padding:0 11px;border:1px solid #d5e0ed;border-radius:4px;color:var(--ink)}.booking-filters>select,.booking-filters label input{height:38px;padding:0 10px;border:1px solid #d5e0ed;border-radius:4px;background:#fff;color:var(--ink)}.booking-filters>select{min-width:125px}.booking-filters label{display:grid;gap:4px;color:#71829b;font-size:10px}.booking-filters label input{min-width:138px}.booking-filters .button-secondary,.booking-filters .filter-reset{height:38px}.filter-reset{padding:0 11px;border:1px solid transparent;background:transparent;color:#67809e;cursor:pointer}.filter-reset:hover{color:#2164c2}.filter-check{display:flex!important;align-items:center;grid-auto-flow:column;gap:6px!important;height:38px}.filter-check input{width:15px;height:15px;accent-color:#2868cf}.table-wrap table th:last-child,.table-wrap table td:last-child{width:92px}.table-wrap td small{display:block;margin-top:4px;color:#8b99aa;font-size:11px}.table-wrap tr.archived{opacity:.65}.row-action{padding:5px 8px;border:1px solid #cbd9e9;border-radius:4px;background:#fff;color:#3e6594;font-size:11px;cursor:pointer}.row-action:hover{border-color:#2868cf;color:#2868cf}.import-modal{width:min(980px,100%)}.import-body{gap:16px}.import-source-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:14px}.import-source-grid label{display:block;color:var(--muted);font-size:12px}.import-source-grid input{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}.import-source-grid small{display:block;margin-top:5px;color:#8998aa;font-size:11px}.import-format-hint{padding:10px 12px;border-left:3px solid #5b83bb;background:#f5f8fd;color:#667d9d;font-size:12px;line-height:1.45}.import-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.import-stats>div{display:grid;gap:4px;padding:13px 14px;border:1px solid #dce5f0;background:#fbfdff}.import-stats strong{color:var(--blue-dark);font-size:22px}.import-stats span{color:#7e8da2;font-size:11px}.import-message{padding:10px 12px;border-left:3px solid #3d926e;background:#f0f8f3;color:#3c755e;font-size:12px}.import-errors{display:grid;gap:5px;padding:10px 12px;border-left:3px solid #d47b78;background:#fff6f5;color:#94514f;font-size:12px}.import-preview-table{overflow:auto;border:1px solid #e1e7ef}.import-preview-table table{min-width:680px}.import-preview-table td,.import-preview-table th{padding:10px 12px;font-size:12px}.import-preview-table>small{display:block;padding:8px 12px;color:#8190a2;font-size:11px}.booking-contact-fields{margin-top:14px}.booking-contact-fields label{font-size:12px}.booking-contact-fields input{margin-top:6px}
td small { display: block; color: var(--muted); font-size: 11.5px; }
.empty { color: var(--muted); text-align: center; padding: 40px; }
.status { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.status.pending { background: #e9effb; color: #4c659b; }
.status.confirmed { background: #e8f3ec; color: #327653; }
.status.cancelled { background: #f2e9eb; color: #8c4f58; }
.status.completed { background: #edf0f4; color: #68778d; }

/* 员工排班 */
.staff-grid { display: grid; gap: 16px; }
.staff-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.staff-card-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 6px; }
.staff-card h3 { font-size: 20px; margin: 4px 0 0; }
.staff-summary-item.overtime-summary strong { color: #9b6a28; }
.staff-overtime-records { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #ead9bd; border-radius: 6px; background: #fffaf1; color: #765b32; font-size: 11px; }
.staff-overtime-records summary { cursor: pointer; font-weight: 700; }
.staff-overtime-records ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.staff-overtime-records li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 5px; border-top: 1px solid #f1e6d4; }
.staff-overtime-records li strong { color: #9b6a28; white-space: nowrap; }
.eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; }
.staff-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.schedule-row { display: grid; grid-template-columns: 64px 108px 22px 108px 1fr auto auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row input { padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; width: 100%; }
.schedule-row label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.schedule-row button { border: 0; border-radius: 6px; background: var(--blue-soft); color: var(--blue); padding: 8px 12px; }
.schedule-row button.closed { background: #eef1f5; color: var(--muted); }
.schedule-row .save-row { background: var(--blue); color: #fff; }

/* 服务价格 */
.service-create { display: grid; grid-template-columns: 1.1fr 1.8fr .7fr .7fr 1fr auto; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.service-create input, .service-create select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.service-create button { border: 0; border-radius: 7px; background: var(--blue); color: #fff; padding: 11px 16px; white-space: nowrap; font-weight: 600; }
.service-create span { grid-column: 1 / -1; color: var(--blue); font-size: 12px; }
.service-admin { display: grid; gap: 12px; }
.service-admin article { display: grid; grid-template-columns: minmax(240px, 1.6fr) 120px 120px 150px auto auto auto; gap: 14px; align-items: end; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.service-admin label { color: var(--muted); font-size: 12px; }
.service-admin input, .service-admin textarea, .service-admin select { display: block; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; margin-top: 6px; }
.service-admin textarea { min-height: 42px; resize: vertical; }
.service-admin .service-title { font-weight: 600; font-size: 15px; color: var(--blue-dark); }
.service-admin button { border: 0; border-radius: 7px; background: var(--blue-soft); color: var(--blue); padding: 10px 13px; }
.service-admin .save-row { background: var(--blue); color: #fff; }
.service-admin button.closed { background: #eef1f5; color: var(--muted); }
.archive-row { background: #fdeceb !important; color: #b03a37 !important; }

/* 设置 */
.settings-form { display: grid; gap: 16px; }
.settings-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:22px}.settings-page-head h2{margin:5px 0 5px;color:var(--blue-dark);font-size:28px}.settings-page-head p{max-width:680px;color:var(--muted);font-size:13px}.settings-security{display:flex;align-items:center;gap:10px;min-width:245px;padding:11px 14px;border:1px solid #dce7f5;border-radius:6px;background:#f7faff;color:#5f718d}.settings-security-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e2f3ea;color:#3e8c68;font-weight:800}.settings-security strong,.settings-security small{display:block}.settings-security strong{font-size:12px;color:#2d527f}.settings-security small{margin-top:2px;font-size:11px;line-height:1.35}.settings-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.settings-overview>div{display:flex;align-items:center;gap:10px;min-width:0;padding:13px 14px;border:1px solid #dce5f0;background:#fff}.settings-overview-icon,.settings-panel-icon{display:grid;place-items:center;flex:none;color:#fff;font-weight:800}.settings-overview-icon{width:31px;height:31px;border-radius:7px;font-size:13px}.settings-overview>div>span:last-child{display:grid;gap:2px;min-width:0}.settings-overview small{color:#7a8aa1;font-size:11px}.settings-overview strong{color:#183d75;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.payment-icon{background:#2d6dcc}.email-icon{background:#4c7eb9}.sms-icon{background:#5270a3}.reminder-icon{background:#5c8b79}.settings-panel{border:1px solid #d9e3ef;background:#fff;box-shadow:0 3px 12px rgba(23,54,97,.035)}.settings-panel-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid #e5ebf3}.settings-panel-icon{width:34px;height:34px;border-radius:7px;font-size:11px}.settings-panel-title{flex:1;min-width:0}.settings-panel-title h3{margin:0 0 3px;color:var(--blue-dark);font-size:16px}.settings-panel-title p{color:var(--muted);font-size:12px;line-height:1.45}.settings-status{flex:none;margin-top:3px;padding:4px 8px;border-radius:3px;font-size:11px;font-weight:700}.settings-status.ready{background:#e8f5ee;color:#36815f}.settings-status.incomplete{background:#fff5df;color:#9a6b1c}.settings-status.disabled{background:#eef1f5;color:#7e8b9d}.settings-panel-body{padding:20px}.settings-fields{display:grid;gap:18px 16px}.settings-fields-two{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-fields-three{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-field{display:block;min-width:0;color:#637895;font-size:12px}.settings-field>span{display:flex;align-items:center;gap:6px;min-height:18px}.settings-field input,.settings-field select{display:block;width:100%;height:40px;margin-top:7px;padding:0 11px;border:1px solid #d5e0ed;border-radius:4px;background:#fff;color:#233f68;font-size:13px;transition:border-color .15s,box-shadow .15s}.settings-field input:focus,.settings-field select:focus{border-color:#3574cb;outline:2px solid #e8f1ff;outline-offset:0}.settings-field input::placeholder{color:#a6b2c1}.settings-field small{display:block;min-height:16px;margin-top:6px;color:#96a3b4;font-size:11px;line-height:1.35}.field-help{display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border:1px solid #9eb1cb;border-radius:50%;background:#fff;color:#5b77a1;font-size:11px;line-height:1}.field-help:hover{border-color:#2b68c8;background:#edf3ff;color:#2b68c8}.secret-set{margin-left:auto;color:#3e8c68;font-size:10px;font-style:normal}.settings-notice,.settings-info-strip{display:flex;gap:8px;padding:11px 13px;margin-top:18px;border-left:3px solid #6d8fc3;background:#f5f8fd;color:#667d9d;font-size:11px;line-height:1.45}.settings-notice strong,.settings-info-strip strong{flex:none;color:#385f96}.settings-notice-warning{border-left-color:#d2a34d;background:#fffaf0}.settings-info-strip{margin:0 0 18px;border-left-color:#5b83bb}.settings-toggle{display:flex;align-items:flex-start;gap:10px;margin-top:19px;cursor:pointer}.settings-toggle input{position:absolute;opacity:0;width:1px;height:1px}.settings-toggle-track{position:relative;flex:none;width:36px;height:20px;margin-top:1px;border-radius:10px;background:#b9c5d4;transition:.15s}.settings-toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}.settings-toggle input:checked+.settings-toggle-track{background:#2d70ce}.settings-toggle input:checked+.settings-toggle-track:after{transform:translateX(16px)}.settings-toggle strong,.settings-toggle small{display:block}.settings-toggle strong{color:#36577f;font-size:12px}.settings-toggle small{margin-top:3px;color:#96a3b4;font-size:11px}.settings-test-box{display:grid;grid-template-columns:minmax(180px,1fr) minmax(210px,1.3fr) auto;align-items:end;gap:12px;margin-top:20px;padding:14px;background:#f7faff;border:1px solid #e1eaf5}.settings-test-box>div strong,.settings-test-box>div small{display:block}.settings-test-box>div strong{color:#294f84;font-size:12px}.settings-test-box>div small{margin-top:5px;color:#8c9caf;font-size:11px;line-height:1.4}.settings-test-box .settings-field input{background:#fff}.settings-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-top:1px solid #e5ebf3;background:#fbfcfe}.settings-panel-foot>div{display:flex;gap:8px;flex-wrap:wrap}.settings-feedback{flex:1;min-height:18px;color:#3e8c68;font-size:11px}.settings-feedback.error{color:#a05b64}.settings-feedback.success{color:#3e8c68}.button-primary,.button-secondary{height:36px;padding:0 15px;border-radius:4px;font-size:12px;font-weight:700}.button-primary{border:1px solid #2868c9;background:#2868c9;color:#fff}.button-primary:hover{background:#1854ad}.button-secondary{border:1px solid #cbd9e9;background:#fff;color:#41628c}.button-secondary:hover{border-color:#6791c9;background:#f5f9ff}.button-primary:disabled,.button-secondary:disabled{cursor:wait;opacity:.55}.reminder-fields.is-disabled{opacity:.5}.settings-form fieldset{border:0;padding:0;margin:0}.settings-form legend{padding:0}.settings-form .save{border:0}.settings-form .saved{color:var(--green);font-size:12.5px}

/* Payment settings: visible setup flow and non-blocking field help. */
.settings-overview>button{display:flex;align-items:center;gap:10px;min-width:0;width:100%;padding:13px 12px;border:1px solid #dce5f0;background:#fff;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}.settings-overview>button:hover{border-color:#9db8dd;box-shadow:0 4px 12px rgba(31,83,150,.08);transform:translateY(-1px)}.settings-overview>button>span:nth-child(2){display:grid;gap:2px;min-width:0}.settings-overview>button>i{margin-left:auto;color:#9aa9bc;font-size:20px;font-style:normal;line-height:1}.settings-flow{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.8fr);align-items:center;gap:22px;margin:0 0 20px;padding:15px 18px;border:1px solid #dce6f2;background:#f7faff}.settings-flow-copy{display:grid;gap:4px}.settings-flow-copy strong{color:#244c83;font-size:12px}.settings-flow-copy span{color:#8191a6;font-size:11px;line-height:1.45}.settings-flow-steps{display:flex;align-items:center;justify-content:flex-end;gap:9px}.settings-flow-steps button{display:inline-flex;align-items:center;gap:7px;padding:5px 0;border:0;background:transparent;color:#486487;font-size:11px;white-space:nowrap;cursor:pointer}.settings-flow-steps button:hover{color:#1e60c4}.settings-flow-steps b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e4eefc;color:#2b68c8;font-size:11px}.settings-flow-line{height:1px;flex:1;min-width:18px;background:#cbd9e9}.settings-help-popover{display:flex;align-items:flex-start;gap:10px;margin:-4px 0 18px;padding:12px 14px;border:1px solid #a9c4e6;border-left:3px solid #2b6dca;background:#f3f8ff;color:#426187;box-shadow:0 6px 16px rgba(32,80,143,.08)}.settings-help-mark{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#2d70ce;color:#fff;font-size:12px;font-weight:800}.settings-help-popover p{flex:1;margin:0;font-size:12px;line-height:1.5}.settings-help-close{flex:none;width:22px;height:22px;border:0;background:transparent;color:#7890af;font-size:20px;line-height:1;cursor:pointer}.settings-help-close:hover{color:#214f91}.settings-panel{scroll-margin-top:18px}.settings-panel-head{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}

/* 预约详情抽屉 */
.detail-backdrop { position: fixed; inset: 0; background: rgba(18,41,75,.42); display: flex; justify-content: flex-end; z-index: 40; }
.detail-panel { width: min(480px, 100%); background: var(--paper); padding: 0 28px 56px; position: relative; overflow-y: auto; box-shadow:-10px 0 30px rgba(18,41,75,.1); }
.detail-panel::before{content:"待确认 · 预约";display:block;margin:0 -28px 28px;padding:20px 28px;background:var(--blue);color:#fff;font-weight:700;font-size:18px}.detail-panel small.eyebrow{display:block;margin-top:8px;color:var(--blue)}
.detail-panel h2 { font-size: 26px; margin: 10px 0 6px; color: var(--blue-dark); }
.detail-panel > p { color: var(--muted); }
.modal-close { position: absolute; right: 20px; top: 14px; border: 0; background: none; font-size: 26px; color: var(--muted); }
.detail-panel dl { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--line); margin: 24px 0; }
.detail-panel dt, .detail-panel dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 13.5px; }
.detail-panel dt { color: var(--muted); font-size: 12px; }
.detail-panel label { display: block; color: var(--muted); font-size: 12px; }
.detail-panel input { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 7px; }
.detail-actions { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.detail-actions button { border: 0; border-radius: 7px; background: var(--blue); color: #fff; padding: 11px 16px; }
.detail-actions .danger { background: var(--danger); }

/* ── 响应式 ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .mini-cal { max-width: 320px; }
}

.service-image-guide{display:flex;align-items:flex-start;gap:13px;margin:-7px 0 22px;padding:15px 17px;border:1px solid #cfe0f5;border-left:4px solid #2461da;border-radius:8px;background:#f5f9ff;color:#4c6383;box-shadow:0 4px 12px rgba(36,97,218,.05)}.service-image-guide-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:7px;background:#e2edff;color:#2461da;font-size:16px}.service-image-guide strong{display:block;margin-bottom:4px;color:#173b76;font-size:13px}.service-image-guide p{margin:0!important;max-width:920px;color:#657995;font-size:12px!important;line-height:1.55}.service-image-editor-label{display:inline-flex;align-items:center;margin-left:8px;padding:3px 7px;border-radius:4px;background:#e7f0ff;color:#2461da;font-size:10px;font-weight:700;vertical-align:middle}@media (max-width:640px){.service-image-guide{margin:-3px 0 18px;padding:13px}.service-image-guide p{font-size:11px!important}.service-image-editor-label{display:block;width:max-content;margin:6px 0 0}}
.popular-manager{margin:0 0 24px;border:1px solid #d7e3f1;border-radius:8px;background:#fff;box-shadow:0 8px 22px rgba(31,69,119,.07);overflow:hidden}.popular-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid #e8eef5;background:#fbfdff}.popular-manager-head h3{margin:5px 0 4px;color:#183b73;font-size:18px}.popular-manager-head p{max-width:760px;color:#71819a;font-size:12px;line-height:1.55}.popular-manager-count{display:flex;align-items:baseline;gap:5px;color:#185bd7;font-size:24px;white-space:nowrap}.popular-manager-count small{color:#71819a;font-size:11px;font-weight:600}.popular-manager-add{display:flex;gap:10px;padding:16px 22px;border-bottom:1px solid #edf1f6;background:#fff}.popular-manager-add select{flex:1;min-width:0;height:38px;padding:0 11px;border:1px solid #cbd8e8;border-radius:5px;background:#fff;color:#324d78;font-size:13px}.popular-manager-add select:focus{border-color:#155be0;outline:2px solid #e5efff}.popular-manager-add .outline-button{height:38px}.popular-manager-list{padding:4px 22px}.popular-manager-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid #edf1f5}.popular-manager-row:last-child{border-bottom:0}.popular-manager-order{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e8f1ff;color:#2461da;font-size:12px;font-weight:750}.popular-manager-name{display:grid;gap:3px;min-width:0;padding:8px 0;border:0;background:transparent;text-align:left;cursor:pointer}.popular-manager-name b{overflow:hidden;color:#28466f;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.popular-manager-name small{color:#8a98ab;font-size:11px}.popular-manager-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.popular-manager-actions button{height:30px;border-radius:4px;font-size:11px;font-weight:650;cursor:pointer}.popular-action-edit{padding:0 10px;border:1px solid #cddbeb;background:#fff;color:#2461da}.popular-action-edit:hover{border-color:#2461da;background:#f4f8ff}.popular-action-icon{width:30px;padding:0;border:1px solid #cddbeb;background:#fff;color:#365a8e;font-size:17px!important}.popular-action-icon:hover:not(:disabled){border-color:#2461da;background:#f4f8ff}.popular-action-icon:disabled{cursor:default;opacity:.35}.popular-action-remove{padding:0 10px;border:1px solid #f0cfd3;background:#fff;color:#b45e69}.popular-action-remove:hover{border-color:#d8828d;background:#fff7f8}.popular-manager-empty{padding:22px 0;color:#8a98ab;font-size:13px}.popular-manager-foot{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 22px;border-top:1px solid #e8eef5;background:#fbfdff}.popular-manager-foot .editor-message{color:#32866a;font-size:12px}.popular-manager-foot .editor-save{height:38px;min-width:150px;padding:0 15px}
.popular-service-toggle{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding:13px 14px;border:1px solid #dce7f5;border-radius:6px;background:#f7faff;color:#284d83}.popular-service-toggle input{width:17px;height:17px;margin-top:2px;accent-color:#155be0}.popular-service-toggle span{display:grid;gap:4px}.popular-service-toggle b{font-size:13px}.popular-service-toggle small{color:#7588a4;font-size:11px;line-height:1.45}
@media(max-width:640px){.popular-manager-head{padding:16px;flex-direction:column;gap:10px}.popular-manager-count{font-size:20px}.popular-manager-add{padding:13px 16px;flex-direction:column}.popular-manager-list{padding:4px 16px}.popular-manager-row{grid-template-columns:26px minmax(0,1fr);align-items:start;padding:10px 0}.popular-manager-actions{grid-column:2;justify-content:flex-start}.popular-manager-foot{padding:12px 16px;align-items:stretch;flex-direction:column}.popular-manager-foot .editor-save{width:100%}}
@media (max-width: 700px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .topnav { order: 3; width: 100%; }
  .content { padding: 14px; }
  .stats { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr 1fr 18px 1fr; }
  .schedule-row label { grid-column: 1 / -1; }
  .schedule-row button { grid-row: 3; }
  .schedule-row .save-row { grid-column: 2; }
  .service-create { grid-template-columns: 1fr 1fr; }
  .service-create input:nth-child(2), .service-create select { grid-column: 1 / -1; }
  .service-create button { grid-column: 1 / -1; }
  .service-admin article { grid-template-columns: 1fr 1fr; }
  .service-admin article > div:first-child { grid-column: 1 / -1; }
  .booking-page-head{align-items:stretch;flex-direction:column;gap:14px}.booking-head-actions{width:100%}.booking-head-actions button{flex:1}.booking-filters{align-items:stretch;flex-direction:column}.booking-filters>input,.booking-filters>select,.booking-filters label input{width:100%;min-width:0}.booking-filters .button-secondary,.booking-filters .filter-reset{width:100%}.filter-check{justify-content:flex-start}
}

/* ── Services catalogue refresh ─────────────────────────────── */
.service-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.service-page-head h2{margin:5px 0 4px;color:var(--blue-dark);font-size:28px}.service-page-head p{color:var(--muted);font-size:13px}.service-add-button{border:0;border-radius:5px;background:#2461da;color:#fff;padding:12px 20px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 3px 8px rgba(36,97,218,.16)}.service-add-button:hover{background:#174ebd}.service-subnav{display:flex;align-items:stretch;min-height:50px;margin:0 -32px 18px;padding:0 32px;border-top:1px solid #e9edf3;border-bottom:1px solid #dfe5ee;background:#fafbfd;gap:0;overflow-x:auto}.service-subnav>button{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:50px;padding:0 18px;border:0;border-right:1px solid #e8edf3;background:#fff;color:#5d6e87;font-size:13px;font-weight:600;white-space:nowrap}.service-subnav>button:first-child{border-left:1px solid #e8edf3}.service-subnav>button:hover{color:var(--blue)}.service-subnav>button.active{color:#182f57;background:#fff}.service-subnav>button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#2461da}.service-subnav b{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:3px;background:#e7edf7;color:#61748f;font-size:10px}.service-status-filter{display:flex;align-items:center;gap:10px;margin-left:auto;padding:0 0 0 18px;color:#66778e;font-size:12px;white-space:nowrap}.service-status-filter select{height:34px;min-width:190px;border:1px solid #dbe3ed;border-radius:4px;background:#fff;color:#415775;padding:0 10px}.service-search-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.service-search-row input{width:min(360px,100%);height:38px;padding:0 12px;border:1px solid #d7e0eb;border-radius:5px;background:#fff;color:var(--ink)}.service-search-row span{color:#8996a7;font-size:11px}.service-catalog{display:grid;gap:12px}.service-group{overflow:hidden;border:1px solid #e1e7ef;border-radius:5px;background:#fff}.service-group-head{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-bottom:1px solid #e9edf3;background:#fbfcfe;color:#546884}.service-group-head h3{margin:0;flex:1;font-size:15px;font-weight:650}.service-group-head>span:last-child{color:#a0acbb;font-size:11px}.service-group-mark{font-size:16px;color:#566d8d}.service-catalog-row{position:relative;display:grid;grid-template-columns:minmax(310px,1.65fr) minmax(300px,1fr) 20px;align-items:start;gap:26px;width:100%;min-height:58px;padding:12px 16px 12px 18px;border:0;border-left:4px solid #142f66;border-bottom:1px solid #edf1f5;background:#fff;color:var(--ink);text-align:left;transition:background .14s ease,border-color .14s ease}.service-catalog-row:last-child{border-bottom:0}.service-catalog-row:hover{background:#f8fbff;border-left-color:#2461da}.service-row-title{display:flex;align-items:flex-start;gap:9px;min-width:0;padding-top:2px}.service-scissors{width:19px;flex:none;color:#61718a;font-size:17px;line-height:1}.service-row-title b{display:block;min-width:0;overflow:hidden;color:#526682;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.service-row-title em{display:inline-flex;flex:none;align-items:center;height:20px;padding:0 7px;border-radius:10px;background:#e2f7f6;color:#1da7aa;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap}.service-variants{display:grid;gap:3px;color:#596d8c;font-size:13px}.service-variant-line{display:grid;grid-template-columns:1fr 105px;gap:12px;align-items:center;min-height:18px}.service-variant-line>span:last-child{text-align:left}.service-variant-line strong{color:#2a9fa8;font-weight:600}.service-variant-line s{color:#66748b;margin-right:4px}.service-row-arrow{align-self:center;color:#a5b0bf;font-size:23px;line-height:1}.service-catalog-row:focus-visible,.service-add-button:focus-visible,.service-subnav button:focus-visible{outline:2px solid #2461da;outline-offset:2px}
.service-modal-backdrop{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(18,31,54,.58)}.service-editor-modal{display:flex;flex-direction:column;width:min(1120px,100%);max-height:min(920px,calc(100vh - 44px));overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 24px 65px rgba(10,28,61,.26)}.service-editor-head{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:0 24px;border-bottom:1px solid #dfe5ed}.service-editor-head h2{margin:4px 0 0;color:#132d5b;font-size:20px}.service-modal-close{width:32px;height:32px;border:0;background:transparent;color:#9aa6b4;font-size:31px;font-weight:300;line-height:1}.service-modal-close:hover{color:#283b57}.service-editor-tabs{display:flex;align-items:center;gap:8px;min-height:58px;padding:0 24px;border-bottom:1px solid #dde4ed;background:#fff}.service-editor-tabs button{position:relative;height:58px;padding:0 10px;border:0;background:transparent;color:#5a6a86;font-size:14px;font-weight:600}.service-editor-tabs button.active{color:#155be0}.service-editor-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#155be0}.service-editor-body{flex:1;overflow:auto;padding:26px 24px 34px;background:#fff}.service-editor-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.editor-field{display:grid;gap:8px;color:#7b89a2;font-size:12px}.editor-field input,.editor-field select,.editor-field textarea{width:100%;min-height:40px;padding:0 10px;border:0;border-bottom:1px solid #b8c5d8;border-radius:0;background:#fff;color:#324d78;font-size:16px}.editor-field textarea{padding:10px;border:1px solid #d1dce8;border-radius:4px;resize:vertical;line-height:1.5}.editor-field input:focus,.editor-field select:focus,.editor-field textarea:focus{border-color:#155be0;outline:0}.editor-language-tabs{display:flex;gap:5px;margin:22px 0 28px;border-bottom:1px solid #e7ecf2}.editor-language-tabs button{padding:10px 14px;border:0;border-bottom:3px solid transparent;background:transparent;color:#71809a;font-size:12px;font-weight:700}.editor-language-tabs button.active{border-bottom-color:#155be0;color:#155be0}.service-team-block{margin:0 -24px;padding:25px 24px;background:#fbfcfe;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}.service-team-block h3,.price-editor h3{margin:0;color:#7585a0;font-size:13px;font-weight:600}.service-team-block p,.price-editor header p{margin:6px 0 0;color:#96a2b2;font-size:11px}.team-select-all{display:flex;align-items:center;gap:8px;margin-top:20px;color:#657590;font-size:13px}.team-select-all input,.team-option input{accent-color:#155be0}.service-team-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.team-option{display:flex;align-items:center;gap:9px;min-width:145px;padding:10px 12px;border-radius:4px;background:#f0f3f8;color:#526582}.team-avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#dbe6f6;color:#3568b3;font-size:12px;font-weight:700}.team-option span:last-child{display:grid;gap:1px}.team-option small{color:#8996a9;font-size:10px}.price-editor{margin-top:28px}.price-editor>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.outline-button{height:34px;padding:0 12px;border:1px solid #155be0;border-radius:4px;background:#fff;color:#155be0;font-size:12px;font-weight:650;white-space:nowrap}.outline-button:hover{background:#eef4ff}.price-editor-head,.price-editor-row{display:grid;grid-template-columns:minmax(180px,1.25fr) minmax(150px,1fr) minmax(120px,.75fr) minmax(120px,.75fr) 34px;gap:12px;align-items:center}.price-editor-head{padding:0 8px 7px;color:#8592a7;font-size:11px}.price-editor-row{min-height:48px;border-top:1px solid #edf1f5}.price-editor-row>input,.price-editor-row>select,.money-input input{width:100%;height:37px;padding:0 8px;border:0;border-bottom:1px solid #bdcadb;border-radius:0;background:#fff;color:#405779;font-size:14px}.price-editor-row>input:focus,.price-editor-row>select:focus,.money-input input:focus{border-color:#155be0;outline:0}.money-input{position:relative}.money-input input{padding-right:26px}.money-input span{position:absolute;right:7px;top:9px;color:#75859d;font-size:12px}.remove-price-button{width:30px;height:30px;border:0;border-radius:4px;background:#596d91;color:#fff;font-size:23px;line-height:1}.remove-price-button:hover{background:#3e547d}.description-editor{display:grid;gap:22px;max-width:900px}.bookability-editor{padding:20px;border:1px solid #e1e8f0;border-radius:5px;background:#fbfcfe}.toggle-field{display:flex;align-items:center;gap:10px;color:#415a7d}.toggle-field input{position:absolute;opacity:0}.toggle-field span{position:relative;width:38px;height:21px;border-radius:12px;background:#bfc9d6}.toggle-field span:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s}.toggle-field input:checked+span{background:#2866d4}.toggle-field input:checked+span:after{transform:translateX(17px)}.bookability-editor p{margin:17px 0 0;color:#8694a7;font-size:12px}.service-editor-foot{display:flex;align-items:center;gap:10px;min-height:70px;padding:0 24px;border-top:1px solid #dfe5ed;background:#fff}.editor-cancel,.editor-archive,.editor-save{height:42px;padding:0 20px;border:0;border-radius:4px;font-size:13px;font-weight:700}.editor-cancel{background:#fff;color:#6d7d95}.editor-cancel:hover{background:#f4f7fb}.editor-archive{background:#fff;color:#e16568}.editor-message{flex:1;color:#32866a;font-size:12px}.editor-save{margin-left:auto;min-width:130px;background:#155be0;color:#fff}.editor-save:hover{background:#0f4ec7}.editor-save:disabled{opacity:.55;cursor:default}
@media(max-width:900px){.service-subnav{margin-inline:-18px;padding-inline:18px}.service-catalog-row{grid-template-columns:minmax(230px,1fr) minmax(220px,1fr) 16px;gap:14px}.service-editor-grid{grid-template-columns:1fr;gap:18px}.service-editor-modal{max-height:calc(100vh - 20px)}.service-modal-backdrop{padding:10px}.service-editor-foot{padding-inline:16px}}
@media(max-width:640px){.service-page-head{align-items:stretch;flex-direction:column}.service-add-button{align-self:flex-start}.service-subnav{margin-inline:-14px;padding-inline:14px}.service-status-filter{display:none}.service-catalog-row{grid-template-columns:1fr 18px;gap:8px;padding:13px 12px}.service-variants{grid-column:1/-1;margin-left:28px}.service-row-arrow{grid-column:2;grid-row:1}.service-variant-line{grid-template-columns:1fr 100px}.service-row-title b{white-space:normal}.service-editor-tabs{overflow-x:auto;padding-inline:14px}.service-editor-tabs button{white-space:nowrap}.service-editor-body{padding:20px 15px 26px}.service-team-block{margin-inline:-15px;padding-inline:15px}.price-editor-head{display:none}.price-editor-row{grid-template-columns:1fr 1fr 1fr 30px;gap:7px;padding:10px 0}.price-editor-row>input{grid-column:1/-1}.price-editor-row>select{grid-column:1}.price-editor-row .money-input:nth-of-type(1){grid-column:2}.price-editor-row .money-input:nth-of-type(2){grid-column:3}.service-editor-foot{min-height:62px;padding:0 12px}.editor-archive{display:none}.editor-save{min-width:100px}}

/* Service cleanup buffer */
.service-cleanup-editor{max-width:380px;margin-top:28px;padding:18px 20px;border:1px solid #e1e8f0;border-radius:5px;background:#fbfcfe}
.service-cleanup-editor .editor-field select{max-width:220px}
.service-cleanup-editor .field-hint{display:block;margin-top:8px}

/* ── Staff schedule workspace refresh ───────────────────────── */
.staff-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.staff-page-head h2{margin:5px 0 5px;color:var(--blue-dark);font-size:28px}.staff-page-head p{max-width:720px;color:var(--muted);font-size:13px}.staff-guide{display:flex;align-items:center;gap:10px;max-width:330px;padding:11px 14px;border:1px solid #dce7f5;border-radius:6px;background:#f7faff;color:#5f718d;font-size:12px;line-height:1.45}.staff-guide-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#2461da;color:#fff;font-size:12px;font-weight:700}.staff-grid{display:grid;gap:20px}.staff-card{padding:0;overflow:hidden;border:1px solid #dbe4ef;border-radius:8px;background:#fff;box-shadow:0 3px 12px rgba(23,54,97,.045)}.staff-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px 20px;border-bottom:1px solid #e4ebf3;margin:0}.staff-identity{display:flex;align-items:center;gap:13px}.staff-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e2ecfb;color:#2862b5;font-size:16px;font-weight:750}.staff-card h3{margin:3px 0 0;color:var(--blue-dark);font-size:21px;letter-spacing:.01em}.staff-summary{display:flex;align-items:center;gap:22px}.staff-summary-item{display:grid;gap:1px;text-align:right}.staff-summary-item strong{color:#193e77;font-size:18px;line-height:1.1}.staff-summary-item span{color:#8795aa;font-size:11px}.staff-week-head{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 10px;background:#fbfcfe;color:#8795a9;font-size:11px;font-weight:600;letter-spacing:.02em}.staff-week-head span:last-child{color:#a0abba;font-weight:400}.staff-week-list{padding:0 24px}.schedule-day-card{display:grid;grid-template-columns:125px minmax(0,1fr);gap:22px;align-items:center;min-height:85px;padding:17px 0;border-bottom:1px solid #edf1f5}.schedule-day-card:last-child{border-bottom:0}.schedule-day-card.closed{background:#fbfcfe}.schedule-day-meta{display:grid;gap:9px;align-content:center}.schedule-day-meta>strong{color:#1c3b6c;font-size:14px}.schedule-toggle{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:0;border:0;background:transparent;color:#2b68c8;font-size:11px;font-weight:650}.schedule-toggle i{width:9px;height:9px;border-radius:50%;background:#3f986f;box-shadow:0 0 0 3px #e4f4eb}.schedule-toggle.closed{color:#8996a8}.schedule-toggle.closed i{background:#a9b4c1;box-shadow:0 0 0 3px #eef1f5}.schedule-day-fields{display:grid;grid-template-columns:minmax(245px,1fr) minmax(215px,.9fr);gap:28px;align-items:center}.schedule-field-block{display:grid;gap:8px}.schedule-field-label{color:#7789a3;font-size:11px;font-weight:600}.schedule-time-range{display:flex;align-items:center;gap:9px;color:#9aa8b9;font-size:12px}.schedule-time-range input{width:112px;height:38px;padding:0 10px;border:1px solid #d7e2ef;border-radius:5px;background:#fff;color:#244572;font-size:14px}.schedule-time-range input:focus{border-color:#2b68c8;outline:2px solid #e5efff;outline-offset:0}.schedule-break-block{min-width:0}.schedule-break-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.schedule-break-toggle{padding:0;border:0;background:transparent;color:#2b68c8;font-size:11px;white-space:nowrap}.schedule-break-block small{display:block;min-height:38px;padding:10px 0;color:#99a5b6;font-size:12px}.schedule-day-off{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 14px;border:1px dashed #d8e0ea;border-radius:5px;background:#fafbfd;color:#9aa6b6;font-size:12px}.schedule-day-off-mark{color:#b3bfcd;font-size:18px}.staff-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:72px;padding:14px 24px;border-top:1px solid #e3eaf2;background:#fbfcfe}.staff-save-button{min-width:154px;height:40px;padding:0 18px;border:0;border-radius:5px;background:#2868cf;color:#fff;font-size:13px;font-weight:700}.staff-save-button:hover{background:#1955b4}.staff-save-button:disabled{cursor:wait;opacity:.6}.schedule-feedback{flex:1;color:#3b8a68;font-size:12px;text-align:right}.schedule-feedback.error{color:#a05b64}.staff-card .staff-dot{width:10px;height:10px}
.staff-page-actions{display:flex;align-items:flex-end;gap:12px}.staff-page-actions .staff-guide{max-width:330px}.staff-card.inactive{border-color:#e3e7ec;background:#fcfdfe}.staff-avatar{overflow:hidden}.staff-avatar img{width:100%;height:100%;object-fit:cover;display:block}.staff-edit-button,.staff-status-button{min-height:40px;padding:0 12px;border:1px solid #d5e1ef;border-radius:5px;background:#fff;color:#2b68c8;font-size:12px}.staff-edit-button:hover,.staff-status-button:hover{border-color:#2868cf;background:#f7faff}.staff-card-foot .staff-save-button{margin-left:0}.content-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:8px}.content-section-head .hint{margin-bottom:0}.member.inactive{opacity:.74}.member-field-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.member-field-head>div:first-child{display:grid;gap:2px}.member-field-head strong{color:var(--blue-dark);font-size:15px}.member-actions{display:flex;gap:7px;flex-wrap:wrap}.staff-editor-drawer{display:flex;flex-direction:column;width:min(620px,100%);height:100%;background:#f7f9fc;box-shadow:-18px 0 45px rgba(18,41,75,.18)}.staff-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 20px;border-bottom:1px solid var(--line);background:#fff}.staff-editor-head h2{margin-top:4px;color:var(--blue-dark);font-size:23px}.staff-editor-head p{margin-top:7px;color:var(--muted);font-size:12px}.staff-editor-body{flex:1;overflow-y:auto;padding:18px 22px 28px}.staff-editor-section{margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff}.staff-editor-section h3{margin-bottom:14px;color:var(--blue-dark);font-size:15px}.staff-photo-editor{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:18px}.staff-editor-avatar{width:112px;height:112px;border-radius:10px;overflow:hidden;background:#eef3f8}.staff-editor-avatar img,.staff-editor-avatar .no-photo{width:100%;height:100%;object-fit:cover;display:block}.staff-editor-avatar .no-photo{position:relative}.staff-editor-avatar .no-photo:before,.staff-editor-avatar .no-photo:after{content:'';position:absolute;left:50%;transform:translateX(-50%);background:#aebdcd}.staff-editor-avatar .no-photo:before{top:25%;width:29%;aspect-ratio:1;border-radius:50%}.staff-editor-avatar .no-photo:after{bottom:14%;width:58%;height:38%;border-radius:52% 52% 18% 18%}.staff-photo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.staff-photo-actions .photo-remove-button{width:auto}.staff-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.staff-form-grid label,.staff-language-fields label{display:grid;gap:6px;color:var(--muted);font-size:12px}.staff-form-grid input,.staff-form-grid select,.staff-language-fields input,.staff-language-fields textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}.staff-language-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.staff-language-fields label span{font-size:11px;color:#71839e;font-weight:700}.staff-editor-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:#fff}.staff-editor-foot .editor-message{flex:1}.staff-editor-foot .button-primary{min-height:40px;padding:0 18px;border:0;border-radius:5px}
@media(max-width:900px){.staff-page-head{align-items:stretch;flex-direction:column;gap:14px}.staff-guide{max-width:none}.schedule-day-fields{grid-template-columns:1fr;gap:12px}.schedule-day-card{grid-template-columns:110px minmax(0,1fr);gap:16px}.schedule-time-range input{width:105px}}
@media(max-width:640px){.staff-card-head{align-items:flex-start;flex-direction:column;padding:18px 16px}.staff-summary{width:100%;justify-content:flex-start;gap:20px}.staff-summary-item{text-align:left}.staff-week-head{padding-inline:16px}.staff-week-list{padding-inline:16px}.schedule-day-card{grid-template-columns:1fr;gap:12px;padding:16px 0}.schedule-day-meta{display:flex;align-items:center;justify-content:space-between}.schedule-day-fields{grid-template-columns:1fr}.schedule-time-range input{flex:1;width:auto;min-width:0}.staff-card-foot{align-items:stretch;flex-direction:column;padding:14px 16px}.schedule-feedback{text-align:left;min-height:18px}.staff-save-button{width:100%}}
@media(max-width:760px){.staff-page-actions{align-items:stretch;flex-direction:column}.staff-page-actions .button-primary{align-self:flex-start}.content-section-head{align-items:stretch;flex-direction:column}.member-field-head{align-items:stretch;flex-direction:column}.member-actions{width:100%}.member-actions button{flex:1}.staff-editor-drawer{width:100%}.staff-editor-head{padding:18px 16px 15px}.staff-editor-body{padding:14px}.staff-editor-section{padding:14px}.staff-form-grid,.staff-language-fields{grid-template-columns:1fr}.staff-photo-editor{grid-template-columns:88px 1fr}.staff-editor-avatar{width:88px;height:88px}.staff-editor-foot{padding:12px 14px}.staff-editor-foot button{min-height:44px}.staff-editor-foot .button-primary{flex:1}}

@media(max-width:900px){.settings-page-head{flex-direction:column;gap:14px}.settings-security{max-width:none}.settings-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-fields-three{grid-template-columns:1fr 1fr}.settings-fields-three .settings-field:first-child{grid-column:1/-1}.settings-flow{grid-template-columns:1fr;gap:12px}.settings-flow-steps{justify-content:flex-start}}
@media(max-width:640px){.settings-page-head h2{font-size:24px}.settings-overview{grid-template-columns:1fr}.settings-panel-head{padding:16px}.settings-panel-body{padding:16px}.settings-fields-two,.settings-fields-three{grid-template-columns:1fr}.settings-fields-three .settings-field:first-child{grid-column:auto}.settings-test-box{grid-template-columns:1fr;align-items:stretch}.settings-test-box .button-secondary{width:100%}.settings-panel-foot{align-items:stretch;flex-direction:column;padding:13px 16px}.settings-panel-foot>div{width:100%}.settings-panel-foot button{flex:1}.settings-feedback{text-align:left}.settings-flow{padding:13px 14px}.settings-flow-steps{justify-content:space-between;gap:5px}.settings-flow-steps button{gap:4px;font-size:10px}.settings-flow-steps b{width:21px;height:21px}.settings-flow-line{min-width:8px}}
@media(max-width:640px){.import-source-grid,.import-stats{grid-template-columns:1fr}.import-modal .modal-foot{align-items:stretch}.import-modal .modal-foot button{width:100%}}

/* Service rows use a slight upward tilt so the scissors point toward the title. */
.settings-feedback.warning { color: #9a6b1c; }
.service-catalog .service-scissors{transform:rotate(-25deg);transform-origin:50% 50%}

/* ══════════════════════════════════════════════════════════════
   悬停详情卡 / 预约弹窗 / 网站内容管理
   ══════════════════════════════════════════════════════════════ */

/* ── 悬停浮出的预约详情卡（点击才开弹窗）──────────────────────── */
.hover-card {
  position: fixed; width: 356px; max-width: calc(100vw - 28px); z-index: 30;
  background: var(--paper); border: 1px solid #cbd8ed; border-radius: 0; overflow: hidden;
  box-shadow: 0 16px 36px rgba(16,43,92,.18), 0 0 0 1px rgba(16,43,92,.035);
  pointer-events: auto;
}
.hover-head {
  padding: 14px 18px; font-size: 15px; font-weight: 700; color: #fff;
  background: #2b68c8;
}
.hover-head[data-status="pending"]   { background: #526da7; }
.hover-head[data-status="confirmed"] { background: #3e8c68; }
.hover-head[data-status="completed"] { background: #68778d; }
.hover-head[data-status="cancelled"] { background: #935762; }
.hover-body { padding: 17px 18px 16px; }
.hover-body h4 { margin: 5px 0 3px; font-size: 21px; color: var(--blue-dark); }
.hover-phone { margin: 0 0 13px; color: var(--blue); font-size: 13.5px; }
.hover-body dl { display: grid; grid-template-columns: 72px 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.hover-body dt, .hover-body dd { padding: 9px 0; border-bottom: 1px solid #eef3f9; margin: 0; font-size: 13px; }
.hover-body dt { color: #7387a5; font-size: 12.5px; }
.hover-body dd { color: var(--ink); }
.hover-body dd em { font-style: normal; color: var(--green); }
.hover-hint { margin: 13px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ── 预约弹窗（居中，对齐 Connect 的详情弹窗）──────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18,41,75,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.modal {
  width: min(880px, 100%); background: var(--bg);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(18,41,75,.35);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.modal-head {
  background: #fff; padding: 22px 28px 18px; position: relative;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 24px; margin: 4px 0 3px; color: var(--blue-dark); }
.modal-head p { color: var(--muted); font-size: 13px; }
.modal-close {
  position: absolute; right: 20px; top: 16px; border: 0; background: none;
  font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 18px 22px; overflow-y: auto; display: grid; gap: 14px; }
.panel { background: #fff; border-radius: 11px; padding: 18px 20px; }
.customer-panel { background: #f7fafd; }
.booking-customer-entry { margin-top: 9px; min-width: 0; }
.booking-customer-pick-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.booking-customer-open { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; white-space: nowrap; }
.booking-customer-new-head strong { color: var(--blue-dark); font-size: 14px; }
.booking-customer-new-button { min-height: 36px; padding: 6px 10px; border: 1px solid #cfdeef; border-radius: 6px; background: #fff; color: var(--blue-dark); font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.booking-customer-new-button:hover { border-color: var(--blue); background: #f4f8ff; }
.booking-customer-favorites { display: flex; flex: 1 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }
.booking-customer-pick-row .booking-customer-favorites { flex: 1 1 auto; }
.booking-customer-favorite { display: flex; flex: 0 1 auto; align-items: center; gap: 7px; min-width: 0; max-width: 190px; min-height: 34px; padding: 5px 9px; border: 0; border-right: 1px solid #e1e8f0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.booking-customer-favorite:hover, .booking-customer-favorite:focus-visible { border-radius: 4px; background: #edf4fc; outline: none; }
.booking-customer-favorite strong { overflow: hidden; color: var(--blue-dark); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.booking-customer-favorite small { flex: 0 0 auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.booking-customer-favorites-empty { display: flex; align-items: center; min-height: 34px; margin: 0; padding: 0 3px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.booking-customer-new-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.booking-customer-result-message { margin: 0; padding: 11px 12px; color: var(--muted); font-size: 12px; }
.booking-customer-result-message.is-error { color: #a34545; }
.booking-customer-result { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.booking-customer-result:last-child { border-bottom: 0; }
.booking-customer-result:hover, .booking-customer-result:focus-visible { background: #f2f7fc; outline: none; }
.booking-customer-result-main, .booking-customer-result-meta { display: grid; min-width: 0; gap: 3px; }
.booking-customer-result-main strong { overflow-wrap: anywhere; color: var(--blue-dark); font-size: 13px; }
.booking-customer-result-main small, .booking-customer-result-meta small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.booking-customer-result-meta { flex: 0 0 auto; justify-items: end; }
.booking-customer-archived { color: #9b6a28 !important; }
.booking-customer-selected { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 10px 12px; border: 1px solid #d9e3ed; border-radius: 5px; background: #fff; }
.booking-customer-selected-copy { display: grid; min-width: 0; gap: 4px; }
.booking-customer-selected-copy strong { overflow-wrap: anywhere; color: var(--blue-dark); font-size: 14px; }
.booking-customer-selected-copy span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.booking-customer-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.booking-customer-actions .button-secondary { min-height: 34px; padding: 6px 9px; }
.booking-customer-actions .filter-reset { min-height: 34px; padding: 5px 8px; white-space: nowrap; }
.booking-customer-picker-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(13, 28, 48, .48); }
.booking-customer-picker { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(560px, 100%); max-height: min(700px, calc(100dvh - 32px)); overflow: hidden; border: 1px solid #e0e7ef; border-radius: 8px; background: #f7f9fc; box-shadow: 0 24px 64px rgba(12, 31, 57, .25); }
.booking-customer-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.booking-customer-picker-head .eyebrow { color: var(--muted); font-size: 11px; }
.booking-customer-picker-head h2 { margin: 3px 0 0; color: var(--blue-dark); font-size: 19px; }
.booking-customer-picker-search { padding: 13px 16px 10px; background: #fff; }
.booking-customer-picker-search input { width: 100%; min-height: 41px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; }
.booking-customer-picker-list { min-height: 100px; overflow-y: auto; padding: 0 16px 12px; background: #fff; }
.booking-customer-picker-message { margin: 0; padding: 18px 8px; color: var(--muted); font-size: 13px; }
.booking-customer-picker-message.is-error { color: #a34545; }
.booking-customer-picker-message button { margin-left: 6px; border: 0; background: transparent; color: var(--blue); font: inherit; cursor: pointer; }
.booking-customer-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: #fff; }
.cust-line { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 6px 0 6px; }
.cust-line strong { font-size: 18px; color: var(--blue-dark); }
.cust-line a { color: var(--blue); font-size: 13.5px; text-decoration: none; }
.cust-line a:hover { text-decoration: underline; }
.cust-meta { color: var(--muted); font-size: 12.5px; }
.panel-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.status-select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.field-grid { display: grid; gap: 14px; margin-top: 10px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.modal label, .card label { display: block; color: var(--muted); font-size: 12px; }
.modal label input, .modal label select, .modal label textarea,
.card label input, .card label select, .card label textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink); font: inherit;
}
.card label textarea { resize: vertical; }
.modal label.full, .card label.full { grid-column: 1 / -1; }
.end-note { margin-top: 12px; color: var(--muted); font-size: 13px; }
.end-note strong { color: var(--blue-dark); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.chip.muted { background: #eef1f5; color: var(--muted); }
.modal-foot {
  background: #fff; border-top: 1px solid var(--line);
  padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.foot-left, .foot-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.modal-foot button { border-radius: 8px; padding: 10px 16px; font-size: 13.5px; border: 1px solid transparent; }
.modal-foot .ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.modal-foot .ghost:hover { border-color: var(--blue); color: var(--blue); }
.modal-foot .ghost.danger { color: var(--danger); border-color: #f3cfcd; }
.modal-foot .ghost.danger:hover { background: #fdeceb; }
.modal-foot .primary { background: var(--blue); color: #fff; font-weight: 600; }
.modal-foot .primary:hover { background: var(--blue-mid); }
.modal-foot .primary:disabled { opacity: .6; cursor: default; }

/* ── 网站内容管理 ─────────────────────────────────────────────── */
.content-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px;
}
.content-tab-title { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
.content-tab-title .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.content-tab-title strong { color: var(--blue-dark); font-size: 15px; }
.content-tabs button {
  border: 0; background: transparent; color: var(--ink);
  padding: 8px 14px; border-radius: 7px; font-size: 13.5px;
}
.content-tabs button:hover { background: var(--blue-soft); color: var(--blue); }
.content-tabs button.active { background: var(--blue); color: #fff; font-weight: 600; }
.content-tabs .spacer { flex: 1; }
.content-tabs .save { background: var(--blue); color: #fff; font-weight: 600; padding: 9px 20px; }
.content-tabs .save:hover { background: var(--blue-mid); }
.content-tabs .save:disabled { opacity: .6; cursor: default; }
.content-tabs .saved { color: var(--green); font-size: 12.5px; }
.toast-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(13, 35, 64, .14); }
.toast { display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: min(420px, calc(100vw - 40px)); padding: 16px 20px; background: #fff; border: 1px solid #cfe0f2; border-radius: 8px; box-shadow: 0 18px 50px rgba(20, 48, 83, .18); color: var(--blue-dark); animation: toast-in .18s ease-out; }
.toast.error { border-color: #efc8c8; color: #9b2f37; }
.toast-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; }
.toast.error .toast-icon { background: #b64048; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin-bottom: 16px; }
.card h3 { font-size: 17px; margin-bottom: 4px; }
.card h4 { font-size: 14px; margin: 20px 0 8px; color: var(--blue-dark); }
.card .hint { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.triple input, .triple textarea, .triple select { margin-top: 0 !important; }
.hero-preview {
  margin-top: 18px; padding: 24px 26px; border-radius: 10px;
  background: linear-gradient(135deg, #12294b, #1a63b8); color: #fff;
}
.hero-preview small { letter-spacing: .14em; font-size: 10.5px; color: #9dc0e8; }
.hero-preview strong { display: block; font-size: 27px; margin: 8px 0 10px; font-weight: 600; }
.hero-preview strong em { font-style: italic; font-family: Georgia, serif; }
.hero-preview p { color: #cfe0f3; font-size: 13.5px; max-width: 60ch; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.upload-btn:hover { background: var(--blue-mid); }
.upload-btn.small { padding: 7px 12px; font-size: 12px; font-weight: 500; margin-top: 8px; }
/* 上面 .card label input{display:block} 会盖掉 hidden 属性，这里显式隐藏文件选择框 */
.upload-btn input[type="file"] { display: none !important; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.thumb { position: relative; border-radius: 9px; overflow: hidden; background: #eef3f9; aspect-ratio: 16/10; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-no {
  position: absolute; left: 8px; top: 8px; background: rgba(18,41,75,.75); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.thumb-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 5px; }
.thumb-actions button {
  border: 0; width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,.94); color: var(--ink); font-size: 14px;
}
.thumb-actions button:hover { background: #fff; color: var(--blue); }
.thumb-actions button:disabled { opacity: .35; cursor: default; }
.thumb-actions button.danger:hover { color: var(--danger); }
.mini-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.mini-row input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; }
.mini-row button { border: 0; border-radius: 7px; padding: 9px 12px; background: #fdeceb; color: var(--danger); }
.add-row { border: 1px dashed var(--blue-line); background: var(--blue-soft); color: var(--blue); border-radius: 8px; padding: 9px 14px; font-size: 13px; }
.member { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member-photo { text-align: center; }
.member-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.member-photo .no-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: #eef3f8; color: transparent;
}
.member-photo .no-photo::before,
.member-photo .no-photo::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); background: #aebdcd;
}
.member-photo .no-photo::before { top: 25%; width: 29%; aspect-ratio: 1; border-radius: 50%; }
.member-photo .no-photo::after { bottom: 14%; width: 58%; height: 38%; border-radius: 52% 52% 18% 18%; }
.member-photo-actions { display: grid; gap: 7px; margin-top: 10px; }
.member-photo-actions .upload-btn { justify-content: center; }
.photo-remove-button {
  width: 100%; padding: 8px 10px; border: 1px solid #efd0d0; border-radius: 7px;
  background: #fff7f7; color: var(--danger); font-size: 12px; cursor: pointer;
}
.photo-remove-button:hover { background: #fff0f0; border-color: #dfabab; }
.member-fields { display: grid; gap: 12px; }
.day-row th { background: #f2f7fd; font-size: 12.5px; color: var(--blue-dark); }
tr.clickable { cursor: pointer; }

@media (max-width: 900px) {
  .field-grid.two, .field-grid.three, .triple { grid-template-columns: 1fr; }
  .member { grid-template-columns: 1fr; }
  .member-photo { max-width: 200px; }
  .hover-card { display: none; }
  .mini-row { grid-template-columns: 1fr 1fr; }
}

/* Multiple break ranges stay readable and remain inside the staff card. */
.schedule-break-list { display: grid; gap: 7px; margin-top: 2px; }
.schedule-break-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; align-items: center; gap: 7px; min-width: 0; }
.schedule-break-row .schedule-time-range { min-width: 0; gap: 7px; }
.schedule-break-row .schedule-time-range input { width: 104px; min-width: 0; }
.break-index { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d5e1f0; border-radius: 50%; background: #f7faff; color: #6d82a2; font-size: 11px; font-weight: 700; }
.remove-break-button { width: 30px; height: 30px; padding: 0; border: 1px solid #d7e1ef; border-radius: 4px; background: #fff; color: #7890ad; font-size: 18px; line-height: 1; }
.remove-break-button:hover { border-color: #bd8790; background: #fff7f7; color: #a05b64; }

@media (max-width: 640px) {
  .schedule-break-row .schedule-time-range input { width: auto; flex: 1; min-width: 0; }
}

/* ── 休息日整列状态 ─────────────────────────────────────────── */
.cal-head .h-col.day-off-column { background: #eef2f6; color: #8c99a9; }
.cal-head .h-col.day-off-column .avatar { background: #b6c0cc !important; }
.day-off-label { flex-basis: 100%; margin-top: 2px; color: #9aa6b5; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cal-body .col.day-off-column { min-height: calc(var(--hour) * 24); background: #eef2f6; border-left: 1px solid #d9e0e8; border-right: 1px solid #d9e0e8; }
.day-off-column-body { display: flex; align-items: flex-start; justify-content: center; min-height: calc(var(--hour) * 24); padding: 28px 14px 0; color: #9aa6b5; font-size: 12px; text-align: center; }
.day-off-column-body span { padding: 7px 10px; border: 1px dashed #c9d3df; border-radius: 5px; background: rgba(255,255,255,.38); }
.cal-body .col.day-off-column .appt { z-index: 2; }

/* ── 客户管理工作区 ─────────────────────────────────────────── */
.clients-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.client-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-add-button { flex: none; min-height: 40px; padding-inline: 18px; }
.client-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.client-stat { display: grid; gap: 3px; min-height: 80px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 3px 10px rgba(23,54,97,.035); }
.client-stat:hover, .client-stat.active { border-color: #aac4e8; background: #f7faff; }
.client-stat strong { color: var(--blue-dark); font-size: 24px; line-height: 1.05; }
.client-stat span { color: var(--muted); font-size: 12px; }
.client-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.client-search { flex: 1; max-width: 460px; }
.client-search input { width: 100%; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.client-search input:focus { border-color: var(--blue); outline: 2px solid #e4efff; }
.client-table-wrap { box-shadow: 0 3px 12px rgba(23,54,97,.04); }
.client-row td { vertical-align: middle; }
.client-row td strong { color: var(--blue-dark); font-weight: 700; }
.client-row td small { display: block; margin-top: 3px; color: #8a98aa; font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-pill.success { background: #e8f5ee; color: #3f8967; }
.status-pill.muted { background: #eef1f5; color: #7c8898; }
.table-action { padding: 6px 9px; border: 1px solid #d7e3f2; border-radius: 5px; background: #fff; color: var(--blue); font-size: 11px; white-space: nowrap; }
.table-action:hover { border-color: var(--blue); background: var(--blue-soft); }
.client-page-message { margin-top: 10px; color: var(--green); font-size: 12px; }
.client-import-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.client-import-actions small { color: var(--muted); }
.client-import-file { position: relative; overflow: hidden; cursor: pointer; }
.client-import-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.client-import-preview th, .client-import-preview td { white-space: nowrap; }
.client-import-modal { width: min(980px, calc(100vw - 32px)); }

.drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgba(18,41,75,.32); }
.client-drawer { display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; background: #f7f9fc; box-shadow: -18px 0 45px rgba(18,41,75,.18); }
.client-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.client-drawer-head h2 { margin-top: 4px; color: var(--blue-dark); font-size: 23px; }
.drawer-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 22px; line-height: 1; }
.drawer-close:hover { border-color: var(--blue); color: var(--blue); }
.client-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; }
.client-drawer-section { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.client-drawer-section h3 { margin-bottom: 14px; color: var(--blue-dark); font-size: 15px; }
.client-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.client-form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.client-form-grid label.full { grid-column: 1 / -1; }
.client-form-grid input, .client-form-grid select, .client-form-grid textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); resize: vertical; }
.client-form-grid input:focus, .client-form-grid select:focus, .client-form-grid textarea:focus { border-color: var(--blue); outline: 2px solid #e4efff; }
.client-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.client-detail-stats div { display: grid; gap: 3px; padding: 11px 10px; border: 1px solid #e3eaf3; border-radius: 6px; background: #f8faff; }
.client-detail-stats strong { color: var(--blue-dark); font-size: 17px; }
.client-detail-stats span { color: var(--muted); font-size: 11px; }
.client-booking-list { display: grid; gap: 8px; }
.client-booking-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 11px 12px; border: 1px solid #e1e8f0; border-radius: 6px; background: #fff; color: var(--ink); text-align: left; }
.client-booking-item:hover { border-color: #aac4e8; background: #f7faff; }
.client-booking-item span:first-child { display: grid; gap: 2px; }
.client-booking-item small { color: var(--muted); font-size: 11px; }
.client-booking-amount { color: var(--blue-dark); font-weight: 700; white-space: nowrap; }
.booking-filters .archive-toggle { position: relative; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 4px 10px; border: 1px solid #d5e0ed; border-radius: 4px; background: #f8fbff; cursor: pointer; }
.booking-filters .archive-toggle > input { position: absolute; width: 1px; height: 1px; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; }
.archive-toggle-switch { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 10px; background: #b7c3d3; box-shadow: inset 0 0 0 1px rgba(51,76,111,.12); transition: background .16s ease; }
.archive-toggle-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(25,50,83,.25); transition: transform .16s ease; }
.archive-toggle > input:checked + .archive-toggle-switch { background: #2868cf; }
.archive-toggle > input:checked + .archive-toggle-switch i { transform: translateX(14px); }
.archive-toggle > input:focus-visible + .archive-toggle-switch { outline: 2px solid #8ab5f5; outline-offset: 2px; }
.archive-toggle-copy { display: grid; gap: 1px; white-space: nowrap; }
.archive-toggle-copy strong { color: #405775; font-size: 11px; line-height: 1.15; }
.archive-toggle-copy small { color: #8a98aa; font-size: 9px; line-height: 1.15; }
.booking-bulk-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #bcd2ee; border-left: 4px solid #2868cf; border-radius: 5px; background: #f5f9ff; box-shadow: 0 3px 10px rgba(29,76,139,.06); }
.booking-bulk-count { display: flex; align-items: baseline; gap: 6px; min-width: 124px; color: #49617f; }
.booking-bulk-count strong { color: #1557bd; font-size: 20px; }
.booking-bulk-count span { font-size: 11px; font-weight: 650; }
.booking-bulk-action { display: flex!important; align-items: center; gap: 8px!important; color: #657791!important; font-size: 11px!important; }
.booking-bulk-action select { height: 34px; min-width: 164px; padding: 0 30px 0 9px; border: 1px solid #cddbea; border-radius: 4px; background: #fff; color: #334f75; }
.booking-bulk-apply,.booking-bulk-clear { height: 34px; padding: 0 13px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; }
.booking-bulk-apply { border: 1px solid #2868cf; background: #2868cf; color: #fff; }
.booking-bulk-apply:disabled { opacity: .5; cursor: default; }
.booking-bulk-clear { margin-left: auto; border: 1px solid #cad7e6; background: #fff; color: #5d7190; }
.booking-select-cell { width: 42px!important; min-width: 42px; padding-left: 12px!important; padding-right: 6px!important; text-align: center; }
.booking-checkbox { position: relative; display: inline-grid!important; width: 18px; height: 18px; place-items: center; cursor: pointer; }
.booking-checkbox input { position: absolute; width: 1px!important; height: 1px!important; min-width: 0!important; padding: 0!important; opacity: 0; }
.booking-checkbox span { width: 16px; height: 16px; border: 1px solid #b8c8dc; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.booking-checkbox input:checked + span { border-color: #2868cf; background: #2868cf; }
.booking-checkbox input:checked + span:after { content: ''; display: block; width: 8px; height: 4px; margin: 3px 0 0 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.booking-checkbox input:indeterminate + span { border-color: #2868cf; background: #2868cf; }
.booking-checkbox input:indeterminate + span:after { content: ''; display: block; width: 8px; height: 2px; margin: 6px 0 0 3px; background: #fff; }
.booking-checkbox input:focus-visible + span { outline: 2px solid #8ab5f5; outline-offset: 2px; }
.booking-row-selected td { background: #f5f9ff; }
.booking-row-selected:hover td { background: #edf5ff; }

/* Service rows use the card boundary only; no decorative left stripe. */
.service-catalog-row,
.service-catalog-row:hover {
  border-left: 0;
}
.service-catalog-row {
  padding-left: 18px;
}
.client-drawer-loading { display: grid; place-items: center; min-height: 180px; color: var(--muted); }
.client-drawer-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line); background: #fff; }
.client-drawer-foot .primary, .client-drawer-foot .button-secondary, .client-drawer-foot .button-danger { min-height: 38px; padding: 0 14px; border-radius: 6px; }
.client-drawer-foot .primary { border: 0; }
.client-drawer-foot .button-secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.client-drawer-foot .button-danger { border: 1px solid #efcfd0; background: #fff; color: var(--danger); }
.client-drawer-message { flex: 1; min-width: 120px; color: var(--green); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .booking-filters .archive-toggle { justify-content: flex-start; width: 100%; }
  .booking-bulk-bar { align-items: stretch; flex-direction: column; }
  .booking-bulk-action { align-items: stretch; flex-direction: column; }
  .booking-bulk-action select,.booking-bulk-apply,.booking-bulk-clear { width: 100%; }
  .booking-bulk-clear { margin-left: 0; }
  .clients-page-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .client-add-button { align-self: flex-start; }
  .client-stats { grid-template-columns: 1fr; }
  .client-toolbar { align-items: stretch; flex-direction: column; }
  .client-search { max-width: none; }
  .client-table-wrap { overflow-x: auto; }
  .client-table-wrap table { min-width: 760px; }
  .client-form-grid { grid-template-columns: 1fr; }
  .client-form-grid label.full { grid-column: auto; }
  .client-detail-stats { grid-template-columns: 1fr; }
  .client-drawer-foot { align-items: stretch; }
  .client-drawer-message { flex-basis: 100%; order: -1; }
  .client-drawer-foot button { flex: 1; }
}

/* ── 手机端工作区 ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    height: auto;
    padding: 0 8px;
  }

  .brand {
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0 6px;
  }

  .topbar-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .brand strong {
    max-width: 190px;
    font-size: 12px;
  }

  .topnav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100vw - 16px);
    height: 44px;
    min-height: 44px;
    margin-inline: 0;
    border-top: 1px solid rgba(255,255,255,.1);
  }

  .topnav button {
    min-width: 62px;
    height: 44px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .topbar-right {
    gap: 2px;
    padding: 0;
  }

  .topbar-right .icon-btn {
    width: 34px;
    height: 36px;
    padding: 5px 6px !important;
  }

  .topbar-right .icon-btn:nth-child(3),
  .topbar-right .conn,
  .topbar-right .logout-btn {
    display: none;
  }

  .topbar-right .avatar-user {
    width: 30px;
    height: 30px;
  }

  .lang-select select {
    min-width: 72px;
    height: 34px;
    padding-left: 7px;
    padding-right: 18px;
    font-size: 11px;
  }

  .workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sidebar {
    min-width: 0;
    padding: 12px 14px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .side-title {
    margin: 0 0 9px;
  }

  .btn-new {
    width: auto;
    min-height: 42px;
    padding-inline: 14px;
    margin-bottom: 10px;
  }

  .mini-cal {
    max-width: 360px;
    margin: 0 auto 10px;
    padding: 4px 0;
  }

  .mini-cal-grid button {
    min-height: 32px;
  }

  .side-links,
  .context-nav {
    display: flex;
    gap: 7px;
    margin: 0 -14px;
    padding: 0 14px 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side-links::-webkit-scrollbar,
  .context-nav::-webkit-scrollbar {
    display: none;
  }

  .side-links button,
  .context-nav button {
    flex: 0 0 auto;
    min-height: 42px;
    width: auto;
    white-space: nowrap;
  }

  .context-nav-heading {
    display: grid;
    flex: 0 0 132px;
    align-content: center;
    min-height: 42px;
    padding: 0 9px;
    margin: 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .context-nav-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content {
    min-width: 0;
    padding: 20px 14px 44px;
  }

  .content:has(.cal-wrap) {
    padding: 8px 0 44px;
    overflow: hidden;
  }

  .page-head,
  .booking-page-head,
  .staff-page-head,
  .settings-page-head,
  .clients-page-head {
    gap: 12px;
  }

  .page-head h2,
  .booking-page-head h2,
  .staff-page-head h2,
  .settings-page-head h2,
  .clients-page-head h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .page-head p,
  .booking-page-head p,
  .staff-page-head p,
  .settings-page-head p {
    font-size: 12px;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 14px;
  }

  .stats div {
    min-width: 0;
    padding: 12px 10px;
  }

  .stats span {
    min-height: 32px;
    font-size: 10px;
  }

  .stats strong {
    font-size: 22px;
  }

  .booking-head-actions {
    width: 100%;
  }

  .booking-head-actions button {
    flex: 1;
    min-height: 44px;
  }

  .booking-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 9px;
    padding: 12px;
  }

  .booking-filters > input,
  .booking-filters > select,
  .booking-filters label,
  .booking-filters .button-secondary,
  .booking-filters .filter-reset,
  .booking-filters .archive-toggle {
    min-width: 0;
    width: 100%;
  }

  .booking-filters > input,
  .booking-filters > select,
  .booking-filters label input,
  .booking-filters .button-secondary {
    height: 44px;
  }

  .booking-filters > input,
  .booking-filters > select {
    grid-column: 1 / -1;
  }

  .booking-filters label {
    gap: 3px;
  }

  .booking-filters label input {
    min-width: 0;
  }

  .booking-filters .button-secondary,
  .booking-filters .filter-reset {
    min-height: 44px;
  }

  .booking-filters .archive-toggle {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 760px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 11px 12px;
  }

  .toolbar-row {
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
  }

  .date-nav {
    width: 100%;
    justify-content: space-between;
  }

  .date-nav .today-label {
    min-width: 0;
    flex: 1;
    font-size: 12px;
  }

  .date-nav button,
  .toolbar-row select {
    min-height: 42px;
  }

  .toolbar-row select {
    flex: 1;
    min-width: 0;
  }

  .toolbar-row .spacer {
    display: none;
  }

  .cal-wrap {
    max-width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100svh - 260px);
  }

  .cal-head,
  .cal-body {
    min-width: max(100%, 430px);
  }

  .cal-head .h-col {
    min-height: 52px;
    padding-inline: 5px;
    font-size: 12px;
  }

  .modal-backdrop,
  .service-modal-backdrop,
  .drawer-backdrop,
  .detail-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .modal,
  .service-editor-modal,
  .import-modal,
  .client-drawer {
    width: 100%;
    max-width: none;
    max-height: 100svh;
    min-height: 100svh;
    border-radius: 0;
  }

  .modal-head,
  .service-editor-head,
  .client-drawer-head {
    padding: 18px 16px 15px;
  }

  .modal-body,
  .service-editor-body,
  .client-drawer-body {
    padding: 14px;
  }

  .modal-foot,
  .service-editor-foot,
  .client-drawer-foot {
    padding: 12px 14px;
  }

  .modal-foot,
  .service-editor-foot,
  .client-drawer-foot {
    gap: 8px;
  }

  .modal-foot button,
  .service-editor-foot button,
  .client-drawer-foot button {
    min-height: 44px;
  }

  .modal-foot .foot-left,
  .modal-foot .foot-right {
    width: 100%;
  }

  .modal-foot .foot-right button,
  .modal-foot .foot-left button,
  .client-drawer-foot button,
  .service-editor-foot .editor-save,
  .service-editor-foot .editor-cancel {
    flex: 1;
  }

  .service-editor-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .service-editor-tabs::-webkit-scrollbar {
    display: none;
  }

  .service-editor-tabs button {
    min-height: 42px;
  }

  .service-editor-foot .editor-message {
    display: none;
  }

  .staff-card-head,
  .staff-week-head,
  .staff-week-list,
  .staff-card-foot {
    padding-inline: 14px;
  }

  .schedule-time-range {
    gap: 6px;
  }

  .schedule-time-range input {
    min-height: 42px;
  }

  .schedule-break-row {
    grid-template-columns: 20px minmax(0, 1fr) 34px;
  }

  .remove-break-button {
    width: 34px;
    height: 34px;
  }

  .settings-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-overview > button {
    min-height: 68px;
    padding: 10px;
  }

  .settings-panel-head {
    align-items: flex-start;
  }

  .settings-status {
    max-width: 92px;
    text-align: center;
    white-space: normal;
  }

  .settings-panel-body {
    padding: 14px;
  }

  .settings-panel-foot button {
    min-height: 44px;
  }

  .content-tabs {
    align-items: stretch;
  }

  .content-tabs .save {
    width: 100%;
    min-height: 44px;
  }

  .content-tabs .spacer {
    display: none;
  }

  .content-row,
  .mini-row {
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .topnav button {
    min-width: 58px;
    padding-inline: 10px;
  }

  .topbar-right .icon-btn {
    display: none;
  }

  .topbar-right .lang-select,
  .topbar-right .avatar-user {
    display: inline-flex;
  }

  .stats {
    gap: 4px;
  }

  .stats div {
    padding-inline: 7px;
  }

  .stats span {
    font-size: 9px;
  }

  .booking-filters {
    grid-template-columns: 1fr;
  }

  .booking-filters label,
  .booking-filters .button-secondary,
  .booking-filters .filter-reset {
    grid-column: 1;
  }

  .settings-overview {
    grid-template-columns: 1fr;
  }
}

/* 服务编辑器 · 卡片图文（2026-09-30） */
.card-editor{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:32px;max-width:980px}
.card-image-editor,.card-text-editor{display:grid;gap:14px;align-content:start}
.card-image-editor h3{margin:0;color:#7585a0;font-size:13px;font-weight:600}
.card-image-preview{aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:#eef2f7}
.card-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.card-image-preview.empty{display:grid;place-items:center;padding:20px;border:1px dashed #c4d0de;color:#8391a6;font-size:12px;text-align:center}
.card-image-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.card-upload{display:inline-flex;align-items:center;cursor:pointer}
.card-upload.busy{opacity:.6;cursor:default}
.card-image-remove{height:34px;padding:0 12px;border:0;border-radius:4px;background:#fff;color:#e16568;font-size:12px;font-weight:650}
.card-image-remove:hover{background:#fff1f1}
.card-text-editor .editor-language-tabs{margin:0}
@media (max-width:760px){.card-editor{grid-template-columns:1fr}.card-image-preview{max-width:300px}}

/* ================================================================
   Enterprise workspace polish - 2026-10-06
   A shared visual layer for the admin modules. Keeps the existing
   markup and behavior while giving every work surface the same depth,
   type scale, spacing, and interaction states.
   ================================================================ */
:root {
  --ink: #243b5b;
  --blue: #2868c8;
  --blue-dark: #102b52;
  --blue-mid: #1e56ad;
  --blue-soft: #eef5ff;
  --blue-line: #d4e2f2;
  --bg: #f2f5f9;
  --paper: #ffffff;
  --line: #dfe8f2;
  --muted: #667b97;
  --green: #2f8768;
  --warn: #a36b22;
  --danger: #b0525d;
  --shadow-card: 0 10px 28px rgba(28, 58, 96, .075), 0 1px 2px rgba(28, 58, 96, .08);
  --shadow-float: 0 20px 55px rgba(20, 46, 82, .18), 0 2px 5px rgba(20, 46, 82, .08);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.topbar {
  height: 68px;
  background: #102d58;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 4px 16px rgba(14, 39, 75, .14);
}
.brand { background: #0c254b; }
.brand small { font-size: 10px; }
.brand strong { font-size: 14px; }
.topnav button { padding-inline: 16px; font-size: 14px; }
.topnav button.active { background: rgba(255, 255, 255, .13); box-shadow: inset 0 -4px #fff; }
.topbar-right { gap: 9px; font-size: 13px; }
.lang-select select { height: 36px; font-size: 13px; }

.workspace {
  min-height: calc(100vh - 68px);
  background: var(--bg);
}
.sidebar {
  padding: 24px 13px 44px;
  background: #fff;
  border-right: 1px solid #dbe6f1;
  box-shadow: 4px 0 18px rgba(37, 69, 108, .035);
}
.content {
  padding: 34px 40px 72px;
  background: var(--bg);
}
.content:has(.cal-wrap) { background: #fff; }
.side-title { margin-inline: 10px; }
.side-title strong { font-size: 15px; }
.side-title small { font-size: 12px; }
.btn-new { min-height: 43px; margin-bottom: 20px; border-radius: 7px; font-size: 13px; box-shadow: 0 5px 12px rgba(40, 104, 200, .18); }
.side-links button, .context-nav button { font-size: 13.5px; }
.context-nav-heading strong { font-size: 15px; }

.page-head,
.booking-page-head,
.service-page-head,
.staff-page-head,
.settings-page-head,
.clients-page-head { margin-bottom: 26px; }
.page-head h2,
.booking-page-head h2,
.service-page-head h2,
.staff-page-head h2,
.settings-page-head h2,
.clients-page-head h2 { font-size: 30px; line-height: 1.2; letter-spacing: 0; }
.page-head p,
.booking-page-head p,
.service-page-head p,
.staff-page-head p,
.settings-page-head p { font-size: 14px; line-height: 1.6; }
.eyebrow { font-size: 11px; letter-spacing: .08em; font-weight: 700; }

.card,
.table-wrap,
.staff-card,
.settings-panel,
.service-group,
.content-tabs,
.booking-filters,
.client-stat,
.service-create {
  border: 1px solid #e2eaf3;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.card { padding: 28px; margin-bottom: 20px; }
.card h3 { font-size: 19px; line-height: 1.3; }
.card h4 { font-size: 15px; }
.card .hint { font-size: 13.5px; line-height: 1.55; }

.stats { gap: 16px; margin-bottom: 22px; }
.stats div {
  min-height: 108px;
  padding: 21px 23px;
  border: 1px solid #e0e9f3;
  border-top: 3px solid #3c78ca;
  border-radius: 11px;
  box-shadow: var(--shadow-card);
}
.stats span { font-size: 13px; margin-bottom: 9px; }
.stats strong { font-size: 30px; line-height: 1.1; }

.table-wrap { overflow: hidden; }
th, td { padding: 16px 19px; font-size: 14px; }
th { background: #f7faff; color: #5c7290; font-size: 12.5px; letter-spacing: 0; }
tbody tr:hover { background: #f7faff; }
td small { font-size: 12px; }
.status { min-height: 26px; padding: 4px 10px; font-size: 12px; font-weight: 700; }

.booking-filters {
  gap: 12px;
  padding: 17px 19px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(28, 58, 96, .055);
}
.booking-filters > input,
.booking-filters > select,
.booking-filters label input { height: 43px; font-size: 14px; border-color: #cfdceb; border-radius: 7px; }
.booking-filters label { font-size: 11px; font-weight: 700; }

.button-primary,
.button-secondary,
.service-add-button,
.client-add-button,
.staff-save-button,
.content-tabs .save,
.editor-save,
.primary {
  min-height: 42px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.button-primary,
.service-add-button,
.content-tabs .save,
.editor-save,
.primary { box-shadow: 0 5px 12px rgba(40, 104, 200, .18); }
.button-primary:hover,
.service-add-button:hover,
.content-tabs .save:hover,
.editor-save:hover,
.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(40, 104, 200, .22); }
.button-secondary { border-color: #cbd9e9; font-size: 13px; }
.button-secondary:hover { background: #f4f8fe; border-color: #8eadd4; }

.service-subnav { min-height: 56px; margin-bottom: 22px; background: #fff; border-top: 1px solid #e2eaf3; border-bottom: 1px solid #dbe6f1; }
.service-subnav > button { min-height: 56px; padding-inline: 21px; font-size: 14px; }
.service-status-filter { font-size: 13px; }
.service-status-filter select { height: 38px; font-size: 13px; border-radius: 7px; }
.service-search-row { margin-bottom: 17px; }
.service-search-row input { height: 43px; font-size: 14px; border-radius: 7px; }
.service-group { overflow: hidden; }
.service-group-head { min-height: 56px; padding-inline: 20px; background: #f7faff; }
.service-group-head h3 { font-size: 16px; }
.service-group-head .service-group-count { flex: none; color: #8290a3; font-size: 12px; }
.category-team-toggle { flex: none; min-height: 34px; padding: 0 11px; border: 1px solid #bfd0e4; border-radius: 5px; background: #fff; color: #28548c; font-size: 12px; font-weight: 700; }
.category-team-toggle:hover { border-color: #648bb8; background: #f1f6fc; }
.category-team-editor { padding: 18px 20px 16px; border-bottom: 1px solid #e4ebf3; background: #fff; }
.category-team-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.category-team-editor-head h4 { margin: 0; color: #263f60; font-size: 15px; }
.category-team-editor-head p { max-width: 780px; margin: 5px 0 0; color: #718198; font-size: 12px; line-height: 1.55; }
.category-team-close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: #718198; font-size: 22px; }
.category-team-close:hover { background: #eef3f8; color: #243b58; }
.category-team-scope { margin: 12px 0 0; color: #526b89; font-size: 12px; font-weight: 700; }
.category-team-mixed { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid #d7a542; background: #fff8e9; color: #75591d; font-size: 12px; line-height: 1.5; }
.category-team-options { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.category-team-options .team-option { min-height: 48px; }
.category-team-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #edf1f5; }
.category-team-message { min-height: 18px; color: #28724f; font-size: 12px; }
.category-team-editor-foot > div { display: flex; flex: none; gap: 8px; }
.category-team-editor-foot button { min-height: 36px; padding: 0 12px; }
.service-catalog-row { min-height: 68px; padding: 16px 20px; border-bottom-color: #e8eef5; }
.service-row-title b { font-size: 14.5px; color: #2a456b; }
.service-variants { font-size: 14px; }
.service-row-arrow { font-size: 26px; }

.staff-card { border-radius: 12px; box-shadow: var(--shadow-card); }
.staff-card-head { padding: 26px 28px 23px; }
.staff-identity { gap: 15px; }
.staff-avatar { width: 50px; height: 50px; font-size: 18px; }
.staff-card h3 { font-size: 24px; }
.staff-summary { gap: 28px; }
.staff-summary-item strong { font-size: 21px; }
.staff-summary-item span { font-size: 12px; }
.staff-week-head { padding: 16px 28px 12px; font-size: 12px; }
.staff-week-list { padding-inline: 28px; }
.schedule-day-card { min-height: 96px; padding: 20px 0; }
.schedule-day-meta > strong { font-size: 15px; }
.schedule-toggle { font-size: 12px; }
.schedule-field-label { font-size: 12px; }
.schedule-time-range input { width: 124px; height: 43px; font-size: 15px; border-radius: 7px; }
.schedule-break-block small { font-size: 13px; }
.staff-card-foot { min-height: 78px; padding: 17px 28px; }
.staff-save-button { min-width: 168px; height: 42px; }
.staff-edit-button, .staff-status-button { min-height: 42px; border-radius: 7px; font-size: 13px; }

.content-tabs { padding: 13px 17px; margin-bottom: 20px; background: #fff; }
.content-tab-title { padding-inline: 8px; }
.content-tab-title strong { font-size: 16px; }
.content-tabs button { padding: 10px 15px; font-size: 14px; }
.member { gap: 28px; padding: 24px 0; }
.member-fields { gap: 15px; }
.member-field-head strong { font-size: 16px; }
.member-fields input, .member-fields textarea { min-height: 43px; font-size: 14px; }

.client-stats { gap: 16px; margin-bottom: 20px; }
.client-stat { min-height: 102px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.client-stat strong { font-size: 29px; }
.client-stat span { font-size: 13px; }
.client-toolbar { gap: 12px; margin-bottom: 16px; }
.client-search input { min-height: 43px; font-size: 14px; border-radius: 7px; }
.client-drawer-section { padding: 21px; border-radius: 10px; box-shadow: 0 4px 14px rgba(27, 56, 92, .045); }
.client-drawer-section h3 { font-size: 17px; }
.client-form-grid label { font-size: 13px; }
.client-form-grid input, .client-form-grid select, .client-form-grid textarea { min-height: 43px; font-size: 14px; }

.settings-overview { gap: 13px; margin-bottom: 22px; }
.settings-overview > button { min-height: 76px; padding: 16px; border: 1px solid #e0e9f3; border-radius: 10px; box-shadow: 0 4px 14px rgba(28, 58, 96, .045); }
.settings-overview strong { font-size: 13px; }
.settings-overview small { font-size: 12px; }
.settings-panel { overflow: hidden; box-shadow: var(--shadow-card); }
.settings-panel-head { padding: 22px 25px; }
.settings-panel-title h3 { font-size: 18px; }
.settings-panel-title p { font-size: 13px; }
.settings-panel-body { padding: 25px; }
.settings-field { font-size: 13px; }
.settings-field input, .settings-field select { height: 44px; font-size: 14px; border-radius: 7px; }
.settings-field small { font-size: 12px; }
.settings-test-box { padding: 17px; border-radius: 9px; }
.settings-panel-foot { padding: 16px 25px; }
.gift-card-stripe-settings { margin-bottom: 22px; }
.gift-card-stripe-endpoint { display: block; min-height: 44px; padding: 12px 13px; border: 1px solid #d9e3ef; border-radius: 7px; background: #f7faff; color: #24476d; font: inherit; line-height: 20px; overflow-wrap: anywhere; word-break: break-word; }
.retention-panel { border-top: 3px solid #bd7b2d; }
.retention-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.retention-preview-head > div { display: flex; flex-wrap: wrap; gap: 8px; }
.retention-empty { margin-top: 14px; padding: 18px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.retention-preview-list { display: grid; gap: 8px; margin-top: 14px; }
.retention-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fffaf2; }
.retention-preview-row strong { min-width: 0; overflow-wrap: anywhere; }
.retention-preview-row small { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 640px) { .retention-preview-head { align-items: flex-start; flex-direction: column; } .retention-preview-row { grid-template-columns: 1fr; } .retention-preview-row small { grid-column: auto; } }

.modal, .service-editor-modal, .client-drawer, .staff-editor-drawer { box-shadow: var(--shadow-float); }
.modal, .service-editor-modal { border-radius: 12px; }
.modal-head, .service-editor-head, .client-drawer-head, .staff-editor-head { padding: 25px 28px 21px; }
.modal-head h2, .service-editor-head h2, .client-drawer-head h2, .staff-editor-head h2 { font-size: 25px; line-height: 1.25; }
.modal-head p, .staff-editor-head p { font-size: 13px; }
.modal-body, .service-editor-body, .client-drawer-body, .staff-editor-body { font-size: 14px; }
.modal label, .card label { font-size: 13px; }
.modal label input, .modal label select, .modal label textarea,
.card label input, .card label select, .card label textarea { min-height: 43px; font-size: 14px; border-radius: 7px; }
.staff-editor-section { padding: 21px; border-radius: 10px; box-shadow: 0 4px 14px rgba(27, 56, 92, .045); }
.staff-editor-section h3 { font-size: 17px; }
.staff-form-grid label, .staff-language-fields label { font-size: 13px; }
.staff-form-grid input, .staff-form-grid select, .staff-language-fields input, .staff-language-fields textarea { min-height: 43px; font-size: 14px; }

@media (max-width: 760px) {
  .topbar { height: auto; }
  .content { padding: 24px 16px 48px; }
  .page-head h2, .booking-page-head h2, .service-page-head h2,
  .staff-page-head h2, .settings-page-head h2, .clients-page-head h2 { font-size: 26px; }
  .page-head p, .booking-page-head p, .service-page-head p,
  .staff-page-head p, .settings-page-head p { font-size: 13px; }
  .card { padding: 20px; }
  .stats div { min-height: 96px; padding: 16px 14px; }
  .stats span { font-size: 11px; }
  .stats strong { font-size: 24px; }
  .table-wrap { border-radius: 9px; }
  th, td { padding: 13px 14px; }
  .service-group-head { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 10px; min-height: 0; padding: 12px 15px; }
  .service-group-head h3 { min-width: 0; overflow-wrap: anywhere; }
  .category-team-toggle { grid-column: 2 / 4; justify-self: start; }
  .category-team-toggle { min-height: 36px; padding-inline: 9px; font-size: 11px; }
  .category-team-editor { padding: 16px 15px; }
  .category-team-editor-foot { align-items: stretch; flex-direction: column; }
  .category-team-editor-foot > div { width: 100%; }
  .category-team-editor-foot button { flex: 1; }
  .service-catalog-row { padding-inline: 15px; }
  .staff-card-head, .staff-week-head, .staff-week-list, .staff-card-foot { padding-inline: 18px; }
  .staff-card h3 { font-size: 22px; }
  .schedule-time-range input { width: auto; min-width: 0; flex: 1; }
  .settings-panel-head, .settings-panel-body { padding: 18px; }
  .settings-panel-foot { padding: 14px 18px; }
  .modal-head, .service-editor-head, .client-drawer-head, .staff-editor-head { padding: 20px 18px 17px; }
  .modal-head h2, .service-editor-head h2, .client-drawer-head h2, .staff-editor-head h2 { font-size: 22px; }
  .client-drawer-section, .staff-editor-section { padding: 17px; }
}

/* Calendar booking editor and service picker are right-side working drawers. */
.booking-modal-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}
.booking-modal {
  width: min(680px, 100%);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 12px 0 0 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.booking-modal .modal-body { min-height: 0; }
.booking-services-field { display: grid; gap: 10px; margin: 8px 0 18px; }
.booking-services-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.booking-services-label small { color: var(--blue-dark); font-size: 12px; font-weight: 600; }
.booking-services-empty { margin: 0; color: var(--muted); font-size: 13px; }
.booking-selected-services { display: grid; gap: 8px; }
.booking-selected-service { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; }
.booking-selected-service-copy { display: grid; gap: 4px; min-width: 0; }
.booking-selected-service-copy strong { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; line-height: 1.4; }
.booking-selected-service-copy small { color: var(--muted); font-size: 12px; }
.booking-selected-service-price { color: var(--blue-dark); white-space: nowrap; font-size: 13px; }
.booking-remove-service { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #f0d8d6; border-radius: 7px; background: #fff8f7; color: #b7433d; font-size: 22px; line-height: 1; cursor: pointer; }
.booking-remove-service:hover { background: #fdeceb; }
.booking-add-service { justify-self: start; min-height: 42px; padding: 9px 13px; border: 1px dashed #a9bdd8; border-radius: 7px; background: #f7faff; color: var(--blue-dark); font-size: 13px; font-weight: 650; cursor: pointer; }
.booking-add-service:hover { border-color: var(--blue); background: var(--blue-soft); }
.service-picker-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: rgba(13, 28, 48, .36); }
.service-picker-drawer { width: min(560px, 100%); height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #f7f9fc; box-shadow: -18px 0 48px rgba(12, 31, 57, .2); }
.service-picker-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 12px 16px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.service-picker-head .eyebrow { color: var(--muted); font-size: 11px; }
.service-picker-head h2 { margin: 5px 0 0; color: var(--blue-dark); font-size: 22px; }
.service-picker-close { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 25px; cursor: pointer; }
.service-picker-close:hover { color: var(--ink); }
.service-picker-search { grid-column: 1 / -1; }
.service-picker-search input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; }
.service-picker-body { min-height: 0; overflow: auto; padding: 18px 22px 28px; }
.service-picker-group { overflow: hidden; margin-bottom: 12px; border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; }
.service-picker-group-toggle, .service-picker-service-toggle { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 12px 16px; border: 0; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.service-picker-group-toggle { font-size: 15px; font-weight: 700; }
.service-picker-service-toggle { min-height: 52px; border-top: 1px solid #edf1f6; font-size: 14px; font-weight: 600; }
.service-picker-group-toggle:hover, .service-picker-service-toggle:hover { background: #f7faff; }
.service-picker-chevron { display: grid; place-items: center; width: 24px; height: 24px; justify-self: end; }
.service-picker-chevron::before { content: ""; display: block; width: 8px; height: 8px; border-right: 1.8px solid #61748d; border-bottom: 1.8px solid #61748d; transform: rotate(45deg); transform-origin: center; transition: transform .18s ease; }
.service-picker-group-toggle[aria-expanded="true"] .service-picker-chevron::before,
.service-picker-service-toggle[aria-expanded="true"] .service-picker-chevron::before { transform: rotate(225deg); }
.service-picker-group-content { border-top: 1px solid #edf1f6; }
.service-picker-options { display: grid; gap: 7px; padding: 9px 12px 12px; background: #f7f9fc; }
.service-picker-option { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 12px; min-height: 56px; padding: 9px 12px; border: 1px solid #dfe7f1; border-radius: 7px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.service-picker-option:hover, .service-picker-option.selected { border-color: #90add1; background: #f2f7ff; }
.service-picker-option > span:first-child { display: grid; gap: 4px; min-width: 0; }
.service-picker-option strong { overflow-wrap: anywhere; font-size: 13px; }
.service-picker-option small { color: var(--muted); font-size: 11px; }
.service-picker-option-price { color: var(--blue-dark); white-space: nowrap; font-size: 13px; font-weight: 700; }
.service-picker-option-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #eef3fa; color: var(--blue); font-size: 17px; }
.service-picker-option.selected .service-picker-option-mark { background: var(--blue); color: #fff; font-size: 14px; }
.service-picker-empty { margin: 18px 4px; padding: 16px; border: 1px solid #e1e8f0; border-radius: 8px; background: #fff; color: var(--muted); line-height: 1.5; }
.calendar-create-button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.calendar-create-button.secondary { background: #fff; border-color: #c9d3df; color: var(--ink); }
.calendar-create-button:hover { filter: brightness(.95); }
.calendar-block-error { margin: 0; padding: 10px 24px; background: #fff1f0; color: #962e37; }
.calendar-block-error button { margin-left: 8px; background: transparent; border: 0; text-decoration: underline; color: inherit; }
.calendar-block { position: absolute; z-index: 2; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 10px; box-sizing: border-box; padding: 4px 9px; overflow: hidden; border: 1px solid #b7c4c0; border-left: 4px solid #597d70; border-radius: 2px; background: repeating-linear-gradient(135deg, #eaf0ed, #eaf0ed 7px, #e4eae7 7px, #e4eae7 8px); color: #304d42; text-align: left; cursor: pointer; }
.calendar-block[data-block-type="meeting"] { border-color: #c8bed2; border-left-color: #887294; background: #eeeaf2; color: #564362; }
.calendar-block[data-block-type="leisure"], .calendar-block[data-block-type="custom"] { border-color: #c9c4b1; border-left-color: #8b805a; background: #f0eee5; color: #605735; }
.calendar-block strong, .calendar-block small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 16px; }
.calendar-block small { font-weight: 400; }
.calendar-block:hover, .calendar-block:focus-visible { z-index: 4; outline: 2px solid #617b70; outline-offset: -2px; }
.calendar-block.draggable { cursor: grab; touch-action: none; user-select: none; }
.calendar-block.dragging { z-index: 5; cursor: grabbing; box-shadow: 0 6px 18px rgba(31, 68, 49, .2); }
.rail { position: relative; }
.cal-body { position: relative; isolation: isolate; z-index: 0; }
.calendar-now-line { position: absolute; left: 0; right: 0; height: 2px; z-index: 6; background: #2764e8; pointer-events: none; }
.calendar-now-label { position: absolute; right: 0; z-index: 7; padding: 3px 5px; border-radius: 3px 0 0 3px; transform: translateY(-50%); background: #2764e8; color: #fff; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; pointer-events: none; }
.booking-modal .modal-body.termin-body { display: flex; flex-direction: column; gap: 28px; padding: 20px 26px 28px; background: #fff; }
.booking-modal .termin-body .termin-section { background: transparent; }
.termin-section { min-width: 0; }
.termin-section h3 { margin: 0 0 16px; font-size: 19px; font-weight: 650; }
.termin-section .field-grid { margin: 0; }
.termin-body .termin-time-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.termin-section label, .termin-customer-dialog label { display: grid; gap: 7px; min-width: 0; font-size: 13px; color: var(--ink); }
.termin-section input, .termin-section select, .termin-section textarea, .termin-customer-dialog input, .termin-customer-dialog textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: 11px 12px; border: 1px solid #cbd4e0; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.termin-section input, .termin-section select, .termin-customer-dialog input { min-height: 44px; }
.termin-section textarea, .termin-customer-dialog textarea { line-height: 1.6; resize: vertical; }
.termin-staff { margin-top: 14px; }
.termin-switch, .booking-modal .termin-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-top: 18px; color: var(--ink); font-size: 14px; cursor: pointer; }
.termin-switch input, .booking-modal .termin-switch input { appearance: none; flex: 0 0 38px; width: 38px; min-height: 0; height: 23px; padding: 2px; margin: 0; border: 1px solid #c0cad8; border-radius: 14px; background: #d2d9e4; cursor: pointer; }
.termin-switch input::before { content: ''; display: block; height: 17px; width: 17px; border-radius: 50%; background: #fff; transition: transform .15s; }
.termin-switch input:checked { border-color: #2359e9; background: #2359e9; }
.termin-switch input:checked::before { transform: translateX(15px); }
.termin-switch input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.termin-repeat-fields { margin-top: 14px; }
.termin-repeat-fields p { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.termin-customer-control { position: relative; }
.termin-customer-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #cbd4e0; border-radius: 6px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.termin-customer-trigger span { overflow-wrap: anywhere; }
.termin-chevron { flex: 0 0 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.termin-customer-trigger[aria-expanded='true'] .termin-chevron { transform: rotate(225deg); }
.termin-customer-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 10; padding: 5px; border: 1px solid #d6dde6; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px #1627431a; }
.termin-customer-menu button { display: block; width: 100%; min-height: 43px; padding: 10px 12px; border: 0; border-radius: 3px; background: #fff; color: var(--blue); font: inherit; text-align: left; cursor: pointer; }
.termin-customer-menu button:hover, .termin-customer-menu button:focus-visible { background: #f0f4fc; }
.termin-customer-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 14px; }
.termin-customer-summary div { display: grid; gap: 5px; min-width: 0; }
.termin-customer-summary a { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.termin-customer-summary button { min-height: 32px; padding: 5px 0; border: 0; background: transparent; color: var(--blue); font: inherit; font-size: 12px; cursor: pointer; }
.termin-services .panel-status { margin-bottom: 12px; }
.termin-services .booking-services-label, .termin-services .booking-services-empty { display: none; }
.termin-services .booking-add-service { width: 100%; min-height: 46px; margin-top: 8px; border: 1px solid var(--blue); background: #fff; color: var(--blue); }
.termin-note-counter { display: block; margin-top: 6px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.termin-extra { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.termin-extra summary { padding: 4px 0 12px; color: var(--muted); cursor: pointer; }
.termin-extra > label { display: grid; gap: 8px; margin-bottom: 16px; }
.termin-extra > label select { min-height: 40px; border: 1px solid #cbd4e0; border-radius: 6px; background: #fff; color: var(--ink); }
.termin-new-foot .foot-left, .termin-new-foot .foot-right > .ghost { display: none; }
.booking-modal .termin-new-foot .foot-right { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; }
.termin-new-foot .saved:empty { display: none; }
.termin-new-foot .primary { width: 100%; min-height: 46px; }
.termin-customer-dialog-backdrop { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; padding: 20px; background: #15233955; }
.termin-customer-dialog { box-sizing: border-box; width: min(640px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 26px; border-radius: 8px; background: #fff; box-shadow: 0 16px 60px #15233933; }
.termin-customer-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 24px; }
.termin-customer-dialog h2 { margin: 0; font-size: 23px; }
.termin-customer-dialog .modal-close { position: static; flex: 0 0 32px; width: 32px; height: 32px; }
.termin-customer-dialog fieldset { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.termin-customer-dialog .field-grid { margin: 0; }
.termin-customer-dialog .termin-switch { display: flex; margin: 0; }
.termin-customer-dialog .termin-switch span { min-width: 0; }
.termin-customer-dialog input:focus-visible, .termin-customer-dialog textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.termin-consent-hint { margin: -8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.termin-customer-dialog footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.termin-customer-dialog footer button { min-height: 42px; padding-inline: 20px; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: var(--blue); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.termin-customer-dialog footer .primary { background: var(--blue); color: #fff; }
.termin-customer-dialog footer button:disabled { opacity: .55; cursor: wait; }
.booking-customer-alert-backdrop { position: fixed; inset: 0; z-index: 360; display: grid; place-items: center; padding: 20px; background: #15233966; }
.booking-customer-alert { box-sizing: border-box; width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border-radius: 8px; background: #fff; box-shadow: 0 16px 60px #15233933; color: var(--ink); }
.booking-customer-alert h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.booking-customer-alert p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.booking-customer-alert button { display: block; min-height: 42px; margin-left: auto; padding: 10px 20px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.booking-customer-alert button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.calendar-drag-confirm-backdrop { position: fixed; inset: 0; z-index: 430; display: grid; place-items: center; padding: 20px; background: rgba(12, 30, 61, .52); backdrop-filter: blur(3px); }
.calendar-drag-confirm { box-sizing: border-box; width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid #d8e4f1; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(13, 35, 70, .24), 0 5px 18px rgba(13, 35, 70, .12); }
.calendar-drag-confirm > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px 28px 20px; border-bottom: 1px solid #e5ecf5; }
.calendar-drag-confirm > header .eyebrow { display: block; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; }
.calendar-drag-confirm h2 { margin: 6px 0 0; color: var(--blue-dark); font-size: 23px; line-height: 1.3; letter-spacing: 0; }
.calendar-drag-confirm > header .modal-close { position: static; display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; margin: -4px -4px 0 0; padding: 0 0 2px; border: 1px solid #d6e2ef; border-radius: 50%; background: #f7faff; color: #61728d; font-size: 24px; font-weight: 400; line-height: 1; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.calendar-drag-confirm > header .modal-close:hover { border-color: #a9c3e4; background: #edf4ff; color: var(--blue-dark); }
.calendar-drag-confirm > header .modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.calendar-drag-confirm-body { display: grid; gap: 18px; padding: 24px 28px 26px; }
.calendar-drag-confirm-body > strong { display: block; overflow-wrap: anywhere; padding: 15px 17px; border: 1px solid #d8e6f6; border-left: 4px solid var(--blue); border-radius: 10px; background: #f4f8fe; color: var(--blue-dark); font-size: 15px; line-height: 1.5; }
.calendar-drag-confirm-body dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 16px; margin: 0; padding: 16px 17px; border: 1px solid #dce6f1; border-radius: 11px; background: #fbfcfe; }
.calendar-drag-confirm-body dt { align-self: center; padding: 10px 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.calendar-drag-confirm-body dd { align-self: center; margin: 0; padding: 10px 0; color: var(--blue-dark); font-size: 18px; font-weight: 700; line-height: 1.35; }
.calendar-drag-confirm-body dd:nth-of-type(2) { color: var(--blue); }
.calendar-drag-confirm-body .booking-availability-warning { margin: 0; }
.calendar-drag-confirm > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px 22px; border-top: 1px solid #e5ecf5; background: #f8fafd; }
.calendar-drag-confirm > footer button { min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 650; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.calendar-drag-confirm > footer .ghost { border: 1px solid #cbd9e9; background: #fff; color: #536783; }
.calendar-drag-confirm > footer .ghost:hover { border-color: #9eb8d8; background: #f3f7fc; color: var(--blue-dark); }
.calendar-drag-confirm > footer .primary { border: 1px solid var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(43, 104, 200, .2); }
.calendar-drag-confirm > footer .primary:hover { border-color: var(--blue-mid); background: var(--blue-mid); box-shadow: 0 6px 15px rgba(43, 104, 200, .28); }
.calendar-drag-confirm > footer button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.calendar-drag-confirm > footer button:disabled, .calendar-drag-confirm .modal-close:disabled { cursor: wait; opacity: .6; }
@media (max-width: 540px) {
  .booking-modal .modal-body.termin-body { padding: 18px 16px 24px; gap: 24px; }
  .termin-section h3 { font-size: 18px; margin-bottom: 13px; }
  .termin-customer-dialog-backdrop { padding: 10px; }
  .termin-customer-dialog { padding: 20px 16px; max-height: calc(100dvh - 20px); }
  .termin-customer-dialog .field-grid.two { grid-template-columns: 1fr; }
  .termin-customer-dialog h2 { font-size: 21px; }
  .termin-customer-summary { flex-wrap: wrap; }
  .calendar-drag-confirm-backdrop { padding: 10px; }
  .calendar-drag-confirm { width: min(100%, 540px); max-height: calc(100dvh - 20px); border-radius: 13px; }
  .calendar-drag-confirm > header { padding: 21px 18px 17px; }
  .calendar-drag-confirm h2 { font-size: 20px; }
  .calendar-drag-confirm > header .modal-close { flex-basis: 34px; width: 34px; height: 34px; }
  .calendar-drag-confirm-body { gap: 14px; padding: 18px 18px 20px; }
  .calendar-drag-confirm-body > strong { padding: 13px 14px; }
  .calendar-drag-confirm-body dl { grid-template-columns: 76px minmax(0, 1fr); gap: 0 12px; padding: 11px 13px; }
  .calendar-drag-confirm-body dt, .calendar-drag-confirm-body dd { padding: 9px 0; }
  .calendar-drag-confirm-body dd { font-size: 16px; }
  .calendar-drag-confirm > footer { padding: 14px 18px 18px; }
  .calendar-drag-confirm > footer button { flex: 1 1 0; padding-inline: 10px; }
}
.booking-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.booking-mode-tabs button { min-height: 44px; padding: 9px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.booking-mode-tabs button.active { border-bottom-color: var(--blue); color: var(--blue-dark); font-weight: 700; }
.booking-modal.is-block-editor { --block-blue: #1c55ff; width: min(780px, 100%); background: #fff; color: #18243e; border-radius: 8px 0 0 8px; }
.is-block-editor .modal-head { padding: 30px 32px 20px; border-bottom: 0; }
.is-block-editor .modal-head h2 { margin: 0; padding-right: 32px; color: #18243e; font-size: 28px; line-height: 1.35; }
.booking-modal .modal-body.block-mode-body { align-content: start; padding: 0 32px 36px; gap: 30px; background: #fff; }
.is-block-editor .booking-mode-tabs { display: flex; margin: 0 -32px; padding: 0 24px; height: 62px; flex-shrink: 0; }
.is-block-editor .booking-mode-tabs button { padding: 15px 22px; font-size: 17px; border-bottom-width: 4px; }
.is-block-editor .booking-mode-tabs button.active { color: var(--block-blue); border-color: var(--block-blue); }
.block-editor-panel { display: grid; gap: 40px; align-content: start; min-width: 0; }
.block-activity-options { display: flex; flex-wrap: wrap; gap: 12px 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.block-activity-options legend, .block-editor-panel h3 { margin: 0 0 22px; padding: 0; font-size: 24px; line-height: 1.3; font-weight: 650; }
.booking-modal .block-activity-options label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 20px; border: 1px solid #949fb8; border-radius: 24px; background: #fff; color: #18243e; font-size: 18px; line-height: 1.3; cursor: pointer; }
.booking-modal .block-activity-options label.active { border-color: var(--block-blue); background: var(--block-blue); color: #fff; }
.booking-modal .block-activity-options input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; padding: 0; margin: 0; }
.block-activity-options label:has(input:focus-visible) { outline: 2px solid var(--block-blue); outline-offset: 3px; }
.block-activity-options span { overflow-wrap: anywhere; }
.block-activity-options label:last-child { margin-right: 50%; }
.block-time-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.block-when-section, .block-team-section { min-width: 0; }
.block-field { position: relative; min-width: 0; color: #18243e; }
.block-field-label { position: absolute; z-index: 1; top: -10px; left: 12px; max-width: calc(100% - 24px); padding: 0 6px; background: #fff; color: #63718b; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: none; }
.block-field.is-open .block-field-label, .block-field:focus-within .block-field-label { color: #1c55ff; }
.block-field-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 60px; margin: 0; padding: 12px 16px; border: 1px solid #cbd2e4; border-radius: 8px; background: #fff; color: #596881; text-align: left; font: inherit; font-size: 20px; line-height: 1.4; cursor: pointer; }
.block-field-control > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.block-field.is-open .block-field-control, .block-field:focus-within .block-field-control { border-color: #1c55ff; }
.block-field-control:focus-visible { outline: 2px solid #1c55ff; outline-offset: 2px; }
.block-field-chevron { display: block; flex: 0 0 9px; width: 9px; height: 9px; margin: -4px 4px 0; border-right: 2px solid #18243e; border-bottom: 2px solid #18243e; transform: rotate(45deg); }
.block-field .block-time-control { padding: 0; gap: 0; cursor: default; }
.booking-modal .block-time-control input { width: 100%; min-width: 0; min-height: 58px; padding: 12px 0 12px 16px; margin: 0; border: 0; border-radius: 8px; background: none; color: #596881; font: inherit; font-size: 20px; outline: 0; }
.block-time-control input::-webkit-calendar-picker-indicator { display: none; }
.block-time-control button { display: grid; place-items: center; flex: 0 0 44px; align-self: stretch; padding: 0; border: 0; border-radius: 0 8px 8px 0; background: transparent; cursor: pointer; }
.block-time-control button:focus-visible { outline: 2px solid #1c55ff; outline-offset: -3px; }
.block-date-icon { flex: 0 0 28px; padding-left: 12px; border-left: 1px solid #e0e4ed; font-size: 24px; line-height: 30px; color: #18243e; text-align: center; }
.block-field-menu { z-index: 400; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; border-radius: 8px; background: #fff; color: #18243e; box-shadow: 0 6px 24px #18243e24; font-family: inherit; }
.block-field-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 66px; padding: 16px 20px; border: 0; background: #fff; color: inherit; text-align: left; font: inherit; font-size: 19px; line-height: 1.4; cursor: pointer; }
.block-field-menu > button[aria-selected="true"], .block-field-menu > button:hover, .block-field-menu > button[data-active="true"] { background: #f3f4f9; }
.block-field-menu button:focus-visible { outline: 2px solid #1c55ff; outline-offset: -3px; }
.block-field-check { flex: 0 0 6px; width: 6px; height: 12px; margin: -4px 4px 0; border-right: 2px solid #3c8a15; border-bottom: 2px solid #3c8a15; transform: rotate(45deg); }
.block-date-menu { max-height: min(420px, calc(100dvh - 24px)); padding: 12px; }
.block-date-menu header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-date-menu header button { width: 40px; height: 40px; border: 0; background: #fff; color: #1c55ff; font-size: 32px; cursor: pointer; }
.block-date-menu header strong { color: #596881; font-size: 18px; font-weight: 500; }
.block-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.block-date-grid > * { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; }
.block-date-weekday { color: #8591aa; font-size: 13px; }
.block-date-day { padding: 0; border: 2px solid transparent; border-radius: 50%; background: #fff; color: #596881; font: inherit; font-size: 16px; cursor: pointer; }
.block-date-day[aria-selected="true"] { border-color: #1c55ff; color: #1c55ff; font-weight: 700; }
.block-date-day:hover { background: #f3f4f9; }
.block-date-day:disabled { color: #c6cbd5; cursor: default; }
.booking-modal .block-repeat-toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; margin-top: 16px; cursor: pointer; font-size: 17px; line-height: 1.5; }
.booking-modal .block-repeat-toggle input { appearance: none; flex: 0 0 44px; width: 44px; height: 26px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 16px; background: #cdd3e2; cursor: pointer; }
.block-repeat-toggle input::before { content: ""; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: #fff; transition: transform .15s; }
.block-repeat-toggle input:checked { background: var(--block-blue); }
.block-repeat-toggle input:checked::before { transform: translateX(18px); }
.block-repeat-toggle input:focus-visible { outline: 2px solid var(--block-blue); outline-offset: 3px; }
.block-repeat-fields { display: grid; gap: 26px; margin-top: 32px; }
.block-custom-title { display: grid; gap: 8px; font-size: 14px; }
.block-custom-title input { box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #cbd2e4; border-radius: 8px; font: inherit; font-size: 18px; }
.is-block-editor .modal-foot { padding: 20px 24px; background: #fff; border-top: 1px solid #e3e5eb; }
.is-block-editor .foot-right { flex: 1; }
.is-block-editor .foot-right .ghost, .is-block-editor .saved, .is-block-editor .foot-left:empty { display: none; }
.is-block-editor .foot-right .primary { width: 100%; min-height: 56px; background: var(--block-blue); border-radius: 8px; font-size: 18px; }
@media (max-width: 540px) {
  .booking-modal.is-block-editor { width: 100%; border-radius: 0; }
  .is-block-editor .modal-head h2 { font-size: 23px; }
  .booking-modal .modal-body.block-mode-body { padding: 0 16px 28px; gap: 24px; }
  .is-block-editor .booking-mode-tabs { margin-inline: -16px; padding-inline: 6px; }
  .block-editor-panel { gap: 32px; }
  .block-activity-options { gap: 10px; }
  .booking-modal .block-activity-options label { min-height: 38px; padding-inline: 16px; font-size: 16px; }
  .block-activity-options label:last-child { margin-right: 0; }
  .block-activity-options legend, .block-editor-panel h3 { font-size: 22px; margin-bottom: 20px; }
  .block-time-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 14px; }
  .block-time-grid > .block-date-field { grid-column: 1 / -1; }
  .block-field-control, .booking-modal .block-time-control input { font-size: 18px; }
  .block-repeat-toggle span { overflow-wrap: anywhere; }
  .block-field-menu > button { font-size: 17px; min-height: 58px; }
}
.booking-mode-tabs { height: 46px; }
@media (max-width: 760px) {
  .booking-modal { width: 100%; border-radius: 0; }
  .booking-modal .modal-head { padding: 18px 16px 15px; }
  .booking-modal .modal-body { padding: 14px 13px; }
  .booking-modal .panel { padding: 15px 14px; }
  .booking-modal .modal-foot { align-items: stretch; padding: 11px 12px; }
  .booking-modal .foot-left, .booking-modal .foot-right { width: 100%; }
  .booking-modal .foot-left button { flex: 1 1 auto; padding-inline: 9px; }
  .booking-modal .foot-right { justify-content: flex-end; }
  .service-picker-head { padding: 18px 15px 14px; }
  .service-picker-body { padding: 13px 12px 22px; }
  .service-picker-option { grid-template-columns: minmax(0, 1fr) auto 27px; gap: 8px; padding-inline: 9px; }
  .booking-customer-selected { align-items: stretch; flex-direction: column; }
  .booking-customer-actions { flex-wrap: wrap; }
  .booking-customer-pick-row { gap: 7px; }
  .booking-customer-open { padding-inline: 8px; font-size: 12px; }
  .booking-customer-favorite { flex: 0 0 auto; max-width: 145px; min-height: 34px; padding-inline: 7px; }
  .booking-customer-new-head { align-items: flex-start; flex-direction: column; }
  .booking-customer-picker-backdrop { padding: 8px; }
  .booking-customer-picker { max-height: calc(100dvh - 16px); }
  .booking-customer-picker-head { padding: 14px 13px 12px; }
  .booking-customer-picker-search { padding: 10px 12px 8px; }
  .booking-customer-picker-list { padding-inline: 12px; }
  .booking-customer-picker-foot { padding-inline: 12px; }
}