/* index.css — 首页「学习概览」（视觉改版 T1）
   只消费 common.css 的 token（纸 / 墨 / 砖红三分），不写十六进制色；
   结构跟随 index.js 注入的 class，不删不改名（#todayBody / #statGrid / #dayGrid / #chapterList
   / #entryGrid / #foot 等 id 与 .stat / .chip / .entry / .day-cell 契约全部保留）。 */

/* ---------- 容器：统一 1240（不再 1400） ---------- */
.wrap{--page-wrap:var(--wrap);}
.wrap > .card{margin-bottom:var(--sp-4);}

/* ---------- 页头：只留数据版本 meta（track 切换在顶栏） ---------- */
.page-head{margin-bottom:var(--sp-5);}
.head-meta{
  display:inline-block;max-width:100%;
  padding:4px 10px;border-radius:var(--r-sm);
  background:var(--paper-50);border:1px solid var(--paper-200);
  color:var(--ink-500);font-size:var(--fs-2xs);line-height:var(--lh-snug);
  text-align:right;
}

/* ---------- 今日任务：紧凑「今日条」（目标高度 ≤140px）
   纸色卡 + 1px 暖边 + 左侧大数字 + 右侧主按钮；无渐变 / 无光斑 / 无伪元素圆。 ---------- */
.today{
  position:relative;overflow:hidden;
  padding:clamp(14px,1.5vw,18px) clamp(14px,1.8vw,20px);
  background:var(--paper-0);border:1px solid var(--paper-200);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.today .sec{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  margin:0 0 8px;font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.1em;color:var(--ink-500);line-height:1.3;
}
.today-kicker{
  font-family:var(--font-ru);font-size:var(--fs-kicker);font-weight:600;
  letter-spacing:.12em;color:var(--accent-600);
}
.today-hero{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-3) var(--sp-5);
}
.today-count{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.today-num{
  font-size:clamp(32px,3.4vw,42px);font-weight:800;line-height:1;
  letter-spacing:-.02em;color:var(--ink-900);font-variant-numeric:tabular-nums;
}
.today-count-lb{
  margin-top:4px;font-size:var(--fs-2xs);font-weight:600;
  color:var(--ink-500);white-space:nowrap;
}
.today.is-review .today-count-lb{color:var(--accent-600);}
.today-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.today-lead{
  margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug);
  color:var(--ink-700);max-width:56ch;
}
.today-next{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;
  margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--ink-500);
  min-width:0;
}
.today-next b{font-weight:600;color:var(--ink-900);}
.today-ru{font-family:var(--font-ru);color:var(--ink-500);}
.today .dim{
  display:inline-block;padding:0 8px;border-radius:var(--r-pill);
  background:var(--paper-100);border:1px solid var(--paper-200);
  color:var(--ink-500);font-size:var(--fs-2xs);line-height:1.6;white-space:nowrap;
}
.today-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;}
.today-acts .btn{white-space:nowrap;}

/* ---------- 未完成课程：赭色左标 + 一行文字 + 续学按钮 ---------- */
.resume{background:var(--paper-0);border-left:3px solid var(--warn);}
.resume .sec{margin-bottom:6px;}
.resume .sec .ic{color:var(--warn);}
.resume-line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-2) var(--sp-4);
}
.resume-text{font-size:var(--fs-md);line-height:var(--lh-snug);color:var(--ink-700);min-width:0;}

/* ---------- 学习统计：5 格（数字 26–32 / tabular，标签 ink-500，状态只改数字色） ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);}
.stat-grid .stat{
  text-align:left;padding:12px 14px;
  background:var(--paper-50);border:1px solid var(--paper-200);
}
.stat-grid .stat-value{letter-spacing:-.01em;}
.stat-grid .stat-label{white-space:nowrap;}

/* ---------- 近 30 天：7 列周网格 + 少/多图例 ---------- */
.day-wrap{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--paper-200);
}
.day-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;padding-top:2px;}
.day-label{font-size:var(--fs-2xs);color:var(--ink-500);font-variant-numeric:tabular-nums;}
.day-legend{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--ink-500);}
.day-swatch{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  background:var(--paper-100);border:1px solid var(--paper-200);
}
.day-swatch.on{background:var(--brand-500);border-color:var(--brand-600);}
.day-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
  width:224px;max-width:100%;min-width:0;
}
.day-cell{
  display:block;aspect-ratio:1 / 1;min-height:0;border-radius:3px;
  background:var(--paper-100);border:1px solid var(--paper-200);
}
.day-cell.on{background:var(--brand-500);border-color:var(--brand-600);}

/* ---------- 章节课时：纸色分组 + 编号（01 / 02 …）+ 芯片墙 ---------- */
#chapterList{display:flex;flex-direction:column;gap:var(--sp-3);counter-reset:ch;}
.chapter{
  margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-4);
  background:var(--paper-50);border:1px solid var(--paper-200);border-radius:var(--r-md);
}
.chapter-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--paper-200);
}
.chapter-head::before{
  counter-increment:ch;content:counter(ch,decimal-leading-zero);
  font-family:var(--font-ru);font-size:var(--fs-kicker);font-weight:600;
  letter-spacing:.1em;color:var(--accent-600);
}
.chapter-title{margin:0;font-size:var(--fs-md);font-weight:700;line-height:1.4;color:var(--ink-900);}
.chapter-meta{margin-left:auto;font-size:var(--fs-2xs);color:var(--ink-500);}

/* 覆盖 common 的通用芯片栅格（#chapterList 优先级更高；common.css 冻结不能改） */
#chapterList .chip-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--sp-2);}
#chapterList .chip{padding:9px 11px;gap:2px;min-height:var(--tap);box-shadow:none;}
#chapterList .chip:hover{box-shadow:var(--sh-1);}
#chapterList .chip-title{font-size:14px;}
#chapterList .chip-sub{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#chapterList .chip-status{font-size:var(--fs-2xs);padding:0 8px;line-height:1.7;}

/* 图例：点 + 文字（去掉 pill 底色，减少同屏色块） */
.legend{background:transparent;border:0;padding:0;margin-bottom:var(--sp-3);}
.legend .lg{background:transparent;padding:0 4px;}
.legend .lg-new{color:var(--ink-500);}

/* ---------- 工具：主操作常显 + 「更多」折叠 ---------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);}
.tools > .btn{min-height:var(--control-h);}
.tools-more-btn{color:var(--ink-600);}
.tools-more-btn[aria-expanded="true"]{color:var(--ink-900);}
.tools-more-btn .ic{transition:transform var(--dur-1) var(--ease);}
.tools-more-btn[aria-expanded="true"] .ic{transform:rotate(180deg);}
.tools-more{
  flex:1 1 100%;display:flex;flex-wrap:wrap;gap:var(--sp-2);
  padding-top:var(--sp-3);border-top:1px dashed var(--paper-200);
}
.tools .hint{max-width:var(--measure);}
.import-result{color:var(--success);font-weight:600;}

/* ---------- 8 个入口卡 ---------- */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3);}
.entry{
  display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:var(--sp-3);row-gap:2px;align-items:start;
  min-height:var(--tap);padding:14px 15px;
  background:var(--paper-0);border:1px solid var(--paper-200);border-radius:var(--r-md);
  color:var(--ink-900);text-decoration:none;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.entry:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--brand-200);}
.entry-icon{
  grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--paper-100);color:var(--brand-700);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.entry:hover .entry-icon{background:var(--brand-50);color:var(--brand-600);}
.entry-title{font-size:var(--fs-md);font-weight:700;line-height:1.35;}
.entry:hover .entry-title{color:var(--brand-700);}
.entry-desc{font-size:var(--fs-xs);color:var(--ink-500);line-height:1.55;}

/* ---------- 页脚：两栏（左：版本 / 离线说明；右：返回工具箱） ---------- */
.foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-3) var(--sp-6);
  margin-top:var(--sp-8);padding-top:var(--sp-4);
  border-top:1px solid var(--paper-200);
  color:var(--ink-500);font-size:var(--fs-2xs);line-height:var(--lh-snug);
}
.foot-main{flex:1 1 320px;min-width:0;}
.foot-line{margin:0;max-width:var(--measure);}
.foot-line + .foot-line{margin-top:3px;}
.foot-side{flex:0 0 auto;}
.foot-link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--tap);padding:0 14px;
  background:var(--paper-0);border:1px solid var(--paper-200);border-radius:var(--r-pill);
  color:var(--ink-700);font-size:var(--fs-xs);font-weight:600;text-decoration:none;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.foot-link:hover{color:var(--brand-700);border-color:var(--brand-200);}
.foot-link .ic{width:14px;height:14px;}

/* ---------- 弹窗（导入冲突 / 修改密码）：去毛玻璃，纯墨色背板 ---------- */
.modal-mask{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(15,26,43,.44);   /* 墨色背板 44%（ink-900 半透明），不叠毛玻璃 */
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
          max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  overflow:auto;
}
.modal-box{
  margin:auto;width:min(560px,calc(100vw - 32px));max-width:100%;
  max-height:calc(100dvh - 32px);overflow:auto;
  padding:clamp(18px,2.4vw,24px) clamp(16px,2.6vw,24px) clamp(16px,1.8vw,20px);
  background:var(--paper-0);border:1px solid var(--paper-200);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
}
.modal-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 8px;font-size:var(--fs-xl);font-weight:700;line-height:1.35;color:var(--ink-900);
}
.modal-title .ic{width:18px;height:18px;color:var(--brand-600);}
.modal-text{margin:0 0 14px;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-500);}
.conflict-opt{
  display:flex;align-items:flex-start;gap:10px;
  min-height:var(--tap);padding:11px 12px;margin:0 0 8px;
  background:var(--paper-50);border:1px solid var(--paper-200);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink-700);cursor:pointer;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.conflict-opt:hover{background:var(--paper-100);border-color:var(--paper-300);}
.conflict-opt input{margin:5px 0 0;flex:none;accent-color:var(--brand-600);}
.conflict-opt:has(input:checked){border-color:var(--brand-600);background:var(--brand-50);}
.conflict-warn{
  display:flex;align-items:flex-start;gap:8px;
  margin:10px 0 14px;padding:9px 12px;
  background:var(--danger-soft);border:1px solid var(--danger);border-radius:var(--r-sm);
  color:var(--danger);font-size:var(--fs-xs);line-height:var(--lh-body);
}
.conflict-warn .ic{width:16px;height:16px;flex:none;margin-top:2px;}
/* 主操作在右（桌面）/ 在底（移动）：DOM 里 ok 在前，用 row-reverse 反序 */
.modal-actions{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start;gap:var(--sp-2);}
/* 密码字段：沿用 .conflict-opt 语义，但呈标签态（无边框、无背景） */
.conflict-opt.pwd-label{
  display:block;min-height:0;margin:0 0 6px;padding:0;
  background:transparent;border:0;border-radius:0;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-600);cursor:default;
}
.conflict-opt.pwd-label:hover{background:transparent;border-color:transparent;}
.pwd-input{
  width:100%;box-sizing:border-box;min-height:var(--control-h);
  margin:0 0 12px;padding:10px 12px;
  font-family:inherit;font-size:16px;color:var(--ink-900);
  background:var(--paper-0);border:1px solid var(--paper-300);border-radius:var(--r-sm);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.pwd-input:focus{outline:none;border-color:var(--brand-600);box-shadow:var(--sh-focus);}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .page-head{margin-bottom:var(--sp-4);}
  .head-meta{text-align:left;}
  .today-hero{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-3);}
  .today-acts{grid-column:1 / -1;justify-content:stretch;}
  .today-acts .btn{flex:1 1 0;min-width:0;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);}
  .stat-grid .stat{padding:12px 12px;}
  .stat-grid .stat-label{white-space:normal;}
  .day-grid{width:224px;max-width:100%;}
  .day-cell{border-radius:2px;}
  #chapterList .chip-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}
  .entry-grid{grid-template-columns:1fr;}
  .modal-actions{flex-direction:column-reverse;}
  .modal-actions .btn{width:100%;}
  .conflict-opt{align-items:center;}
  .conflict-opt input{margin:0;}
}
@media (max-width:520px){
  /* 首屏焦点交给大数字：h2 视觉隐藏（读屏仍可见），省出 ~18px 高度 */
  .today .sec{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .today{padding:12px 14px;}
  .today-hero{row-gap:var(--sp-2);}
  .today-num{font-size:34px;}
  .today-lead,.today-next{font-size:13.5px;line-height:1.45;}
  /* 390 宽：说明最多 2 行（next 行带 title 全文），保证 hero ≤140px */
  .today-lead,.today-next{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .today .dim,.today .today-ru{display:none;}   /* 词句数 / 俄文课名在 390 宽让位给中文标题 */
  .today-acts .btn{font-size:var(--fs-sm);padding:10px 12px;}
  #chapterList .chip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);}
  #chapterList .chip{padding:8px 9px;}
  #chapterList .chip-title{font-size:13.5px;line-height:1.35;}
  /* 第二行副标题（词/句数）在 390 宽隐藏，保证芯片 ~90px 高 */
  #chapterList .chip .chip-sub ~ .chip-sub{display:none;}
  .tools > .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:10px 12px;}
  .tools-more .btn{flex:1 1 calc(50% - 4px);}
  .foot{align-items:flex-start;}
  .foot-side{width:auto;}
  .foot-link{width:auto;justify-content:flex-start;padding:0 16px;}
}
@media (min-width:761px){
  .head-meta{text-align:right;}
}