/**
 * ============================================================
 *  接龙星球 H5 · 页面与组件样式
 *  单位：rem（1rem = 10px @375px 屏，换算 rem = rpx/20）
 *  结构：NavBar → PageBody → TabBar（复刻小程序框架）
 * ============================================================ */

/* ========== 顶部导航栏 ========== */
.navbar {
  position: sticky; top: 0; z-index: var(--z-bar);
  background: var(--bg-elev);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
}
.navbar__inner {
  height: 4.4rem; display: flex; align-items: center;
  padding: 0 var(--page-x); gap: var(--sp-2);
}
.navbar__title { font-size: var(--fs-lg); font-weight: 700; flex: 1; text-align: center; }
.navbar__side { width: 4.4rem; display: flex; align-items: center; }
.navbar__side--r { justify-content: flex-end; }

/* ========== 页面主体 ========== */
.page-body {
  padding-bottom: calc(5.6rem + env(safe-area-inset-bottom));
  min-height: calc(100vh - 4.4rem);
}

/* ========== 底部 TabBar ========== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  width: var(--container-max); max-width: 100vw; margin: 0 auto;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 480px) {
  .tabbar { box-shadow: var(--shadow-3); }
}
.tabbar__i {
  flex: 1; min-height: 5.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; color: var(--text-3); font-size: 1.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabbar__i.is-on { color: var(--brand-text); font-weight: 600; }
.tabbar__ico { font-size: 2rem; line-height: 1; }
.tabbar__i:active { opacity: .7; }

/* ========== Hero ========== */
.hero { position: relative; padding: var(--sp-3) var(--page-x) var(--sp-5); }
.hero__bg {
  position: absolute; left: var(--page-x); right: var(--page-x); top: 0; bottom: 0;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800) 55%, var(--brand-900));
  border-radius: var(--r-xl); overflow: hidden;
}
.hero__bg::after {
  content: ''; position: absolute; right: -3rem; top: -4rem;
  width: 15rem; height: 15rem; border-radius: 50%; background: rgba(255,255,255,.10);
}
.hero__inner { position: relative; z-index: 2; padding: var(--sp-4) 1.4rem; }
.hero__title { display: flex; align-items: center; gap: var(--sp-2); }
.hero__logo {
  width: 3.8rem; height: 3.8rem; border-radius: 1.2rem;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.hero__h1 { color: #fff; font-size: var(--fs-xl); font-weight: 800; letter-spacing: .05rem; }
.hero__sub { color: rgba(255,255,255,.85); font-size: var(--fs-xs); margin-top: .2rem; }

/* AI 输入条 */
.ai-box {
  margin-top: 1.4rem; background: #fff; border-radius: var(--r-full);
  display: flex; align-items: center; padding: .5rem .5rem .5rem 1.4rem;
  box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.16);
}
.ai-box__icon { font-size: var(--fs-md); }
.ai-box__input {
  flex: 1; min-width: 0; height: 3.6rem; font-size: var(--fs-sm);
  margin-left: .7rem; color: var(--text); border: none; outline: none; background: transparent;
}
.ai-box__input::placeholder { color: var(--text-3); }
.ai-box__btn {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  color: #fff; font-size: var(--fs-sm); font-weight: 700;
  padding: 0 1.5rem; height: 3.4rem; border-radius: var(--r-full);
  display: flex; align-items: center; flex-shrink: 0;
}
.ai-box__btn:active { transform: scale(var(--press)); }

/* 概览数字 */
.hero__stat {
  margin-top: 1.5rem; display: flex; align-items: center;
  background: rgba(255,255,255,.14); border-radius: var(--r-md); padding: 1.1rem 0;
}
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.stat__n { color: #fff; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat__l { color: rgba(255,255,255,.8); font-size: 1.05rem; }
.stat__line { width: 1px; height: 2.2rem; background: rgba(255,255,255,.25); }

/* ========== 场景九宫格 ========== */
.scenes { display: flex; flex-wrap: wrap; margin-top: 1.3rem; }
.scene {
  width: 25%; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); margin-bottom: var(--sp-4);
  transition: transform var(--dur-fast) var(--ease-out);
}
.scene:active { transform: scale(var(--press)); }
.scene__icon {
  width: 4.8rem; height: 4.8rem; border-radius: 1.4rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
}
.scene__name { font-size: var(--fs-xs); color: var(--text-2); }

/* ========== Tabs ========== */
.tabs { display: flex; gap: var(--sp-2); padding: .2rem var(--page-x) 1rem; }
.tabs__item {
  min-height: 3.6rem; padding: 0 1.4rem; border-radius: var(--r-full);
  background: var(--bg-elev); color: var(--text-2); font-size: var(--fs-sm);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.tabs__item.is-on {
  background: var(--brand-700); color: #fff;
  border-color: var(--brand-700); font-weight: 600;
}
.tabs__item:active { transform: scale(var(--press)); }

/* ========== 接龙卡片 ========== */
.jlcard {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--bg-elev); border-radius: var(--r-lg);
  padding: 1.3rem; margin: 0 var(--page-x) 1rem;
  box-shadow: var(--shadow-2); position: relative;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.jlcard:active { transform: scale(.985); }
.jlcard__icon {
  width: 4.4rem; height: 4.4rem; border-radius: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
}
.jlcard__title { font-size: var(--fs-md); font-weight: 700; color: var(--text); flex: 1; }
.dot-new { width: .7rem; height: .7rem; border-radius: 50%; background: var(--danger-text); flex-shrink: 0; }
.jlcard__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: .5rem; }
.jlcard__progress { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }
.jlcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; }

/* ========== FAB ========== */
.fab {
  position: fixed; z-index: var(--z-fab);
  right: calc((100vw - min(100vw, var(--container-max))) / 2 + 1.6rem);
  bottom: calc(7.2rem + env(safe-area-inset-bottom));
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  color: #fff; font-size: 2.8rem; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .6rem 1.6rem rgba(4,120,87,.45);
  transition: transform var(--dur-fast) var(--ease-out);
}
.fab:active { transform: scale(.93); }

/* ========== 详情页头部 ========== */
.hero2 { position: relative; padding: var(--sp-3) var(--page-x); }
.hero2__bg { position: absolute; left: var(--page-x); right: var(--page-x); top: 0; bottom: 0; border-radius: var(--r-xl); }
.hero2__in { position: relative; z-index: 2; padding: var(--sp-4) 1.4rem; }
.hero2__icon {
  width: 4.6rem; height: 4.6rem; border-radius: 1.4rem;
  background: rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem;
}
.hero2__title { color: #fff; font-size: 1.7rem; font-weight: 800; line-height: 1.4; }
.hero2__meta { color: rgba(255,255,255,.85); font-size: var(--fs-xs); margin-top: .3rem; }
.hero2__desc {
  margin-top: 1.1rem; padding: 1rem 1.2rem;
  background: rgba(255,255,255,.16); border-radius: var(--r-md);
  color: rgba(255,255,255,.95); font-size: var(--fs-sm); line-height: 1.6;
}
/* 管理入口：贴在 hero 卡片右上角（与小程序端详情页底栏「管理」同一套信息架构） */
/* v2.3.0：右上角改为「动作区」——收藏（所有人可见）+ 管理（仅创建者），并排排列 */
.hero2__acts {
  position: absolute; top: 1.2rem; right: 1.3rem; z-index: 3;
  display: flex; align-items: center; gap: .6rem;
}
.hero2__manage {
  height: 3.2rem; padding: 0 1.1rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.38);
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
}
.hero2__manage:active { background: rgba(255,255,255,.4); }
/* 收藏星标：未收藏=空心，已收藏=实心金 */
.hero2__fav {
  width: 3.2rem; height: 3.2rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.38);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.hero2__fav svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero2__fav.is-on { background: #FFC53D; border-color: #FFC53D; color: #6b4400; }
.hero2__fav.is-on svg { fill: currentColor; }
.hero2__fav:active { transform: scale(.94); }

/* 分段控件 */
.tabs2 {
  display: flex; margin: .4rem var(--page-x) 1rem;
  background: var(--bg-elev); border-radius: var(--r-full); padding: .4rem;
  box-shadow: var(--shadow-2);
}
.tabs2__i {
  flex: 1; text-align: center; min-height: 3.6rem; line-height: 3.6rem;
  font-size: var(--fs-sm); color: var(--text-2); border-radius: var(--r-full);
  transition: all var(--dur-fast) var(--ease-out);
}
.tabs2__i.is-on { background: var(--brand-700); color: #fff; font-weight: 600; }

/* 记录条目 */
.rec {
  display: flex; gap: 1rem; background: var(--bg-elev);
  margin: 0 var(--page-x) 1rem; padding: 1.3rem; border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.rec__kv { margin-top: .7rem; }
.kv { display: flex; font-size: var(--fs-sm); line-height: 1.7; }
.kv__k { color: var(--text-3); flex-shrink: 0; min-width: 6rem; }
.kv__v { color: var(--text); flex: 1; word-break: break-all; }
.rec__cmt {
  margin-top: .7rem; padding: .7rem .9rem; background: var(--brand-50);
  border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--brand-text);
}

/* 未提交名单 */
.names { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.name {
  padding: .6rem 1.3rem; border-radius: var(--r-full);
  background: rgba(239,68,68,.10); color: var(--danger-text); font-size: var(--fs-sm);
}

/* ========== 表单 ========== */
.field {
  background: var(--bg-elev); border-radius: var(--r-md);
  padding: 1.2rem; margin: 0 var(--page-x) 1.2rem;
  border: 1px solid var(--border); transition: border-color var(--dur-base);
}
.field--err { border-color: var(--danger-text); background: rgba(239,68,68,.04); }
.field__hd { display: flex; align-items: center; gap: .5rem; }
.field__label { font-size: 1.45rem; font-weight: 600; color: var(--text); }
.field__req { color: var(--danger-text); font-size: var(--fs-base); }
.field__desc { font-size: var(--fs-xs); color: var(--text-3); margin-top: .4rem; line-height: 1.5; }
.field__bd { margin-top: .9rem; }
.field__input, .field__textarea, .field__select {
  width: 100%; background: var(--bg-sunken); border-radius: var(--r-sm);
  padding: 1.1rem 1.2rem; font-size: var(--fs-base); color: var(--text);
  min-height: 4.4rem; border: 1px solid transparent; outline: none;
}
.field__textarea { min-height: 8rem; line-height: 1.6; resize: vertical; }
.field__input:focus, .field__textarea:focus, .field__select:focus { border-color: var(--brand-text); }
.field__input::placeholder, .field__textarea::placeholder { color: var(--text-3); }
.field__err { margin-top: .7rem; font-size: var(--fs-xs); color: var(--danger-text); }

/* 选项 */
.field__options { display: flex; flex-direction: column; gap: var(--sp-2); }
.opt {
  display: flex; align-items: center; gap: .7rem;
  background: var(--bg-sunken); border-radius: var(--r-sm);
  padding: 1.1rem 1.2rem; border: 1px solid transparent;
  cursor: pointer; transition: all .18s var(--ease-out);
  min-height: 4.4rem;
}
.opt--on { background: var(--brand-50); border-color: var(--brand-text); }
.opt__box {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1rem; color: transparent;
}
.opt__box--square { border-radius: .4rem; }
.opt--on .opt__box { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.opt__text { font-size: var(--fs-base); color: var(--text); }
.opt--on .opt__text { color: var(--brand-text); font-weight: 600; }

/* 评分 / NPS */
.field__rate { display: flex; align-items: center; gap: var(--sp-2); }
.star { font-size: 2.6rem; color: var(--border-strong); line-height: 1; cursor: pointer; transition: transform var(--dur-fast); }
.star--on { color: var(--gold-400); transform: scale(1.08); }
.field__nps { display: flex; flex-wrap: wrap; gap: .6rem; }
.nps {
  width: 3.4rem; height: 3.4rem; border-radius: .8rem;
  background: var(--bg-sunken); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.nps--on { background: var(--brand-700); color: #fff; transform: scale(1.06); }

/* ========== 统计图表（纯 CSS） ========== */
.chart-sheet { display: flex; flex-direction: column; gap: var(--sp-3); }
.pie-wrap { display: flex; align-items: center; gap: var(--sp-4); }
.pie {
  width: 9rem; height: 9rem; border-radius: 50%; flex-shrink: 0;
  position: relative;
}
.pie::after {
  content: ''; position: absolute; inset: 22%;
  background: var(--bg-elev); border-radius: 50%;
}
.pie__legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.legend-i { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.legend-dot { width: .8rem; height: .8rem; border-radius: 50%; flex-shrink: 0; }
.legend-n { flex: 1; color: var(--text-2); }
.legend-v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.bar-i { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.bar-n { width: 6rem; flex-shrink: 0; color: var(--text-2); }
.bar-track { flex: 1; height: 1.2rem; background: var(--bg-sunken); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-600), var(--brand-700)); transition: width var(--dur-slow) var(--ease-out); }
.bar-v { width: 3rem; text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.stat-box { background: var(--bg-sunken); border-radius: var(--r-md); padding: 1.2rem .8rem; text-align: center; }
.stat-box__n { font-size: var(--fs-xl); font-weight: 800; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.stat-box__l { font-size: var(--fs-xs); color: var(--text-3); margin-top: .2rem; }

/* ========== 我的页 ========== */
.ucard { position: relative; padding: var(--sp-3) var(--page-x); }
.ucard__bg {
  position: absolute; left: var(--page-x); right: var(--page-x); top: 0; bottom: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--invert-from), var(--invert-to));
}
.ucard__in { position: relative; z-index: 2; padding: var(--sp-4) 1.4rem; display: flex; align-items: center; gap: var(--sp-3); }
.ucard__av {
  width: 6rem; height: 6rem; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 3rem; flex-shrink: 0;
}
.ucard__name { color: #fff; font-size: var(--fs-xl); font-weight: 800; }
.ucard__sub { color: rgba(255,255,255,.85); font-size: var(--fs-xs); margin-top: .2rem; }

/* 身份卡可点：整卡即「修改头像和昵称」入口 */
.ucard--edit { cursor: pointer; }
.ucard--edit:active .ucard__bg { opacity: .88; }
.ucard__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ucard__pen {
  position: relative; z-index: 2; flex-shrink: 0; font-size: 1.6rem;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ucard__cta {
  position: relative; z-index: 2; flex-shrink: 0;
  min-width: 4.8rem; height: 3.2rem; padding: 0 1rem; border-radius: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  font-size: var(--fs-xs); font-weight: 700;
}
.ucard__cta--primary {
  color: #172033;
  background: #fff;
  border-color: #fff;
}
.ucard__in--note { padding-top: 0; }
.ucard__in--note .pf__note {
  margin: 0; background: rgba(255,255,255,.16); color: rgba(255,255,255,.95); border: none;
}
.ucard__in--note .pf__note b { color: #fff; }

/* ========== 头像和昵称弹层 ========== */
.pf__avwrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pf__av {
  width: 9.6rem; height: 9.6rem; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-sunken); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 4.4rem; overflow: hidden;
}
.pf__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf__file { display: none; }
.pf__hint { margin: 1.6rem 0 1rem; }
.pf__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem;
  max-height: 21rem; overflow-y: auto; padding: .2rem;
}
.pf__e {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-sunken); font-size: 2.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.pf__e:active { background: var(--bg-hover); }
.pf__e.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }
.pf__note {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--border);
  color: var(--text-3); font-size: var(--fs-xs); line-height: 1.6;
}
.pf__note.is-error { color: var(--danger-text); background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.18); }
.pf__note b { color: var(--text-2); }
.pf__wx { margin-top: 1.6rem; }
.linkbtn { color: var(--brand-text); font-size: var(--fs-xs); font-weight: 650; }
.linkbtn:active { opacity: .7; }
.pr-intro { margin-bottom: 1rem; line-height: 1.65; }
.pr-actions { margin-top: 1.6rem; }
.pr-actions .btn:disabled {
  opacity: .5;
  cursor: default;
}

.cell-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min); padding: 1.4rem 0; border-bottom: 1px solid var(--border);
}
.cell-row:last-child { border-bottom: none; }
.cell-row__l { color: var(--text-2); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--sp-2); }
.cell-row__r { color: var(--text-3); font-size: var(--fs-sm); display: flex; align-items: center; gap: .5rem; }

/* 开关 */
.switch {
  width: 4.4rem; height: 2.4rem; border-radius: var(--r-full);
  background: var(--border-strong); position: relative; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.switch::after {
  content: ''; position: absolute; top: .2rem; left: .2rem;
  width: 2rem; height: 2rem; border-radius: 50%; background: #fff;
  box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch.is-on { background: var(--brand-700); }
.switch.is-on::after { transform: translateX(2rem); }

/* ========== 模板卡 ========== */
.tpl {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--bg-elev); border-radius: var(--r-lg);
  padding: 1.3rem; margin: 0 var(--page-x) 1rem; box-shadow: var(--shadow-2);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out);
  position: relative;   /* v2.3.0：承载右上角类型角标 */
}
.tpl:active { transform: scale(.985); }

/* v2.3.0 类型角标：让用户在列表里就知道这张模板拿到的是什么形态（竞品同款做法）
   颜色与 app.js 的 SCENES 保持一致，语义可预期 */
.tpl__badge {
  position: absolute; top: 0; right: 0;
  padding: .25rem .75rem; font-size: 1rem; font-weight: 700; line-height: 1.5;
  color: #fff; background: #64748B;
  border-radius: 0 var(--r-lg) 0 var(--r-md);
  letter-spacing: .02em;
}
.tpl__badge[data-t="feedback"] { background: #3158D4; }
.tpl__badge[data-t="form"]     { background: #7C5CC7; }
.tpl__badge[data-t="daily"]    { background: #0F8B7A; }
.tpl__badge[data-t="vote"]     { background: #D64B45; }
.tpl__badge[data-t="signup"]   { background: #C06419; }
.tpl__badge[data-t="checkin"]  { background: #0F7E8A; }
.tpl__badge[data-t="sign"]     { background: #B24F79; }
.tpl__badge[data-t="homework"] { background: #5E7E2A; }

/* 模板区工具条：左侧计数、右侧「如何发布接龙？」帮助入口（放在用户最困惑的位置） */
.tpl-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-2); margin: 0 var(--page-x) .9rem;
}
.help-link {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  color: var(--brand); font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem;
}
.help-link:active { opacity: .7; }
.tpl__icon { width: 4.4rem; height: 4.4rem; border-radius: 1.2rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.tpl__name { font-size: var(--fs-md); font-weight: 700; }
.tpl__desc { font-size: var(--fs-xs); color: var(--text-3); margin-top: .3rem; line-height: 1.5; }

/* ========== Toast / 遮罩 / 底部弹层 ========== */
.toast-wrap {
  position: fixed; left: 0; right: 0; top: 40%; z-index: var(--z-toast);
  display: flex; justify-content: center; pointer-events: none;
}
.toast {
  background: rgba(15,23,42,.9); color: #fff;
  padding: 1rem 1.8rem; border-radius: var(--r-md);
  font-size: var(--fs-sm); max-width: 70vw; text-align: center;
  animation: jl-pop .22s var(--ease-spring) both;
}
.mask {
  position: fixed; inset: 0; background: var(--mask); z-index: var(--z-mask);
  animation: jl-fade-in var(--dur-base) var(--ease-out) both;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  width: var(--container-max); max-width: 100vw; margin: 0 auto;
  background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  animation: jl-sheet-up var(--dur-base) var(--ease-out) both;
}
@keyframes jl-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__hd {
  text-align: center; font-size: var(--fs-md); font-weight: 700;
  padding: var(--sp-4) 0 var(--sp-2); border-bottom: 1px solid var(--border);
}
.sheet__bd { padding: var(--sp-3) var(--page-x) 0; max-height: 60vh; overflow-y: auto; }

/* ========== 长文弹层（使用说明 / 用户协议 / 隐私政策 / 关于，v2.2.0） ========== */
.doc { line-height: 1.75; }
.doc h4 {
  margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.doc h4:first-child { margin-top: 0; }
.doc p, .doc li { font-size: var(--fs-sm); color: var(--text-2); }
.doc p { margin-bottom: var(--sp-2); }
.doc ol, .doc ul { padding-left: 1.8rem; margin: 0 0 var(--sp-2); }
.doc li { margin-bottom: .6rem; }
.doc b { color: var(--text); }
.doc__meta { font-size: var(--fs-xs); color: var(--text-4); }
/* 「我的」页可点击信息行的右侧箭头（<i> 默认斜体，需重置） */
.cell-row__r i { font-style: normal; color: var(--text-4); }

/* ========== 列表工具条 ========== */
.toolbar { display: flex; gap: var(--sp-2); padding: 0 var(--page-x) 1rem; flex-wrap: wrap; }
.tool {
  min-height: 3.6rem; padding: 0 1.2rem; border-radius: var(--r-full);
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: .4rem;
}
.tool:active { background: var(--bg-hover); }

/* ========== 管理弹层列表（详情页 hero 右上角「管理」唤起） ========== */
.mgr { display: flex; flex-direction: column; gap: .8rem; }
.mgr__i {
  display: flex; align-items: center; gap: 1.1rem; text-align: left;
  min-height: 5.4rem; padding: .9rem 1.3rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
}
.mgr__i:active { background: var(--bg-hover); }
.mgr__ico { font-size: 1.9rem; line-height: 1; }
.mgr__n { display: block; font-size: var(--fs-md); font-weight: 600; }
.mgr__d { display: block; margin-top: .2rem; color: var(--text-3); font-size: var(--fs-xs); }
.mgr__arrow { color: var(--text-3); font-size: 1.8rem; line-height: 1; }

/* ---------- 身份区（点名式接龙） ----------
   家长点自己的名字即完成认领，0 打字；已提交的项淡显但仍可点（=修改我的提交） */
.who__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.2rem;
}
.picks {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.1rem; max-height: 26rem; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pick {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.6rem; padding: .6rem 1.3rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--text);
  font-size: var(--fs-base); cursor: pointer;
}
.pick:active { background: var(--bg-hover); }
.pick--on {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-dark); font-weight: 600;
}
.pick--done { opacity: .6; }
.pick__no { font-size: var(--fs-xs); color: var(--text-3); }
.pick--on .pick__no { color: inherit; }
.pick__ck { color: #10B981; font-size: var(--fs-sm); }

/* ========== 打卡日历 ========== */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-top: var(--sp-3); }
.cal__d {
  aspect-ratio: 1; border-radius: var(--r-sm); background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--text-3);
}
.cal__d.is-done { background: var(--brand-50); color: var(--brand-text); font-weight: 700; }
.cal__d.is-miss { background: rgba(239,68,68,.10); color: var(--danger-text); }
.cal__d.is-today { border: 1px solid var(--brand-text); }

.calm__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.calm__title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.calm__arrow { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-2); font-size: 1.6rem; line-height: 1; }
.calm__weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-bottom: .6rem; }
.calm__weeks span { text-align: center; font-size: 1.1rem; color: var(--text-3); }
.calm__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.calm__d { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-3); cursor: pointer; }
.calm__d.is-empty { visibility: hidden; cursor: default; }
.calm__d.is-done { background: var(--brand-50); color: var(--brand-text); font-weight: 700; }
.calm__d.is-miss { background: rgba(239,68,68,.10); color: var(--danger-text); }
.calm__d.is-today { border: 1px solid var(--brand-text); color: var(--brand-text); }
.calm__d.is-future { background: transparent; opacity: .45; cursor: default; }
.calm__d.is-rest { background: transparent; opacity: .55; cursor: default; }
.calm__mark { position: absolute; left: 0; right: 0; bottom: .1rem; text-align: center; font-size: .9rem; line-height: 1; font-style: normal; color: var(--brand-text); }
.calm__mark--miss { color: var(--danger-text); }
.calm__legend { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.2rem; }
.calm__lg { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; color: var(--text-3); }
.calm__dot { width: 1rem; height: 1rem; border-radius: .2rem; display: block; background: transparent; }
.calm__hint { margin-top: .8rem; text-align: center; font-size: 1.1rem; color: var(--text-3); }

/* ========== 抽奖 ========== */
/* 接龙详情页的抽奖入口：整行可点，箭头暗示可进入 */
.lot-entry { padding-top: 1.2rem; padding-bottom: .8rem; }
.lot-entry__i {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--tap-min); padding: var(--sp-2) 0;
  border-top: 1px solid var(--border); text-align: left;
}
.lot-entry__i:first-of-type { border-top: none; }
.lot-entry__i > .f1 { display: flex; flex-direction: column; gap: .2rem; }
.lot-entry__arrow { color: var(--text-4); font-size: var(--fs-xl); line-height: 1; }

/* 奖项行 */
.lot-prize { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.lot-prize + .lot-prize { border-top: 1px dashed var(--border); }
.lot-prize__ico {
  width: 3.6rem; height: 3.6rem; flex-shrink: 0; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}

/* 中奖人姓名（脱敏手机号紧随其后） */
.lot-win { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: .6rem; }
.lot-win__name {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .2rem var(--sp-2); border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-text);
  font-size: var(--fs-sm); font-weight: 600;
}
.lot-win__ph { font-size: var(--fs-xs); font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }

/* 中奖名单跑马灯：内容重复两遍 + 平移 50% 实现无缝 */
.lot-marquee {
  margin: var(--sp-3) var(--page-x) 0; overflow: hidden;
  border-radius: var(--r-full); padding: .6rem 0;
  background: linear-gradient(135deg, var(--gold-500), var(--pink-icon));
  box-shadow: var(--shadow-1);
}
.lot-marquee__in {
  display: flex; width: max-content; gap: var(--sp-8);
  animation: lot-scroll 18s linear infinite;
  color: #fff; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.lot-marquee__in > span { padding-left: var(--sp-8); }
@keyframes lot-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lot-marquee__in { animation: none; } }

/* 开奖倒计时 */
.lot-clock { text-align: center; padding: var(--sp-2) 0; }
.lot-clock__l { font-size: var(--fs-sm); color: var(--text-3); }
.lot-clock__n {
  font-size: var(--fs-display); font-weight: 800; color: var(--warn-text);
  letter-spacing: .1rem; margin: .4rem 0;
}
.lot-clock__d { color: var(--text-3); }

/* ========== 其他 ========== */
.foot-tip { padding: 2rem 0 4rem; }
.section-title { padding: var(--sp-3) var(--page-x) var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); }

/* ========== 编辑接龙页 ========== */
/* 表单内的小标签（沿用 .field__label 视觉，独立成类以免影响填写页） */
.edit-lb { display: block; margin: 1.4rem 0 .5rem; font-size: var(--fs-xs); color: var(--text-3); }

/* 收集项行：图标 + 名称/类型 + 四个操作按钮（触控区 ≥4.4rem 的下限放宽到 3.2rem，靠 gap 补间距） */
.fdrow {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.fdrow:last-child { border-bottom: none; }
.fdrow__ico {
  width: 3.6rem; height: 3.6rem; border-radius: 1rem; flex-shrink: 0;
  background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.fdrow__lb { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.fdrow__ty { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: .2rem; }
.fdrow__op {
  width: 3.2rem; height: 3.2rem; flex-shrink: 0; line-height: 1; font-size: 1.3rem;
  border: 1px solid var(--border); border-radius: .8rem;
  background: var(--bg-elev); color: var(--text-2);
}
.fdrow__op:active { transform: scale(var(--press)); }
.fdrow__op:disabled { opacity: .28; pointer-events: none; }
.fdrow__op--del { color: var(--danger-text); border-color: rgba(220,38,38,.28); }

/* 图标 / 颜色 / 题型选择器 */
.pick-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.pick-ico {
  width: 4rem; height: 4rem; line-height: 1; font-size: 2rem;
  border: 1px solid var(--border); border-radius: 1.1rem;
  background: var(--bg-sunken); display: flex; align-items: center; justify-content: center;
}
.pick-ico.is-on { border-color: var(--brand-text); background: var(--brand-50); }
.pick-ico:active { transform: scale(var(--press)); }
.pick-color {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border);
}
.pick-color.is-on { border-color: var(--text); transform: scale(1.1); }
.pick-type {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.2rem; font-size: var(--fs-sm); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-elev);
}
.pick-type__i { font-size: 1.6rem; line-height: 1; }
.pick-type:active { transform: scale(var(--press)); background: var(--bg-hover); }

/* ============================================================
 * 清晰工作台视觉回归
 * 目标：减少装饰和渐变，依靠排版、留白、边框与状态色表达层级。
 * ============================================================ */
.hero { padding-top: var(--sp-2); }
.hero__bg { display: none; }
.hero__bg::after { display: none; }
.hero__inner { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }
.hero__title { gap: .9rem; }
.hero__logo {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .8rem;
  color: #fff;
  background: var(--brand-600);
  font-size: 1.7rem;
}
.hero__h1 { color: var(--text); font-size: 2rem; letter-spacing: 0; }
.hero__sub { color: var(--text-3); }
.ai-box {
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .4rem .4rem .4rem 1.2rem;
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}
.ai-box__icon { color: var(--brand-600); }
.ai-box__input { color: var(--text); }
.ai-box__btn {
  height: 3.6rem;
  padding: 0 1.3rem;
  border-radius: .7rem;
  color: #fff;
  background: var(--brand-600);
}
.hero__stat {
  gap: .8rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.hero__stat .stat {
  padding: 1.1rem .4rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--bg-elev);
}
.hero__stat .stat__n { color: var(--text); }
.hero__stat .stat__l { color: var(--text-3); }
.hero__stat .stat__line { display: none; }
}

.scenes,
.tabs,
.foot-tip { margin-left: var(--page-x); margin-right: var(--page-x); }
.scenes { padding: var(--sp-1) 0 0; }
.scene__icon {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: .9rem;
  font-size: 1.9rem;
}
.scene__name { font-size: var(--fs-sm); font-weight: 600; }
.tabs {
  gap: .4rem;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--bg-elev);
}
.tabs__item {
  flex: 1;
  min-width: 0;
  min-height: 3.4rem;
  padding: 0 .8rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
}
.tabs__item.is-on {
  color: #fff;
  background: var(--brand-600);
}
.tabbar__ico svg,
.btn svg,
.ai-box__icon svg {
  width: 1.9rem;
  height: 1.9rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar__ico { display: grid; place-items: center; }
.tabbar__i { gap: .1rem; }

.card,
.jlcard,
.rec,
.tpl,
.field,
.sheet {
  box-shadow: var(--shadow-1);
}
.card {
  padding: 1.5rem;
  border-color: var(--border);
}
.card__title::before {
  width: .3rem;
  height: 1.5rem;
  border-radius: .1rem;
  background: var(--brand-600);
}
.jlcard {
  gap: 1.1rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.jlcard__icon {
  width: 4rem;
  height: 4rem;
  border-radius: .8rem;
  font-size: 1.8rem;
}
.jlcard__title { font-size: 1.5rem; }
.jlcard__meta { gap: .6rem; }
.jlcard__progress { margin-top: 1rem; }
.progress { height: .5rem; background: #E8ECF3; }

.fab {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: .9rem;
  background: #172033;
  font-size: 2.4rem;
  box-shadow: 0 .5rem 1.3rem rgba(23,32,51,.28);
}

.hero2__bg {
  background: #172033 !important;
  border: 1px solid #26324a;
  box-shadow: 0 .8rem 2rem rgba(23,32,51,.14);
}
.hero2__icon {
  border-radius: .8rem;
  background: rgba(255,255,255,.12);
}
.hero2__title { font-size: 1.8rem; letter-spacing: -.02rem; }
.hero2__desc { border-radius: .6rem; background: rgba(255,255,255,.09); }
.hero2__manage { border-radius: .7rem; background: rgba(255,255,255,.12); }
.tabs2 {
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: .4rem;
  box-shadow: var(--shadow-1);
}
.tabs2__i { border-radius: .6rem; }
.tabs2__i.is-on { background: var(--brand-600); }
.rec { border: 1px solid var(--border); border-radius: 1rem; }
.field { border-radius: .8rem; }
.field__input,
.field__textarea,
.field__select { border-radius: .6rem; background: #F6F8FA; }
.opt { border-radius: .6rem; background: #F6F8FA; }
.opt--on { background: var(--brand-50); border-color: var(--brand-500); }
.opt--on .opt__box { background: var(--brand-600); border-color: var(--brand-600); }

.ucard__bg {
  background: #172033;
  border: 1px solid #26324a;
  box-shadow: 0 .8rem 2rem rgba(23,32,51,.14);
}
.ucard__pen { border-radius: .8rem; }
.pf__av { border-radius: 1.6rem; }
.pf__e { border-radius: .8rem; }
.pf__e.is-on { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-50); }
.cell-row { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.switch.is-on { background: var(--brand-600); }

.tpl { border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.tpl__icon { border-radius: .8rem; }
.sheet { border-radius: 1.4rem 1.4rem 0 0; }
.sheet__hd { text-align: left; padding-left: var(--page-x); }
.mgr__i { border-radius: .8rem; background: #F6F8FA; }
.pick { border-radius: .7rem; }
.pick--on { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.calm__d,
.cal__d { border-radius: .5rem; }
.foot-tip { text-align: left; }

/* ========== 填写完成后的私域承接 ========== */
.pd-card { border-left: .3rem solid var(--brand-600); }
.pd-desc {
  padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  border-radius: .7rem; background: var(--bg-sunken);
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6;
}
.pd-qr {
  width: 14rem; max-width: 100%; margin: 1.2rem auto 0;
  border: 1px solid var(--border); border-radius: .8rem; background: #fff;
}
.pd-qrwrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.pd-qrsheet {
  width: min(24rem, 82vw); aspect-ratio: 1; object-fit: contain;
  border: 1px solid var(--border); border-radius: 1rem; background: #fff;
}
.pd-empty {
  padding: 1.4rem; border: 1px dashed var(--border-strong); border-radius: .8rem;
  color: var(--text-3); text-align: center; font-size: var(--fs-sm);
}

/* ============================================================
 * 精细视觉修正：统一线性图标、降低阴影、稳定留白与交互状态
 * ============================================================ */
.navbar {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.theme-dark .navbar { background: rgba(21,30,46,.9); }
.navbar__inner { height: 4.8rem; }
.navbar__title { font-size: 1.6rem; font-weight: 720; }
.navbar__side .tap { width: 3.8rem; height: 3.8rem; border-radius: .8rem; background: var(--bg-sunken); color: var(--text-2); font-size: 2rem; }

.hero { padding: 1.6rem var(--page-x) 1.8rem; }
.hero__inner { padding: 0; }
.hero__title { align-items: flex-start; }
.hero__logo { width: 4.2rem; height: 4.2rem; border-radius: .9rem; color: #fff; }
.hero__logo svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__h1 { margin-top: .2rem; font-size: 2.1rem; font-weight: 760; }
.hero__sub { margin-top: .3rem; font-size: 1.25rem; }
.ai-box { margin-top: 1.4rem; height: 5rem; border-radius: .9rem; padding: .5rem; }
.ai-box__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.ai-box__input { height: 3.9rem; margin-left: .8rem; font-size: 1.4rem; }
.ai-box__btn { height: 4rem; padding: 0 1.5rem; border-radius: .7rem; font-size: 1.4rem; }
.hero__stat { margin-top: 1.2rem; }
.hero__stat .stat { padding: 1rem .4rem; }
.hero__stat .stat__n { font-size: 2rem; }

.scenes { margin-top: 0; padding-top: 0; }
.scene { width: 25%; padding: .3rem 0; margin-bottom: .8rem; }
.scene__icon {
  width: 4.4rem; height: 4.4rem; border-radius: 1.3rem;
  display: grid; place-items: center; font-size: 0;
  box-shadow: 0 .5rem 1.2rem rgba(23,32,51,.08);
}
.scene__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scene__name { margin-top: .6rem; font-size: 1.15rem; font-weight: 600; }

.tabs { padding: .3rem; border-radius: .8rem; }
.tabs__item { min-height: 3.5rem; font-size: 1.25rem; border-radius: .6rem; }

.card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--bg-elev);
}
.card__title { font-size: 1.6rem; font-weight: 720; }
.jlcard,
.tpl,
.rec,
.field { box-shadow: none; border: 1px solid var(--border); background: var(--bg-elev); }
.jlcard { padding: 1.4rem 1.4rem 1.2rem; border-radius: 1rem; }
.jlcard__icon {
  width: 4.2rem; height: 4.2rem; border-radius: .8rem;
  display: grid; place-items: center; font-size: 0;
}
.jlcard__icon svg,
.tpl__icon svg,
.hero2__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tpl__icon { display: grid; place-items: center; font-size: 0; }
.jlcard__title { font-size: 1.5rem; line-height: 1.4; }
.jlcard__meta { margin-top: .6rem; gap: .8rem; }
.jlcard__progress { margin-top: 1rem; gap: .8rem; }
.jlcard__foot { margin-top: .9rem; }

.fab { width: 4.8rem; height: 4.8rem; border-radius: .9rem; font-size: 2.4rem; }
.btn { border-radius: .7rem; min-height: 4.2rem; font-weight: 680; }
.btn--sm { min-height: 3.2rem; border-radius: .6rem; }
.btn svg { width: 1.7rem; height: 1.7rem; }

.tabbar { background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.theme-dark .tabbar { background: rgba(21,30,46,.94); }
.tabbar__i { min-height: 5.4rem; color: var(--text-3); font-size: 1.05rem; font-weight: 620; }
.tabbar__i.is-on { color: var(--brand-600); font-weight: 760; }
.tabbar__ico svg { width: 1.9rem; height: 1.9rem; }

/* 详情页改为浅色工作台：信息更清楚，减少“黑块感” */
.hero2__bg {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border);
  box-shadow: none;
}
.hero2__in { padding: 1.6rem; }
.hero2__icon {
  width: 4.4rem; height: 4.4rem; border-radius: .8rem;
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center; font-size: 0;
}
.hero2__title { color: var(--text); margin-top: 1.2rem; font-size: 1.9rem; font-weight: 760; }
.hero2__meta { color: var(--text-3); margin-top: .4rem; }
.hero2__desc { color: var(--text-2); background: var(--bg-sunken); border-radius: .6rem; }
.hero2__manage {
  color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: .7rem;
}
.hero2__manage svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero2__manage:active { background: var(--bg-hover); }
.tabs2 { border: 1px solid var(--border); border-radius: .8rem; padding: .3rem; box-shadow: none; }
.tabs2__i { border-radius: .6rem; }
.tabs2__i.is-on { background: var(--brand-600); }
.rec { border-radius: 1rem; }
.kv__k { min-width: 5.5rem; }

.field__input,
.field__textarea,
.field__select { border: 1px solid var(--border); background: var(--bg-elev); border-radius: .6rem; }
.field__input:focus,
.field__textarea:focus,
.field__select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.opt { border: 1px solid var(--border); background: var(--bg-elev); border-radius: .6rem; }
.opt--on { background: var(--brand-50); border-color: var(--brand-500); }
.opt--on .opt__box { background: var(--brand-600); border-color: var(--brand-600); }

.ucard__bg { background: #172033 !important; border: 1px solid #26324a; box-shadow: none; }
.ucard__cta { border-radius: .7rem; }
.cell-row__l { gap: .8rem; }
.cell-row__l svg,
.mgr__ico svg,
.empty__icon svg,
.pick-ico svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cell-row__l svg { color: var(--text-3); }
.mgr__ico { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-size: 0; }
.empty__icon { font-size: 0; }
.empty__icon svg { width: 3.4rem; height: 3.4rem; color: var(--text-4); }
.pick-ico { display: grid; place-items: center; font-size: 0; }
.sheet__hd { text-align: left; padding-left: var(--page-x); }
.sheet { border-radius: 1.4rem 1.4rem 0 0; box-shadow: none; border-top: 1px solid var(--border); }
.mask { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

@media (hover: hover) {
  .jlcard:hover,
  .tpl:hover,
  .cell-row:hover,
  .scene:hover { background: var(--bg-sunken); }
  .btn:hover { opacity: .92; }
}

/* 页脚：品牌、版本、版权分层，避免所有信息挤成一行 */
.app-footer {
  margin: 3.2rem var(--page-x) 0;
  padding: 2rem 0 calc(2.4rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  text-align: center;
}
.app-footer__brand {
  color: var(--text-2);
  font-size: 1.3rem;
  font-weight: 720;
  letter-spacing: .02em;
}
.app-footer__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-top: .7rem;
  color: var(--text-4);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.app-footer__meta span + span::before {
  content: '·';
  margin-right: .7rem;
  color: var(--border-strong);
}
.app-footer__copy {
  margin-top: .9rem;
  color: var(--text-4);
  font-size: 1.05rem;
  line-height: 1.6;
}
.app-footer__icp {
  display: block;
  margin-top: .2rem;
}

/* ============================================================
 * v2.4 鲜活活泼版（2026-09-21 老板选定方向，全局 8 页）
 * 基调：品牌蓝→紫渐变 + 彩色实心图标 + 玻璃拟态数据卡；
 * 在「清晰工作台」排版骨架上把色彩层次加回来。
 * 本层位于文件末尾，同等特异性下后到先赢；带 !important 处
 * 用于压过上方两层回归里的旧 !important。
 * ============================================================ */

/* ---------- 首页 Hero：渐变大卡回归 ---------- */
.hero__bg {
  display: block;
  background: var(--grad-hero);
  border: none;
  border-radius: 1.8rem;
  box-shadow: var(--shadow-brand);
}
.hero__bg::after { display: block; }
.hero__bg::before {
  content: ''; position: absolute; left: -4rem; bottom: -7rem;
  width: 16rem; height: 16rem; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.hero__inner { padding: 2rem 1.6rem 1.9rem; }
.hero__logo {
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__h1 { color: #fff; }
.hero__sub { color: rgba(255,255,255,.85); }
/* 玻璃拟态数据卡 */
.hero__stat .stat {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.1rem;
}
.hero__stat .stat__n { color: #fff; }
.hero__stat .stat__l { color: rgba(255,255,255,.82); }

/* AI 输入条：浮在渐变上的白卡 */
.ai-box {
  border: none;
  border-radius: 1.1rem;
  background: var(--bg-elev);
  box-shadow: 0 .8rem 2rem rgba(15,35,95,.18);
}
.ai-box__btn { background: var(--grad-btn); border-radius: .8rem; }

/* ---------- 首页筛选 Tabs：独立胶囊 + 渐变激活丸 ---------- */
.tabs { border: none; background: transparent; padding: .3rem 0; gap: .8rem; }
.tabs__item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-1);
}
.tabs__item.is-on {
  background: var(--grad-btn);
  border-color: transparent;
  box-shadow: 0 .5rem 1.2rem rgba(var(--brand-rgb),.30);
}

/* ---------- 卡片：去硬边、柔影 ---------- */
.card, .jlcard, .tpl, .rec, .field {
  border-color: #E6ECF8;
  box-shadow: 0 .4rem 1.4rem rgba(23,32,51,.05);
}

/* ---------- FAB：渐变方圆 ---------- */
.fab {
  background: var(--grad-fab);
  border-radius: 1.4rem;
  box-shadow: 0 .8rem 2rem rgba(var(--brand-rgb),.42);
}

/* ---------- 交互色统一渐变 ---------- */
.nps--on { background: var(--grad-btn); }
.switch.is-on { background: var(--grad-btn); }

/* ---------- 详情页 Hero：品牌渐变 ---------- */
.hero2__bg {
  background: var(--grad-hero) !important;
  border: none;
  box-shadow: var(--shadow-brand);
}
.hero2__icon { background: rgba(255,255,255,.22); color: #fff; }
.hero2__title { color: #fff; }
.hero2__meta { color: rgba(255,255,255,.85); }
.hero2__desc { background: rgba(255,255,255,.16); color: rgba(255,255,255,.95); }
.hero2__manage, .hero2__fav {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}
.hero2__manage:active { background: rgba(255,255,255,.4); }
.tabs2__i.is-on { background: var(--grad-btn); }

/* ---------- 「我的」页身份卡 ---------- */
.ucard__bg {
  background: var(--grad-hero) !important;
  border: none;
  box-shadow: var(--shadow-brand);
}

/* ---------- TabBar：激活图标加品牌底色 ---------- */
.tabbar__i.is-on { color: var(--brand-600); }
.tabbar__i.is-on .tabbar__ico {
  width: 4.4rem; height: 2.9rem;
  background: var(--brand-50);
  border-radius: var(--r-full);
}

/* ---------- 空态：品牌圆底 ---------- */
.empty__icon {
  width: 7.2rem; height: 7.2rem; font-size: 0;
  display: grid; place-items: center;
  background: var(--brand-50);
  border-radius: 50%;
}
.empty__icon svg { width: 3.2rem; height: 3.2rem; color: var(--brand-500); }

/* ---------- 暗色主题微调 ---------- */
.theme-dark .card, .theme-dark .jlcard, .theme-dark .tpl,
.theme-dark .rec, .theme-dark .field {
  border-color: var(--border);
  box-shadow: var(--shadow-2);
}
.theme-dark .ai-box { box-shadow: var(--shadow-3); }
.theme-dark .hero__stat .stat { background: rgba(255,255,255,.10); }

/* ============================================================
 * v2.5 多主题版（2026-09-21）：6 套配色主题 + 字体栈升级 + 桌面端观感
 * 主题切换 = html[data-theme]（见 tokens.css），此处只放主题选择器 UI 与排版微调
 * ============================================================ */

/* ---------- 「我的 → 主题外观」选择器（底部弹层内） ---------- */
.thm { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-2); }
.thm__i {
  position:relative; display:flex; align-items:center; gap:.9rem;
  padding:1rem; border:1px solid var(--border); border-radius:1rem;
  background:var(--bg-elev); cursor:pointer; text-align:left; min-height:5.6rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.thm__i:active { transform:scale(var(--press)); }
.thm__i.is-on { border-color:var(--brand-500); box-shadow:0 0 0 2px var(--brand-50); }
.thm__dot {
  width:2.8rem; height:2.8rem; border-radius:.9rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.thm__name { font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.thm__sub { display:block; margin-top:.1rem; font-size:var(--fs-xs); color:var(--text-3); font-weight:400; }
.thm__ck { position:absolute; top:.5rem; right:.7rem; color:var(--brand-500); font-size:1.4rem; font-weight:800; }
.thm-note { margin-top:1.1rem; font-size:var(--fs-xs); color:var(--text-3); line-height:1.6; }

/* ---------- 桌面端观感（≥768px）：居中应用体配淡淡的品牌色过渡背景 ---------- */
@media (min-width:768px) {
  body {
    background-color: var(--bg);
    background-image: linear-gradient(180deg, var(--brand-50) 0%, var(--bg) 26rem);
    background-attachment: fixed;
  }
}
.theme-dark body { background:var(--bg); }

/* ---------- 排版微调：数字更挺、分区标题更透气 ---------- */
.stat__n, .stat-box__n, .hero__h1 { letter-spacing:-.02rem; }
.section-title { letter-spacing:.03em; }

/* ---------- v2.5.1 筛选签防越界：放不下就横滑，不挤压、不折行、不外溢 ----------
   背景：分类/筛选签一排最多 7 枚，窄屏下被 flex 挤压折行且溢出容器。
   规则：容器横向可滚（隐藏滚动条）；签子 min-width:max-content 保持内容完整，
   空间充足时仍 flex:1 平分（兼容登录/注册等两枚签组）。上下补 padding 给
   选中态光晕留出渲染空间（overflow 裁剪不再吃掉阴影）。 */
.tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .4rem 0 1.2rem;
  margin-bottom: -.9rem; /* 抵消补出来的阴影空间，保持原有节奏 */
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item { flex: 1 1 0; min-width: max-content; white-space: nowrap; }
.tabs--tight { padding: .2rem 0 .9rem; margin-bottom: -.7rem; }

/* ---------- v2.5.2 首页隐藏顶栏标题 ----------
   hero 品牌区已含「接龙星球」，顶栏再铺「接龙星球 · 大厅」重复。
   首页 navbar 收成零高度安全区垫层：保留元素（冒烟脚本以 .navbar
   为「页面已渲染」信号）、保留 env(safe-area-inset-top) 刘海避让，
   仅去掉背景/边框/毛玻璃与标题文字。其余页面顶栏不受影响。 */
.navbar.navbar--flush {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.navbar--flush .navbar__inner { height: 0; padding: 0; overflow: hidden; }