/* หน้า "การเช็คอินชุมชน" (#/checkin) — prefix .ck- (ธีมสว่าง) */
.ck-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:4px 16px 28px}
.ck-hidden{display:none !important}
.ck-green{color:#18a35f}
.ck-bold{font-size:14.5px;font-weight:700}
.ck-bold-sm{font-size:12px;font-weight:700}
.ck-sub{font-size:11.5px;line-height:1.45;margin-top:2px}
.ck-h2{font-size:14px;font-weight:700}
.ck-h2-dim{font-size:12px;font-weight:600;padding:0 6px;margin-bottom:6px}
.ck-note{font-size:11px;padding:0 4px;margin-top:10px}
.ck-center{text-align:center}
.ck-card{padding:16px}
.ck-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ck-link{font-size:11.5px;font-weight:600;color:var(--accent);transition:transform .12s}
.ck-link:active{transform:scale(.95)}

/* ไอคอนไล่เฉด */
.ck-ico{width:44px;height:44px;border-radius:var(--r-sm);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.ck-ico-sm{width:38px;height:38px;border-radius:var(--r-sm);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:19px}
.ck-gr-fire{background:linear-gradient(135deg,#fcd34d,#f97316);box-shadow:0 8px 22px rgba(251,146,60,.45)}
.ck-gr-gold{background:linear-gradient(135deg,#fde68a,#facc15);box-shadow:0 8px 22px rgba(250,204,21,.4)}
.ck-gr-sky{background:linear-gradient(135deg,#7dd3fc,#2f8bff);box-shadow:0 6px 16px rgba(47,139,255,.3)}
.ck-gr-violet{background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 6px 16px rgba(99,102,241,.3)}
.ck-gr-orange{background:linear-gradient(135deg,#fcd34d,#fb923c);box-shadow:0 6px 16px rgba(251,146,60,.35)}

/* ปุ่มหลัก ๆ */
.ck-btn-main{position:relative;flex:none;padding:14px 24px;border-radius:var(--r-lg);
  font-size:15px;font-weight:800;color:#04351f;background:var(--grad-cta);
  box-shadow:0 0 18px rgba(87,230,168,.45);transition:transform .12s,opacity .2s}
.ck-btn-main:active{transform:scale(.95)}
.ck-btn-blue{flex:none;padding:10px 16px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
  color:#fff;background:linear-gradient(92deg,#38bdf8,var(--accent));
  box-shadow:0 8px 22px rgba(47,139,255,.35);transition:transform .12s}
.ck-btn-blue:active{transform:scale(.95)}
.ck-btn-join{flex:none;padding:7px 14px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
  color:#0b7a45;border:1px solid rgba(61,220,132,.6);background:var(--card-glass);
  transition:transform .12s}
.ck-btn-join:active{transform:scale(.95)}
.ck-btn-join.ck-joined{color:#fff;background:var(--grad-cta);border-color:transparent;
  box-shadow:0 0 14px rgba(87,230,168,.4)}
.ck-btn-off{opacity:.6;pointer-events:none}

/* การ์ดกิจกรรมหลัก */
.ck-challenge{display:flex;align-items:flex-start;gap:12px}
.ck-streak{text-align:right;flex:none}
.ck-streak-num{font-size:26px;font-weight:800;line-height:1;margin-top:3px;
  background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent}
.ck-streak-num small{font-size:13px;font-weight:700}
.ck-progress{margin-top:14px}
.ck-progress-head{display:flex;align-items:center;justify-content:space-between;
  font-size:11px;margin-bottom:6px}
.ck-bar{height:10px;border-radius:var(--r-pill);background:var(--card-glass);
  border:1px solid var(--card-brd);overflow:hidden}
.ck-bar-fill{height:100%;border-radius:var(--r-pill);background:var(--grad-cta);
  box-shadow:0 0 14px rgba(87,230,168,.5);transition:width .7s cubic-bezier(.4,0,.2,1)}

/* การ์ดเช็คอินวันนี้ */
.ck-checkin{position:relative;overflow:hidden}
.ck-checkin-row{display:flex;align-items:center;gap:12px}
.ck-done-title{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:#18a35f}
.ck-done-title svg{width:18px;height:18px;flex:none}
.ck-plus{font-size:12px;font-weight:700;color:#fff;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--grad-cta);box-shadow:0 0 14px rgba(87,230,168,.45)}
.ck-remind{display:flex;align-items:center;gap:8px;margin-top:8px}
.ck-toggle{position:relative;width:42px;height:24px;border-radius:var(--r-pill);flex:none;
  background:rgba(148,163,184,.5);transition:background .25s,box-shadow .25s}
.ck-toggle .ck-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.ck-toggle.on{background:var(--grad-cta);box-shadow:0 0 12px rgba(87,230,168,.5)}
.ck-toggle.on .ck-knob{transform:translateX(18px)}

/* แอนิเมชันฉลองเช็คอิน */
.ck-pop{animation:ckPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ckPop{0%{transform:scale(1)}35%{transform:scale(.965)}70%{transform:scale(1.02)}100%{transform:scale(1)}}
.ck-big-check{position:absolute;inset:0;z-index:20;display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.ck-big-check span{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--grad-cta);box-shadow:0 0 40px rgba(74,222,128,.75)}
.ck-big-check svg{width:44px;height:44px;color:#fff}
.ck-burst{animation:ckBurst 1.15s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ckBurst{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.15)}
  55%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.ck-confetti{position:absolute;left:50%;top:50%;width:8px;height:12px;border-radius:2px;
  pointer-events:none;z-index:30;animation:ckConfetti .95s cubic-bezier(.15,.65,.35,1) forwards}
@keyframes ckConfetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.5)}}

/* อันดับ: Top 3 podium */
.ck-podium{display:flex;align-items:flex-end;justify-content:center;gap:22px;padding-bottom:12px}
.ck-pod{display:flex;flex-direction:column;align-items:center;gap:2px}
.ck-pod-1{transform:translateY(-8px)}
.ck-crown{font-size:16px;line-height:1;margin-bottom:2px}
.ck-pod-av{position:relative;display:inline-block}
.ck-pod-av i{position:absolute;right:-6px;bottom:-6px;font-size:17px;font-style:normal;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.ck-pod-av-1 .avatar{border-color:#fbbf24;box-shadow:0 0 20px rgba(251,191,36,.55)}
.ck-pod-name{font-size:11.5px;font-weight:700;margin-top:4px}

/* อันดับ: รายการแถว */
.ck-rank-list,.ck-list{border-radius:var(--r-md);background:var(--card-glass);
  border:1px solid var(--card-brd);overflow:hidden}
.ck-rank-row{display:flex;align-items:center;gap:12px;padding:10px 14px;min-width:0}
.ck-rank-row + .ck-rank-row,.ck-rule + .ck-rule,.ck-reward + .ck-reward{
  border-top:1px solid var(--card-brd)}
.ck-rank-no{width:22px;text-align:center;font-size:12px;font-weight:700;color:var(--lt-ink-dim);flex:none}
.ck-rank-medal{font-size:15px}
.ck-rank-name{flex:1;font-size:12.5px;font-weight:500;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-rank-days{font-size:11.5px;flex:none}
.ck-rank-me{margin-top:8px;border-radius:var(--r-md);background:rgba(87,230,168,.14);
  border:1px solid rgba(61,220,132,.55);box-shadow:0 0 16px rgba(87,230,168,.3)}
.ck-me-tag{font-size:10.5px;font-weight:600}

/* ปฏิทิน */
.ck-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:10.5px;font-weight:600;color:var(--lt-ink-dim);margin-bottom:6px}
.ck-cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.ck-cal-day{position:relative;height:36px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border-radius:var(--r-sm);font-size:12px;font-weight:500;color:inherit;
  transition:transform .12s,background .15s}
.ck-cal-day:active{transform:scale(.9)}
.ck-cal-today{border:2px solid #34d399;background:rgba(87,230,168,.14);
  box-shadow:0 0 14px rgba(87,230,168,.4);font-weight:800;color:#18a35f}
.ck-cal-future{color:var(--lt-ink-dim);opacity:.75}
.ck-cal-dot{position:absolute;bottom:4px;width:6px;height:6px;border-radius:50%;
  background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.65)}
.ck-dot-in{animation:ckDotIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ckDotIn{from{transform:scale(0)}60%{transform:scale(1.5)}to{transform:scale(1)}}
.ck-cal-sum{font-size:11.5px;text-align:center;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--card-brd)}

/* การ์ดคะแนน */
.ck-points-row{display:flex;align-items:center;gap:12px}
.ck-points-num{font-size:26px;font-weight:800;line-height:1.2}

/* กิจกรรมเพิ่มเติม */
.ck-acts{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none}
.ck-acts::-webkit-scrollbar{display:none}
.ck-act{width:168px;flex:none;padding:14px}
.ck-act-name{font-size:13px;font-weight:700;margin-top:10px;line-height:1.3}
.ck-act .ck-btn-join{display:block;width:100%;margin-top:10px;padding:8px}

/* bottom-sheet */
.ck-sheet-root{position:fixed;inset:0;z-index:120}
.ck-sheet-backdrop{position:absolute;inset:0;background:rgba(7,20,41,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease}
.ck-sheet-backdrop.ck-show{opacity:1}
.ck-sheet-holder{position:absolute;inset:0;max-width:480px;margin:0 auto;
  display:flex;align-items:flex-end;pointer-events:none}
.ck-sheet-panel{pointer-events:auto;width:100%;max-height:84%;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .38s cubic-bezier(.32,.72,.22,1);
  background:rgba(255,255,255,.86);color:var(--lt-ink);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border-radius:26px 26px 0 0;border:1px solid var(--card-brd);border-bottom:none;
  box-shadow:0 -18px 60px rgba(9,30,60,.35)}
.ck-sheet-panel.ck-show{transform:translateY(0)}
.ck-sheet-grip{display:flex;justify-content:center;padding:12px 0 4px;flex:none}
.ck-sheet-grip span{width:40px;height:5px;border-radius:var(--r-pill);background:rgba(125,146,173,.35)}
.ck-sheet-head{display:flex;align-items:center;gap:8px;padding:8px 20px;flex:none}
.ck-sheet-title{flex:1;font-size:15px;font-weight:700;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-sheet-x{width:32px;height:32px;border-radius:50%;flex:none;background:var(--card-glass);
  display:flex;align-items:center;justify-content:center;transition:transform .12s;
  box-shadow:0 2px 8px rgba(60,110,180,.15)}
.ck-sheet-x:active{transform:scale(.92)}
.ck-sheet-x svg{width:16px;height:16px}
.ck-sheet-content{overflow-y:auto;padding:4px 20px calc(24px + env(safe-area-inset-bottom));
  scrollbar-width:none;-ms-overflow-style:none}
.ck-sheet-content::-webkit-scrollbar{display:none}
.ck-sheet-body{display:flex;flex-direction:column;gap:10px}

/* เนื้อหาใน sheet */
.ck-rule{display:flex;align-items:flex-start;gap:12px;padding:12px 16px}
.ck-rule-no{width:24px;height:24px;border-radius:50%;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#fff;background:var(--grad-cta)}
.ck-rule p{font-size:12.5px;line-height:1.6}
.ck-day-box{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);
  background:var(--card-glass);border:1px solid var(--card-brd)}
.ck-day-ok{background:rgba(87,230,168,.12);border-color:rgba(61,220,132,.55)}
.ck-day-ico{width:40px;height:40px;border-radius:50%;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cbd5e1,#94a3b8)}
.ck-day-ico svg{width:20px;height:20px}
.ck-day-ico-ok{background:var(--grad-cta);box-shadow:0 0 16px rgba(87,230,168,.45)}
.ck-balance{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r-md);
  background:var(--card-glass);border:1px solid var(--card-brd);font-size:12.5px}
.ck-balance-coin{font-size:18px}
.ck-balance-num{font-size:16px;font-weight:800}
.ck-reward{display:flex;align-items:center;gap:12px;padding:12px 16px}

@media (max-width:380px){
  .ck-podium{gap:14px}
  .ck-btn-main{padding:12px 16px;font-size:13.5px}
}

/* skeleton ระหว่างโหลดข้อมูลจาก API */
.ck-skel{height:120px;position:relative;overflow:hidden}
.ck-skel-sm{height:78px}
.ck-skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);animation:ck-skel-shine 1.2s ease-in-out infinite}
@keyframes ck-skel-shine{to{transform:translateX(100%)}}