:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --border: #e2e8f0;
  --text: #1f2933;
  --muted: #7b8794;
  --primary: #3b6ef5;
  --primary-d: #2f59c7;
  --free-bg: #d8f5dc;
  --free-bd: #34c759;
  --booked-bg: #ffe6c2;
  --booked-bd: #f0a93b;
  --busy-bg: #5a6470;
  --busy-bd: #434b56;
  --shadow: 0 2px 8px rgba(20, 30, 50, .08);
}

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

/* 后台：已禁用老师整行置灰 */
.grid tr.row-disabled td { opacity: .55; }
.grid tr.row-disabled td:first-child a { text-decoration: line-through; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; background: var(--panel);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 700; }
.topbar .brand { color: var(--primary); }
.topbar .spacer { flex: 1; }

.btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 13px;
  transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-d); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12px; }

/* ---------- 老师身份选择 ---------- */
.who {
  display: flex; align-items: center; gap: 8px;
}
.who input {
  width: 150px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px;
}
.suggest {
  position: absolute; top: 42px; left: 0; right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  max-height: 240px; overflow: auto; z-index: 60;
}
.suggest div { padding: 8px 12px; cursor: pointer; }
.suggest div:hover { background: #eef3ff; }

/* ---------- 工具栏 ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brush {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; font-size: 13px; background: #fff; user-select: none;
}
.brush .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.brush.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,110,245,.15); }
.brush.free .dot { background: var(--free-bd); }
.brush.booked .dot { background: var(--booked-bd); }
.brush.busy .dot { background: var(--busy-bd); }
.brush.clear .dot { background: #fff; border: 1px solid #bbb; }

.legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; align-items: center; }
.legend .dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.legend .lg-free { background: var(--free-bg); border: 1px solid var(--free-bd); }
.legend .lg-booked { background: var(--booked-bg); border: 1px solid var(--booked-bd); }
.legend .lg-busy { background: var(--busy-bg); }

/* ---------- 课表表格 ---------- */
.table-wrap { padding: 16px 20px; overflow: auto; }
table.grid { border-collapse: collapse; width: 100%; min-width: 760px; background: #fff; }
table.grid th, table.grid td { border: 1px solid var(--border); }
table.grid thead th {
  background: #eef2f8; position: sticky; top: 0; z-index: 5;
  padding: 8px 6px; font-size: 13px; text-align: center;
}
table.grid tbody th.timehead {
  background: #f0f3f8; padding: 4px 8px; font-size: 12px; color: var(--muted);
  text-align: right; white-space: nowrap; position: sticky; left: 0; z-index: 4;
  cursor: pointer; user-select: none;
}
table.grid tbody th.timehead:hover { background: #e2e8f0; color: var(--text); }
table.grid tbody th.timehead::before { content: "▸ "; opacity: .4; }
.section-sep td, .section-sep th { border-top: 2px solid #cfd8e3; }

td.cell {
  width: 13%; height: 30px; padding: 0; vertical-align: top; cursor: pointer;
  position: relative; transition: background .1s;
}
td.cell:hover { outline: 2px solid var(--primary); outline-offset: -2px; z-index: 3; }
td.cell .cell-inner { padding: 3px 5px; font-size: 11px; line-height: 1.25; min-height: 30px; word-break: break-all; }
td.cell.st-free   { background: var(--free-bg);   border-color: var(--free-bd); }
td.cell.st-booked { background: var(--booked-bg); border-color: var(--booked-bd); }
td.cell.st-busy   { background: var(--busy-bg);   border-color: var(--busy-bd); }
td.cell.st-busy .cell-inner { color: #fff; }
.st-free .heart { color: #e23b5a; font-size: 12px; }
.st-free .cell-inner { font-weight: 600; }

.cell .c-stu { font-weight: 600; }
.cell .c-grade { color: #4b5563; font-size: 10px; margin-bottom: 1px; }
.cell .c-mt { color: #2b6cb0; font-size: 10px; }
.cell .c-note { color: var(--muted); font-size: 10px; }
.st-busy .c-note { color: #d8dde4; }

/* 有学生的学生名：高亮突出 */
.cell.st-booked .c-stu.hl {
  display: inline-block; background: #c2410c; color: #fff; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; margin-bottom: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); letter-spacing: .3px;
}
.cell.st-booked .cell-inner { font-weight: 600; }

/* 正式课 / 体验课 区分配色 */
td.cell.st-booked.st-formal { background: var(--booked-bg); border-color: var(--booked-bd); }
td.cell.st-booked.st-trial  { background: #efe6ff; border-color: #8b5cf6; }
.k-tag { display:inline-block; font-size:9px; line-height:1; padding:2px 5px; border-radius:4px; margin-bottom:3px; font-weight:700; color:#fff; }
.k-tag.formal { background:#f0a93b; }
.k-tag.trial  { background:#8b5cf6; }
.legend .lg-formal { background: var(--booked-bg); border:1px solid var(--booked-bd); }
.legend .lg-trial  { background:#efe6ff; border:1px solid #8b5cf6; }

/* 课程类型选择（弹窗内） */
.popover .kind-pick { display:flex; gap:8px; }
.popover .kind-pick label { flex:1; margin:0; }
.popover .kind-pick .opt {
  display:block; border:1px solid var(--border); border-radius:9px; padding:7px 4px;
  text-align:center; cursor:pointer; font-size:12px; font-weight:500; background:#f9fafb; transition:.15s;
}
.popover .kind-pick input { display:none; }
.popover .kind-pick input:checked + .opt { border-color:#8b5cf6; background:#f3edff; color:#6d28d9; font-weight:600; }

/* 顶栏外链按钮（<a> 当作 .btn 用） */
.topbar a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* 时标折叠按钮 */
th.timehead .hide-btn {
  display: inline-block; width: 14px; height: 14px; line-height: 14px;
  text-align: center; font-size: 10px; margin-left: 2px; border-radius: 3px;
  background: #d0d7e2; color: #5a6470; cursor: pointer; user-select: none;
}
th.timehead:hover .hide-btn { background: #b0bccd; color: #1f2933; }

/* 折叠时段提示条 */
.collapsed-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 0 10px;
  background: #eef3ff; border: 1px solid #d6e2ff; border-radius: 8px; font-size: 12.5px; color: #2f59c7;
}
.collapsed-bar .showall { cursor: pointer; text-decoration: underline; }

/* ---------- 弹出编辑框（详情弹窗，美化版） ---------- */
.popover {
  position: fixed; z-index: 200; background: #fff; border: none;
  border-radius: 14px; box-shadow: 0 8px 30px rgba(20,30,50,.22); padding: 18px 20px 16px;
  width: 300px; display: none;
}
.popover.open { display: block; }
.popover h4 { margin: 0 0 14px; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.popover label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 500; }
.popover input, .popover textarea, .popover select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: #f9fafb;
  transition: border .15s, box-shadow .15s;
}
.popover input:focus, .popover textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,245,.12); outline: none; background: #fff;
}
.popover textarea { resize: vertical; min-height: 50px; }
.popover .row { display: flex; gap: 10px; margin-top: 16px; }
.popover .row .btn { padding: 8px 16px; border-radius: 9px; font-size: 14px; }
.popover .status-pick { display: flex; gap: 8px; }
.popover .status-pick label { flex: 1; margin: 0; }
.popover .status-pick .opt {
  display: block; border: 1px solid var(--border); border-radius: 9px; padding: 7px 4px;
  text-align: center; cursor: pointer; font-size: 12px; font-weight: 500;
  transition: .15s; background: #f9fafb;
}
.popover .status-pick input { display: none; }
.popover .status-pick input:checked + .opt { border-color: var(--primary); background: #eef3ff; color: var(--primary); font-weight: 600; }

/* ---------- 弹窗（资料等） ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 300;
  display: none; align-items: center; justify-content: center;
}
.modal-mask.open { display: flex; }
.modal {
  background: #fff; border-radius: 12px; width: 420px; max-width: 92vw;
  padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow: auto;
}
.modal h3 { margin: 0 0 14px; }
.modal label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 3px; }
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit;
}
.modal textarea { resize: vertical; min-height: 56px; }
.modal .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- 提示条 ---------- */
.banner {
  margin: 10px 20px; padding: 9px 14px; border-radius: 8px; font-size: 12.5px;
  background: #fff7e6; border: 1px solid #ffe1a8; color: #8a5a00;
}
.empty-hint { padding: 60px 20px; text-align: center; color: var(--muted); }

/* ---------- 后台 ---------- */
.admin-search { display: flex; gap: 10px; padding: 16px 20px; }
.admin-search input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.teacher-list { padding: 0 20px 20px; }
.teacher-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: .15s;
}
.teacher-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.teacher-card .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.teacher-card .meta { flex: 1; }
.teacher-card .meta .nm { font-weight: 600; }
.teacher-card .meta .sub { color: var(--muted); font-size: 12px; }
.back-link { color: var(--primary); cursor: pointer; font-size: 13px; }

/* ---------- 悬浮提示 ---------- */
.tip {
  position: fixed; z-index: 250; background: #1f2933; color: #fff;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 260px;
  pointer-events: auto; transition: none;
}
.tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -5px; border: 5px solid transparent; border-top-color: #1f2933;
}

.hidden { display: none !important; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1f2933; color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 13px;
  z-index: 500; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* 资料上传预览 */
.pf-prev { min-height: 8px; margin-top: 4px; }
.pf-prev img { display: block; }
input[type="file"] { font-size: 12px; padding: 4px; width: 100%; }

/* ---------- 资料弹窗：扩展字段 ---------- */
.pf-warn {
  background: #fff7e6; border: 1px solid #ffe1a8; color: #8a5a00;
  font-size: 12px; padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; line-height: 1.5;
}

/* 接单状态醒目横幅 */
.accept-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; color: #fff;
}
.accept-banner.on  { background: linear-gradient(135deg,#1a7f37,#2faf52); }
.accept-banner.off { background: linear-gradient(135deg,#c0392b,#e05a4d); }

/* 开关 switch */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,.45);
  border-radius: 999px; transition: .2s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: rgba(255,255,255,.85); }
.switch input:checked + .slider::before { transform: translateX(22px); }

.pf-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 6px; }
.pf-section-t { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.pf-section-t .req { font-weight: 400; font-size: 11px; color: var(--primary); margin-left: 4px; }
.req { font-weight: 400; font-size: 11px; color: #d32f2f; margin-left: 4px; }
.rd { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.rd input { width: auto; margin: 0; accent-color: var(--primary); }
.pf-tip { font-size: 11.5px; color: var(--muted); background: #f0f4ff; border: 1px solid #dbe4ff; border-radius: 7px; padding: 6px 9px; margin-top: 8px; line-height: 1.5; display: block; width: 100%; box-sizing: border-box; }

.chk-grp { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.chk-grp .chk {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  background: #f3f6fb; border: 1px solid var(--border); border-radius: 16px; padding: 4px 10px; cursor: pointer;
}
.chk-grp .chk input { width: auto; margin: 0; }
.chk-grp .chk:has(input:checked) { background: #e7f0ff; border-color: var(--primary); color: var(--primary-d); font-weight: 600; }
.pf-other { margin-top: 8px; font-size: 12.5px; }

/* 资料完整度 */
.pf-completeness { margin-top: 14px; background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ck-bar { height: 8px; background: #e6ebf2; border-radius: 999px; overflow: hidden; }
.ck-fill { height: 100%; background: linear-gradient(90deg,#3b6ef5,#34c759); border-radius: 999px; transition: width .3s; }
.ck-text { font-size: 12px; color: var(--muted); margin: 6px 0; }
.ck-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-items .ck-ok { font-size: 11.5px; background: #e6f7ec; color: #1a7f37; border: 1px solid #bfe6cc; border-radius: 12px; padding: 2px 8px; }
.ck-items .ck-no { font-size: 11.5px; background: #f1f3f6; color: #9aa4b2; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2px 8px; }

/* 后台接单状态徽章 */
.badge.accept-on  { background: #d4edda; color: #155724; }
.badge.accept-off { background: #fde2df; color: #a1261b; }

/* ---------- 首页浮动接单状态（底部居中） ---------- */
.float-accept {
  position: fixed;
  bottom: 18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 90;
  background: linear-gradient(135deg, #1a7f37, #2faf52);
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 20px rgba(26, 127, 55, .35);
  cursor: pointer;
  transition: .15s;
  max-width: 280px;
}
.float-accept.off {
  background: linear-gradient(135deg, #c0392b, #e05a4d);
  box-shadow: 0 6px 20px rgba(192, 57, 43, .35);
}
.float-accept:hover { transform: translateX(-50%) translateY(-2px); }
.float-accept-inner {
  display: flex; align-items: center; gap: 12px;
}
.float-accept-text { flex: 1; }
.float-accept-title { font-weight: 700; font-size: 15px; }
.float-accept-hint { font-size: 12px; opacity: .92; }
.float-accept-status { font-weight: 700; min-width: 48px; text-align: right; }

/* 课表月份切换条 */
.month-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 20px; background: #f7f9fc; border-bottom: 1px solid var(--border);
}
.month-bar.hidden { display: none; }
.month-label {
  font-size: 16px; font-weight: 800; color: var(--text);
  min-width: 104px; text-align: center; letter-spacing: .5px;
}
.btn.sm { font-size: 12px; padding: 5px 10px; border-radius: 8px; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.month-tip { font-size: 11.5px; color: var(--muted); margin-left: 4px; }

/* ---------- 一键收起顶部导航（排课时腾空间） ---------- */
body.top-collapsed .nav-link { display: none !important; }
body.top-collapsed #btnToggleTop { background: #eef3ff; border-color: var(--primary); color: var(--primary); }

/* ---------- 移动端适配：顶栏/工具栏压缩，腾出屏幕空间 ---------- */
@media (max-width: 768px) {
  /* 顶栏：更紧凑，外链按钮只留图标 */
  .topbar { padding: 6px 10px; gap: 5px; }
  .topbar h1 { font-size: 14px; flex: 1 1 auto; min-width: 0; margin-right: 4px; }
  .topbar .page-sub { display: none; }              /* 隐藏“· 我的课表”副标题 */
  .topbar a.btn, .topbar button.btn { padding: 5px 8px; font-size: 12px; }
  .topbar .lb { display: none; }                    /* 导航文字收起，只显示图标 */
  .topbar a.btn .ic, .topbar button.btn .ic { font-size: 16px; }
  .topbar .spacer { display: none; }                /* 不再向右撑开，避免换行浪费 */
  #currentTeacher {
    font-size: 11px !important; flex-basis: 100%; order: 99;
    margin: 2px 0 0; padding-top: 2px; border-top: 1px dashed var(--border);
  }

  /* 工具栏：缩小笔刷、隐藏图例与长提示行 */
  .toolbar { padding: 6px 10px; gap: 6px; }
  .table-wrap { padding: 8px 8px; }
  .toolbar > span:first-child { display: none; }   /* 隐藏“涂抹笔：”文字 */
  .brush { padding: 5px 10px; font-size: 12px; border-radius: 16px; }
  #btnCopyFree { padding: 5px 10px; font-size: 12px; }
  .legend { display: none; }                        /* 移动端收起图例，格子颜色已自解释 */
  .top-hint { display: none; }                      /* 收起操作提示长行 */

  /* 月份切换条换行更紧凑 */
  .month-bar { padding: 5px 10px; gap: 6px; }
  .month-bar .month-label { font-size: 14px; min-width: 84px; }
  .month-tip { display: none; }
  #monthPrev, #monthNext { padding: 4px 11px; font-size: 16px; line-height: 1; }

  /* 手机端收起导航：把次要按钮也藏掉，明显腾出空间 */
  body.top-collapsed #btnProfile,
  body.top-collapsed #btnScripts { display: none; }

  /* 课表：触屏下单元格略高，更易点 */
  td.cell { height: 34px; }
  td.cell .cell-inner { font-size: 11px; padding: 4px 5px; min-height: 34px; }

  /* 隐藏已连接服务器提示横幅，把空间留给排课 */
  #banner { display: none !important; }

  /* 浮动接单状态：手机端缩小居中，少占排课空间 */
  .float-accept { bottom: 10px; padding: 7px 12px; border-radius: 999px; max-width: calc(100vw - 24px); }
  .float-accept-inner { gap: 8px; }
  .float-accept-title { font-size: 12px; }
  .float-accept-hint { display: none; }            /* 手机端隐藏提示行，只留标题+开关 */
  .float-accept-status { font-size: 12px; min-width: 40px; }
  .switch { transform: scale(.85); transform-origin: center; }
}