/* 琴行课表 —— 移动优先样式（时间轴版） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #F4F5F7;
  color: #14181F;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

:root {
  --brand: #4F7CFF;
  --line: #E6E8EC;
  --sub: #7A8194;
  --mute: #A9B0BE;
  --ok: #27AE60;
  --warn: #F2994A;
  --danger: #EB5757;
  --gw: 52px;          /* 左侧时间刻度宽度 */
  --ph: 68px;          /* 每小时像素高度 */
}

/* ---------- 顶栏 ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.top-in {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.brand { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.who { font-size: 12px; color: var(--sub); }
.spacer { flex: 1; }

.sync {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sub);
  background: #F1F3F7; border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.sync.busy .dot { background: var(--warn); animation: pulse 1s infinite; }
.sync.off .dot { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.icon-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; flex: none;
}
.icon-btn svg { width: 18px; height: 18px; stroke: #3A4252; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 容器 ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 12px; }

/* ---------- 周条 ---------- */
.strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  padding: 10px 0 4px;
}
.day-btn {
  border: 1px solid transparent; background: #fff; border-radius: 12px;
  padding: 7px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--sub); min-width: 0;
}
.day-btn .d { font-size: 11px; }
.day-btn .n { font-size: 15px; font-weight: 600; color: #14181F; line-height: 1.2; }
.day-btn .bar { height: 3px; width: 16px; border-radius: 2px; background: transparent; margin-top: 2px; }
.day-btn.has .bar { background: var(--brand); }
.day-btn.on { background: var(--brand); border-color: var(--brand); color: rgba(255,255,255,.85); }
.day-btn.on .n { color: #fff; }
.day-btn.on .bar { background: rgba(255,255,255,.9); }
.day-btn.today .n { color: var(--brand); }
.day-btn.on.today .n { color: #fff; }

/* ---------- 日/周导航 ---------- */
.weeknav, .daynav { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.dnav-wrap { display: flex; align-items: center; gap: 6px; }
.wnlabel, .dlabel { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dlabel { font-weight: 600; color: #14181F; }

/* ---------- 老师筛选 ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: #3A4252; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .cd { width: 8px; height: 8px; border-radius: 50%; }
.chip.on { background: #14181F; border-color: #14181F; color: #fff; }

/* ---------- 时间轴 ---------- */
.calscroll {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 230px);
  max-height: calc(100dvh - 230px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 24px;
}
.cal { position: relative; }
.cal.week { min-width: 822px; }

.cal-head {
  display: flex; position: sticky; top: 0; z-index: 6;
  background: #FCFCFD; border-bottom: 1px solid var(--line);
}
.chead {
  flex: 1; min-width: 0; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-size: 11.5px; line-height: 1.25; color: var(--sub);
  border-left: 1px solid #F1F3F7; overflow: hidden;
}
.chead b { font-size: 13.5px; line-height: 1.2; color: #14181F; }
.chead.today b { color: var(--brand); }
.chead .cnt { font-style: normal; font-size: 10px; line-height: 1.2; color: var(--mute); }
.chead.corner {
  width: var(--gw); flex: none;
  position: sticky; left: 0; z-index: 7; background: #FCFCFD; border-left: 0;
}

.cal-body { display: flex; }

.gutter {
  width: var(--gw); flex: none;
  position: sticky; left: 0; z-index: 5;
  background: #fff; border-right: 1px solid #F1F3F7;
}
.glab {
  position: absolute; right: 7px;
  font-size: 10.5px; color: var(--mute);
  font-variant-numeric: tabular-nums;
  background: #fff; padding: 1px 2px 1px 4px;
}

/* 每 30 分钟一条浅线，每 1 小时一条深线 */
.dcol {
  position: relative; flex: 1; min-width: 112px;
  border-left: 1px solid #F1F3F7;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 67px, #E4E8EF 67px 68px),
    repeating-linear-gradient(to bottom, transparent 0 33px, #F2F4F8 33px 34px);
}
.cal.day .dcol { min-width: 0; }
.dcol.today { background-color: #FAFBFF; }

.emptyhint {
  position: absolute; left: 0; right: 0;
  text-align: center; font-size: 12.5px; color: #C7CDD8;
  pointer-events: none;
}

/* 课程块 */
.blk {
  position: absolute;
  border: 0; border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 3px 6px;
  display: flex; flex-direction: column; gap: 1px;
  justify-content: flex-start;
  overflow: hidden;
  background: #EEF3FF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
  text-align: left;
  min-width: 0;
}
.blk .bname {
  font-weight: 600; font-size: 12.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blk .btime { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.blk .bwho {
  font-size: 10px; color: var(--sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blk.leave { background: #FFF7EC; }
.blk.cancel { background: #F4F5F8; }
.blk.leave .bname, .blk.cancel .bname { text-decoration: line-through; color: #7A8194; }
.blk.pending { opacity: .7; border-left-style: dashed; }
.blk:active { filter: brightness(.97); }

/* ---------- 登录 / 初始化 ---------- */
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
.card {
  background: #fff; border-radius: 20px; padding: 26px 20px;
  width: 100%; max-width: 420px; box-shadow: 0 8px 30px rgba(16, 24, 40, .08);
}
.card.wide { max-width: 640px; }
.card h1 { font-size: 21px; margin: 0 0 4px; }
.card .sub { font-size: 13px; color: var(--sub); margin: 0 0 20px; }

label.f { display: block; margin-bottom: 12px; }
label.f > span { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 5px; }
input[type=text], input[type=password], input[type=tel], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 12px; background: #FAFBFC; outline: none;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8194' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); background: #fff; }

.btn {
  width: 100%; border: 0; border-radius: 12px; padding: 13px;
  background: #F1F3F7; color: #3A4252; font-weight: 600; font-size: 15px;
}
.btn:disabled { opacity: .55; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.ghost { background: #fff; border: 1px solid var(--line); color: #3A4252; }
.btn.danger { background: #FDECEC; color: var(--danger); }
.btn.sm { width: auto; padding: 8px 13px; font-size: 13px; border-radius: 10px; white-space: nowrap; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: 12px; color: var(--sub); line-height: 1.6; }
.err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 6px 0 10px; }

.trow {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}

/* ---------- 底部弹层 ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(12, 16, 24, .45); animation: fade .15s ease;
}
.sheet-in {
  background: #fff; width: 100%; max-width: 520px;
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  animation: up .2s cubic-bezier(.2, .9, .3, 1);
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(14px); opacity: .6 } }
.sheet h3 { margin: 0 0 2px; font-size: 16px; }
.sheet .when { font-size: 12.5px; color: var(--sub); margin-bottom: 14px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.seg button {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 0;
  font-size: 13px; color: #3A4252;
}
.seg button.on { background: #EEF3FF; border-color: var(--brand); color: var(--brand); font-weight: 600; }
.seg.dur { grid-template-columns: repeat(4, 1fr); margin: 0; }
.seg.dur button { padding: 11px 0; font-size: 12px; }

.rangehint { font-size: 13px; color: var(--sub); margin: -4px 0 14px; font-variant-numeric: tabular-nums; }
.rangehint.bad { color: var(--danger); }

.sheet-actions { display: flex; gap: 10px; margin-top: 6px; }
.sheet-actions .btn { flex: 1; }

.pill {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 12px; padding: 10px 12px; text-align: left;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pill .nm { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill .meta { font-size: 11.5px; color: var(--sub); margin-left: auto; white-space: nowrap; }
.pill .tn { font-size: 11.5px; color: var(--sub); white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: rgba(20, 24, 31, .92); color: #fff;
  padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 90;
  opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 86vw; text-align: center;
}
.toast.on { opacity: 1; }

@media (min-width: 820px) {
  .day-btn .n { font-size: 16px; }
  .calscroll { max-height: calc(100vh - 210px); }
}
@media (max-width: 400px) {
  :root { --gw: 44px; }
  .seg.dur button { font-size: 11px; padding: 10px 0; }
}