/* 签到（growth/checkin/web.js）：顶栏按钮和弹窗 */

.checkin-btn { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--lime-line); border-radius: 6px; background: var(--lime-soft); color: var(--t100); font: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.checkin-btn svg { color: var(--lime); }
.checkin-btn:hover { border-color: var(--lime); }
.checkin-btn.is-done { border-color: var(--line); background: none; color: var(--t300); } /* 今天签过了：和别的按钮一样安静 */
.checkin-btn.is-done svg { color: var(--t400); }
.checkin-btn.is-done:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--t100); }
.checkin-dot { position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: pulse 2.2s ease-out infinite; }
.checkin-streak { margin-left: 12px; font-size: 12px; color: var(--t400); font-variant-numeric: tabular-nums; }
.checkin-streak b { font-weight: 600; color: var(--lime); }
.checkin-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.checkin-cells li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 2px 8px; border: 1px solid var(--line-weak); border-radius: 8px; background: var(--card); color: var(--t400); font-size: 10px; text-align: center; white-space: nowrap; }
.checkin-cells b { font: 600 14px var(--font-mono); color: var(--t200); }
.checkin-cells i { min-height: 15px; font-style: normal; font-size: 10px; color: var(--lime); }
.checkin-cells li.is-past { border-color: var(--lime-line); background: var(--lime-soft); color: var(--t300); } /* 签过的 */
.checkin-cells li.is-past b { color: var(--lime); }
.checkin-cells li.is-today:not(.is-past) { border-color: var(--lime); color: var(--t100); box-shadow: 0 0 0 3px var(--lime-soft); } /* 今天还没领 */
.checkin-cells li.is-today:not(.is-past) b { color: var(--lime); }
.checkin-go { margin-top: 16px; }
.checkin-note { min-height: 1.6em; margin: 10px 0 0; font-size: 12px; text-align: center; color: var(--t200); }
.checkin-rules { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--t500); }
@media (max-width: 640px) {
  .checkin-btn span { display: none; }
  .checkin-btn { padding: 5px 7px; }
}
@media (max-width: 480px) {
  .checkin-btn { padding: 5px; }
}