/* ============================================================================
 * 考研周计划 · style.css
 * 深色 / 浅色两套主题（可跟随系统，也可手动切换）；格子统一灰底，无分类配色
 * ==========================================================================*/

:root {
  --axisw: 58px;
  --pxh: 128px;              /* 每小时的高度（app.js 的 PPH 是同一个数；宽屏不再缩放）。
                                128 而不是 112：30 分钟的格子要有 64px，
                                才放得下「时间+时长 / 名称 / 具体任务」三行（约 59px）。 */
  --colw: 96px;              /* 由媒体查询覆盖 */
  --headh: 54px;
  --r-blk: 12px;
  --r-lg: 16px;
  --shadow-blk: 0 1px 2px rgba(9, 12, 18, .10);
  /* 日程卡片的字号令牌：同一情境同一档，别处不再各自写数字 */
  --card-head: 10.5px;       /* 第一行：开始–结束 / 持续时长 */
  --card-name: 13px;         /* 第二行：科目或事项名称 */
  --card-task: 12.5px;       /* 第三行：具体任务 */
  --card-name-s: 11.5px;     /* 矮格子里的名字（降级档） */
}

/* 手机竖屏：4 列 */
@media (max-width: 767px) {
  :root { --colw: calc((100vw - var(--axisw)) / 4); }
}
/* 平板：6 列 */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --colw: calc((100vw - var(--axisw)) / 6); --axisw: 62px; }
}
/* 电脑：7 列 + 右侧栏 320px */
@media (min-width: 1200px) {
  :root { --colw: calc((100vw - var(--axisw) - 320px) / 7); --axisw: 68px; }
}

/* ---------------------------------------------------------------- 主题
 * JS 在 head 里按 prefers-color-scheme 或用户选择设 data-theme。
 * :root 默认给浅色，保证没脚本时也能看。 */
:root {
  --bg: #e9ebf0;
  --bg2: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f5f6f9;
  --block: #f1f2f6;
  --block-b: #e3e6ed;
  --line: #e6e8ee;
  --hair: #e6e8ee;
  --text: #16191f;
  --muted: #5a6373;
  --faint: #8b93a2;
  --accent: #3157d6;
  --accent-2: #2f6ae0;
  --accent-soft: rgba(49, 87, 214, .10);
  --accent-line: rgba(49, 87, 214, .55);   /* 输入框的常驻边框：要看得出来是蓝色的 */
  --glow: 0 0 0 1px rgba(49, 87, 214, .30), 0 4px 18px rgba(49, 87, 214, .20);
  --weekend: #cf4b6c;
  --now: #e02b4e;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .14);
}
:root[data-theme="dark"] {
  --bg: #090b0f;
  --bg2: #0d1015;
  --surface: #14171e;
  --surface-2: #191d25;
  --block: #1a1e26;
  --block-b: #262c37;
  --line: #1b2029;
  --hair: #232937;
  --text: #e9ecf1;
  --muted: #98a1b0;
  --faint: #6b7484;
  --accent: #5b8def;
  --accent-2: #7aa5ff;
  --accent-soft: rgba(91, 141, 239, .13);
  --accent-line: rgba(122, 165, 255, .60);
  --glow: 0 0 0 1px rgba(91, 141, 239, .42), 0 0 24px rgba(91, 141, 239, .26);
  --weekend: #e0708c;
  --now: #ff5c78;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
        "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px; color: var(--muted);
  min-height: 44px; min-width: 0;
}
#rangeText { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rangeText .strong { color: var(--text); font-weight: 650; letter-spacing: .01em; }
#rangeText .wk { margin-left: 9px; }
.topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }

.iconbtn, .navbtn {
  background: transparent; border: 1px solid var(--hair); color: var(--muted);
  height: 26px; min-width: 26px; border-radius: 8px; padding: 0;
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.iconbtn:hover, .navbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn:active, .navbtn:active { background: var(--block); }
.iconbtn { font-size: 14px; }
.nowtxt {
  color: var(--accent); font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

/* ---------------------------------------------------------------- 滚动区 */
.scroller {
  overflow: auto;
  position: relative;
  min-width: 0; min-height: 0;
  background: var(--bg2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.stage { min-width: max-content; }

/* 表头行（吸顶） */
.headrow {
  position: sticky; top: 0; z-index: 3;
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  height: var(--headh);
}
.corner {
  position: sticky; left: 0; z-index: 4;
  width: var(--axisw); min-width: var(--axisw);
  background: var(--surface);
  border-right: 1px solid var(--hair);
}
.dayhead {
  width: var(--colw); min-width: var(--colw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 2px;
  border-right: 1px solid var(--line);
  position: relative;
}
.dayhead .dw { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; letter-spacing: .01em; }
.dayhead .dd { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dayhead.weekend .dw { color: var(--weekend); }
.dayhead.today { background: var(--accent-soft); }
.dayhead.today::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
}
.dayhead.today .dw { color: var(--accent); }
.dayhead.today .dd { color: var(--accent-2); }
.dayhead .dot {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* 主体行 */
.bodyrow { display: flex; align-items: flex-start; }

/* 左侧时间轴（吸左） */
.axis {
  position: sticky; left: 0; z-index: 2;
  width: var(--axisw); min-width: var(--axisw);
  background: var(--bg2);
  border-right: 1px solid var(--hair);
  overflow: hidden;
}
.axis .tick {
  position: absolute; right: 9px; transform: translateY(-50%);
  font-size: 10.5px; color: var(--faint); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.axis .hline { position: absolute; left: 10px; right: 0; height: 1px; background: var(--line); }
.axis .nowmark { position: absolute; left: 0; right: 0; height: 0; z-index: 5; }
.axis .nowmark::before {
  content: ""; position: absolute; left: 3px; top: -4.5px;
  border: 4.5px solid transparent; border-left: 8px solid var(--now);
}
.axis .nowmark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
  background: var(--now); border-radius: 1px;
}

/* 天列 */
.cols { display: flex; position: relative; }
.col {
  position: relative;
  width: var(--colw); min-width: var(--colw);
  border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px var(--pxh));
  background-repeat: repeat-y;
}
/* 贯穿整周的"此刻"细线 */
.nowline {
  position: absolute; left: 0; right: 0; height: 1.5px; z-index: 4;
  background: linear-gradient(90deg, var(--now), rgba(255, 92, 120, .25));
  pointer-events: none;
}

/* 格子 */
.blk {
  position: absolute; left: 3px; right: 3px;
  background: var(--block);
  border: 1px solid var(--block-b);
  border-radius: var(--r-blk);
  padding: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.blk:hover { border-color: var(--hair); background: var(--surface-2); }
/* ---- 卡片内容层级：第一行时间+时长 / 第二行名称 / 第三行具体任务 ----
   字号只有下面这几档（同一情境同一档），**不再逐卡缩到"刚好放得下"**。
   卡片高度由时长决定，太矮就少一行（app.js 按高度加 .micro / .short / .notext）。
   第一行永远在最上面，所以怎么降级都不会把时间顶掉。 */
.blk .hd {
  display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
  font-size: 10.5px; color: var(--faint); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1.2; margin-bottom: 1px;
}
.blk .hd .t { white-space: nowrap; }
.blk .hd .d { margin-left: auto; white-space: nowrap; }
/* 临时事项右上角有个「临时/AI」小标，别跟时长叠在一起 */
.blk.item .hd .d { padding-right: 30px; }
.blk .n {
  font-size: var(--card-name); font-weight: 600; line-height: 1.22;
  color: var(--text); letter-spacing: .005em;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.blk .s {
  font-size: var(--card-task); line-height: 1.25; color: var(--muted);
  margin-top: 1px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.blk.tiny { padding: 4px 6px; border-radius: 9px; }
.blk.tiny .n { font-weight: 600; }
/* 矮到连"时间 + 时长"那一行都放不下的格子（≈18 分钟以内）：只留名字，字号降一档。
   与上面同一个比例尺：字体大小只有这几档，**不按卡片单独缩放**。 */
.blk.micro { padding: 2px 5px; border-radius: 8px; }
.blk.micro .n { font-size: var(--card-name-s); font-weight: 600; line-height: 1.2; }
.blk.notext .n { display: none; }
/* 小憩/留白这类弱内容的格子 */
.blk.soft { background: transparent; border-style: dashed; box-shadow: none; }
.blk.soft .n { color: var(--muted); font-weight: 500; }

/* 临时事项（手动加的）：左右各留 6px，好让下面"被顶替"的原计划露一圈 */
.blk.item {
  left: 6px; right: 6px;
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 80%),
    var(--block);
  border-color: var(--accent);
  border-style: solid;
  z-index: 2;
}
.blk.item .n { color: var(--text); font-weight: 650; }
.blk .chip {
  position: absolute; top: 3px; right: 3px;
  font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 5px;
  background: var(--accent); color: #fff; font-weight: 700; letter-spacing: .02em;
}
/* 被顶替的计划格 */
.blk.replaced { opacity: .48; border-style: dashed; box-shadow: none; }
.blk.replaced .n { text-decoration: line-through; text-decoration-thickness: 1px; }
.blk .repl {
  margin-top: auto; padding-top: 3px;
  font-size: 9.5px; color: var(--faint); white-space: nowrap;
}

/* 表单（加/改事项）
 * 输入框一律带蓝色边框 —— 去掉示例文字之后，光靠灰底太不显眼，看不出哪里能输入。 */
.sheet .form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.sheet label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
/* number 一并写上：RPG 窗口用的是 rpg.css 里同一套写法，两边保持一致，
   免得以后在抽屉里加数字输入框时又出现"原生白底"的框。 */
.sheet input[type="text"], .sheet input[type="time"], .sheet input[type="number"] {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--accent-line);
  border-radius: 10px; padding: 9px 11px; width: 100%;
  font-variant-numeric: tabular-nums;
}
.sheet input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet .cost {
  font-size: 12px; line-height: 1.8; color: var(--muted);
  background: var(--surface-2); border-radius: 11px; padding: 10px 12px;
  border: 1px solid transparent;
}
.sheet .cost.warn { border-color: #d98a2b; color: #c07a1e; background: rgba(217, 138, 43, .10); }
.sheet .cost.stop { border-color: var(--now); color: var(--now); background: rgba(224, 43, 78, .10); }
.sheet .cost b { color: var(--text); }
.sheet .cost.stop b, .sheet .cost.warn b { color: inherit; }
.sheet .actions { display: flex; gap: 10px; margin-top: 2px; }
.sheet .actions button {
  flex: 1; font: inherit; font-size: 14px; font-weight: 600;
  border-radius: 11px; padding: 11px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface-2); color: var(--text);
}
.sheet .actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sheet .actions button.danger { color: var(--now); border-color: var(--now); background: transparent; }
.sheet .actions button:disabled { opacity: .45; cursor: not-allowed; }
.sheet .hint { font-size: 11.5px; color: var(--faint); line-height: 1.7; }
/* 编辑范围选择器（计划格的编辑/移除、加一件事的长期重复）：一行一个单选项。
   ⚠️ .sheet label 默认是竖排（标题在输入框上面），这里要改成横排。 */
.sheet .scopes { display: flex; flex-direction: column; gap: 7px; }
.sheet .scopes label {
  flex-direction: row; align-items: flex-start; gap: 9px; font-size: 13px;
  color: var(--text); cursor: pointer;
  border: 1px solid var(--hair); border-radius: 10px; padding: 9px 11px;
  background: var(--surface-2);
}
.sheet .scopes label:hover { border-color: var(--accent-line); }
.sheet .scopes input[type="radio"] { margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.sheet .scopes .note { display: block; font-style: normal; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.sheet .scopes label.disabled { opacity: .5; cursor: not-allowed; }
.sheet .meta { font-size: 13px; color: var(--muted); }
.sheet .meta b { color: var(--text); }

/* AI 对话框：候选卡片 */
.sheet textarea {
  font: inherit; font-size: 14px; color: var(--text); resize: vertical;
  background: var(--surface-2); border: 1.5px solid var(--accent-line);
  border-radius: 10px; padding: 9px 11px; width: 100%; min-height: 52px;
}
.sheet textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sheet select {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--accent-line);
  border-radius: 10px; padding: 9px 11px; width: 100%;
}
.sheet select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sheet input[type="date"] {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--accent-line);
  border-radius: 10px; padding: 9px 11px; width: 100%;
}
.cand {
  border: 1px solid var(--hair); border-radius: 12px;
  padding: 11px 12px; margin-top: 10px; background: var(--surface-2);
}
.cand .seg { font-size: 13.5px; color: var(--text); }
.cand .seg b { font-weight: 650; }
.cand .seg .mins { color: var(--faint); font-size: 12px; }
.cand .cst { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.cand .actions { margin-top: 9px; }
.cand .actions button { padding: 9px; font-size: 13px; }

/* 当前格：蓝框 + 蓝底 + 柔光 + 加粗 + 还有 X 分钟 + 进度条 */
.blk.now {
  border: 2px solid var(--accent);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 70%),
    var(--block);
  box-shadow: var(--glow);
  /* padding 4 + border 2 = 上下各 6px —— 与普通卡片的 padding 5 + border 1 一样，
     所以"当前格"和普通格子能装的内容一样多（app.js 的 CARD_PAD 只需要一个值）。 */
  padding: 4px 5px;
}
.blk.now:hover { background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--block); }
.blk.now .n { font-weight: 700; color: var(--text); }
.blk.now .hd { color: var(--accent); font-weight: 600; }
.blk .rest {
  margin-top: auto; padding-top: 4px;
  font-size: 10px; line-height: 1.35; color: var(--accent);
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.blk .bar { height: 3px; border-radius: 2px; background: rgba(127, 138, 160, .26); margin-top: 4px; overflow: hidden; }
.blk .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* 矮格子的当前格：附加条贴在格子下沿外侧 */
.nowbar {
  position: absolute; left: 3px; right: 3px;
  background: var(--accent); color: #fff;
  border-radius: 7px; padding: 2px 6px;
  font-size: 10px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(49, 87, 214, .35);
  z-index: 6;
}
.nowbar .bar { height: 2px; margin-top: 2px; background: rgba(255, 255, 255, .35); }
.nowbar .bar > i { background: #fff; }

/* 空周（待定） */
.empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 13px; text-align: center; padding: 24px; line-height: 1.9;
}

/* ---------------------------------------------------------------- 底栏 */
.bottombar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 12px;
  background: var(--surface);
  border-top: 1px solid var(--hair);
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-height: 34px;
}
.bottombar #barText {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; white-space: nowrap;
}
.bottombar .sep { color: var(--hair); }
.bottombar b { color: var(--text); font-weight: 600; }
.bottombar .iconbtn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- 悬浮球 & 抽屉 */
.fab {
  position: fixed; right: 18px; bottom: 62px;
  width: 50px; height: 50px; border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(49, 87, 214, .38);
  z-index: 20;
  transition: transform .15s;
}
.fab:hover { transform: translateY(-1px); }
.fab:active { transform: scale(.96); }

/* 抽屉外部的可点击遮罩（阶段 1）。
   以前桌面端只有一条 box-shadow 当"阴影"，它拦不住点击、手机上更是完全没有 ——
   于是"点窗口外面关掉"根本做不到。这里放一个真实的空层，由 app.js 在两处开关它：
     · #sheet 打开/关闭  → .open
     · RPG 三级窗口打开/关闭 → .rpg-sub-hold（rpg-ui.js 加，见 rpg/rpg.css）*/
.sheetMask {
  position: fixed; inset: 0; z-index: 28;
  background: rgba(8, 10, 14, .34);
  display: none;
}
.sheetMask.open, .sheetMask.rpg-sub-hold { display: block; }

/* 抽屉：**自己不再滚动**。
   原来 .sheet 同时是定位容器和滚动容器，而 .close 是它里面的绝对定位子元素 ——
   内容一长，关闭按钮就跟着滚出去了（阶段 0 定位到的根因）。
   现在改成"外层不滚、正文滚"：#sheetBody 单独滚动，× 留在不滚的外层里，
   所以无论滚到哪个位置它都在原地。*/
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
  border-top: 1px solid var(--hair);
  padding: 0;
  display: flex; flex-direction: column;
  transform: translateY(103%);
  transition: transform .24s cubic-bezier(.22, .8, .3, 1);
  z-index: 30;
  max-height: 72dvh; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.sheet.open { transform: translateY(0); }
.sheet h3 { margin: 0 0 10px; padding-inline-end: 34px; font-size: 15px; font-weight: 650; }
.sheet p { margin: 7px 0; font-size: 13px; color: var(--muted); line-height: 1.75; }
/* scrollbar-gutter: 常驻滚动条槽位，滚动条来去不改变正文宽度（阶段 1.2.1） */
#sheetBody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 24px; scrollbar-gutter: stable; }
.sheet .close {
  position: absolute; right: 12px; top: 10px; border: none;
  background: var(--surface);
  color: var(--muted); font-size: 17px; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.sheet .close:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------- 电脑侧栏 */
.side { display: none; }
@media (min-width: 1200px) {
  body { grid-template-columns: minmax(0, 1fr) 320px; }
  .topbar { grid-column: 1 / 3; }
  .scroller { grid-column: 1; grid-row: 2; }
  .side {
    grid-column: 2; grid-row: 2; display: block; overflow: auto;
    border-left: 1px solid var(--hair); background: var(--surface); padding: 16px 16px 24px;
  }
  .bottombar { grid-column: 1 / 3; }
  .fab { bottom: 76px; }
}
.side h4 {
  margin: 0 0 12px; font-size: 11.5px; color: var(--faint);
  font-weight: 650; letter-spacing: .08em; text-transform: none;
}
.side .row {
  display: flex; gap: 10px; font-size: 12.5px; padding: 6px 8px;
  border-radius: 9px; align-items: baseline;
}
.side .row + .row { margin-top: 1px; }
.side .row .tm { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 86px; }
.side .row .nm { color: var(--text); }
.side .row .du { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.side .row.now { background: var(--accent-soft); }
.side .row.now .nm { color: var(--accent); font-weight: 700; }
.side .row.now .tm { color: var(--accent); }
.side .sum {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 12px; color: var(--muted); line-height: 1.8;
}
.side .sum b { color: var(--text); }
.side .todo {
  margin-top: 16px; padding: 12px; border: 1px dashed var(--hair); border-radius: 11px;
  font-size: 12px; color: var(--faint); line-height: 1.8;
}

/* ---------------------------------------------------------- 上课前提醒条
   每节课开始前 15 分钟弹一次（app.js 的 maybeRemind）。纯界面提示：
   不写数据、不进学习时长/统计/RPG。z-index 排在遮罩之下、网格之上。 */
.remindbar {
  position: fixed; left: 50%; top: 66px; transform: translate(-50%, -8px);
  display: none; align-items: center; gap: 10px; z-index: 26;
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-lg, var(--shadow));
  font-size: 13px; line-height: 1.5;
}
.remindbar.open { display: flex; animation: rbIn .18s ease-out; }
.remindbar b { color: var(--accent); white-space: nowrap; }
.remindbar .rb-txt { min-width: 0; }
.remindbar .rb-x {
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface-2); color: var(--text);
}
@keyframes rbIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 767px) {
  .remindbar { top: 58px; font-size: 12.5px; }
}