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

:root {
  --axisw: 58px;
  --pxh: 112px;              /* 每小时的高度，手机 112px（计划书 §2.2），宽屏由 JS 缩放 */
  --colw: 96px;              /* 由媒体查询覆盖 */
  --headh: 54px;
  --r-blk: 12px;
  --r-lg: 16px;
  --shadow-blk: 0 1px 2px rgba(9, 12, 18, .10);
}

/* 手机竖屏：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);
  --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);
  --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: 6px;
  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); }
.blk .t {
  font-size: 10.5px; color: var(--faint); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 1px;
}
.blk .n { font-weight: 600; color: var(--text); letter-spacing: .005em; }
.blk.nowrap .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.tiny { padding: 4px 6px; border-radius: 9px; }
.blk.tiny .n { font-weight: 600; }
/* 很矮的格子：把内边距压掉，否则 padding 会把内容全吃掉 */
.blk.micro { padding: 1px 5px; border-radius: 8px; }
.blk.micro .n { font-weight: 600; }
.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); }
.sheet input[type="text"], .sheet input[type="time"] {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hair);
  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 .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: 1px solid var(--hair);
  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: 1px solid var(--hair);
  border-radius: 10px; padding: 9px 11px; width: 100%;
}
.sheet input[type="date"] {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hair);
  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: 6px 7px;
}
.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 .t { 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: 7px 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 .sep { color: var(--hair); }
.bottombar b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- 悬浮球 & 抽屉 */
.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); }

.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: 16px 18px 24px;
  transform: translateY(103%);
  transition: transform .24s cubic-bezier(.22, .8, .3, 1);
  z-index: 30;
  max-height: 72dvh; overflow: auto;
  box-shadow: var(--shadow-lg);
}
.sheet.open { transform: translateY(0); }
.sheet h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.sheet p { margin: 7px 0; font-size: 13px; color: var(--muted); line-height: 1.75; }
.sheet .close {
  position: absolute; right: 14px; top: 12px; border: none; background: transparent;
  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.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;
}