/* ============================================================
   design tokens — 全平台视觉基线
   落地页（营销）与产品内页（学员/教师/管理端）共用同一套色板、
   圆角、间距、阴影与字阶，解决"两套视觉语言断层"的问题。
   ============================================================ */
:root{
  /* ── 品牌色（与落地页主渐变一致）── */
  --brand-400:#818cf8;
  --brand-500:#667eea;
  --brand-600:#5a67d8;
  --brand-700:#764ba2;

  /* ── 语义色 ── */
  --ink-900:#0f172a;   /* 主卡深底 / 主文字 */
  --ink-700:#334155;
  --ink-500:#64748b;   /* 次级文字 */
  --ink-300:#94a3b8;   /* 辅助/占位 */
  --bg-app:#f0f4f9;    /* 产品内页底色 */
  --surface:#ffffff;
  --surface-sub:#f8fafc;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --success:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;

  /* ── 圆角 ── */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:99px;

  /* ── 间距 ── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;

  /* ── 阴影 ── */
  --sh-sm:0 2px 8px rgba(15,23,42,.06);
  --sh-md:0 6px 18px rgba(15,23,42,.10);
  --sh-lg:0 12px 32px rgba(15,23,42,.16);

  /* ── 字阶 ── */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-17:17px; --fs-22:22px; --fs-28:28px;
}

/* ── 无障碍：键盘焦点可见（全站基线）── */
:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px;border-radius:var(--r-sm);}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;background:#fff;color:var(--brand-600);
  padding:10px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:var(--fs-14);
}
.skip-link:focus{left:0;}

/* ── 骨架屏：替代"正在加载…"文字，降低等待焦虑 ── */
.skel{
  background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%);
  background-size:400% 100%;animation:skel 1.3s ease infinite;border-radius:var(--r-sm);
}
@keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skel-line{height:14px;margin:8px 0;}
.skel-line.w60{width:60%;}
.skel-line.w40{width:40%;}
/* 深色底（主卡内）骨架 */
.skel.dark{
  background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.16) 37%,rgba(255,255,255,.07) 63%);
  background-size:400% 100%;
}

/* ── 尊重系统"减少动态效果"偏好（无障碍 + 省电 + 降低离屏绘制）── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ============================================================
   组件：今天做什么（今日焦点主卡）
   设计原则：整页只有这一张深色卡，作为唯一的视觉锚点与行动入口；
   其余提醒一律浅色或折叠，避免 9 张卡平铺造成的视觉噪音。
   ============================================================ */
.tfc{
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  margin-bottom:var(--s-5);
}
.tfc-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-6);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.tfc-head-left{display:flex;align-items:center;gap:var(--s-3);}
.tfc-flame{font-size:32px;line-height:1;filter:drop-shadow(0 0 8px #f97316);}
.tfc-streak{color:#fff;font-size:var(--fs-17);font-weight:800;line-height:1.2;}
.tfc-streak b{color:#fb923c;font-size:var(--fs-22);}
.tfc-sub{color:rgba(255,255,255,.55);font-size:var(--fs-12);margin-top:3px;}
.tfc-badge{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:700;
}
.tfc-list{padding:var(--s-3) var(--s-6) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);}
.tfc-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);flex-wrap:wrap;
}
.tfc-row-main{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:1;}
.tfc-row-icon{font-size:20px;flex-shrink:0;}
.tfc-row-title{color:#fff;font-size:var(--fs-14);font-weight:700;}
.tfc-row-desc{color:rgba(255,255,255,.6);font-size:var(--fs-12);margin-top:2px;}
.tfc-btn{
  background:#fff;color:var(--brand-600);padding:8px 18px;border-radius:var(--r-sm);
  font-size:var(--fs-13);font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0;
}
.tfc-btn.ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.2);}
.tfc-done{color:rgba(255,255,255,.65);font-size:var(--fs-13);text-align:center;padding:var(--s-4) 0;}
@media (max-width:640px){
  .tfc-head,.tfc-list{padding-left:var(--s-4);padding-right:var(--s-4);}
  .tfc-btn{width:100%;text-align:center;}
}