/* ===== 作业打卡H5 · 个人中心系列子页共享样式（checkin-me/works/badges/scorelog/signcard/exchanges/settings） ===== */
/* 品牌：蓝#3b82f6/#2563eb 橙#f97316/#ef4444 绿#10b981 金#f59e0b */
:root {
  --blue:#3b82f6; --blue-d:#2563eb; --orange:#f97316; --orange-r:#ef4444;
  --green:#10b981; --gold:#f59e0b;
  --bg:#f0f4ff; --card:#fff; --text:#1e293b; --text-l:#94a3b8; --border:#e2e8f0;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); font-family:-apple-system,"Microsoft YaHei",sans-serif; color:var(--text); }

/* 打卡体系页隐藏站点5项底栏与悬浮CTA（由 _checkin-nav 3项底栏替代；本文件仅打卡子页加载，天然按页隔离） */
.f-bottom-nav { display:none !important; }
.f-float-cta { display:none !important; }

.ckh-app { max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg); padding-bottom:96px; }

/* ===== 顶栏 ===== */
.ckh-topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.ckh-topbar-title { font-size:17px; font-weight:900; }
.ckh-back { width:32px; font-size:26px; line-height:1; color:var(--text); cursor:pointer; }
.ckh-back-placeholder { width:32px; }
.ckh-body { padding:14px 16px 0; }
.ckh-loading { text-align:center; color:var(--text-l); font-size:13px; padding:40px 0; }
.ckh-empty { text-align:center; padding:30px 20px; background:#fff; border-radius:14px; color:var(--text-l); font-size:14px; line-height:1.8; }
.ckh-empty .ip { font-size:40px; margin-bottom:8px; }
.ckh-sec-title { font-size:15px; font-weight:900; margin:18px 0 10px; }

/* ===== 通用组件 ===== */
.ckh-toast { position:fixed; top:60px; left:50%; transform:translateX(-50%); background:rgba(30,41,59,.95); color:#fff; padding:10px 20px; border-radius:20px; font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .3s; z-index:500; max-width:80%; text-align:center; }
.ckh-toast.show { opacity:1; }
.ckh-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; }
.ckh-modal-box { background:#fff; border-radius:18px; padding:20px; width:100%; max-width:340px; max-height:80vh; overflow-y:auto; }
.ckh-modal-title { font-size:16px; font-weight:900; margin-bottom:8px; text-align:center; }
.ckh-modal-desc { font-size:13px; color:var(--text-l); margin-bottom:14px; line-height:1.6; text-align:center; }
.ckh-input { width:100%; border:1px solid var(--border); border-radius:10px; padding:12px; font-size:14px; margin-bottom:10px; }
.ckh-btn-primary { display:block; width:100%; padding:13px; border:none; border-radius:12px; font-size:14px; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-d)); cursor:pointer; }
.ckh-btn-ghost { display:block; width:100%; padding:12px; border:1px solid var(--blue); border-radius:12px; font-size:13px; font-weight:800; color:var(--blue); background:none; cursor:pointer; margin-top:12px; }
.ckh-child-item { display:flex; align-items:center; gap:12px; border:2px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px; cursor:pointer; }
.ckh-child-item.active { border-color:var(--blue); background:#eff6ff; }
.ckh-child-av { width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; }
.ckh-child-info b { font-size:14px; display:block; }
.ckh-child-info span { font-size:12px; color:var(--text-l); }
.ckh-badge-pop { text-align:center; padding:10px 0; }
.ckh-badge-pop-ico { font-size:52px; }
.ckh-badge-pop-ico.gray { filter:grayscale(1); opacity:.45; }
.ckh-badge-pop-title { font-size:14px; font-weight:900; color:var(--gold); margin-top:6px; }
.ckh-badge-pop-name { font-size:18px; font-weight:900; margin:8px 0 14px; }
.ckh-badge-earned-at { font-size:12px; color:var(--green); margin-bottom:14px; }
.ckh-badge-earned-at.gray { color:var(--text-l); }

/* ===== 个人中心：用户卡 + 8宫格 ===== */
.ckh-me-card { background:#fff; border-radius:18px; padding:22px 18px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.ckh-me-avwrap { position:relative; display:inline-block; }
.ckh-me-av { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:900; margin:0 auto; }
.ckh-frame-bronze { box-shadow:0 0 0 3px #b45309, 0 0 14px rgba(180,83,9,.55); }
.ckh-frame-silver { box-shadow:0 0 0 3px #94a3b8, 0 0 14px rgba(148,163,184,.6); }
.ckh-frame-gold { box-shadow:0 0 0 3px var(--gold), 0 0 16px rgba(245,158,11,.7); }
.ckh-frame-bp { box-shadow:0 0 0 3px #8b5cf6, 0 0 16px rgba(139,92,246,.7); }
.ckh-me-lv { position:absolute; right:-8px; bottom:-2px; background:var(--gold); color:#fff; font-size:10px; font-weight:900; padding:2px 7px; border-radius:10px; }
.ckh-me-name { font-size:18px; font-weight:900; margin-top:12px; }
.ckh-me-title { font-size:12px; color:var(--text-l); margin-top:4px; }
.ckh-me-score { margin-top:10px; }
.ckh-me-score b { font-size:26px; color:var(--blue-d); font-weight:900; }
.ckh-me-score span { font-size:12px; color:var(--text-l); margin-left:6px; }
.ckh-me-prog { margin-top:14px; background:var(--bg); border-radius:12px; padding:12px; text-align:left; }
.ckh-me-prog-label { font-size:12px; display:flex; justify-content:space-between; gap:8px; }
.ckh-me-prog-bar { height:8px; background:#e2e8f0; border-radius:4px; margin-top:8px; overflow:hidden; }
.ckh-me-prog-fill { height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-r)); border-radius:4px; }
.ckh-me-meta { display:flex; justify-content:center; gap:16px; margin-top:12px; font-size:12px; color:var(--text-l); }
.ckh-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.ckh-grid-item { text-align:center; background:#fff; border-radius:14px; padding:14px 4px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ckh-grid-item .ico { font-size:24px; }
.ckh-grid-item .nm { font-size:11px; font-weight:800; margin-top:6px; }

/* ===== 我的作品 ===== */
.ckh-filter { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ckh-filter .ckh-input { margin-bottom:0; flex:1; }
.ckh-filter-tip { font-size:12px; color:var(--text-l); white-space:nowrap; }
.ckh-work-card { display:flex; gap:12px; background:#fff; border-radius:14px; padding:12px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ckh-work-card.excellent { border:1.5px solid var(--gold); }
.ckh-work-thumb { position:relative; width:84px; height:84px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,var(--blue),var(--blue-d)); flex-shrink:0; }
.ckh-work-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ckh-work-nothumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; }
.ckh-work-badge { position:absolute; left:0; top:0; background:var(--gold); color:#fff; font-size:10px; font-weight:900; padding:2px 6px; border-radius:0 0 8px 0; }
.ckh-work-info { flex:1; min-width:0; }
.ckh-work-course { font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ckh-work-date { font-size:11px; color:var(--text-l); margin-top:4px; }
.ckh-work-stars { margin-top:6px; font-size:13px; color:var(--gold); letter-spacing:1px; }
.ckh-work-stars .ai { margin-right:8px; }
.ckh-work-stars .tc { color:#ec4899; }
.ckh-detail-img { width:100%; border-radius:10px; margin-bottom:8px; display:block; }
.ckh-detail-video { width:100%; border-radius:10px; max-height:200px; background:#000; margin-bottom:8px; }
.ckh-detail-content { font-size:13px; background:var(--bg); border-radius:10px; padding:10px; line-height:1.6; margin-bottom:10px; }
.ckh-detail-score { margin-bottom:10px; }
.ckh-detail-score .lbl { font-size:12px; color:var(--text-l); margin-right:8px; }
.ckh-detail-score .stars { color:var(--gold); font-size:15px; letter-spacing:2px; }
.ckh-detail-score .cmt { font-size:12px; color:var(--text); line-height:1.6; margin-top:6px; background:var(--bg); border-radius:8px; padding:8px; }
.ckh-detail-score.teacher .stars { color:#ec4899; }
.ckh-detail-excellent { font-size:13px; font-weight:900; color:var(--gold); margin-bottom:10px; }
.ckh-detail-liked { font-size:13px; font-weight:900; color:#ef4444; margin-bottom:10px; }

/* ===== 徽章墙 ===== */
.ckh-badge-summary { text-align:center; font-size:13px; color:var(--text-l); margin-bottom:14px; }
.ckh-badge-summary b { color:var(--gold); font-size:16px; }
.ckh-badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ckh-badge-cell { background:#fff; border-radius:14px; padding:16px 6px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ckh-badge-cell .ico { font-size:34px; }
.ckh-badge-cell .nm { font-size:11px; font-weight:800; margin-top:8px; line-height:1.3; }
.ckh-badge-cell.locked .ico { filter:grayscale(1); opacity:.35; }
.ckh-badge-cell.locked .nm { color:var(--text-l); }
.ckh-badge-cell.earned { border:1.5px solid #fde68a; background:linear-gradient(180deg,#fffbeb,#fff); }

/* ===== 积分明细 ===== */
.ckh-log-row { display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:12px; margin-bottom:8px; }
.ckh-log-ico { width:34px; height:34px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ckh-log-info { flex:1; min-width:0; }
.ckh-log-info .nm { font-size:13px; font-weight:800; }
.ckh-log-info .meta { font-size:11px; color:var(--text-l); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ckh-log-info .time { font-size:10px; color:var(--text-l); margin-top:2px; }
.ckh-log-score { font-size:16px; font-weight:900; flex-shrink:0; }
.ckh-log-score.in { color:var(--green); }
.ckh-log-score.out { color:var(--orange-r); }
.ckh-log-bal { font-size:10px; color:var(--text-l); flex-shrink:0; width:52px; text-align:right; }

/* ===== 补签卡 ===== */
.ckh-sign-card { background:#fff; border-radius:18px; padding:20px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.ckh-sign-count b { font-size:38px; color:var(--orange); font-weight:900; }
.ckh-sign-count span { font-size:12px; color:var(--text-l); margin-left:8px; }
.ckh-sign-meta { font-size:12px; color:var(--text-l); margin-top:6px; }
.ckh-sign-actions { display:flex; gap:10px; margin-top:16px; }
.ckh-sign-actions .ckh-btn-primary { flex:1.2; }
.ckh-sign-actions .ckh-btn-ghost { flex:1; margin-top:0; }
.ckh-sign-tip { font-size:11px; color:var(--text-l); margin-top:14px; line-height:1.6; }
.ckh-sign-records { margin-bottom:10px; }
.ckh-sign-row { display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
.ckh-sign-row .dt { flex:1; font-weight:800; }
.ckh-sign-row .st { color:var(--orange); font-size:12px; font-weight:800; }

/* ===== 兑换记录 ===== */
.ckh-ex-card { background:#fff; border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ckh-ex-head { display:flex; justify-content:space-between; align-items:center; }
.ckh-ex-head .nm { font-size:14px; font-weight:900; }
.ckh-ex-head .st { font-size:11px; font-weight:900; }
.ckh-ex-head .st.pending { color:var(--orange); }
.ckh-ex-head .st.done { color:var(--green); }
.ckh-ex-code { font-size:22px; font-weight:900; letter-spacing:2px; color:var(--blue-d); background:#eff6ff; border-radius:10px; text-align:center; padding:10px; margin:10px 0; }
.ckh-ex-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--text-l); margin-top:4px; }
.ckh-ex-tip { font-size:11px; color:var(--gold); margin-top:8px; }

/* ===== 设置 ===== */
.ckh-set-group { background:#fff; border-radius:14px; padding:4px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ckh-set-row { display:flex; align-items:center; gap:10px; padding:14px 0; cursor:pointer; border-bottom:1px solid var(--border); }
.ckh-set-row:last-child { border-bottom:none; }
.ckh-set-row .ico { font-size:18px; }
.ckh-set-row .nm { flex:1; font-size:14px; font-weight:800; }
.ckh-set-row .arr { color:var(--text-l); font-size:18px; }
.ckh-set-row.danger .nm { color:var(--orange-r); }
.ckh-set-tip { font-size:11px; color:var(--text-l); padding:0 0 12px 28px; margin-top:-8px; }
.ckh-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.ckh-switch input { opacity:0; width:0; height:0; }
.ckh-switch .sl { position:absolute; inset:0; background:#cbd5e1; border-radius:24px; transition:.2s; }
.ckh-switch .sl:before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.ckh-switch input:checked + .sl { background:var(--green); }
.ckh-switch input:checked + .sl:before { transform:translateX(20px); }
.ckh-set-ver { text-align:center; font-size:11px; color:var(--text-l); padding:16px 0 4px; }