/* ============ 客户 H5 移动端样式（无外部依赖） ============ */
:root {
  --teal-600: var(--secondary); --teal-700: var(--secondary); --teal-100: var(--accent-light); --teal-50: var(--bg-card);
  --slate-900: var(--primary); --slate-800: var(--text-dark); --slate-700: var(--text-gray); --slate-600: var(--text-gray);
  --slate-400: var(--text-muted); --slate-200: var(--border-light); --slate-100: var(--bg-body); --slate-50: var(--bg-card);
  --danger: #dc2626; --amber: #d97706; --ok: #16a34a; --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC","Microsoft YaHei",sans-serif; background: var(--slate-100);
  color: var(--slate-700); font-size: calc(14px * var(--fs-scale)); max-width: 480px; margin: 0 auto;
  min-height: 100vh; position: relative; padding-bottom: 64px;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: calc(14px * var(--fs-scale)); width: 100%; border: 1px solid var(--slate-200); border-radius: 10px; padding: 10px 12px; outline: none; background: #fff; }
input:focus { border-color: var(--teal-600); }

/* 顶部栏 */
/* 基底已自包含为浅薄荷（不依赖 design.css 覆盖层）：即便 design.css 未加载/被缓存，
   也不会再出现旧「深绿渐变」顶栏。design.css 存在时会在其基础上叠加毛玻璃。 */
.c-topbar {
  background: #ffffff; color: #18231f; border-bottom: 1px solid #ecf2ef;
  padding: 14px 18px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20;
}
.c-topbar .title { font-size: calc(16px * var(--fs-scale)); font-weight: 600; flex: 1; }
.c-topbar .user { font-size: calc(13px * var(--fs-scale)); color: #8a978f; }
.c-topbar .btn-out {
  background: transparent; border: 1px solid #dde7e2; color: #8a978f; border-radius: 8px; padding: 5px 10px; font-size: calc(13px * var(--fs-scale));
}

/* 内容区 */
.c-content { padding: 16px; }
.card { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(15,23,42,.08); padding: 16px; margin-bottom: 14px; }
.card .h { font-size: calc(14px * var(--fs-scale)); font-weight: 600; color: var(--slate-800); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card .h .spacer { flex: 1; }

/* 登录页 */
.c-login { min-height: 100vh; padding-bottom: 0; background: linear-gradient(165deg, #eafaf3 0%, #f5fbf9 55%, #e6f7f0 100%); display: flex; flex-direction: column; justify-content: center; }
.c-login-box { background: #fff; border-radius: 18px; margin: 24px; padding: 30px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.c-login-box .logo { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; background: linear-gradient(135deg,var(--accent),var(--secondary)); color: #fff; font-size: calc(24px * var(--fs-scale)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.c-login-box h2 { text-align: center; font-size: calc(19px * var(--fs-scale)); color: var(--slate-800); }
.c-login-box .sub { text-align: center; font-size: calc(13px * var(--fs-scale)); color: var(--slate-400); margin: 5px 0 22px; }
.c-login-box .field { margin-bottom: 14px; }
.c-login-box .field label { display: block; font-size: calc(14px * var(--fs-scale)); color: var(--slate-600); margin-bottom: 5px; }
.c-login-box button.btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: var(--teal-600); color: #fff; font-size: calc(15px * var(--fs-scale)); font-weight: 600; }
.c-login-box .err { background: var(--st-red-bg); color: var(--st-red-fg); border: 1px solid var(--st-red-border); border-radius: 8px; padding: 9px 12px; font-size: calc(14px * var(--fs-scale)); margin-bottom: 12px; }
.c-login-box .tip { text-align: center; font-size: calc(12px * var(--fs-scale)); color: var(--slate-400); margin-top: 14px; }

/* 统计/指标 */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.metric .l { font-size: calc(13px * var(--fs-scale)); color: var(--slate-400); }
.metric .v { font-size: calc(20px * var(--fs-scale)); font-weight: 700; color: var(--slate-800); margin-top: 4px; }

/* 打卡表单 */
.checkin-form label { display: block; font-size: calc(14px * var(--fs-scale)); color: var(--slate-600); margin: 10px 0 5px; }
.checkin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkin-form button.submit { width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: 10px; background: var(--teal-600); color: #fff; font-size: calc(15px * var(--fs-scale)); font-weight: 600; }
.checkin-form button.submit:disabled { opacity: .5; }
.tip-line { font-size: calc(12px * var(--fs-scale)); color: var(--slate-400); margin-top: 4px; }

/* 列表 */
.list-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--slate-100); }
.list-item:last-child { border-bottom: none; }
.list-item .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); display: flex; align-items: center; justify-content: center; font-size: calc(17px * var(--fs-scale)); flex-shrink: 0; }
.list-item .bd { flex: 1; min-width: 0; }
.list-item .bd .t { font-size: calc(14px * var(--fs-scale)); font-weight: 600; color: var(--slate-800); }
.list-item .bd .d { font-size: calc(13px * var(--fs-scale)); color: var(--slate-400); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: calc(12px * var(--fs-scale)); font-weight: 500; }
.badge-teal { background: var(--teal-100); color: var(--teal-700); }
.badge-green { background: var(--accent-light); color: var(--ok); }
.badge-amber { background: var(--st-amber-bg); color: var(--st-amber-fg); }
.badge-slate { background: var(--slate-100); color: var(--slate-600); }

/* 空状态 */
.empty { text-align: center; color: var(--slate-400); padding: 34px 0; font-size: calc(14px * var(--fs-scale)); }
.loading { text-align: center; color: var(--slate-400); padding: 30px 0; font-size: calc(14px * var(--fs-scale)); }
.loading::before { content:""; display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px; border:2px solid var(--slate-200); border-top-color: var(--teal-600); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert { border-radius: 10px; padding: 10px 14px; font-size: calc(14px * var(--fs-scale)); margin-bottom: 12px; }
.alert-ok { background: var(--bg-card); color: var(--ok); border: 1px solid var(--accent-light); }

/* 底部 Tab */
.c-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--slate-200); display: flex; z-index: 30;
}
.c-tabbar a { flex: 1; text-align: center; padding: 9px 0 7px; font-size: calc(12px * var(--fs-scale)); color: var(--slate-400); }
.c-tabbar a .ic { display: block; font-size: calc(20px * var(--fs-scale)); margin-bottom: 2px; }
.c-tabbar a.on { color: var(--accent); font-weight: 600; }

/* ============================================================
   清爽卡片风格组件（阶段 0 新增：圆角卡片 / 瓷片区 / FAB / section 标题）
   仅新增语义类，不改动旧组件，零回归风险。
   ============================================================ */

/* 薄荷渐变 Hero 卡 */
.hero-mint {
  background: linear-gradient(135deg, #15B89B, #1FC8A6);
  color: #fff; border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(15, 61, 54, 0.18);
}
.hero-mint .h1 { font-size: calc(18px * var(--fs-scale)); font-weight: 700; }
.hero-mint .sub { font-size: calc(14px * var(--fs-scale)); color: rgba(255, 255, 255, 0.82); margin-top: 6px; line-height: 1.5; }
.hero-mint .quick {
  display: inline-block; margin: 12px 8px 0 0; background: rgba(255, 255, 255, 0.16);
  color: #fff; border-radius: 10px; padding: 8px 13px; font-size: calc(14px * var(--fs-scale));
}

/* 区块标题 */
.section-title { display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px; font-size: calc(15px * var(--fs-scale)); font-weight: 700; color: var(--text-dark); }
.section-title .bar { width: 4px; height: 16px; border-radius: 3px; background: var(--accent); }
.section-title .more { margin-left: auto; font-size: calc(13px * var(--fs-scale)); font-weight: 500; color: var(--accent); }

/* 瓷片区（金刚区 / 快捷入口） */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.tile { background: #fff; border-radius: 14px; padding: 14px 6px; text-align: center; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.tile .ic {
  width: 42px; height: 42px; border-radius: 13px; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center;
  font-size: calc(21px * var(--fs-scale)); background: linear-gradient(135deg, var(--accent), var(--secondary)); color: #fff;
}
.tile .t { font-size: calc(13px * var(--fs-scale)); color: var(--text-gray); }
.tile:active { transform: scale(0.96); }

/* 信息卡（首页指标） */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: #fff; border-radius: 14px; padding: 14px 8px; text-align: center; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.stat .v { font-size: calc(21px * var(--fs-scale)); font-weight: 800; color: var(--accent); }
.stat .l { font-size: calc(13px * var(--fs-scale)); color: var(--text-muted); margin-top: 4px; }

/* 横滑列表卡片（feed / 商店） */
.feed-card { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); align-items: center; }
.feed-card:active { transform: scale(0.99); }
.feed-card .cover { width: 72px; height: 72px; border-radius: 12px; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg, var(--accent-light), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: calc(30px * var(--fs-scale)); color: #fff; }
.feed-card .bd { flex: 1; min-width: 0; }
.feed-card .ti { font-size: calc(14px * var(--fs-scale)); font-weight: 600; color: var(--text-dark); }
.feed-card .de { font-size: calc(13px * var(--fs-scale)); color: var(--text-muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.feed-card .meta { font-size: calc(12px * var(--fs-scale)); color: var(--text-muted); margin-top: 6px; }
.feed-card .go { flex-shrink: 0; align-self: center; color: var(--accent); font-size: calc(20px * var(--fs-scale)); }

/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: calc(12px * var(--fs-scale)); font-weight: 500; background: var(--accent-light); color: #0F3D36; margin-right: 6px; }
.tag.green { background: var(--st-green-bg); color: var(--st-green-fg); }
.tag.amber { background: var(--st-amber-bg); color: var(--st-amber-fg); }
.tag.blue { background: var(--st-blue-bg); color: var(--st-blue-fg); }

/* FAB 悬浮按钮（记录 / 打卡） */
.fab {
  position: fixed; right: 18px; bottom: 78px; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--secondary)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: calc(24px * var(--fs-scale));
  box-shadow: 0 10px 28px rgba(31, 200, 166, 0.4); z-index: 40; text-decoration: none;
}
.fab:active { transform: scale(0.94); }

/* 我的页入口宫格 */
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.entry { background: #fff; border-radius: 14px; padding: 16px 8px; text-align: center; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.entry:active { transform: scale(0.97); }
.entry .ic { font-size: calc(23px * var(--fs-scale)); color: var(--accent); }
.entry .t { font-size: calc(14px * var(--fs-scale)); color: var(--text-gray); margin-top: 6px; }

/* 消息未读角标 */
.badge-dot { position: relative; }
.badge-dot .dot { position: absolute; top: -2px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff4d4f; color: #fff; font-size: calc(12px * var(--fs-scale)); line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.c-tabbar a .dot { top: 4px; right: 50%; transform: translateX(18px); }

/* 加载更多 / 空 */
.loadmore { text-align: center; color: var(--text-muted); font-size: calc(14px * var(--fs-scale)); padding: 14px 0; }