/* ==========================================================================
   今日 · 书桌
   低头看自己的书桌：顶上的灯条照着中间一张信纸（现在做）；
   左手边是便利贴（报名）、木托盘（做完的）、生活底线小卡；
   右手边是闹钟和旋钮、一叠索引卡（接下来）、今天的课。
   灯照不到的下面一层是抽屉：本周、待复习、近 7 天、各科。
   所有影子朝下（光在上面），高光在上沿。
   ========================================================================== */

.today {
  --col-l: 236px;
  --col-r: 272px;
  max-width: 1180px;
}
/* 直接写在桌面上的字（不在纸上）：灯下垫一圈淡影 */
.desk-label,
.plan-note,
.coach-say,
.receipt,
.tonight,
.ask-tutor,
.overdue-line > span {
  text-shadow: var(--desk-text-shadow);
}
.desk {
  /* 灯条下面直接是桌面：留出信纸夹子和便利贴胶带探出来的那一截 */
  margin-top: 26px;
  display: grid;
  grid-template-columns: var(--col-l) minmax(0, 1fr) var(--col-r);
  column-gap: 44px;
  align-items: start;
}
.desk-col {
  display: grid;
  /* 一列定宽：便利贴里事项名很长时也只省略，不把整栏撑宽 */
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-content: start;
  min-width: 0;
}
.desk-center {
  position: relative;
  min-width: 0;
  perspective: 1400px;
}
.desk-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 10px;
  color: var(--ink-3);
  font: 400 12px/18px var(--font);
  letter-spacing: 0.1em;
}
.desk-label .num {
  letter-spacing: 0;
}

/* —— 导师今天定的安排：信纸上方一行手写 —— */
.plan-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: -12px 0 22px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-2);
  font: var(--t-item);
  text-align: left;
}
.plan-note:hover {
  color: var(--ink);
}
.plan-note .orb {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

/* —— 信纸：长尾夹夹着，灯照在它上面；跟着鼠标轻轻倾斜 —— */
.letter {
  position: relative;
  padding: 36px 38px 28px;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) rotate(-0.5deg);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  box-shadow: var(--shadow-3);
  /* 灯光落在纸上：上半截暖一点，往下稍微暗一点（照度往外衰减）。都画在纸的底色上，字不会跟着发白 */
  background-image: radial-gradient(130% 85% at var(--gx, 50%) -8%, rgba(var(--warm), calc(var(--lamp) * 0.2)), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(80, 55, 25, calc(var(--lamp) * 0.05))),
    radial-gradient(rgba(120, 90, 50, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 3px 3px;
}
.letter:hover {
  box-shadow: var(--shadow-3), 0 30px 50px -30px rgba(0, 0, 0, 0.35);
}
.letter.moving {
  transition: none;
}
.letter-clip {
  position: absolute;
  left: 36px;
  top: -20px;
  width: 60px;
  height: 46px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.letter-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper-ink-2);
  font: var(--t-small);
}
.letter-kicker b {
  color: var(--accent-ink);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.letter-kicker .late {
  color: var(--danger);
}
:root[data-theme='dark'] .letter-kicker .late {
  color: #b4442f;
}
.subj-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.subj-mark::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}
.letter-title {
  margin-top: 14px;
  font: var(--t-display);
  text-wrap: balance;
  word-break: break-word;
}
.letter-sub {
  margin-top: 6px;
  color: var(--paper-ink-2);
  font: 400 15px/24px var(--font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.letter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
  color: var(--paper-ink-2);
  font: var(--t-ui);
}
.letter-meta b {
  color: var(--paper-ink);
  font-weight: 600;
}
.letter-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--paper-line);
  color: var(--paper-ink-2);
  font: 400 14px/1.7 var(--font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.letter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.letter.quiet .letter-title {
  color: var(--paper-ink-2);
}

/* 做完：信纸收进左边的木托盘；下一张从右边的索引卡那里滑过来（位移由脚本按实际位置算） */
.letter.arrive {
  animation: letter-arrive 0.7s var(--ease-out) 0.5s both;
}
@keyframes letter-arrive {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-1.2deg);
  }
}

/* —— 导师最近说的一句话（信纸下面）—— */
.coach-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding: 0 4px;
}
.coach-say {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: var(--t-item);
  text-align: left;
}
.coach-say .kai {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coach-say:hover {
  color: var(--ink);
}
.coach-say .orb {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
.receipt {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  color: var(--ink-3);
  font: var(--t-small);
  white-space: nowrap;
}

/* —— 便利贴：一条半透明胶带贴着；鼠标移上去右下角翘起来 —— */
/* --curl 0→1 同时推「纸角切掉」和「翻起来的那一角」，两边的折痕始终对齐 */
@property --curl {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.sticky {
  /* 不认 @property 的浏览器也要有值，否则底色整块失效 */
  --curl: 0;
  --curl-shade: rgba(70, 45, 20, 0.22);
  position: relative;
  padding: 22px 18px 14px;
  border-radius: 2px;
  /* 右下角沿 45° 折痕切掉露出桌面，只贴着折痕落一窄条影子；18.4px = 26px ÷ √2 */
  background: linear-gradient(315deg, transparent calc(var(--curl) * 13px), var(--curl-shade) calc(var(--curl) * 18.4px), var(--sticky) 0);
  color: var(--sticky-ink);
  --ink: var(--sticky-ink);
  --ink-2: rgba(58, 48, 24, 0.78);
  --ink-3: rgba(58, 48, 24, 0.7);
  --line: rgba(58, 48, 24, 0.22);
  --hover: rgba(58, 48, 24, 0.07);
  transform: rotate(-1.6deg);
  box-shadow: var(--shadow-2);
  transition: transform 0.4s var(--ease), --curl 0.35s var(--ease);
}
:root[data-theme='dark'] .sticky {
  --curl-shade: rgba(0, 0, 0, 0.4);
}
.sticky::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  width: 70px;
  height: 22px;
  margin-left: -35px;
  background: rgba(255, 255, 255, 0.45);
  transform: rotate(2deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.sticky::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  /* 翻过来的纸背只占折痕左上那半：贴着折痕暗一点，往角尖越来越亮 */
  background: linear-gradient(
    315deg,
    transparent 50%,
    color-mix(in srgb, var(--sticky) 86%, #000) 50%,
    color-mix(in srgb, var(--sticky) 62%, #fff) 100%
  );
  filter: drop-shadow(-1px 1px 1.5px rgba(70, 45, 20, 0.28));
  transform-origin: 100% 100%;
  transform: scale(var(--curl));
  pointer-events: none;
}
.sticky:hover {
  --curl: 1;
  transform: rotate(-1deg) translateY(-1px);
}
.sticky-head {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.sticky-head small {
  color: var(--ink-3);
  font: 400 12px/18px var(--font);
  letter-spacing: 0.08em;
}
.sticky-head b {
  font: 400 19px/1.35 var(--font-kai);
}
.sticky-head b em {
  margin-left: 6px;
  color: #8a4b05;
  font: 600 13px/1 var(--font);
  font-style: normal;
}
.sticky-head .when {
  color: var(--ink-2);
  font: 400 12px/18px var(--font);
}
.sticky-list {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed rgba(58, 48, 24, 0.25);
}
.sticky-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font: 400 13px/18px var(--font);
}
.sticky-item .t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-item small {
  flex: none;
  color: var(--ink-2);
  font-size: 11px;
}
.sticky-item small.late {
  color: #a3341f;
  font-weight: 600;
}
.sticky-item .check {
  width: 18px;
  height: 18px;
  color: rgba(58, 48, 24, 0.75);
}
.sticky-more {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 400 12px/18px var(--font);
}
.sticky-more:hover {
  color: var(--ink);
  text-decoration: underline dotted;
}

/* —— 木托盘：做完的纸放进来 —— */
.tray {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--tray), var(--tray-2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 7px var(--tray-rim), inset 0 12px 16px rgba(0, 0, 0, 0.4), var(--shadow-2);
  color: rgba(255, 248, 236, 0.82);
  font: var(--t-small);
  overflow: hidden;
}
:root[data-theme='dark'] .tray {
  color: rgba(255, 236, 210, 0.55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 7px var(--tray-rim), inset 0 12px 16px rgba(0, 0, 0, 0.55), var(--shadow-2);
}
.tray .slip {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 22px;
  height: 74px;
  padding: 9px 12px 0 14px;
  border-radius: 2px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 19px, var(--paper-line) 19px 20px);
  background-position: 0 9px;
  color: var(--paper-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--r, -2deg));
  font: 400 14px/20px var(--font-kai);
  text-align: left;
  overflow: hidden;
  transition: transform 0.4s var(--ease);
}
.tray .slip:nth-of-type(2) {
  --r: 1.6deg;
  top: 28px;
}
.tray .slip:nth-of-type(3) {
  --r: -0.6deg;
  top: 34px;
}
.slip-text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: 2px;
}
.tray:hover .slip:last-of-type {
  transform: rotate(var(--r, -2deg)) translateY(-4px);
}
.tray .slip.new {
  animation: slip-drop 0.5s var(--ease-out);
}
@keyframes slip-drop {
  from {
    transform: translateY(-40px) rotate(-8deg) scale(0.9);
    opacity: 0;
  }
  70% {
    transform: translateY(3px) rotate(var(--r, -2deg));
  }
}

/* 「做完的」「接下来」的标题：点一下展开 */
.desk-label.fold {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  transition: color var(--d-fast);
}
.desk-label.fold:not(:disabled):hover {
  color: var(--ink-2);
}
.desk-label.fold:disabled {
  cursor: default;
}
.fold-tail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0;
}
.fold-tail svg {
  opacity: 0.75;
  transition: transform var(--d) var(--ease);
}
.fold[aria-expanded='true'] .fold-tail svg {
  transform: rotate(180deg);
}
.fold-close {
  justify-self: start;
}

/* 做完的纸条摊开：一张一张横线纸，写着做完的事，字头上打了勾，可以放回去 */
.done-papers {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.dpaper {
  --ink: var(--paper-ink);
  --ink-2: var(--paper-ink-2);
  --ink-3: var(--paper-ink-2);
  --hover: rgba(120, 90, 50, 0.08);
  position: relative;
  padding: 9px 12px 6px 16px;
  border-radius: 2px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 23px, var(--paper-line) 23px 24px);
  background-position: 0 9px;
  color: var(--paper-ink);
  box-shadow: var(--shadow-1);
  transform: rotate(var(--r, 0deg));
  animation: paper-spread 0.42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes paper-spread {
  from {
    opacity: 0;
    transform: translateY(-16px) rotate(var(--r, 0deg));
  }
}
.dpaper-text {
  position: relative;
  padding-left: 2px;
  font: 400 15px/24px var(--font-kai);
}
.dpaper-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  color: var(--paper-ink-2);
  font: var(--t-caption);
}

/* 手写的勾：直接打在字上，墨水蓝。一块有粗细的墨（落笔细、转折最粗、出锋渐细），怎么画出来见 components.css 的 .ink-reveal */
.ink-tick {
  position: absolute;
  /* 转折落在字的左下三分之一、尾巴刚好甩过字的右上角：整个勾看上去压在字的正中，不往左上偏 */
  left: 50%;
  top: -0.24em;
  width: 2.1em;
  height: 1.36em;
  overflow: visible;
  transform: translateX(-45%);
  pointer-events: none;
  fill: var(--ink-blue);
  mix-blend-mode: multiply;
}
.ink-tick .ink {
  opacity: 0.94;
}
/* 打在一行字的开头（做完的纸条） */
.ink-tick.at-start {
  left: -0.42em;
  top: -0.24em;
  width: 1.85em;
  height: 1.2em;
  transform: rotate(-3deg);
}

/* —— 生活底线：一张小卡，勾手绘的勾 —— */
.life {
  padding: 14px 16px 12px;
  border-radius: 4px;
  background: var(--card);
  color: var(--paper-ink);
  --ink: var(--paper-ink);
  --ink-2: var(--paper-ink-2);
  --ink-3: var(--paper-ink-2);
  --line: var(--paper-line);
  --hover: rgba(120, 90, 50, 0.07);
  box-shadow: var(--shadow-2);
  transform: rotate(-0.8deg);
}
.life-head {
  color: var(--paper-ink-2);
  font: 400 12px/18px var(--font);
  letter-spacing: 0.1em;
}
.life-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 0;
  margin: 12px -2px 0;
}
.life-item {
  padding: 6px 2px 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--paper-ink-2);
  font: 400 16px/22px var(--font-kai);
  white-space: nowrap;
  transition: color var(--d);
}
.life-item:hover,
.life-item.on {
  color: var(--paper-ink);
}
.life-word {
  position: relative;
  display: inline-block;
}
.life-item:not(.on):hover .life-word {
  text-decoration: underline dotted rgba(43, 33, 24, 0.35);
  text-underline-offset: 5px;
}
.life-item.pop .life-word {
  animation: word-pop 0.42s var(--ease-out);
}
@keyframes word-pop {
  40% {
    transform: scale(1.08) rotate(-2deg);
  }
}
.mood {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--paper-line);
  color: var(--paper-ink-2);
  font: var(--t-caption);
}
.mood > span:first-child {
  margin-right: 4px;
}
.mood-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
}
.mood-dot i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.2px solid rgba(43, 33, 24, 0.35);
  background: rgba(214, 140, 50, calc(var(--lv) * 0.15));
  transition: transform var(--d) var(--ease-click), background var(--d);
}
.mood-dot:hover i {
  transform: scale(1.25);
}
.mood-dot.on i {
  border-color: transparent;
  background: rgb(214, 140, 50);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(214, 140, 50, 0.18);
}
.mood-word {
  margin-left: 4px;
  font: 400 13px/1 var(--font-kai);
  color: var(--paper-ink);
}

/* —— 闹钟和旋钮 —— */
.gadgets {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.clock {
  position: relative;
  flex: none;
  width: 196px;
  height: 92px;
  padding: 10px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--clock-body-2), var(--clock-body));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 2px 2px rgba(60, 40, 20, 0.15), 0 16px 22px -12px rgba(60, 40, 20, 0.45);
  transition: transform var(--d) var(--ease);
}
:root[data-theme='dark'] .clock {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 2px rgba(0, 0, 0, 0.3), 0 16px 22px -12px rgba(0, 0, 0, 0.7);
}
.clock:active {
  transform: translateY(1px);
}
.lcd {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  border-radius: 13px;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 45%), var(--lcd);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.lcd svg.digits {
  width: 128px;
  height: 46px;
  margin-top: -6px;
  filter: drop-shadow(0 0 4px rgba(var(--seg), 0.55));
  transform-origin: 50% 0;
  transition: transform var(--d-slow) var(--ease);
}
/* 看「离睡觉还有多久」时：左上角多一行「离睡觉」，数字往下挪一点、略缩小，夹在上下两行小字中间，不和字叠在一起 */
.clock.count .lcd svg.digits {
  transform: translateY(8.5px) scale(0.84);
}
.seg {
  fill: rgb(var(--seg));
  transition: fill 0.2s;
}
.seg.off {
  fill: rgba(var(--seg), 0.06);
}
.colon.blink {
  animation: colon-blink 1s steps(1) infinite;
}
@keyframes colon-blink {
  50% {
    opacity: 0.15;
  }
}
.lcd-bed,
.lcd-day,
.lcd-mode {
  position: absolute;
  font: 400 10px/1 var(--font);
  letter-spacing: 0.04em;
}
.lcd-bed {
  right: 11px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(var(--seg), 0.62);
}
.lcd-day {
  left: 11px;
  bottom: 6px;
  color: rgba(var(--seg), 0.45);
}
.lcd-mode {
  left: 11px;
  top: 6px;
  color: rgba(var(--seg), 0.6);
  opacity: 0;
  transition: opacity var(--d);
}
.clock.count .lcd-mode {
  opacity: 1;
}

.dial {
  position: relative;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 8px 6px rgba(60, 40, 20, 0.25));
  outline-offset: 4px;
}
:root[data-theme='dark'] .dial {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45));
}
.dial:focus-visible {
  border-radius: 50%;
}
.dial:active {
  cursor: grabbing;
}
.dial svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dial-knurl {
  transform-origin: 33px 33px;
  transition: transform 0.25s var(--ease-out);
}
.dial-led {
  fill: rgba(0, 0, 0, 0.25);
  transition: fill 0.3s;
}
.dial-led.lit {
  fill: #ffcf86;
}
/* 旋钮正中刻着和灯条右端同款的电源图案：关着是刻进去的暗纹，开着亮暖光 */
.dial-power {
  color: rgba(28, 30, 34, 0.55);
  filter: drop-shadow(0 0.6px 0 rgba(255, 255, 255, 0.45));
  transition: color var(--d-slow);
}
:root[data-theme='dark'] .dial-power {
  color: rgba(0, 0, 0, 0.62);
  filter: drop-shadow(0 0.6px 0 rgba(255, 255, 255, 0.16));
}
.dial.on .dial-power {
  color: #d9821c;
  filter: drop-shadow(0 0 2px rgba(240, 160, 60, 0.55));
}
:root[data-theme='dark'] .dial.on .dial-power {
  color: rgba(var(--warm), 0.95);
  filter: drop-shadow(0 0 2.5px rgba(var(--warm), 0.75));
}
.dial-readout {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: rgba(20, 16, 12, 0.86);
  color: #f7ead4;
  font: var(--t-caption);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--d), transform var(--d) var(--ease);
  pointer-events: none;
}
.dial.show .dial-readout {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* —— 索引卡：接下来。标题在红线上方，正文落在蓝线之间 —— */
.next {
  min-width: 0;
}
.icards {
  position: relative;
  height: 232px;
}
.icards.n2 {
  height: 192px;
}
.icards.n1 {
  height: 152px;
}
.icard {
  position: absolute;
  left: 0;
  right: 0;
  /* 按钮默认把内容竖直居中；卡片的字要从顶上排 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 144px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background-color: var(--card);
  background-image: linear-gradient(var(--card-red), var(--card-red)), repeating-linear-gradient(180deg, transparent 0 23px, var(--card-blue) 23px 24px);
  background-size: 100% 1px, 100% 24px;
  background-position: 0 37px, 0 38px;
  background-repeat: no-repeat, repeat-y;
  color: var(--paper-ink);
  text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 12px 20px -12px rgba(40, 20, 0, 0.55);
  transition: transform 0.45s var(--ease), filter 0.3s;
}
:root[data-theme='dark'] .icard {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28), 0 12px 20px -12px rgba(0, 0, 0, 0.7);
}
.icard b {
  display: block;
  height: 37px;
  padding-top: 9px;
  font: 400 16px/22px var(--font-kai);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icard p {
  margin-top: 1px;
  color: var(--paper-ink-2);
  font: 400 13px/24px var(--font);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.icard small {
  position: absolute;
  right: 14px;
  bottom: 7px;
  padding-left: 6px;
  background: var(--card);
  color: var(--paper-ink-2);
  font: 400 12px/16px var(--font);
}
.icard .subj-mark {
  position: absolute;
  left: 16px;
  bottom: 7px;
  padding-right: 6px;
  background: var(--card);
  color: var(--paper-ink-2);
  font: 400 12px/16px var(--font);
}
/* 一叠：最上面一张完整露出；后面两张只露出标题 */
.icard.c3 {
  top: 0;
  z-index: 1;
  transform: rotate(-1.2deg);
  filter: brightness(0.86);
}
.icard.c2 {
  top: 40px;
  z-index: 2;
  transform: rotate(0.9deg);
  filter: brightness(0.93);
}
.icard.c1 {
  top: 80px;
  z-index: 3;
  transform: rotate(-0.4deg);
}
.icards.n2 .icard.c2 {
  top: 0;
}
.icards.n2 .icard.c1 {
  top: 40px;
}
.icards.n1 .icard.c1 {
  top: 0;
}
.icard.c2 p,
.icard.c3 p,
.icard.c2 small,
.icard.c3 small,
.icard.c2 .subj-mark,
.icard.c3 .subj-mark {
  visibility: hidden;
}
.icards:hover .c3 {
  transform: rotate(-2deg) translate(-4px, -10px);
}
.icards:hover .c2 {
  transform: rotate(1.6deg) translate(5px, -5px);
}
.icards:hover .c1 {
  transform: rotate(-0.2deg) translateY(2px);
}
.icard:focus-visible {
  outline-offset: 3px;
}
.icard.off {
  filter: grayscale(0.4) brightness(0.9);
}

.icards[role='button'] {
  cursor: pointer;
}
.icards[role='button']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

/* 摊开：一叠卡一张张铺下来，睡觉线画在放不下的第一张之前 */
.spread {
  display: grid;
  gap: 8px;
}
.scard {
  position: relative;
  display: grid;
  width: 100%;
  padding: 0 14px 6px;
  border: 0;
  border-radius: 3px;
  background-color: var(--card);
  background-image: linear-gradient(var(--card-red), var(--card-red)), repeating-linear-gradient(180deg, transparent 0 23px, var(--card-blue) 23px 24px);
  background-size: 100% 1px, 100% 24px;
  background-position: 0 37px, 0 38px;
  background-repeat: no-repeat, repeat-y;
  color: var(--paper-ink);
  text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 10px 16px -12px rgba(40, 20, 0, 0.5);
  transform: rotate(var(--r, 0deg));
  animation: card-spread 0.42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
  transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
:root[data-theme='dark'] .scard {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28), 0 10px 16px -12px rgba(0, 0, 0, 0.7);
}
@keyframes card-spread {
  from {
    opacity: 0;
    transform: translateY(calc(var(--i, 0) * -10px - 10px)) rotate(var(--r, 0deg));
  }
}
.scard:hover {
  transform: rotate(0deg) translateX(-3px);
}
.scard b {
  display: block;
  height: 37px;
  padding-top: 9px;
  font: 400 15px/22px var(--font-kai);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scard-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin-top: 1px;
  color: var(--paper-ink-2);
  font: 400 12px/24px var(--font);
}
.scard-meta .subj-mark {
  flex: none;
}
.scard-rest {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scard-meta small {
  flex: none;
  margin-left: auto;
  font: inherit;
}
.scard.after {
  filter: grayscale(0.35) brightness(0.93);
}
.spread .bedline {
  margin: 6px 0;
}
.bedline.soft {
  color: var(--ink-3);
}
.bedline.soft span {
  background: none;
}

/* 睡觉线：一条红铅笔线，右边写着时间 */
.bedline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 0;
  margin: 0 -8px;
  color: #b4442f;
  font: 600 11px/1 var(--font);
  letter-spacing: 0.04em;
}
.bedline::before {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1.5px dashed currentColor;
  opacity: 0.75;
}
.bedline span {
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--card);
}

.tonight {
  margin-top: 14px;
  color: var(--ink-2);
  font: var(--t-small);
}
.tonight b {
  color: var(--accent);
  font-weight: 600;
}
.ask-tutor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: var(--t-small);
}
.ask-tutor .orb {
  width: 14px;
  height: 14px;
}
.ask-tutor:hover span {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* —— 今天的课：信纸下面摊着几张课票 ——
   票面（左）写课名，票根（右，颜色深一点）写几点、还有多久；中间一排齿孔，上下各咬掉一个半圆。
   纸的形状画在 ::before 上（遮罩挖出缺口），影子用 drop-shadow 跟着缺口走。
   正在上：票根暖一点、小灯在呼吸；上完：票根打了一个孔、整张淡下去；停课：盖一个红章 */
.classes {
  margin-top: 44px;
}
.classes .desk-label {
  justify-content: flex-start;
  gap: 12px;
}
.tickets {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
}
.ticket {
  --stub: 132px;
  --cut: calc(100% - var(--stub));
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  flex: 1 1 340px;
  min-height: 108px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-ink);
  text-align: left;
  transform: rotate(var(--r, 0deg));
  filter: var(--ticket-shadow);
  transition: transform var(--d-slow) var(--ease), opacity var(--d);
  animation: ticket-in 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 60ms);
}
@keyframes ticket-in {
  from {
    opacity: 0;
    transform: translateY(10px) rotate(var(--r, 0deg));
  }
}
.ticket::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background:
    radial-gradient(circle, var(--ticket-perf) 1.1px, transparent 1.6px) var(--cut) 9px / 4px 7px repeat-y,
    radial-gradient(rgba(120, 90, 50, 0.05) 1px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(90deg, var(--ticket) var(--cut), var(--ticket-2) 0);
  /* 齿孔那一列上下各咬掉一个半圆 */
  -webkit-mask: radial-gradient(circle 7px at var(--cut) 0, transparent 6.5px, #000 7px), radial-gradient(circle 7px at var(--cut) 100%, transparent 6.5px, #000 7px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 7px at var(--cut) 0, transparent 6.5px, #000 7px), radial-gradient(circle 7px at var(--cut) 100%, transparent 6.5px, #000 7px);
  mask-composite: intersect;
}
.ticket:hover {
  transform: rotate(0deg) translateY(-2px);
}
.ticket:focus-visible {
  outline-offset: 4px;
}
.ticket-main {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 14px 18px 14px 20px;
}
.ticket-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--paper-ink-2);
  font: 400 12px/18px var(--font);
  letter-spacing: 0.06em;
}
.ticket-kicker .dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--c);
}
.ticket-kicker em {
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent);
  font: 500 11px/17px var(--font);
  font-style: normal;
  letter-spacing: 0;
}
.ticket-name {
  font: 400 20px/28px var(--font-kai);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-meta {
  color: var(--paper-ink-2);
  font: var(--t-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-stub {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1px;
  padding: 12px 14px 12px 18px;
}
.ticket-time {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font: 500 26px/30px var(--font-num);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ticket-time small {
  color: var(--paper-ink-2);
  font: 400 12px/1 var(--font);
  letter-spacing: 0;
}
.ticket-end {
  color: var(--paper-ink-2);
  font: 400 12px/16px var(--font);
}
.ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--paper-ink-2);
  font: 500 12px/16px var(--font);
  white-space: nowrap;
}
/* 正在上：票根暖一点，状态是琥珀色，一颗小灯在呼吸 */
.ticket.now::before {
  background:
    radial-gradient(circle, var(--ticket-perf) 1.1px, transparent 1.6px) var(--cut) 9px / 4px 7px repeat-y,
    radial-gradient(rgba(120, 90, 50, 0.05) 1px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(90deg, var(--ticket) var(--cut), var(--ticket-now) 0);
}
.ticket.now .ticket-status {
  color: var(--ticket-accent);
}
.live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: live 1.8s ease-in-out infinite;
}
@keyframes live {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}
/* 上完：票根右上角打了一个孔，整张淡一点 */
.ticket.used::before {
  -webkit-mask: radial-gradient(circle 7px at var(--cut) 0, transparent 6.5px, #000 7px), radial-gradient(circle 7px at var(--cut) 100%, transparent 6.5px, #000 7px), radial-gradient(circle 5px at calc(100% - 22px) 22px, transparent 4.5px, #000 5px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 7px at var(--cut) 0, transparent 6.5px, #000 7px), radial-gradient(circle 7px at var(--cut) 100%, transparent 6.5px, #000 7px), radial-gradient(circle 5px at calc(100% - 22px) 22px, transparent 4.5px, #000 5px);
  mask-composite: intersect;
}
.ticket-punch {
  position: absolute;
  right: 17px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.35);
}
.ticket.used {
  opacity: 0.72;
}
.ticket.used .ticket-name {
  color: var(--paper-ink-2);
}
/* 停课：课名淡下去，盖一个红色的章 */
.ticket.off .ticket-name {
  color: var(--paper-ink-2);
}
.ticket.off .ticket-time {
  color: var(--paper-ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.ticket-stamp {
  position: absolute;
  right: 14px;
  top: 50%;
  padding: 1px 9px 2px;
  border: 1.6px solid currentColor;
  border-radius: 5px;
  color: rgba(176, 52, 34, 0.78);
  font: 400 16px/22px var(--font-kai);
  letter-spacing: 0.2em;
  transform: translateY(-50%) rotate(-11deg);
  mix-blend-mode: multiply;
}

.overdue-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--ink-2);
  font: var(--t-small);
}
.overdue-line b {
  color: var(--danger);
}

/* —— 抽屉：灯照不到的下面一层 —— */
.drawer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 0.5px solid var(--line);
}
.drawer-col {
  display: grid;
  gap: 20px;
  min-width: 0;
}
/* 桌面：三栏——本周和近 7 天一栏（都是按天的），待复习一栏，各科一栏 */
.drawer.three {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr);
}
/* 平板竖屏：两行两列，每一行一样高 */
.drawer.quad {
  align-items: stretch;
}
.zone {
  padding: 18px 20px 20px;
}
.zone-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font: var(--t-small);
}
.zone-head h3 {
  color: var(--ink);
  font: var(--t-item);
  font-size: 17px;
}
.zone-none {
  color: var(--ink-3);
  font: var(--t-small);
}
.review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line);
}
.review-row:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.review-text {
  color: var(--ink);
  font: var(--t-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.week-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.wcol {
  display: grid;
  grid-template-rows: 64px auto auto;
  justify-items: center;
  gap: 6px;
  padding: 6px 0 8px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-3);
  transition: background var(--d-fast);
}
.wcol:hover,
.wcol.sel {
  background: var(--hover);
}
.wcol-bar {
  align-self: end;
  display: flex;
  align-items: flex-end;
  width: 10px;
  height: 64px;
  border-radius: 5px;
  background: var(--press);
  overflow: hidden;
}
.wcol.evening .wcol-bar {
  height: 40px;
}
.wcol-bar i {
  width: 100%;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 60%, var(--ink-3));
  transition: height 0.6s var(--ease-out);
}
.wcol.today .wcol-bar i {
  background: var(--accent);
}
.wcol-bar i.over {
  background: var(--danger);
}
.wcol-w {
  font: var(--t-small);
}
.wcol.today .wcol-w {
  color: var(--accent);
  font-weight: 600;
}
.wcol-n {
  font: var(--t-caption);
}
.wcol.past {
  opacity: 0.6;
}
.day-detail {
  display: grid;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--mat-2);
}
.day-detail-head {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}
.day-detail-head b {
  font: 600 14px/20px var(--font);
}
.day-detail-head small {
  color: var(--ink-3);
  font: var(--t-small);
}
.day-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font: var(--t-small);
}
.day-line svg {
  flex: none;
  color: var(--c, var(--ink-3));
}
.day-line span {
  flex: 1;
  min-width: 0;
}
.day-line span.done {
  color: var(--ink-3);
  text-decoration: line-through;
}
.day-line small {
  color: var(--ink-3);
  font: var(--t-caption);
}
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line);
}
.task-row:first-child {
  border-top: 0;
}
.task-row .check {
  margin-top: 1px;
}
.task-row .t {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* 近 7 天：每天一盏小灯，越亮学得越久 */
.lights7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 0 2px;
}
.l7 {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ink-3);
  font: var(--t-caption);
}
.l7 i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 160, 70, var(--a)) 0 42%, rgba(232, 160, 70, calc(var(--a) * 0.3)) 56%, transparent 72%);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.l7.today span {
  color: var(--accent);
  font-weight: 600;
}
.streak {
  margin-top: 12px;
  color: var(--ink-2);
  font: var(--t-small);
}

.subj-list {
  display: grid;
}
.subj {
  display: grid;
  grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr) 3em;
  grid-template-areas: 'name bar pct' 'meta meta meta';
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 9px 8px;
  margin: 0 -8px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background var(--d-fast);
}
.subj:hover {
  background: var(--hover);
}
.subj-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 400 15px/1.2 var(--font-kai);
  white-space: nowrap;
}
.subj-name::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--c);
}
.subj-bar {
  grid-area: bar;
  height: 4px;
  border-radius: 2px;
  background: var(--press);
  overflow: hidden;
}
.subj-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.8s var(--ease-out);
}
.subj-pct {
  grid-area: pct;
  text-align: right;
  font: 600 13px/20px var(--font);
}
.subj-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding-left: 13px;
  color: var(--ink-3);
  font: var(--t-caption);
}
.subj-meta .late {
  color: var(--danger);
  font-weight: 600;
}

/* —— 深夜：灯调暗，桌上只剩一张字条 —— */
.late-scene {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 70px 0 90px;
  text-align: center;
}
.late-scene .letter {
  width: min(460px, 100%);
  padding: 40px 36px 32px;
  text-align: center;
}
.late-title {
  font: 400 clamp(26px, 4vw, 34px) / 1.35 var(--font-kai);
}
.late-sub {
  margin-top: 10px;
  color: var(--paper-ink-2);
  font: 400 15px/1.7 var(--font);
  text-wrap: balance;
}
.late-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* —— 导师面板开着（桌面变窄）：不是简单地把三栏挪下去。
   信纸和今天的课在左边一大栏，闹钟、旋钮和接下来在右边一窄栏；
   左手边的三样（便利贴、托盘、生活底线）在灯下一行并排，像推到桌边的一排小物件 —— */
@container main (max-width: 1060px) {
  .desk {
    --col-r: 250px;
    grid-template-columns: minmax(0, 1fr) var(--col-r);
    grid-template-areas: 'center right' 'left left';
    column-gap: 30px;
    row-gap: 40px;
  }
  .desk-center {
    grid-area: center;
  }
  .desk-col.right {
    grid-area: right;
    gap: 26px;
  }
  .desk-col.left {
    grid-area: left;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 24px;
    padding-top: 30px;
    border-top: 0.5px solid var(--line);
  }
  .desk-col.left > .sticky {
    margin-top: 6px;
  }
  .gadgets {
    gap: 14px;
  }
  .gadgets .clock {
    width: 168px;
  }
  .drawer.three {
    gap: 16px;
  }
}
@container main (max-width: 860px) {
  .desk {
    --col-r: 228px;
    column-gap: 24px;
  }
  .gadgets {
    gap: 12px;
  }
  .gadgets .clock {
    width: 148px;
  }
  .drawer.three {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .drawer.three > .drawer-col:last-child {
    grid-column: 1 / -1;
  }
  .drawer.three > .drawer-col:last-child .subj-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
  }
}
@container main (max-width: 600px) {
  .desk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'center' 'right' 'left';
    row-gap: 34px;
  }
  .letter {
    padding: 30px 20px 20px;
  }
  .letter-title {
    font-size: 22px;
    line-height: 32px;
  }
  .letter-clip {
    left: 22px;
  }
  .letter-actions {
    gap: 8px;
  }
  .letter-actions .btn.lg {
    padding: 0 16px;
  }
  .letter-actions .more-act {
    display: none;
  }
  .gadgets {
    justify-content: space-between;
  }
  .drawer {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
  }
  .classes {
    margin-top: 34px;
  }
  .ticket {
    --stub: 122px;
    flex-basis: 100%;
  }
  .zone {
    padding: 16px 16px 18px;
  }
}
@container main (max-width: 380px) {
  .clock {
    width: 170px;
    height: 84px;
  }
  .lcd svg.digits {
    width: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter,
  .icard,
  .sticky {
    transition: none;
  }
  .letter.arrive,
  .ticket,
  .live,
  .tray .slip.new,
  .dpaper,
  .scard,
  .life-item.pop .life-word {
    animation: none;
  }
}