.checkin-page { --checkin-paper:#fffdf9; --checkin-ink:#55464a; --checkin-muted:#89777b; --checkin-pink:#df6f93; --checkin-pink-soft:#fce3e8; --checkin-line:#eaded7; --checkin-green:#7f9f83; min-width:0; min-height:100vh; margin:0; overflow-x:hidden; color:var(--checkin-ink); font-family:system-ui,sans-serif; }
.checkin-page * { box-sizing:border-box; }
.checkin-page .checkin-shell { width:min(760px,calc(100% - 24px)); margin:0 auto; padding:12px 0 112px; }
.checkin-page .checkin-topbar { display:flex; min-height:52px; align-items:center; justify-content:space-between; padding:0 4px; }
.checkin-page .checkin-nav-link { display:inline-flex; min-height:36px; align-items:center; padding:0 14px; border:1px solid var(--checkin-line); border-radius:999px; color:var(--checkin-ink); background:rgba(255,253,249,.88); font-size:12px; font-weight:750; text-decoration:none; }
.checkin-page .checkin-hero { position:relative; display:flex; min-height:214px; align-items:center; overflow:hidden; margin:16px 0 12px; padding:24px 22px; border:1px solid rgba(223,111,147,.17); border-radius:26px; background:linear-gradient(90deg,rgba(255,253,249,.9),rgba(255,253,249,.58)),var(--checkin-hero-background) center 86%/cover; box-shadow:0 14px 36px rgba(94,68,61,.09); }
.checkin-page .checkin-hero-copy { position:relative; z-index:1; min-width:0; }
.checkin-page .checkin-hero-copy p,.checkin-page .checkin-section-heading span,.checkin-page .checkin-community span,.checkin-page .checkin-dialog-head span { margin:0; color:var(--checkin-pink); font-size:9px; font-weight:900; letter-spacing:.15em; }
.checkin-page .checkin-hero-copy h1 { margin:5px 0 8px; color:#684e54; font-size:34px; line-height:1.12; }
.checkin-page .checkin-hero-copy>span { color:var(--checkin-muted); font-size:13px; line-height:1.7; }
.checkin-page .checkin-community,.checkin-page .checkin-today,.checkin-page .checkin-calendar { margin-top:12px; padding:19px; border:1px solid var(--checkin-line); border-radius:22px; background:rgba(255,253,249,.94); box-shadow:0 10px 28px rgba(94,68,61,.07); }
.checkin-page .checkin-community { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:stretch; gap:12px; }
.checkin-page .checkin-community h2,.checkin-page .checkin-section-heading h2,.checkin-page .checkin-dialog-card h2 { margin:4px 0 0; font-size:19px; }
.checkin-page .checkin-community p { max-width:430px; margin:7px 0 0; color:var(--checkin-muted); font-size:12px; line-height:1.6; }
.checkin-page .checkin-follow-list { display:grid; align-content:stretch; gap:8px; }
.checkin-page .checkin-follow-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:9px; align-items:center; min-width:0; padding:8px; border:1px solid rgba(223,111,147,.17); border-radius:15px; color:inherit; background:#fff; text-decoration:none; }
.checkin-page .checkin-follow-card img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.checkin-page .checkin-follow-card span { min-width:0; }
.checkin-page .checkin-follow-card strong,.checkin-page .checkin-follow-card small { display:block; overflow:visible; overflow-wrap:anywhere; white-space:normal; }
.checkin-page .checkin-follow-card strong { color:var(--checkin-pink); font-size:11px; line-height:1.35; }.checkin-page .checkin-follow-card small { color:var(--checkin-muted); font-size:10px; line-height:1.35; }
.checkin-page .checkin-follow-card b { padding:7px 9px; border:0; border-radius:999px; color:#fff; background:var(--checkin-pink); font:750 10px system-ui,sans-serif; white-space:nowrap; }
.checkin-page .checkin-sogou { display:flex; min-width:0; flex-direction:column; align-items:flex-start; padding:12px; border:1px solid rgba(223,111,147,.22); border-radius:16px; background:linear-gradient(135deg,#fff,rgba(252,227,232,.76)); }
.checkin-page .checkin-sogou-icon { display:grid; width:58px; height:58px; place-items:center; margin-bottom:9px; overflow:hidden; border-radius:18px; background:rgba(255,242,246,.88); box-shadow:0 8px 16px rgba(217,110,143,.12); }
.checkin-page .checkin-sogou-icon img { width:56px; height:56px; object-fit:contain; }
.checkin-page .checkin-sogou h2 { min-width:0; margin:0 0 4px; font-size:15px; line-height:1.25; }.checkin-page .checkin-sogou p { margin:0 0 9px; }
.checkin-page .checkin-sogou-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.checkin-page .checkin-sogou-actions .checkin-task-button { min-height:32px; padding:8px 10px; font-size:12px; }
.checkin-page .checkin-task-icon { background:#fce3e8; }
.checkin-page .checkin-task-icon img { display:block; background:transparent; }
.checkin-page .checkin-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.checkin-page .checkin-section-heading>strong { color:var(--checkin-pink); font-size:14px; }
.checkin-page .checkin-progress { height:7px; overflow:hidden; margin:14px 0 8px; border-radius:999px; background:#f1e9e5; }
.checkin-page .checkin-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e79d9d,var(--checkin-pink)); transition:width .2s ease; }
.checkin-page .checkin-status { min-height:18px; margin:0 0 8px; color:var(--checkin-muted); font-size:11px; }
.checkin-page .checkin-status.checkin-status-error { color:#b3485e; }
.checkin-page .checkin-task-list { display:grid; gap:12px; }
.checkin-page .checkin-task { display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; padding:13px; border:1px solid var(--checkin-line); border-radius:20px; background:rgba(255,255,255,.78); box-shadow:0 10px 26px rgba(110,80,84,.08); }
.checkin-page .checkin-task-icon { display:grid; width:58px; height:58px; place-items:center; overflow:hidden; border-radius:17px; background:#fff2f6; }
.checkin-page .checkin-task-icon img { width:54px; height:54px; object-fit:contain; }
.checkin-page .checkin-task-body { min-width:0; }
.checkin-page .checkin-task-body header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.checkin-page .checkin-task-body h3 { margin:2px 0 5px; font-size:18px; line-height:1.25; }
.checkin-page .checkin-task-body p { margin:0 0 11px; color:var(--checkin-muted); font-size:13px; font-weight:650; line-height:1.45; }
.checkin-page .checkin-task-state { flex:none; padding:6px 10px; border-radius:999px; color:var(--checkin-muted); background:#f3ece7; font-size:12px; font-weight:900; white-space:nowrap; }
.checkin-page .checkin-task-actions { display:flex; flex-wrap:wrap; gap:8px; }
.checkin-page .checkin-task-button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:9px 13px; border:0; border-radius:12px; color:inherit; font:900 13px system-ui,sans-serif; text-decoration:none; cursor:pointer; box-shadow:0 8px 16px rgba(110,80,84,.08); }
.checkin-page .checkin-task-primary { color:#fff; background:var(--checkin-pink); }
.checkin-page .checkin-task-secondary { color:var(--checkin-ink); background:#f5ece7; }
.checkin-page .checkin-task-finish { margin-left:auto; border:1px solid var(--checkin-line); color:var(--checkin-pink); background:rgba(255,255,255,.88); }
.checkin-page .checkin-task.checkin-task-done { border-color:rgba(127,159,131,.34); background:#fbfdf9; }
.checkin-page .checkin-task.checkin-task-done .checkin-task-state { color:#56866c; background:rgba(137,189,159,.22); }
.checkin-page .checkin-month-controls { display:flex; align-items:center; gap:6px; }
.checkin-page .checkin-month-controls button { display:grid; width:29px; height:29px; place-items:center; border:1px solid var(--checkin-line); border-radius:50%; color:inherit; background:#fff; font:18px/1 system-ui,sans-serif; cursor:pointer; }
.checkin-page .checkin-month-controls b { min-width:68px; font-size:12px; text-align:center; }
.checkin-page .checkin-weekdays,.checkin-page .checkin-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.checkin-page .checkin-weekdays { margin:16px 0 7px; color:var(--checkin-muted); font-size:9px; text-align:center; }
.checkin-page .checkin-calendar-day { display:grid; aspect-ratio:1; min-width:0; place-items:center; border:1px solid transparent; border-radius:11px; color:#75656a; background:#f7f1ed; font-size:11px; }
.checkin-page .checkin-calendar-day.checkin-calendar-empty { background:transparent; }
.checkin-page .checkin-calendar-day.checkin-calendar-empty::before { content:"✿"; color:rgba(223,111,147,.34); font-size:15px; line-height:1; }
.checkin-page .checkin-calendar-day.checkin-calendar-complete { border-color:rgba(127,159,131,.24); color:#fff; background:var(--checkin-green); font-weight:800; }
.checkin-page .checkin-calendar-day.checkin-calendar-partial { border-color:#e8bbc6; color:#a45470; background:var(--checkin-pink-soft); font-weight:800; }
.checkin-page .checkin-calendar-day.checkin-calendar-mascot { background-image:linear-gradient(rgba(255,253,249,.52),rgba(255,253,249,.52)),var(--checkin-day-mascot); background-position:center,center; background-repeat:no-repeat,no-repeat; background-size:100% 100%,86% 86%; text-shadow:0 1px 2px rgba(255,255,255,.8); }
.checkin-page .checkin-calendar-day.checkin-calendar-complete.checkin-calendar-mascot { color:#476d4f; }
.checkin-page .checkin-calendar-day.checkin-calendar-today { outline:2px solid rgba(223,111,147,.35); outline-offset:1px; }
.checkin-page .checkin-calendar-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; color:var(--checkin-muted); font-size:9px; }
.checkin-page .checkin-calendar-legend span { display:flex; align-items:center; gap:5px; }
.checkin-page .checkin-calendar-legend i { width:9px; height:9px; border-radius:3px; background:#f1e9e5; }
.checkin-page .checkin-calendar-legend .checkin-legend-complete { background:var(--checkin-green); }
.checkin-page .checkin-calendar-legend .checkin-legend-partial { background:var(--checkin-pink-soft); }
.checkin-page .checkin-dialog { width:min(420px,calc(100% - 28px)); max-height:calc(100dvh - 24px); margin:auto; padding:0; overflow:hidden; border:0; border-radius:22px; color:var(--checkin-ink); background:var(--checkin-paper); box-shadow:0 28px 80px rgba(73,48,43,.24); }
.checkin-page .checkin-dialog::backdrop { background:rgba(51,39,42,.4); backdrop-filter:blur(5px); }
.checkin-page .checkin-dialog-card { display:flex; max-height:calc(100dvh - 24px); flex-direction:column; overflow:hidden; padding:18px 20px 20px; }
.checkin-page .checkin-dialog-head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 14px; border-bottom:1px solid var(--checkin-line); }
.checkin-page .checkin-dialog-head h2 { margin:4px 0 0; font-size:19px; }
.checkin-page .checkin-dialog-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 1px 4px; }
.checkin-page .checkin-dialog-card p { margin:0; color:var(--checkin-muted); font-size:13px; line-height:1.75; white-space:pre-line; }
.checkin-page .checkin-dialog-card img { display:block; width:100%; height:auto; max-height:none; margin-top:15px; border-radius:15px; object-fit:initial; }
.checkin-page .checkin-guide-links { display:grid; gap:8px; margin-top:13px; }.checkin-page .checkin-guide-links:empty { display:none; }.checkin-page .checkin-guide-links a { display:grid; gap:3px; padding:11px 12px; border:1px solid var(--checkin-line); border-radius:12px; color:inherit; background:#fff; font-size:12px; font-weight:750; text-decoration:none; }.checkin-page .checkin-guide-links a span { color:var(--checkin-muted); font-size:11px; font-weight:500; }
.checkin-page .checkin-dialog-close { flex:none; width:36px; height:36px; border:0; border-radius:50%; color:inherit; background:var(--checkin-pink-soft); font:20px/1 system-ui,sans-serif; cursor:pointer; }
.checkin-page .checkin-complete { position:fixed; z-index:90; left:50%; bottom:92px; display:flex; width:min(330px,calc(100% - 30px)); align-items:center; gap:10px; padding:10px 14px; border:1px solid #f1d5dc; border-radius:18px; background:#fffdf9; box-shadow:0 18px 48px rgba(73,48,43,.2); transform:translateX(-50%); }
.checkin-page .checkin-complete[hidden] { display:none; }
.checkin-page .checkin-complete img { width:58px; height:58px; object-fit:contain; }
.checkin-page .checkin-complete strong { font-size:13px; }
@media (max-width:600px) {
  .checkin-page .checkin-shell { width:min(100% - 20px,760px); padding-top:6px; }
  .checkin-page .checkin-hero { min-height:168px; margin-top:10px; padding:20px 16px; border-radius:22px; }
  .checkin-page .checkin-hero-copy h1 { font-size:29px; }
  .checkin-page .checkin-community { display:grid; gap:12px; padding:16px; }
  .checkin-page .checkin-today,.checkin-page .checkin-calendar { padding:16px 12px; border-radius:19px; }
  .checkin-page .checkin-task { grid-template-columns:52px minmax(0,1fr); gap:10px; padding:12px 10px; }
  .checkin-page .checkin-task-icon { width:52px; height:52px; }.checkin-page .checkin-task-icon img { width:49px; height:49px; }
  .checkin-page .checkin-task-body h3 { font-size:17px; }.checkin-page .checkin-task-body p { font-size:12px; }
  .checkin-page .checkin-task-button { min-height:34px; padding:8px 11px; font-size:12px; }
  .checkin-page .checkin-dialog-card { padding:15px 16px 16px; }
  .checkin-page .checkin-calendar-day { border-radius:9px; }
}
@media (max-width:360px) {
  .checkin-page .checkin-community { grid-template-columns:minmax(0,1fr); }
  .checkin-page .checkin-hero-copy h1 { font-size:26px; }
}