:root {
  --bg:        #eef1f6;
  --surface:   #ffffff;
  --ink:       #1e2430;
  --muted:     #6b7482;
  --line:      #e2e7ef;
  --line-strong:#c8d0dc;

  --avail:     #ffffff;
  --avail-hover:#e9f2ff;
  --sel:       #b9d6ff;

  --pending-bg:#fde68a;
  --pending-ink:#8a5a00;
  --pending-edge:#f2a900;

  --confirm-bg:#3f86f2;
  --confirm-ink:#ffffff;
  --confirm-edge:#2664c9;

  --busy-bg:   #8b98ab;
  --busy-ink:  #ffffff;
  --busy-edge: #6b788c;

  --primary:   #574fe0;
  --primary-ink:#ffffff;
  --danger:    #e4573d;

  --radius: 10px;
  --cell-h: 26px;
  --col-w: 78px;
  --time-w: 54px;
  --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 17px; margin: 0; letter-spacing: .3px; }
.topbar .role { font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; }
.topbar .spacer { flex: 1; }
.topbar a.switch { font-size: 12px; color: var(--muted); text-decoration: none; margin-left: 14px; }
.topbar a.switch:hover { color: var(--ink); }

.topbar .teacherbox { display: flex; align-items: center; gap: 7px; }
.topbar .teacherbox label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar .teacherbox select {
  padding: 6px 10px; font-size: 13px; min-width: 150px;
  border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--font);
}
.topbar .teacherbox select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.topbar .me { font-size: 13px; color: var(--muted); }
.topbar .me b { color: var(--ink); }

/* 翻页栏 */
.pager { display: flex; align-items: center; gap: 10px; padding: 2px 22px 8px; }
.pager .range {
  min-width: 200px; text-align: center; font-size: 13px; color: var(--ink); font-weight: 600;
}
.pager .btn.pagebtn { padding: 6px 12px; }
.pager .btn:disabled { opacity: .45; cursor: not-allowed; }

.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 22px; font-size: 12px; color: var(--muted); }
.legend .chip { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.sw.available { background: var(--avail); border-color: var(--line-strong); }
.sw.pending { background: var(--pending-bg); }
.sw.confirmed { background: var(--confirm-bg); }
.sw.busy { background: var(--busy-bg); }

.hint { padding: 0 22px 8px; font-size: 12px; color: var(--muted); }

.grid-wrap {
  margin: 6px 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - 150px);
}

table.grid { border-collapse: separate; border-spacing: 0; width: max-content; }
table.grid th, table.grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

thead th {
  position: sticky; top: 0; z-index: 20;
  background: #f7f9fc;
  min-width: var(--col-w); width: var(--col-w);
  padding: 6px 4px; text-align: center; font-weight: 600;
}
thead th .dow { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
thead th.weekend { background: #fdf1ec; }
thead th.today { box-shadow: inset 0 -3px 0 var(--primary); }
thead th.corner {
  left: 0; z-index: 25;
  min-width: var(--time-w); width: var(--time-w);
  font-size: 11px; color: var(--muted);
}

tbody th.time {
  position: sticky; left: 0; z-index: 15;
  background: #f7f9fc;
  width: var(--time-w); min-width: var(--time-w);
  font-size: 11px; color: var(--muted); font-weight: 500;
  text-align: right; padding: 0 6px;
  height: var(--cell-h);
}
tbody th.time.half { color: #aab2c0; }

tbody td {
  height: var(--cell-h); width: var(--col-w);
  background: var(--avail);
  padding: 0; position: relative;
}
tbody td.weekend { background: #fcfaf9; }
tbody td.past { background: repeating-linear-gradient(45deg,#f4f5f8,#f4f5f8 5px,#eef0f4 5px,#eef0f4 10px); }

/* 占用块 */
tbody td.occ { cursor: default; }
tbody td.pending   { background: var(--pending-bg); }
tbody td.confirmed { background: var(--confirm-bg); }
tbody td.busy      { background: var(--busy-bg); }
tbody td.blk-top    { border-top: 2px solid rgba(0,0,0,.18); }
tbody td.blk-bottom { border-bottom: 2px solid rgba(0,0,0,.18); }

.label {
  position: absolute; left: 3px; right: 3px; top: 2px;
  font-size: 11px; line-height: 1.15; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
td.pending .label { color: var(--pending-ink); }
td.confirmed .label, td.busy .label { color: #fff; }
.label .who { font-weight: 600; }
.label .tag { font-size: 9px; opacity: .8; margin-left: 3px; }
.label .note-tag { font-size: 10px; opacity: 1; }

/* 家长可点空位 */
body.parent tbody td.selectable:hover { background: var(--avail-hover); cursor: pointer; }
/* 老师可框选空位新建 */
body.teacher tbody td:not(.occ):not(.past):hover { background: var(--avail-hover); cursor: cell; }
tbody td.selecting { background: var(--sel) !important; outline: 2px dashed #3f86f2; outline-offset: -2px; }

/* 老师可拖动 */
body.teacher tbody td.occ.draggable { cursor: grab; }
body.teacher tbody td.occ.draggable:active { cursor: grabbing; }
tbody td.dropok { outline: 2px dashed var(--primary); outline-offset: -2px; background: #efeefe; }

/* 浮动选区提示 */
.selbubble {
  position: fixed; z-index: 60; pointer-events: none;
  background: #10203a; color: #fff; font-size: 12px;
  padding: 5px 9px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transform: translate(-50%, -130%); white-space: nowrap;
}

/* 模态框 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(17,25,40,.42);
  display: none; align-items: center; justify-content: center; z-index: 80;
}
.modal-mask.open { display: flex; }
.modal {
  background: #fff; width: min(400px, 92vw);
  border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.modal h2 { margin: 0 0 4px; font-size: 16px; }
.modal .sub { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--font);
}
.field textarea { resize: vertical; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.row2 { display: flex; gap: 10px; }
.row2 .field { flex: 1; }

.btns { display: flex; gap: 8px; margin-top: 6px; }
.btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; font-family: var(--font); }
.btn:hover { background: #f4f6fa; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: #fdecec; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.grow { flex: 1; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #10203a; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; z-index: 90; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { background: #7a271a; }

.btn.import { background: var(--primary); border-color: var(--primary); color: #fff; }
.field .note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.btn.block { display: block; width: 100%; margin-top: 6px; padding: 10px; font-size: 14px; }

/* ---------- 登录 / 注册页 ---------- */
body.auth { background: var(--bg); }
.authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.authcard {
  background: var(--surface); width: min(420px, 94vw);
  border-radius: 16px; padding: 26px 26px 20px; box-shadow: 0 20px 60px rgba(17,25,40,.15);
}
.authcard > h1 { margin: 0 0 18px; font-size: 20px; text-align: center; letter-spacing: .3px; }
.tabs { display: flex; gap: 6px; background: #f0f3f8; padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.tabs .tab {
  flex: 1; padding: 8px; border: 0; background: transparent; border-radius: 8px;
  font-size: 14px; color: var(--muted); cursor: pointer; font-family: var(--font);
}
.tabs .tab.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.segbtns { display: flex; gap: 8px; }
.segbtns .seg {
  flex: 1; padding: 9px; border: 1px solid var(--line-strong); background: #fff;
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); font-family: var(--font);
}
.segbtns .seg.active { border-color: var(--primary); background: #efeefe; color: var(--primary); font-weight: 600; }
.authhint { font-size: 12px; color: var(--muted); text-align: center; margin: 16px 0 2px; }
.authhint a { color: var(--primary); text-decoration: none; }
.authhint a:hover { text-decoration: underline; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- 管理员页 ---------- */
.adminwrap { max-width: 820px; margin: 20px auto; padding: 0 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel .sub { font-size: 12px; color: var(--muted); margin: 6px 0 14px; }
table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th, table.simple td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
table.simple th { color: var(--muted); font-weight: 600; }
table.simple code { background: #f0f3f8; padding: 2px 7px; border-radius: 6px; font-size: 13px; }
table.simple .free { color: #1a7f37; }
table.simple .used { color: var(--muted); }
table.simple .empty { color: var(--muted); text-align: center; padding: 22px; }

/* ---------- 学科 / 双向确认 ---------- */
.sw.subjded { background: linear-gradient(135deg, #3f86f2 0 34%, #43a047 34% 67%, #e05a5a 67% 100%); }

/* 课程块上的学科标签（随文字颜色自适应，黄底为深字、学科底为白字都可读） */
.label .tag.subj { border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: .8; font-size: 9px; }
.label .tag.subj.warn { color: #ffde8a; border-color: #ffde8a; opacity: 1; }

/* 未设学科的已确认课程：块角标记 */
tbody td.nosubj.blk-top::after {
  content: "!"; position: absolute; top: 1px; right: 2px;
  width: 13px; height: 13px; line-height: 13px; text-align: center;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--danger); border-radius: 50%;
}

/* 别人待确认：可抢（斜条纹琥珀） */
tbody td.occ.contested {
  background: repeating-linear-gradient(45deg, #fff4d1, #fff4d1 6px, #ffe39c 6px, #ffe39c 12px);
}
body.parent tbody td.occ.contested:hover { filter: brightness(.96); cursor: cell; }
.sw.contested { background: repeating-linear-gradient(45deg,#fff4d1,#fff4d1 3px,#ffe39c 3px,#ffe39c 6px); }

/* 自己的落选：灰条纹 + 删除线 */
tbody td.occ.declined {
  background: repeating-linear-gradient(45deg, #eceff4, #eceff4 6px, #dfe4ec 6px, #dfe4ec 12px);
}
td.declined .label .who { color: var(--muted); text-decoration: line-through; }

/* 老师端不可预约时段：红条纹 */
tbody td.occ.blocked {
  background: repeating-linear-gradient(45deg, #f7d3cd, #f7d3cd 6px, #f0bab1 6px, #f0bab1 12px);
}
body.teacher tbody td.occ.blocked { cursor: pointer; }
td.blocked .label .who { color: #8a1f0f; font-weight: 600; }
.sw.blocked { background: repeating-linear-gradient(45deg,#f7d3cd,#f7d3cd 3px,#f0bab1 3px,#f0bab1 6px); }

/* 预约抢约警告框 */
.warnbox {
  background: #fff7e6; border: 1px solid #f2c94c; color: #8a5a00;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; margin-bottom: 12px;
}

/* 老师端同一时段多个预约的角标 */
tbody td.occ.multi.blk-top::after {
  content: attr(data-count) "人";
  position: absolute; top: 1px; right: 2px;
  padding: 0 4px; height: 14px; line-height: 14px;
  font-size: 9px; font-weight: 700; color: #fff; background: #e4573d; border-radius: 7px;
}

/* 家长可点自己的课程（确认/取消） */
body.parent tbody td.occ.mine { cursor: pointer; }
body.parent tbody td.occ.mine.blk-top { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* 消息通知列表 */
.notifylist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; max-height: 50vh; overflow: auto; }
.notifyitem {
  padding: 10px 12px; font-size: 13px; line-height: 1.4;
  background: #fff7e6; border: 1px solid #f2c94c; border-radius: 8px; color: #6b4e00;
}

/* 老师端时段预约列表 */
.slotlist { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.slotitem {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.slotitem .who { font-weight: 600; }
.slotitem .meta { color: var(--muted); font-size: 12px; }
.slotitem .grow { flex: 1; }
.slotitem.is-confirmed { border-color: var(--confirm-edge); background: #f2f7ff; }
.slotitem.is-declined { opacity: .6; }
.slotitem .mini { padding: 4px 9px; font-size: 12px; border-radius: 6px; }

/* 只读展示（家长"我的课程"弹窗） */
.field .readonly {
  padding: 8px 10px; font-size: 14px; background: #f5f7fa;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 20px;
}