/* ============================== 签到中心 ============================== */

/* ── 顶部导航 ── */
.chk-topbar { display:flex; align-items:center; gap:8px; padding:10px 0 12px; }
.chk-back {
  display:inline-flex; align-items:center; gap:3px;
  border:none; background:none; cursor:pointer;
  color:var(--cc-muted); font-size:14px; padding:6px 8px; border-radius:8px;
  transition:background 0.15s,color 0.15s; flex-shrink:0;
}
.chk-back:hover { background:rgba(37,99,235,.07); color:var(--cc-blue); }
.chk-back i { font-size:18px; }
.chk-topbar-title { flex:1; text-align:center; font-size:16px; font-weight:700; color:var(--cc-text); }
.chk-topbar-actions { display:flex; gap:4px; }
.chk-topicon {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  color:var(--cc-muted); text-decoration:none; transition:background 0.15s,color 0.15s; font-size:18px;
}
.chk-topicon:hover { background:rgba(37,99,235,.07); color:var(--cc-blue); }

/* ── Hero 签到卡 ── */
.chk-hero {
  background:var(--cc-blue);
  border-radius:var(--cc-radius,14px);
  padding:22px 24px;
  color:#fff;
  margin-bottom:14px;
  position:relative; overflow:hidden;
  box-shadow:0 8px 24px rgba(37,99,235,.25);
}
.chk-hero::before {
  content:''; position:absolute; right:-50px; top:-50px;
  width:180px; height:180px; background:rgba(255,255,255,.08); border-radius:50%;
}
.chk-hero::after {
  content:''; position:absolute; right:60px; bottom:-40px;
  width:100px; height:100px; background:rgba(255,255,255,.06); border-radius:50%;
}
.chk-hero-body {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.chk-hero-left { flex:1; min-width:220px; }
.chk-hero-greeting { font-size:13px; opacity:.9; margin-bottom:2px; }
.chk-hero-title { font-size:22px; font-weight:800; margin-bottom:14px; }
.chk-hero-stats { display:flex; gap:20px; flex-wrap:wrap; }
.chk-stat { text-align:center; }
.chk-stat-val { font-size:28px; font-weight:900; line-height:1.1; }
.chk-stat-lbl { font-size:12px; opacity:.85; }
.chk-hero-right { display:flex; flex-direction:column; align-items:center; gap:10px; }

/* 签到按钮 */
.chk-btn {
  background:#fff; color:var(--cc-blue);
  border:none; padding:13px 36px;
  font-size:16px; font-weight:800;
  border-radius:12px; cursor:pointer;
  transition:all 0.25s; box-shadow:0 6px 18px rgba(0,0,0,.12);
  white-space:nowrap;
}
.chk-btn:hover:not(:disabled) { transform:translateY(-2px) scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.chk-btn:disabled { background:rgba(255,255,255,.3); color:rgba(255,255,255,.9); cursor:not-allowed; box-shadow:none; }
.chk-btn.checked { background:rgba(255,255,255,.2); color:#fff; cursor:default; }
.chk-streak-badge {
  background:rgba(255,255,255,.2); padding:5px 12px; border-radius:20px;
  font-size:12px; display:flex; align-items:center; gap:5px;
}
.chk-streak-badge i { color:#fbbf24; }

/* ── 快捷信息栏 ── */
.chk-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.chk-info-card {
  background:var(--cc-white); border-radius:12px; padding:14px 16px;
  box-shadow:var(--cc-shadow); display:flex; align-items:center; gap:12px;
  border:1px solid var(--cc-border);
}
.chk-info-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.chk-info-icon.blue  { background:#eff6ff; color:var(--cc-blue); }
.chk-info-icon.green { background:#ecfdf5; color:#059669; }
.chk-info-icon.orange{ background:#fff7ed; color:#ea580c; }
.chk-info-icon.purple{ background:#faf5ff; color:#9333ea; }
.chk-info-lbl { font-size:12px; color:var(--cc-muted); margin-bottom:2px; }
.chk-info-val { font-size:18px; font-weight:800; color:var(--cc-text); }

/* ── 双列布局 ── */
.chk-two-col { display:grid; grid-template-columns:1fr 340px; gap:16px; }

/* ── 功能卡片行 ── */
.chk-feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.chk-feature-card {
  background:var(--cc-white); border-radius:14px; padding:16px;
  border:1px solid var(--cc-border); box-shadow:var(--cc-shadow);
  display:flex; flex-direction:column; gap:6px;
}
.chk-feature-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.chk-feature-icon.box    { background:#fef3c7; color:#b45309; }
.chk-feature-icon.qq     { background:#dbeafe; color:#2563eb; }
.chk-feature-icon.retro  { background:#ede9fe; color:#6d28d9; }
.chk-feature-title { font-size:15px; font-weight:700; color:var(--cc-text); }
.chk-feature-desc  { font-size:12px; color:var(--cc-muted); line-height:1.5; flex:1; }
.chk-feature-meta  { font-size:12px; color:var(--cc-muted); }
.chk-feature-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700;
  border:1px solid var(--cc-border); background:var(--cc-white); color:var(--cc-muted);
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.chk-feature-btn:hover:not(:disabled) { border-color:var(--cc-blue); color:var(--cc-blue); }
.chk-feature-btn.primary { background:var(--cc-blue); border-color:var(--cc-blue); color:#fff; }
.chk-feature-btn.primary:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.chk-feature-btn.ghost { background:var(--cc-bg,#f6f7fb); }
.chk-feature-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ── 签到日历卡 ── */
.chk-calendar-card {
  background:var(--cc-white); border-radius:14px; padding:18px;
  border:1px solid var(--cc-border); box-shadow:var(--cc-shadow);
}
.chk-calendar-hd {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.chk-calendar-hd h3 {
  margin:0; font-size:15px; font-weight:700; color:var(--cc-text);
  display:flex; align-items:center; gap:6px;
}
.chk-cal-nav { display:flex; align-items:center; gap:6px; }
.chk-cal-nav button {
  width:28px; height:28px; border:1px solid var(--cc-border); border-radius:8px;
  background:var(--cc-white); color:var(--cc-muted); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.chk-cal-nav button:hover { border-color:var(--cc-blue); color:var(--cc-blue); }
.chk-cal-nav span { font-size:13px; font-weight:700; min-width:80px; text-align:center; color:var(--cc-text); }
.chk-cal-pct { font-size:12px; color:var(--cc-muted); }
.chk-milestone-tip {
  background:rgba(37,99,235,.05); border:1px solid rgba(37,99,235,.1);
  border-radius:8px; padding:8px 12px; font-size:12px; color:var(--cc-muted);
  margin-bottom:10px;
}
.chk-milestone-tip b { color:var(--cc-blue); }
.chk-cal-dow {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:4px; margin-bottom:6px; text-align:center;
}
.chk-cal-dow span { font-size:11px; color:var(--cc-muted); font-weight:600; padding:4px 0; }
.chk-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.chk-day {
  aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--cc-border);
  background:var(--cc-bg,#f6f7fb); cursor:default;
  transition:all 0.15s; position:relative; overflow:hidden;
}
.chk-day.empty { border:none; background:transparent; }
.chk-day-num { font-size:14px; font-weight:700; color:var(--cc-text); line-height:1; }
.chk-day-lbl { font-size:10px; color:var(--cc-muted); margin-top:2px; }
.chk-day.checked  { background:#ecfdf5; border-color:#86efac; }
.chk-day.checked .chk-day-num { color:#059669; }
.chk-day.checked .chk-day-lbl { color:#059669; }
.chk-day.retro    { background:#eef2ff; border-color:#c4b5fd; }
.chk-day.retro .chk-day-num  { color:#6d28d9; }
.chk-day.retro .chk-day-lbl  { color:#6d28d9; }
.chk-day.missed   { background:#fef2f2; border-color:#fca5a5; }
.chk-day.missed .chk-day-num { color:#dc2626; }
.chk-day.missed .chk-day-lbl { color:#dc2626; }
.chk-day.today    { border-color:var(--cc-blue); box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.chk-day.today .chk-day-num  { color:var(--cc-blue); }
.chk-day.retro-available {
  cursor:pointer; border-style:dashed; border-color:#c4b5fd;
  background:#f5f3ff;
}
.chk-day.retro-available:hover { border-color:#8b5cf6; transform:translateY(-2px); box-shadow:0 6px 14px rgba(139,92,246,.2); }
.chk-day.retro-available::after {
  content:'补'; position:absolute; right:3px; top:3px;
  font-size:9px; padding:1px 4px; border-radius:4px;
  background:rgba(196,181,253,.4); color:#6d28d9; font-weight:700;
}

/* ── 排行榜 ── */
.chk-rank-card {
  background:var(--cc-white); border-radius:14px; padding:18px;
  border:1px solid var(--cc-border); box-shadow:var(--cc-shadow); margin-bottom:14px;
}
.chk-rank-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chk-rank-hd h3 { margin:0; font-size:15px; font-weight:700; color:var(--cc-text); display:flex; align-items:center; gap:6px; }
.chk-rank-my { font-size:12px; color:var(--cc-muted); }
.chk-rank-my b { color:var(--cc-blue); }
.chk-rank-list { display:flex; flex-direction:column; gap:8px; }
.chk-rank-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:10px;
  background:var(--cc-bg,#f6f7fb); border:1px solid transparent;
  transition:all 0.15s;
}
.chk-rank-item.me { background:#ecfdf5; border-color:#a7f3d0; }
.chk-rank-no {
  width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:#e2e8f0; color:var(--cc-muted);
  flex-shrink:0;
}
.chk-rank-no.top1 { background:#f59e0b; color:#fff; }
.chk-rank-no.top2 { background:#94a3b8; color:#fff; }
.chk-rank-no.top3 { background:#ea580c; color:#fff; }
.chk-rank-name { font-size:13px; font-weight:600; color:var(--cc-text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chk-rank-lv { font-size:11px; color:var(--cc-muted); display:flex; align-items:center; gap:3px; }
.chk-rank-pts { font-size:14px; font-weight:800; color:var(--cc-blue); flex-shrink:0; }

/* ── 积分说明 ── */
.chk-intro-card {
  background:var(--cc-white); border-radius:14px; padding:18px;
  border:1px solid var(--cc-border); box-shadow:var(--cc-shadow);
}
.chk-intro-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.chk-intro-hd i { font-size:20px; color:var(--cc-blue); }
.chk-intro-hd h3 { margin:0; font-size:15px; font-weight:700; color:var(--cc-text); }
.chk-intro-body { font-size:13px; color:var(--cc-muted); line-height:1.7; }
.chk-intro-body p { margin:0 0 8px; }
.chk-intro-body ul { margin:6px 0; padding-left:18px; }
.chk-intro-body li { margin:4px 0; color:var(--cc-text); }
.chk-intro-body strong { color:var(--cc-text); }

/* ── 弹窗 ── */
.chk-modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:9999; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.chk-modal-mask.show { display:flex; }
.chk-modal {
  width:92%; max-width:420px; background:var(--cc-white); border-radius:16px;
  padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.2);
  animation:chkFade .25s ease;
}
@keyframes chkFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.chk-modal-title { font-size:17px; font-weight:800; color:var(--cc-text); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.chk-modal-body { font-size:14px; color:var(--cc-muted); margin-bottom:14px; line-height:1.6; }
.chk-modal-input {
  width:100%; border:1px solid var(--cc-border); border-radius:10px;
  padding:11px 14px; font-size:14px; margin-bottom:14px;
  background:var(--cc-white); color:var(--cc-text);
  transition:border-color 0.2s;
}
.chk-modal-input:focus { outline:none; border-color:var(--cc-blue); }
.chk-modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.chk-modal-btn {
  padding:9px 18px; border-radius:10px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; transition:all 0.15s;
}
.chk-modal-btn.cancel { background:var(--cc-bg,#f6f7fb); color:var(--cc-text); border:1px solid var(--cc-border); }
.chk-modal-btn.primary { background:var(--cc-blue); color:#fff; }
.chk-modal-btn:hover { opacity:.9; transform:translateY(-1px); }
/* 答题选项 */
.chk-opt-label {
  display:flex; align-items:center; padding:9px 12px; margin:5px 0;
  border:1px solid var(--cc-border); border-radius:10px; cursor:pointer; transition:all 0.15s;
}
.chk-opt-label:hover { border-color:var(--cc-blue); background:rgba(37,99,235,.03); }
.chk-opt-label input { margin-right:8px; }

/* ── Toast ── */
.chk-toast {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
  background:rgba(17,24,39,.95); color:#fff; padding:13px 20px; border-radius:14px;
  z-index:10000; display:none; max-width:86%; text-align:center; font-size:15px;
  opacity:0; transition:all .22s; box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.chk-toast.show { display:block; opacity:1; transform:translate(-50%,-50%) scale(1); }
.chk-toast.success { background:#059669; }
.chk-toast.error   { background:#dc2626; }

/* ── 骨架 ── */
.chk-skeleton {
  border-radius:8px;
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%; animation:chkShimmer 1.2s infinite linear;
}
@keyframes chkShimmer { to { background-position:-200% 0; } }

/* ── 暗色模式 ── */
html[data-theme-mode="dark"] .chk-calendar-card,
html[data-theme-mode="dark"] .chk-rank-card,
html[data-theme-mode="dark"] .chk-intro-card,
html[data-theme-mode="dark"] .chk-feature-card,
html[data-theme-mode="dark"] .chk-info-card { background:#111827; border-color:#1e293b; }
html[data-theme-mode="dark"] .chk-modal { background:#111827; }
html[data-theme-mode="dark"] .chk-modal-input { background:#0b1220; border-color:#1e293b; }
html[data-theme-mode="dark"] .chk-day { background:#1e293b; border-color:#334155; }
html[data-theme-mode="dark"] .chk-day-num { color:#e5e7eb; }
html[data-theme-mode="dark"] .chk-rank-item { background:#1e293b; }
html[data-theme-mode="dark"] .chk-skeleton { background:linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%); background-size:200% 100%; }
html[data-theme-mode="dark"] .chk-milestone-tip { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.2); }

/* ── 响应式 ── */
@media (max-width:1024px) {
  .chk-two-col { grid-template-columns:1fr; }
  .chk-info-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .chk-feature-row { grid-template-columns:1fr; }
  .chk-info-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .chk-hero { padding:18px; }
  .chk-hero-title { font-size:18px; }
  .chk-stat-val { font-size:22px; }
  .chk-cal-grid { gap:4px; }
  .chk-day { border-radius:7px; }
  .chk-day-num { font-size:12px; }
  .chk-day-lbl { font-size:9px; }
}
@media (max-width:420px) {
  .chk-hero-body { flex-direction:column; }
  .chk-hero-right { width:100%; }
  .chk-btn { width:100%; justify-content:center; }
}