:root {
  --navy: #1A306D;
  --navy-dark: #14255a;
  --navy-soft: #E8ECF6;
  --gold: #DDA358;
  --gold-soft: #FAEFDD;
  --bg: #F4F5F9;
  --card: #ffffff;
  --text: #1F2330;
  --muted: #7A8092;
  --line: #E8EAF0;
  --green: #1F9D55;
  --green-soft: #E7F5EC;
  --red: #D64545;
  --red-soft: #FCEBEB;
  --amber: #C97E14;
  --amber-soft: #FCF2E0;
  --blue: #2E6BD6;
  --blue-soft: #E9F0FC;
  --gray: #6B7186;
  --gray-soft: #F0F1F5;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(26, 48, 109, .05), 0 6px 20px rgba(26, 48, 109, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: none; }
a { color: var(--navy); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3d7e2; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 登录页 ================= */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1A306D 0%, #16296b 45%, #0F1D4A 100%);
  padding: 24px; position: relative; overflow: hidden;
}
.login-wrap::after {
  content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  border: 1px solid rgba(221,163,88,.22); right: -180px; top: -160px;
}
.login-wrap::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(221,163,88,.14); left: -140px; bottom: -140px;
}
.login-card {
  width: 100%; max-width: 400px; background: #fff; border-radius: 18px;
  padding: 40px 36px 34px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  position: relative; z-index: 2; text-align: center;
}
.login-logo {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  background: var(--navy); color: var(--gold); display: flex; align-items: center;
  justify-content: center; font-size: 24px; font-weight: 600; letter-spacing: 1px;
}
.login-title { font-size: 20px; font-weight: 600; letter-spacing: 2px; color: var(--navy); }
.login-sub { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 3px; }
.login-slogan { font-size: 12px; color: var(--gold); margin-top: 12px; letter-spacing: 1px; }
.login-form { margin-top: 28px; text-align: left; }
.login-form .field { margin-bottom: 14px; }
.login-form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.login-form input {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 14px; background: #FAFBFD; transition: .15s;
}
.login-form input:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(26,48,109,.08); }
.login-btn {
  width: 100%; height: 46px; margin-top: 10px; border: none; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
  letter-spacing: 2px; transition: .15s;
}
.login-btn:hover { background: var(--navy-dark); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-err { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 16px; }
.login-demo {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.9; text-align: left;
}
.login-demo b { color: var(--navy); font-weight: 500; }
.login-demo code { background: var(--gray-soft); padding: 1px 6px; border-radius: 4px; font-size: 11px; }

/* ================= 主框架 ================= */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 216px; flex: 0 0 216px; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.brand-tag { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 8px; letter-spacing: 1px; }
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  color: rgba(255,255,255,.72); cursor: pointer; margin-bottom: 2px; font-size: 13.5px; transition: .14s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.on { background: var(--gold); color: var(--navy); font-weight: 500; }
.nav-item .ico { width: 16px; text-align: center; opacity: .9; font-size: 14px; }
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff; font-size: 11px;
  padding: 1px 6px; border-radius: 9px; line-height: 16px;
}
.nav-item.on .nav-badge { background: rgba(26,48,109,.85); }
.side-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: rgba(255,255,255,.42); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 22px; position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 16px; font-weight: 600; color: var(--navy); }
.topbar .spacer { flex: 1; }
.search-box { position: relative; }
.search-box input {
  width: 260px; height: 36px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 12px 0 32px; background: #F8F9FC;
}
.search-box input:focus { border-color: var(--navy); background: #fff; width: 300px; }
.search-box .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 30px; background: var(--gray-soft); cursor: pointer; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.user-chip .nm { font-size: 13px; }
.user-chip .rl { font-size: 10px; color: var(--muted); }
.logout { font-size: 12px; color: var(--muted); cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.logout:hover { background: var(--red-soft); color: var(--red); }

.content { padding: 20px 22px 40px; flex: 1; }

/* ================= 通用组件 ================= */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-hd {
  padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 10px;
}
.card-hd h3 { font-size: 14px; font-weight: 600; }
.card-hd .sub { font-size: 12px; color: var(--muted); }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 18px; }

.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g21 { grid-template-columns: 2fr 1fr; }
.g12 { grid-template-columns: 1fr 2fr; }

.kpi { background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.kpi.gold::before { background: var(--gold); }
.kpi.green::before { background: var(--green); }
.kpi.red::before { background: var(--red); }
.kpi.blue::before { background: var(--blue); }
.kpi .lb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.kpi .vl { font-size: 26px; font-weight: 600; color: var(--navy); margin-top: 8px; line-height: 1.1; letter-spacing: -.5px; }
.kpi .vl small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.kpi .ft { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.kpi .ft b { color: var(--green); font-weight: 500; }
.kpi .ft b.down { color: var(--red); }

.btn {
  height: 34px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; color: var(--text); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; transition: .14s; white-space: nowrap;
}
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-dark); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.gold:hover { filter: brightness(.95); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.green:hover { filter: brightness(.95); color: #fff; }
.btn.danger { background: #fff; border-color: #f0c9c9; color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--gray-soft); color: var(--navy); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: 6px; font-size: 12px; background: var(--gray-soft); color: var(--gray); white-space: nowrap;
}
.chip.pending { background: var(--amber-soft); color: var(--amber); }
.chip.assigned { background: var(--blue-soft); color: var(--blue); }
.chip.following { background: var(--gold-soft); color: #A9741F; }
.chip.booked { background: var(--green-soft); color: var(--green); }
.chip.lost { background: var(--red-soft); color: var(--red); }
.chip.invalid { background: var(--gray-soft); color: var(--gray); }
.chip.A { background: #FDECEC; color: #C0392B; }
.chip.B { background: var(--blue-soft); color: var(--blue); }
.chip.C { background: var(--gray-soft); color: var(--gray); }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 400;
  padding: 11px 12px; background: #FAFBFD; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
tbody tr:hover { background: #FAFBFD; }
tbody tr.clk { cursor: pointer; }
.tb-wrap { overflow-x: auto; }

.empty { padding: 50px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.empty .big { font-size: 30px; margin-bottom: 10px; opacity: .35; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select, .filters input {
  height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px;
  background: #fff; min-width: 110px;
}
.filters select:focus, .filters input:focus { border-color: var(--navy); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; }
.tab {
  padding: 12px 14px; font-size: 13.5px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--navy); }
.tab.on { color: var(--navy); border-bottom-color: var(--gold); font-weight: 500; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.fld label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fld label .req { color: var(--red); margin-left: 2px; }
.fld input, .fld select, .fld textarea {
  width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 11px; background: #FAFBFD;
}
.fld textarea { height: auto; min-height: 78px; padding: 9px 11px; resize: vertical; line-height: 1.6; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(26,48,109,.07); }
.fld .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

.upload-box {
  border: 1.5px dashed #cfd5e3; border-radius: 10px; padding: 18px; text-align: center;
  cursor: pointer; background: #FAFBFD; transition: .15s; position: relative;
}
.upload-box:hover { border-color: var(--navy); background: #F5F7FC; }
.upload-box .ic { font-size: 20px; opacity: .5; }
.upload-box .tx { font-size: 12px; color: var(--muted); margin-top: 6px; }
.upload-box img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; margin: 0 auto; }
.upload-box.has { padding: 10px; border-style: solid; border-color: var(--green); background: #fff; }

/* ================= 抽屉 / 弹窗 ================= */
.mask {
  position: fixed; inset: 0; background: rgba(19,28,54,.42); z-index: 100;
  display: flex; justify-content: flex-end; animation: fade .16s ease;
}
.mask.center { align-items: center; justify-content: center; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideIn { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } }
@keyframes pop { from { transform: scale(.97); opacity: .5 } to { transform: none; opacity: 1 } }
.drawer {
  width: 640px; max-width: 96vw; background: var(--bg); height: 100%; overflow-y: auto;
  animation: slideIn .2s ease; display: flex; flex-direction: column;
}
.drawer-hd {
  background: #fff; padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5;
}
.drawer-hd h2 { font-size: 16px; font-weight: 600; }
.drawer-hd .spacer { flex: 1; }
.drawer-bd { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.modal {
  width: 560px; max-width: 94vw; background: #fff; border-radius: 14px; overflow: hidden;
  animation: pop .18s ease; max-height: 90vh; display: flex; flex-direction: column;
}
.modal.wide { width: 720px; }
.modal-hd { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-hd h3 { font-size: 15px; font-weight: 600; }
.modal-hd .spacer { flex: 1; }
.modal-bd { padding: 20px; overflow-y: auto; }
.modal-ft { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #FAFBFD; }
.x-btn { cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; }
.x-btn:hover { background: var(--gray-soft); color: var(--red); }

/* ================= 时间线 ================= */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item::before {
  content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #fff; border: 2px solid #c3c9d8;
}
.tl-item.booked::before { border-color: var(--green); background: var(--green); }
.tl-item.lost::before { border-color: var(--red); background: var(--red); }
.tl-item.contacted::before, .tl-item.assign::before { border-color: var(--gold); background: var(--gold); }
.tl-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tl-head .who { color: var(--navy); font-weight: 500; }
.tl-head .when { color: var(--muted); margin-left: auto; font-size: 11.5px; }
.tl-body { font-size: 13px; color: #454b5e; margin-top: 4px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

/* ================= 图表 ================= */
.chart { width: 100%; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.bar-row .nm { width: 96px; font-size: 12.5px; color: #4a5062; flex: 0 0 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { flex: 1; height: 20px; background: #F2F4F9; border-radius: 5px; overflow: hidden; position: relative; display: flex; }
.bar-row .seg { height: 100%; }
.bar-row .seg.b { background: var(--navy); }
.bar-row .seg.g { background: var(--gold); }
.bar-row .vl { width: 74px; text-align: right; font-size: 12.5px; color: var(--muted); flex: 0 0 74px; }
.bar-row .vl b { color: var(--navy); font-weight: 500; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .b i { background: var(--navy); }
.legend .g i { background: var(--gold); }

.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-no {
  width: 22px; height: 22px; border-radius: 6px; background: var(--gray-soft); color: var(--gray);
  font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: 0 0 22px;
}
.rank-row:nth-child(1) .rank-no { background: var(--gold); color: #fff; }
.rank-row:nth-child(2) .rank-no { background: #C6CBE0; color: #fff; }
.rank-row:nth-child(3) .rank-no { background: #E6D3B8; color: #7a5a24; }
.rank-row .nm { flex: 1; font-size: 13px; }
.rank-row .nm small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.rank-row .mn { text-align: right; }
.rank-row .mn b { font-size: 14px; color: var(--navy); font-weight: 600; }
.rank-row .mn small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut-list { flex: 1; }
.donut-li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.donut-li .dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.donut-li .nm { flex: 1; color: #4a5062; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-li .vl { color: var(--muted); }

.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #22283a; color: #fff; padding: 10px 18px; border-radius: 9px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: fade .16s ease; max-width: 460px;
}
.toast.ok { background: #16794a; }
.toast.err { background: #b8332f; }

.loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }
.spin {
  width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--navy);
  border-radius: 50%; animation: sp .7s linear infinite; display: inline-block; vertical-align: -3px; margin-right: 8px;
}
@keyframes sp { to { transform: rotate(360deg) } }

.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 14px 18px; font-size: 13px; color: var(--muted); }
.pager button {
  height: 30px; min-width: 30px; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  cursor: pointer; color: var(--text);
}
.pager button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.pager button:disabled { opacity: .45; cursor: default; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.info-list .it .k { font-size: 11.5px; color: var(--muted); }
.info-list .it .v { font-size: 13.5px; margin-top: 3px; word-break: break-all; }
.info-list .it .v.mono { font-family: "SF Mono", Consolas, monospace; color: var(--navy); }

.warn-bar {
  background: var(--amber-soft); border: 1px solid #F0DDB9; color: #8A5B10;
  padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.6;
}
.hint-bar {
  background: var(--blue-soft); border: 1px solid #CFE0F8; color: #23508F;
  padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.7;
}
.hint-bar code, .warn-bar code { background: rgba(255,255,255,.7); padding: 1px 5px; border-radius: 4px; font-family: "SF Mono", Consolas, monospace; font-size: 11.5px; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch .track { width: 38px; height: 21px; border-radius: 11px; background: #D5D9E3; position: relative; transition: .18s; flex: 0 0 38px; }
.switch .track i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on .track { background: var(--green); }
.switch.on .track i { left: 19px; }

.rule-card { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; background: #fff; display: flex; gap: 12px; align-items: flex-start; }
.rule-card .idx { width: 24px; height: 24px; border-radius: 7px; background: var(--navy-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 24px; }
.rule-card .bd { flex: 1; min-width: 0; }
.rule-card .tt { font-size: 13.5px; font-weight: 500; }
.rule-card .ds { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.rule-card .ac { display: flex; gap: 6px; }

.section-title { font-size: 13px; font-weight: 600; color: var(--navy); margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--gold); }

.sec-hd { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }

/* ==================== 影楼接单系统：排期 / 预约 ==================== */

/* 排期日历：按时段「一行一行」往下排。
   原来是窄卡片平铺（每格 190px、一天 15 格），每格里再把预约按行堆进去，
   人一多就糊成一团 —— 2026-10-02 客户反馈「太拥挤看不清楚」后重做。
   现在左边时段、中间人数占位方块、右边预约卡片横排，一眼能看出哪一小时空、哪一小时满。 */
.sch-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sch-metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.sch-metric .lbl { font-size: 12px; color: var(--muted); }
.sch-metric .val { font-size: 24px; font-weight: 600; color: var(--text); margin-top: 2px; letter-spacing: -.5px; }
.sch-metric .val .u { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.sch-progress { height: 6px; border-radius: 4px; background: #EDF0F6; margin-top: 12px; overflow: hidden; }
.sch-progress i { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.sch-progress-txt { font-size: 12px; color: var(--muted); margin-top: 6px; margin-bottom: 12px; }
.sch-over-bar {
  border: 1px solid #F3C6C6; background: #FDF3F3; color: #8B2F2F;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px;
}

.sch-row {
  display: grid; grid-template-columns: 84px 158px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  position: relative;
}
/* 每格右上角的「关 / 开这个时段」小锁。
   用绝对定位是为了不动原来三列的栅格宽度（时段 | 名额 | 预约卡片）。
   关掉时底色变深，一眼能看出哪几格不开放。 */
.sch-lock {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; line-height: 24px; text-align: center;
  font-size: 12px; border-radius: 6px; cursor: pointer; user-select: none;
  opacity: .32; transition: opacity .12s, background .12s;
}
.sch-row:hover .sch-lock { opacity: .85; }
.sch-lock:hover { background: #EEF2FA; }
.sch-lock.on { opacity: 1; background: #FDF3F3; }
.sch-lock.disabled { cursor: not-allowed; opacity: .2; }
.sch-row:last-child { border-bottom: none; }
.sch-head { font-size: 12px; color: var(--muted); background: #FAFBFD; padding: 9px 16px; }
.sch-row.sch-partial { background: #FFFDF7; }
.sch-row.sch-full { background: #FFFBF3; }
.sch-row.sch-over { background: #FDF6F6; }
.sch-row.sch-closed { background: #F7F8FB; }
.sch-row.sch-available:hover, .sch-row.sch-partial:hover { background: #F7F9FE; }
.sch-time .st { font-size: 15px; font-weight: 600; color: var(--navy); }
.sch-time .se { font-size: 11px; color: #A9AFBC; margin-top: 1px; }
.sch-row.sch-over .sch-time .st { color: var(--red); }
.sch-row.sch-full .sch-time .st { color: var(--amber); }
.sch-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 5px; }
.sch-dot { width: 12px; height: 12px; border-radius: 3px; }
.sch-dot-more { font-size: 11px; color: var(--red); align-self: center; margin-left: 3px; }
.sch-bar { height: 8px; border-radius: 4px; background: #EDF0F6; overflow: hidden; margin-bottom: 6px; }
.sch-bar i { display: block; height: 100%; }
.sch-stat { font-size: 11.5px; color: var(--muted); }
.sch-stat b { font-weight: 600; }
.sch-free-txt { color: #A9AFBC; }

.sch-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sch-card {
  border: 1px solid #D8E0F0; border-left: 3px solid var(--navy); border-radius: 8px;
  background: #F7F9FE; padding: 7px 11px; min-width: 170px; cursor: pointer;
}
.sch-card:hover { background: #EEF3FC; box-shadow: 0 2px 8px rgba(26, 48, 109, .08); }
.sch-card.mine { border-left-color: var(--gold); background: #FFFCF6; }
.sch-card.masked { border-left-color: #C2C8D4; background: #F4F5F8; cursor: help; }
.sch-row.sch-full .sch-card { border-left-color: var(--amber); }
.sch-row.sch-over .sch-card { border-left-color: var(--red); background: #FFF8F8; border-color: #E8DADA; }
.sch-card .sc-n { font-size: 13px; font-weight: 500; color: #22304F; display: flex; align-items: center; gap: 6px; }
.sch-card .sc-ppl {
  background: var(--navy-soft); color: var(--navy); border-radius: 5px;
  padding: 0 5px; font-size: 11px; font-weight: 600; flex: none;
}
.sch-card .sc-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sc-chip { display: inline-block; border-radius: 5px; padding: 0 5px; font-size: 11px; }
.sc-chip.ok { background: var(--green-soft); color: #1F7A45; }
.sc-chip.bad { background: var(--red-soft); color: #A32D2D; }
.sc-chip.warn { background: var(--amber-soft); color: #8A5A0B; }

.sch-cap { min-width: 0; }
.sch-cap .sch-stat { line-height: 1.45; }
.sch-empty { border: 1px dashed #C9D2E4; border-radius: 8px; padding: 7px 14px; color: #9AA6C0; font-size: 12.5px; }
.sch-empty.free { cursor: pointer; }
.sch-empty.free:hover { border-color: var(--navy); color: var(--navy); }
.sch-add {
  font-size: 12px; color: var(--navy); border: 1px dashed #B9C6E0; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.sch-add:hover { background: var(--navy-soft); border-color: var(--navy); }
.sch-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.sch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* 一周概览 */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.wk { border: 1px solid #E8EAF0; border-radius: 12px; padding: 12px 10px; cursor: pointer; text-align: center; background: #fff; }
.wk:hover { border-color: var(--navy); }
.wk.full { background: #FFFBF3; border-color: #F0D9AE; }
.wk.over { background: #FDF6F6; border-color: #E7C7C7; }
.wk.partial { background: #FFFCF5; border-color: #F0D9AE; }
.wk.closed { background: #F7F8FB; color: #A9AFBC; }
.wk .wd { font-size: 12px; color: var(--muted); }
.wk .dd { font-size: 15px; font-weight: 500; color: var(--navy); margin: 3px 0 6px; }
.wk .mm { font-size: 11.5px; color: var(--muted); }
.wk .mm2 { font-size: 11px; color: #A9AFBC; margin-top: 3px; }
.wk .bar { height: 4px; border-radius: 3px; background: #EDF0F6; margin-top: 7px; overflow: hidden; }
.wk .bar i { display: block; height: 100%; background: var(--gold); }

/* 工作台待办行 */
.td-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #F3F4F8; cursor: pointer; font-size: 13px; }
.td-row:last-child { border-bottom: none; }
.td-row:hover { background: #FAFBFD; }
.td-row .td-t { color: var(--navy); font-size: 12.5px; }
.td-row .td-n { flex: 1; color: #43485A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-row .td-s { font-size: 12px; color: var(--muted); }
.td-row .td-x { display: flex; align-items: center; gap: 4px; }

/* 预约详情 */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.detail-grid .dt { display: flex; gap: 10px; font-size: 13px; border-bottom: 1px dashed #F0F2F7; padding-bottom: 8px; }
.detail-grid .dk { color: var(--muted); flex: 0 0 96px; font-size: 12.5px; }
.detail-grid .dv { color: #22304F; flex: 1; word-break: break-all; }

/* 签字 */
.sig-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sig-box { border: 1px solid #E8EAF0; border-radius: 12px; padding: 12px; text-align: center; background: #fff; }
.sig-box.empty { background: #FAFBFD; }
.sig-box .sl { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.sig-box .sv { font-size: 12px; color: #43485A; margin-top: 6px; }
.sig-img { max-width: 100%; height: 76px; object-fit: contain; border: 1px solid #EEF0F5; border-radius: 8px; background: #fff; }

/* 可复制的文本行 */
.copy-line {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  background: #F4F6FA; border: 1px dashed #CBD2E0; border-radius: 8px;
  padding: 9px 12px; cursor: pointer; word-break: break-all; color: var(--navy);
}
.copy-line:hover { background: #EDF1F8; }

@media (max-width: 1280px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .sidebar { width: 62px; flex: 0 0 62px; }
  .brand-name, .brand-tag, .nav-item span:not(.ico), .side-foot { display: none; }
  .nav-item { justify-content: center; padding: 11px 0; }
  .g2, .g21, .g12, .g4, .g3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .info-list { grid-template-columns: 1fr; }
  .search-box input { width: 150px; }
  .search-box input:focus { width: 170px; }
  .user-chip .nm, .user-chip .rl { display: none; }
  .sch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-row { grid-template-columns: 64px 108px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .week-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .sig-row { grid-template-columns: 1fr; }
}