/* 课表 · 手机优先 · 淡粉配色
   —— 换颜色只改下面这一段；两个人各自的颜色 = --me / --ta */
:root {
  --paper:      #FDF1F6;   /* 淡粉纸底（你选的 1 号；三档/五档见 tools/preview_bg_options.py） */
  --card:       #FFF6FA;   /* 卡片也不算纯白了，跟着走粉 */
  --ink:        #3B2C33;   /* 带紫调的墨色 */
  --ink-2:      #8B737D;
  --ink-3:      #B9A3AD;
  --line:       rgba(59, 44, 51, .12);
  --line-soft:  rgba(59, 44, 51, .06);
  --deep:       #7C4A66;   /* 深玫紫，用在高对比处 */

  --me:         #E4859C;   /* 玫瑰粉 —— 我 */
  --me-ink:     #B25F7A;
  --me-soft:    #FCE6EC;
  --ta:         #EE8DA6;   /* 樱花粉 —— TA */
  --ta-ink:     #B75F79;
  --ta-soft:    #FDE4EA;

  --a:      var(--me);
  --a-ink:  var(--me-ink);
  --a-soft: var(--me-soft);

  --odd:  #C4698F;         /* 单周标记 */
  --even: #C68FB2;         /* 双周标记（同样在粉色系里，偏冷一点） */

  --rowh: 34px;
  --pad: 14px;
  --r: 12px;
  --font: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

.app[data-archive="ta"] {
  --a: var(--ta);
  --a-ink: var(--ta-ink);
  --a-soft: var(--ta-soft);
}

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

body {
  background: var(--paper);
  background-image: radial-gradient(rgba(199, 122, 165, .18) 1px, transparent 1px);
  background-size: 15px 15px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--pad) calc(20px + env(safe-area-inset-bottom, 0px));
}
body.has-pet .app { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
body.layout-sides .pair { display: none; }
body.show-pair .pair { display: flex; }
body.layout-top .pet.left { display: none; }

/* ---------- 顶部：周次 + 两只小熊 ---------- */
.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.brand h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand h1 em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--a);
  margin-left: 6px;
  letter-spacing: 0;
}
.brand p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}

/* ---------- 小熊位（图片来自 assets/bear-*.png） ---------- */
.pair {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex: none;
}
.slot { 
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 3px 0;
  width: 62px;
  cursor: pointer;
  position: relative;
  opacity: .5;
  filter: saturate(.7);
  transform: translateY(5px) scale(.88);
  transform-origin: 50% 100%;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), opacity .22s, filter .22s;
}
.slot[aria-selected="true"] {
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1);
}
.slot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 19px;
  width: 40px;
  height: 7px;
  margin-left: -20px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 74, 102, .20), rgba(124, 74, 102, 0));
  z-index: -1;
}
.slot-img { display: block; width: 100%; height: 74px; }
.slot-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transform-origin: 50% 100%;
  animation: breathe 3.4s ease-in-out infinite;
}
.slot.is-hop .slot-img img {
  animation: breathe 3.4s ease-in-out infinite, hop .62s cubic-bezier(.3, 1.5, .5, 1);
}
.slot .ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px dashed var(--line);
  background: var(--a-soft);
  color: var(--a-ink);
  font-size: 13px;
  font-weight: 700;
}
.slot .label {
  display: block;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: 1px;
}
.slot[aria-selected="true"] .label { color: var(--a); }

/* ---------- 周次条 ---------- */
.strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px var(--pad) 4px;
  margin: 0 calc(var(--pad) * -1);
}
.strip::-webkit-scrollbar { display: none; }
.wk {
  flex: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  position: relative;
}
.wk i { font-style: normal; font-size: 8.5px; font-weight: 500; opacity: .7; }
.wk[data-parity="odd"] i  { color: var(--odd); opacity: 1; }
.wk[data-parity="even"] i { color: var(--even); opacity: 1; }
.wk.is-today::after {
  content: "";
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--a);
}
.wk[aria-selected="true"] {
  background: var(--a);
  border-color: var(--a);
  color: #fff;
}
.wk[aria-selected="true"] i { color: rgba(255, 255, 255, .85); }
.wk[aria-selected="true"].is-today::after { background: #fff; }

/* ---------- 视图切换 ---------- */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
}
.seg-btn[aria-selected="true"] {
  background: var(--deep);
  color: #fff;
}

/* ---------- 今天 ---------- */
.dayline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.dayline b { font-size: 17px; font-weight: 700; }
.dayline span { font-size: 13px; color: var(--ink-2); }

.list { display: flex; flex-direction: column; gap: 9px; }

.course {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
  overflow: hidden;
}
.course::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--tint, var(--a-soft));
}
.course.is-live {
  border-color: var(--a);
  box-shadow: 0 2px 0 0 var(--a);
}
.course.is-live::before { background: var(--a); }
.course.is-past { opacity: .55; }
.course.is-off { opacity: .55; border-style: dashed; }

.c-time { padding-left: 4px; }
.c-time b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.c-time span { display: block; font-size: 11.5px; color: var(--ink-3); }

.c-body h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.c-body p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--a-soft);
  color: var(--a-ink);
}
.tag.is-quiet { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }

.progress {
  margin-top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.progress i { display: block; height: 100%; border-radius: 2px; background: var(--a); }
.live-note {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--a-ink);
}

.empty {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}
.empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }

/* TA 摘要 */
.other {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}
.other h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.other ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.other li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  font-size: 13px;
  align-items: baseline;
}
.other li span { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.other li b { font-weight: 600; }
.other li.is-off b { color: var(--ink-3); text-decoration: line-through; }

/* ---------- 整周网格 ---------- */
.grid {
  display: grid;
  grid-template-columns: 34px repeat(var(--days), minmax(0, 1fr));
  grid-template-rows: 30px repeat(var(--rows), var(--rowh));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.gh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  background: #FDF1F7;
}
.gh i { font-style: normal; font-size: 10px; color: var(--ink-3); }
.gh.is-wknd { color: var(--ink-3); }
.gh.is-today { background: var(--a-soft); color: var(--a-ink); }
.gh.is-today i { color: var(--a-ink); }

.gt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  background: #FDF1F7;
}
.gt b { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.gt i { font-style: normal; font-size: 7.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.gc { border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.block {
  z-index: 1;
  margin: 2px;
  padding: 4px 4px 3px;
  border-radius: 7px;
  background: var(--tint, var(--a-soft));
  border: 1px solid rgba(59, 44, 51, .06);
  color: #3B2C33;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  overflow: hidden;
}
.block .bn {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  word-break: break-all;
}
.block .br {
  font-size: 8.5px;
  line-height: 1.1;
  color: rgba(59, 44, 51, .6);
}
.block.is-off {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-3);
}
.block.is-off .bn { font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: var(--ink-2);
}
.legend b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.legend em {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--tint, var(--a-soft));
  border: 1px solid rgba(59, 44, 51, .08);
}
.legend em.dash { background: transparent; border: 1px dashed var(--ink-3); }

/* ---------- 屏幕两旁的小熊 ---------- */
.pet {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: 92px;
  height: 106px;
  z-index: 40;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: opacity .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.pet.left  { left: 4px; }
.pet.right { right: 8px; }
.pet.no-img { display: none; }
.pet.is-off { opacity: .45; transform: scale(.82); }
.pet.is-off .pet-img { animation: none; }

.pet-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transform-origin: 50% 100%;
  animation: var(--idle, breathe 3.6s ease-in-out infinite);
  transition: opacity .25s ease;
}
/* 动图自己会动，别再叠"呼吸" */
.pet-img.anim {
  position: absolute;
  inset: 0;
  opacity: 0;
  --idle: none;
}
/* 选中的用动图，没选中的用静态正面图（小一号、变淡） */
.pet.is-on:not(.no-anim) .pet-img.anim { opacity: 1; }
.pet.is-on:not(.no-anim) .pet-img.still { opacity: 0; }
.pet.is-hop .pet-img {
  animation: var(--idle, breathe 3.6s ease-in-out infinite), hop .62s cubic-bezier(.3, 1.5, .5, 1);
}
.pet::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 58px;
  height: 9px;
  margin-left: -29px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 74, 102, .22), rgba(124, 74, 102, 0));
  z-index: -1;
}
.pet .bubble {
  position: absolute;
  right: calc(100% - 8px);
  bottom: 44px;
  width: max-content;
  max-width: 148px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px 12px 3px 12px;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(124, 74, 102, .10);
}
.pet.left .bubble {
  right: auto;
  left: calc(100% - 8px);
  border-radius: 12px 12px 12px 3px;
}
.pet.is-off .bubble { display: none; }
.pet .ping {
  position: absolute;
  left: 2px;
  top: -2px;
  font-size: 15px;
  color: var(--a);
  animation: ping 2.6s ease-in-out infinite;
}

/* ---------- 动画 ---------- */
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.012); }
}
@keyframes hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-14%) scale(1.05); }
  65%  { transform: translateY(2%) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes ping {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .slot-img img, .pet-img { animation: none !important; }
  .pet .ping { animation: none; opacity: .8; }
}

/* ===== 心情 & 提醒 ===== */
.mood-card .sec, .todos .sec { margin: 0 0 8px; font-size: 15px; color: var(--deep); }
.sec-other { margin-top: 16px !important; }
.mood-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mood { font-size: 26px; line-height: 1; padding: 8px 10px; border-radius: 14px;
  border: 1.5px solid #F0D3DE; background: #FFF9FB; cursor: pointer; }
.mood.is-on { border-color: var(--me, #E4859C); background: #FDE7EE; transform: translateY(-2px); }
.mood-note { margin: 10px 0 0; font-size: 13px; color: #8A6B78; }
.mood-other { margin: 4px 0 0; font-size: 20px; }
.todo-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.todo-add input { font: inherit; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid #F0D3DE; background: #FFF9FB; color: var(--ink); min-width: 0; }
.todo-add #todoText { grid-column: 1 / -1; }
.todo-btn { font: inherit; padding: 10px 16px; border-radius: 12px; border: 0;
  background: var(--deep, #7C4A66); color: #fff; cursor: pointer; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: #FFF9FB; border: 1.5px solid #F5E1E9; }
.todo.is-late { border-color: #E4859C; background: #FDEDF2; }
.todo.is-done { opacity: .55; }
.todo.is-done .todo-text { text-decoration: line-through; }
.todo-tick, .todo-del { border: 0; background: none; font-size: 16px; cursor: pointer;
  color: var(--deep, #7C4A66); padding: 2px 4px; }
.todo-body { flex: 1; min-width: 0; }
.todo-text { margin: 0; font-size: 14px; word-break: break-word; }
.todo-when { margin: 2px 0 0; font-size: 12px; color: #96707F; }
.hint { margin: 14px 0 0; font-size: 11.5px; line-height: 1.7; color: #A98A97; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 118px; z-index: 40;
  display: grid; gap: 8px; pointer-events: none; }
.toast-item { background: var(--deep, #7C4A66); color: #fff; padding: 12px 14px;
  border-radius: 14px; font-size: 14px; box-shadow: 0 8px 24px rgba(124,74,102,.28);
  opacity: 1; transition: opacity .8s, transform .8s; }
.toast-item.is-out { opacity: 0; transform: translateY(8px); }

/* 底部留白：别让固定的小熊挡住最后一行内容（如心情按钮） */
#main { padding-bottom: 150px; }

/* 不再显示"本周不上"的虚线幽灵 → 图例也去掉那一项 */
.legend b + b { display: none; }

/* 对方卡片里的教室 */
.other li .c-room { font-style: normal; margin-left: 8px; font-size: 12.5px; color: var(--ink-3, #8A6B78); }