/* ============================================================
   校园服务平台 Web 版全局样式
   rpx 换算规则：1rem = 100rpx（html font-size = 13.333vw）
   ============================================================ */
:root {
  --primary: #4F7CF7;
  --primary-light: #6D97FF;
  --primary-bg: #EDF2FF;
  --orange: #FF7A45;
  --orange-deep: #FF5A2E;
  --orange-bg: #FFF3E8;
  --price-red: #FF4B33;
  --green: #12A05B;
  --green-bg: #E6F7EE;
  --bg: #F5F5F5;
  --bg-input: #F5F6FA;
  --text-main: #333333;
  --text-sub: #666666;
  --text-light: #999999;
  --text-lighter: #BBBBBB;
  --border: #F0F0F0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 13.333vw; } /* 1rem = 100rpx */

body {
  background: var(--bg);
  font-size: .28rem;
  color: var(--text-main);
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { display: block; }

/* ---------- 通用组件 ---------- */
.card {
  background: #fff;
  border-radius: .16rem;
  padding: .28rem;
  margin: 0 .24rem .24rem;
  box-shadow: 0 .02rem .1rem rgba(79, 124, 247, .06);
}

.btn-primary {
  display: block;
  width: calc(100% - .48rem);
  margin: .4rem .24rem .6rem;
  background: var(--primary);
  color: #fff;
  font-size: .32rem;
  font-weight: bold;
  border: none;
  border-radius: .48rem;
  line-height: 2.6;
}
.btn-primary:disabled { background: #A9BDF5; }

.empty { padding: 1.4rem 0; text-align: center; color: var(--text-light); }
.empty-icon { font-size: 1rem; margin-bottom: .2rem; }
.empty-text { font-size: .28rem; }
.empty-sub { margin-top: .12rem; font-size: .24rem; color: var(--text-lighter); }
.loading { padding: .6rem 0; text-align: center; color: var(--text-light); font-size: .26rem; }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%) translateY(.4rem);
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: .26rem;
  padding: .18rem .4rem;
  border-radius: .4rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  max-width: 80%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* loading mask */
#loading-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#loading-mask.show { display: flex; }
.spinner {
  width: .6rem; height: .6rem;
  border: .06rem solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { margin-top: .2rem; color: #fff; font-size: .26rem; }

/* 底部 tabBar */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  background: #fff;
  border-top: 1px solid #eee;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .12rem 0 .08rem;
  color: var(--text-light);
  font-size: .2rem;
}
.tab-icon { font-size: .44rem; line-height: 1.2; }
.tab-text { margin-top: .02rem; }
.tab-item.active { color: var(--primary); font-weight: bold; }
.tab-item.active .tab-icon { filter: none; }

/* 返回栏 */
.back-bar {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  height: .88rem;
  padding: 0 .24rem;
  background: var(--primary);
  color: #fff;
}
.back-btn { font-size: .3rem; cursor: pointer; }
.back-title { flex: 1; text-align: center; font-size: .32rem; font-weight: bold; }
.back-right { width: 1.4rem; }

/* 有 tabbar 的页面需要底部留白 */
.has-tabbar { padding-bottom: 1.4rem; }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #4F7CF7 0%, #6D97FF 60%, #EDF2FF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem .5rem;
}
.login-logo {
  width: 1.6rem; height: 1.6rem;
  border-radius: .32rem;
  background: #fff;
  color: var(--primary);
  font-size: .8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .08rem .24rem rgba(0,0,0,.15);
}
.login-title { margin-top: .3rem; color: #fff; font-size: .44rem; font-weight: bold; }
.login-sub { margin-top: .1rem; color: rgba(255,255,255,.85); font-size: .26rem; }
.login-card {
  width: 100%;
  margin-top: .6rem;
  background: #fff;
  border-radius: .24rem;
  padding: .4rem .36rem;
  box-shadow: 0 .12rem .4rem rgba(0,0,0,.12);
}
.login-tabs { display: flex; margin-bottom: .32rem; }
.login-tab {
  flex: 1;
  text-align: center;
  font-size: .3rem;
  color: var(--text-light);
  padding-bottom: .16rem;
  border-bottom: .04rem solid transparent;
  cursor: pointer;
}
.login-tab.active { color: var(--primary); font-weight: bold; border-bottom-color: var(--primary); }
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: none;
  border-radius: .12rem;
  padding: .18rem .24rem;
  font-size: .28rem;
  margin-bottom: .24rem;
  outline: none;
}
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-size: .32rem;
  font-weight: bold;
  border: none;
  border-radius: .44rem;
  line-height: 2.6;
  margin-top: .1rem;
}
.login-btn:disabled { background: #FFC7AD; }
.demo-tip { margin-top: .3rem; font-size: .22rem; color: var(--text-lighter); text-align: center; line-height: 1.8; }
.code-row { display: flex; gap: .16rem; margin-bottom: .24rem; }
.code-row .form-input { flex: 1; margin-bottom: 0; }
.send-btn {
  flex-shrink: 0;
  padding: 0 .24rem;
  background: var(--primary);
  color: #fff;
  font-size: .24rem;
  border: none;
  border-radius: .12rem;
  white-space: nowrap;
}
.send-btn:disabled { background: #B8C6E8; }

/* ---------- 首页 ---------- */
.home-page { padding-bottom: 1.6rem; }
.home-header {
  background: linear-gradient(135deg, #4F7CF7 0%, #6D97FF 100%);
  color: #fff;
  padding: .48rem .4rem .56rem;
  margin-bottom: .24rem;
  border-radius: 0 0 .32rem .32rem;
}
.home-header-title { font-size: .44rem; font-weight: bold; }
.home-header-sub { margin-top: .12rem; font-size: .26rem; opacity: .9; }

.hot-section {
  background: #fff;
  border-radius: .16rem;
  margin: 0 .24rem .24rem;
  padding: .24rem;
  box-shadow: 0 .02rem .1rem rgba(255, 122, 69, .1);
}
.hot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .08rem; }
.hot-title { font-size: .32rem; font-weight: bold; color: #222; }
.hot-more { font-size: .24rem; color: var(--orange); cursor: pointer; }
.hot-card { display: flex; align-items: center; padding: .18rem 0; border-top: 1px solid #f5f5f5; cursor: pointer; }
.hot-card:first-of-type { border-top: none; }
.hot-rank {
  width: .44rem; height: .44rem; line-height: .44rem;
  text-align: center; border-radius: .12rem;
  font-size: .24rem; font-weight: bold;
  background: #F0F2F7; color: var(--text-light);
  flex-shrink: 0;
}
.hot-rank.rank-1 { background: #FFF0E6; color: #FF5A2E; }
.hot-rank.rank-2 { background: #FFF6E0; color: #E6A23C; }
.hot-rank.rank-3 { background: #FFF9E8; color: #C98A00; }
.hot-name {
  flex: 1; margin-left: .16rem; font-size: .28rem; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hot-votes { flex-shrink: 0; margin-left: .16rem; font-size: .24rem; color: var(--orange); font-weight: bold; }

.section-title-row { margin: .08rem .24rem .2rem; }
.section-title { font-size: .32rem; font-weight: bold; color: #222; }

.survey-card {
  background: #fff;
  border-radius: .16rem;
  padding: .28rem;
  margin: 0 .24rem .24rem;
  box-shadow: 0 .02rem .1rem rgba(79, 124, 247, .06);
  cursor: pointer;
}
.survey-card-top { display: flex; align-items: center; justify-content: space-between; }
.survey-title { flex: 1; font-size: .32rem; font-weight: bold; color: #222; margin-right: .16rem; }
.survey-badge { flex-shrink: 0; font-size: .22rem; color: var(--primary); background: var(--primary-bg); border-radius: .2rem; padding: .04rem .16rem; }
.survey-desc {
  margin-top: .12rem; font-size: .26rem; color: #888;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.survey-meta { margin-top: .2rem; display: flex; align-items: center; justify-content: space-between; font-size: .24rem; color: var(--text-light); }
.survey-actions { display: flex; align-items: center; }
.stats-btn { font-size: .22rem; color: var(--orange); background: var(--orange-bg); border-radius: .2rem; padding: .04rem .2rem; margin-right: .16rem; }
.survey-arrow { color: var(--primary); }

/* ---------- 问卷填写 ---------- */
.survey-page { padding: .24rem 0 1.8rem; }
.survey-page .survey-title { font-size: .36rem; }
.survey-page .survey-desc { margin-top: .12rem; font-size: .26rem; color: #888; }
.question-title { font-size: .3rem; font-weight: bold; color: var(--text-main); margin-bottom: .2rem; }
.required-mark { color: var(--price-red); margin-left: .04rem; }
.option-item {
  display: flex; align-items: center;
  padding: .2rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.option-item:first-child { border-top: none; }
.option-item input[type="radio"], .option-item input[type="checkbox"] {
  width: .36rem; height: .36rem; accent-color: var(--primary); flex-shrink: 0;
}
.option-text { flex: 1; margin-left: .08rem; font-size: .28rem; }
.answer-textarea {
  width: 100%; min-height: 1.6rem;
  background: var(--bg-input);
  border: none; border-radius: .12rem;
  padding: .2rem .24rem;
  font-size: .28rem;
  outline: none;
  font-family: inherit;
}
.answer-input {
  width: 100%;
  background: var(--bg-input);
  border: none; border-radius: .12rem;
  padding: .2rem .24rem;
  font-size: .28rem;
  outline: none;
}
.other-input-box { margin-top: .16rem; }
.other-input { background: #FFF8F0; border: 2px dashed #FFB37D; }
.submit-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--bg);
  padding: .16rem .24rem;
  padding-bottom: calc(.16rem + env(safe-area-inset-bottom));
}
.submit-bar .btn-primary { width: 100%; margin: 0; }

/* ---------- 问卷统计 ---------- */
.stats-page { padding: .24rem 0 1.8rem; }
.stats-page .survey-title { font-size: .36rem; font-weight: bold; color: #222; }
.stats-page .survey-desc { margin-top: .12rem; font-size: .26rem; color: #888; }
.total-row {
  margin-top: .2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-bg);
  border-radius: .12rem;
  padding: .16rem .24rem;
}
.total-label { font-size: .26rem; color: var(--primary); }
.total-count { font-size: .34rem; font-weight: bold; color: var(--primary); }
.q-title-row { display: flex; align-items: center; margin-bottom: .2rem; }
.q-title { flex: 1; font-size: .3rem; font-weight: bold; color: var(--text-main); }
.q-type { flex-shrink: 0; font-size: .22rem; color: var(--primary); background: var(--primary-bg); border-radius: .2rem; padding: .04rem .16rem; margin-left: .12rem; }
.option-row { margin-bottom: .2rem; }
.option-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: .08rem; }
.option-name { font-size: .26rem; color: var(--text-main); }
.option-count { font-size: .24rem; color: var(--text-sub); }
.bar-bg { height: .2rem; background: #F0F2F7; border-radius: .1rem; overflow: hidden; }
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4F7CF7 0%, #6D97FF 100%);
  border-radius: .1rem;
  min-width: .04rem;
  transition: width .4s ease;
}
.valid-note { margin-top: .04rem; font-size: .22rem; color: var(--text-lighter); }
.other-block { margin-top: .16rem; background: #FFF8F0; border-radius: .12rem; padding: .16rem .2rem; }
.other-title { font-size: .24rem; font-weight: bold; color: var(--orange); }
.other-row { margin-top: .1rem; font-size: .24rem; color: var(--text-sub); line-height: 1.6; }
.answer-row { display: flex; padding: .14rem 0; border-top: 1px solid #f5f5f5; }
.answer-row:first-child { border-top: none; }
.answer-index { width: .48rem; flex-shrink: 0; font-size: .24rem; color: var(--text-lighter); }
.answer-text { flex: 1; font-size: .26rem; color: #555; line-height: 1.6; word-break: break-all; }
.empty-answers { padding: .2rem 0; font-size: .24rem; color: var(--text-lighter); text-align: center; }

/* ---------- 闲市 ---------- */
.market-page { padding: 2.36rem 0 .4rem; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  padding: .16rem .2rem;
  display: flex; align-items: center;
}
.search-box {
  flex: 1;
  display: flex; align-items: center;
  background: #fff;
  border-radius: .36rem;
  padding: 0 .24rem;
  height: .68rem;
}
.search-icon { font-size: .26rem; margin-right: .12rem; }
.search-input { flex: 1; border: none; outline: none; font-size: .26rem; color: var(--text-main); background: transparent; }
.search-clear { font-size: .24rem; color: var(--text-lighter); padding: 0 .08rem; cursor: pointer; }
.publish-btn {
  margin-left: .2rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-size: .26rem; font-weight: bold;
  border-radius: .36rem;
  padding: 0 .28rem;
  height: .68rem; line-height: .68rem;
  cursor: pointer;
}
.category-bar {
  position: fixed; top: 1rem; left: 0; right: 0;
  z-index: 99;
  background: var(--bg);
  white-space: nowrap;
  padding: .08rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.category-item {
  display: inline-block;
  font-size: .26rem; color: var(--text-sub);
  background: #fff;
  border-radius: .28rem;
  padding: .1rem .3rem;
  margin-left: .2rem;
  cursor: pointer;
}
.category-item.active { color: #fff; background: var(--primary); font-weight: bold; }
.mini-toolbar {
  position: fixed; top: 1.6rem; left: 0; right: 0;
  z-index: 99;
  background: var(--bg);
  padding: .08rem .2rem .12rem;
  display: flex;
}
.mini-link { font-size: .24rem; color: var(--primary); background: var(--primary-bg); border-radius: .24rem; padding: .06rem .2rem; margin-right: .16rem; cursor: pointer; }
.waterfall { display: flex; padding: .08rem .12rem 0; }
.col { flex: 1; padding: 0 .08rem; }
.goods-card {
  background: #fff;
  border-radius: .16rem;
  overflow: hidden;
  margin-bottom: .16rem;
  padding-bottom: .16rem;
  cursor: pointer;
}
.goods-img { width: 100%; height: 3.43rem; background: #F0F2F7; object-fit: cover; }
.goods-img.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-lighter); font-size: .24rem;
}
.goods-title {
  font-size: .26rem; color: var(--text-main); line-height: 1.4;
  padding: .14rem .16rem 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: .72rem;
}
.goods-bottom { display: flex; align-items: center; justify-content: space-between; padding: .08rem .16rem 0; }
.goods-price { font-size: .32rem; font-weight: bold; color: var(--price-red); }
.goods-like { font-size: .22rem; color: var(--text-light); }
.goods-meta { display: flex; align-items: center; justify-content: space-between; padding: .06rem .16rem 0; }
.seller { font-size: .22rem; color: var(--text-light); max-width: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { font-size: .22rem; color: var(--text-lighter); }
.load-more { text-align: center; padding: .24rem 0; font-size: .24rem; color: var(--text-lighter); }
.fab {
  position: fixed;
  right: .32rem; bottom: .64rem;
  z-index: 100;
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  border-radius: .48rem;
  padding: .18rem .32rem;
  box-shadow: 0 .06rem .2rem rgba(255, 122, 69, .4);
  cursor: pointer;
}
.fab:active { transform: scale(.95); opacity: .9; }
.fab-icon { font-size: .3rem; margin-right: .08rem; }
.fab-text { font-size: .26rem; font-weight: bold; }

/* ---------- 商品详情 ---------- */
.goods-detail-page { padding-bottom: 1.4rem; }
.swiper { width: 100%; height: 7.5rem; overflow: hidden; position: relative; }
.swiper-track { display: flex; transition: transform .3s ease; height: 100%; }
.swiper-item { flex: 0 0 100%; height: 100%; cursor: pointer; }
.swiper-img { width: 100%; height: 100%; object-fit: cover; background: #F0F2F7; }
.swiper-dots { position: absolute; bottom: .2rem; left: 0; right: 0; display: flex; justify-content: center; }
.swiper-dot { width: .14rem; height: .14rem; border-radius: 50%; background: rgba(255,255,255,.5); margin: 0 .06rem; }
.swiper-dot.active { background: #fff; }
.no-img { width: 100%; height: 4rem; display: flex; align-items: center; justify-content: center; background: #F0F2F7; color: var(--text-light); font-size: .3rem; }
.detail-card { margin-top: .2rem; }
.price-row { display: flex; align-items: center; }
.price { font-size: .52rem; font-weight: bold; color: var(--price-red); }
.original-price { margin-left: .2rem; font-size: .26rem; color: var(--text-lighter); text-decoration: line-through; }
.cond-badge { margin-left: auto; font-size: .22rem; color: var(--orange); background: var(--orange-bg); border-radius: .2rem; padding: .04rem .16rem; }
.off-badge { margin-left: auto; font-size: .22rem; color: var(--text-light); background: #F0F2F7; border-radius: .2rem; padding: .04rem .16rem; }
.goods-detail-title { margin-top: .16rem; font-size: .34rem; font-weight: bold; color: #222; line-height: 1.5; }
.chips { margin-top: .2rem; display: flex; flex-wrap: wrap; }
.chip { font-size: .22rem; border-radius: .2rem; padding: .06rem .2rem; margin-right: .12rem; margin-bottom: .08rem; }
.category-chip { color: var(--primary); background: var(--primary-bg); }
.tag-chip { color: var(--orange); background: var(--orange-bg); }
.views-row { margin-top: .2rem; display: flex; justify-content: space-between; font-size: .24rem; color: var(--text-lighter); }
.section-title { font-size: .3rem; font-weight: bold; color: var(--text-main); margin-bottom: .16rem; }
.desc { font-size: .28rem; color: var(--text-sub); line-height: 1.7; white-space: pre-wrap; word-break: break-all; }
.seller-row { display: flex; align-items: center; }
.avatar {
  width: .88rem; height: .88rem; border-radius: 50%;
  background: var(--primary-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .44rem; flex-shrink: 0;
}
.seller-info { flex: 1; margin-left: .2rem; }
.seller-name { font-size: .3rem; font-weight: bold; color: var(--text-main); }
.seller-time { margin-top: .06rem; font-size: .24rem; color: var(--text-lighter); }
.heart {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 .12rem; cursor: pointer; border: none; background: none;
}
.heart-icon { font-size: .4rem; line-height: 1.2; }
.heart-text { font-size: .2rem; color: var(--text-light); }
.heart.liked .heart-text { color: var(--price-red); }
.contact-row { display: flex; align-items: center; }
.label { width: 1.6rem; font-size: .26rem; color: var(--text-light); }
.contact { flex: 1; font-size: .3rem; font-weight: bold; color: var(--primary); }
.copy-btn {
  flex-shrink: 0; font-size: .24rem; color: var(--primary);
  border: 1px solid var(--primary); border-radius: .24rem;
  padding: .06rem .28rem; cursor: pointer; background: none;
}
.tip { margin-top: .2rem; font-size: .22rem; color: var(--text-lighter); line-height: 1.6; }
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: #fff;
  padding: .16rem .24rem;
  padding-bottom: calc(.16rem + env(safe-area-inset-bottom));
  display: flex;
}
.want-btn {
  flex: 1;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-size: .32rem; font-weight: bold;
  border: none; border-radius: .44rem; line-height: 2.4;
}
.delete-btn {
  margin-left: .2rem; width: 2.2rem;
  background: #fff; color: #E64340;
  font-size: .3rem;
  border: 1px solid #E64340; border-radius: .44rem;
}
.off-sale-tip { flex: 1; text-align: center; font-size: .28rem; color: var(--text-light); line-height: 2.4; }

/* ---------- 发布商品 / 发布想法 表单 ---------- */
.form-page { padding: .2rem 0 2rem; }
.form-card { background: #fff; border-radius: .16rem; margin: 0 .2rem .2rem; padding: .28rem; }
.form-item { margin-bottom: .28rem; }
.form-item:last-child { margin-bottom: 0; }
.form-label { font-size: .26rem; color: var(--text-sub); margin-bottom: .12rem; }
.form-textarea {
  width: 100%; min-height: 1.6rem;
  background: var(--bg-input);
  border: none; border-radius: .12rem;
  padding: .18rem .24rem;
  font-size: .28rem;
  outline: none;
  font-family: inherit;
}
.section-title.gap { margin-top: .32rem; }
.img-grid { display: flex; flex-wrap: wrap; }
.img-cell { position: relative; margin-right: .2rem; margin-bottom: .2rem; }
.img { width: 2rem; height: 2rem; border-radius: .12rem; background: #F0F2F7; object-fit: cover; }
.img-del {
  position: absolute; top: -.14rem; right: -.14rem;
  width: .44rem; height: .44rem; line-height: .44rem;
  text-align: center; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .24rem; cursor: pointer;
}
.img-cover-tag {
  position: absolute; left: 0; bottom: 0;
  font-size: .2rem; color: #fff;
  background: rgba(0,0,0,.5);
  border-radius: 0 .12rem 0 .12rem;
  padding: .02rem .14rem;
}
.img-add {
  width: 2rem; height: 2rem;
  border-radius: .12rem;
  border: 2px dashed #C8CEDA;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-light);
  cursor: pointer;
}
.img-add-plus { font-size: .56rem; line-height: 1; }
.img-add-text { margin-top: .08rem; font-size: .24rem; }
.price-form { display: flex; }
.price-item { flex: 1; }
.price-item:first-child { margin-right: .2rem; }
.option-group { display: flex; flex-wrap: wrap; }
.option-pill {
  display: flex; align-items: center;
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: .28rem;
  padding: .1rem .24rem;
  margin-right: .16rem; margin-bottom: .16rem;
  cursor: pointer;
}
.option-pill.checked { background: var(--primary-bg); border-color: var(--primary); }
.option-pill input { accent-color: var(--primary); }
.option-pill-text { font-size: .26rem; color: var(--text-main); margin-left: .04rem; }
.form-tip { margin: .08rem .24rem; font-size: .24rem; color: var(--text-light); line-height: 1.6; }

/* ---------- 我的发布 / 收藏 / 管理 列表 ---------- */
.list-page { padding: .2rem 0 .6rem; }
.row-card {
  display: flex;
  background: #fff;
  border-radius: .16rem;
  padding: .24rem;
  margin: 0 .2rem .2rem;
  cursor: pointer;
}
.row-thumb { width: 1.6rem; height: 1.6rem; border-radius: .12rem; background: #F0F2F7; flex-shrink: 0; object-fit: cover; }
.row-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-lighter); font-size: .24rem; }
.row-info { flex: 1; margin-left: .24rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.row-title {
  font-size: .3rem; font-weight: bold; color: #222;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.row-meta { display: flex; align-items: center; justify-content: space-between; }
.row-price { font-size: .32rem; font-weight: bold; color: var(--price-red); }
.row-like { font-size: .22rem; color: var(--text-light); }
.row-footer { display: flex; align-items: center; justify-content: space-between; }
.row-seller { font-size: .22rem; color: var(--text-light); }
.status-badge { font-size: .22rem; border-radius: .2rem; padding: .04rem .16rem; }
.status-badge.on { color: var(--green); background: var(--green-bg); }
.status-badge.off { color: var(--text-light); background: #F0F2F7; }
.op-btn {
  font-size: .24rem; border-radius: .24rem;
  padding: .04rem .24rem;
  cursor: pointer; background: none;
}
.op-btn.edit { color: var(--primary); border: 1px solid var(--primary); }
.op-btn.delete { color: var(--price-red); border: 1px solid var(--price-red); }

/* ---------- 想法 ---------- */
.ideas-page { padding: .24rem .2rem 1.6rem; }
.ideas-topbar { display: flex; align-items: center; justify-content: space-between; padding: .08rem .08rem .24rem; }
.ideas-title { font-size: .4rem; font-weight: bold; color: #222; }
.ideas-sub { margin-top: .06rem; font-size: .24rem; color: var(--text-light); }
.admin-btns { display: flex; }
.admin-btn {
  font-size: .24rem; color: var(--primary); background: var(--primary-bg);
  border-radius: .24rem; padding: .08rem .24rem; margin-left: .12rem;
  cursor: pointer;
}
.admin-btn.publish { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
.idea-card {
  display: flex;
  background: #fff;
  border-radius: .16rem;
  padding: .28rem;
  margin-bottom: .2rem;
}
.idea-main { flex: 1; overflow: hidden; margin-right: .2rem; }
.idea-title-row { display: flex; align-items: center; }
.source-badge { flex-shrink: 0; margin-right: .12rem; font-size: .2rem; border-radius: .18rem; padding: .02rem .14rem; }
.source-badge.dev { color: var(--primary); background: var(--primary-bg); }
.source-badge.user { color: var(--orange); background: var(--orange-bg); }
.idea-title { flex: 1; font-size: .32rem; font-weight: bold; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge.considering { color: #888; background: #F0F2F7; }
.status-badge.adopted { color: var(--primary); background: var(--primary-bg); }
.status-badge.developing { color: var(--orange); background: var(--orange-bg); }
.status-badge.live { color: var(--green); background: var(--green-bg); }
.idea-desc {
  margin-top: .12rem; font-size: .26rem; color: var(--text-sub); line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.idea-tags { margin-top: .12rem; display: flex; flex-wrap: wrap; }
.idea-meta { margin-top: .12rem; display: flex; justify-content: space-between; font-size: .22rem; color: var(--text-lighter); }
.vote-area { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vote-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 1.32rem; height: 1.12rem;
  border-radius: .16rem;
  background: var(--bg-input); color: var(--text-sub);
  border: none; cursor: pointer;
}
.vote-btn:active { transform: scale(.94); opacity: .85; }
.vote-btn.voted { background: var(--primary); color: #fff; }
.vote-icon { font-size: .4rem; line-height: 1.2; }
.vote-text { margin-top: .04rem; font-size: .22rem; }
.vote-count { margin-top: .1rem; font-size: .26rem; font-weight: bold; color: var(--text-main); }

/* ---------- 管理页操作区 ---------- */
.manage-card { display: flex; align-items: center; }
.op-btns { flex-shrink: 0; display: flex; flex-direction: column; }
.op-btns .op-btn { margin-bottom: .12rem; }
.op-btns .op-btn:last-child { margin-bottom: 0; }

/* ---------- 订单（面交双确认） ---------- */
.orders-tabs { display: flex; margin: .1rem .3rem .24rem; }
.orders-tab {
  flex: 1;
  text-align: center;
  font-size: .28rem;
  color: var(--text-light);
  background: #fff;
  padding: .18rem 0;
  border-radius: .16rem;
  box-shadow: 0 .04rem .16rem rgba(0,0,0,.05);
}
.orders-tab + .orders-tab { margin-left: .2rem; }
.orders-tab.active { color: var(--primary); font-weight: bold; background: #fff; box-shadow: inset 0 0 0 .03rem var(--primary); }
.order-card { background: #fff; border-radius: .2rem; margin: 0 .3rem .24rem; padding: .24rem; box-shadow: 0 .04rem .16rem rgba(0,0,0,.05); }
.order-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .16rem; }
.order-status { font-size: .24rem; padding: .06rem .18rem; border-radius: .99rem; }
.order-status.pending { background: #FFF3E0; color: var(--orange); }
.order-status.completed { background: #E8F5E9; color: #2E9E5B; }
.order-status.cancelled { background: #F0F1F3; color: var(--text-light); }
.order-time { font-size: .22rem; color: var(--text-lighter); }
.order-goods { display: flex; align-items: center; }
.order-goods .row-info { flex: 1; }
.order-meet { margin-top: .16rem; font-size: .24rem; color: var(--text-light); background: var(--bg-input); border-radius: .1rem; padding: .12rem .16rem; }
.order-actions { display: flex; align-items: center; gap: .16rem; margin-top: .2rem; }
.order-actions .op-btn { flex: 1; }
.op-btn.primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; }
.op-btn.danger { color: var(--price-red); border: 1px solid var(--price-red); }
.order-waiting { flex: 1; font-size: .24rem; color: var(--text-light); }
.order-hint { margin-top: .16rem; font-size: .22rem; color: var(--text-lighter); }
.order-panel { background: #fff; border-radius: .2rem; margin: 0 .3rem .24rem; padding: .3rem; box-shadow: 0 .08rem .24rem rgba(0,0,0,.12); }
.op-title { font-size: .3rem; font-weight: bold; margin-bottom: .2rem; }
.op-price { font-size: .26rem; color: var(--text-light); margin-bottom: .2rem; }
.op-btn-row { display: flex; gap: .16rem; }
.op-btn-row .op-btn { flex: 1; }
.report-card { background: #fff; border-radius: .2rem; margin: 0 .3rem .24rem; padding: .24rem; box-shadow: 0 .04rem .16rem rgba(0,0,0,.05); }
.report-reason { font-size: .26rem; margin-bottom: .12rem; }
.report-detail { font-size: .24rem; color: var(--text-light); margin-bottom: .16rem; background: var(--bg-input); border-radius: .1rem; padding: .12rem .16rem; }
.report-link { display: inline-block; margin-top: .14rem; font-size: .24rem; color: var(--text-lighter); }
.invite-code { font-family: monospace; font-size: .3rem; font-weight: bold; letter-spacing: .05rem; color: var(--primary); }
.verify-badge { margin-left: .12rem; font-size: .22rem; color: #2E9E5B; font-weight: normal; }
.rating-badge { margin-left: .12rem; font-size: .22rem; color: #FF8A00; font-weight: normal; }
.star-row { display: flex; gap: .12rem; margin-bottom: .2rem; }
.star { font-size: .5rem; color: #D9DEE8; cursor: pointer; }
.star.on { color: #FFB800; }
.wish-badge { font-size: .24rem; color: var(--primary); font-weight: bold; }
.want-btn.chat { margin-left: .16rem; background: linear-gradient(135deg, #6D97FF, var(--primary)); }
.chat-last { font-size: .24rem; color: var(--text-lighter); margin-top: .08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 聊天详情 ---------- */
.chat-page { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }
.chat-goods { display: flex; align-items: center; margin: .2rem .3rem .12rem; background: #fff; border-radius: .16rem; padding: .16rem; box-shadow: 0 .04rem .16rem rgba(0,0,0,.05); }
.chat-goods .row-info { flex: 1; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 0 .3rem; }
.chat-day { text-align: center; font-size: .22rem; color: var(--text-lighter); margin: .24rem 0; background: #FFF9E8; border-radius: .99rem; padding: .12rem .2rem; }
.chat-row { margin-bottom: .24rem; display: flex; flex-direction: column; align-items: flex-start; }
.chat-row.mine { align-items: flex-end; }
.bubble { max-width: 72%; background: #fff; border-radius: .16rem; padding: .18rem .24rem; font-size: .28rem; word-break: break-all; }
.chat-row.mine .bubble { background: var(--primary); color: #fff; }
.bubble.type-meet_point { background: #FFF7E6; color: #8A6D1A; }
.chat-row.mine .bubble.type-meet_point { background: #FFF7E6; color: #8A6D1A; }
.chat-time { font-size: .2rem; color: var(--text-lighter); margin-top: .08rem; }
.offer-line { margin-bottom: .06rem; }
.offer-status { font-size: .24rem; opacity: .85; }
.offer-btns { margin-top: .12rem; display: flex; gap: .12rem; }
.mini-btn { border: none; border-radius: .1rem; padding: .12rem .24rem; font-size: .26rem; }
.mini-btn.ok { background: var(--primary); color: #fff; }
.mini-btn.no { background: #F0F1F3; color: var(--text-light); }
.chat-risk { margin: 0 .3rem .12rem; font-size: .22rem; color: var(--orange); background: #FFF3E0; border-radius: .1rem; padding: .1rem .16rem; }
.chat-quick { display: flex; gap: .16rem; padding: 0 .3rem .12rem; overflow-x: auto; }
.quick-chip { flex-shrink: 0; background: #fff; border: 1px solid #E3E7EF; border-radius: .99rem; padding: .1rem .2rem; font-size: .24rem; color: var(--text-light); }
.offer-chip { color: var(--orange); }
.chat-offer-bar { display: flex; gap: .16rem; margin: 0 .3rem .12rem; }
.chat-offer-bar .form-input { margin-bottom: 0; }
.chat-input-bar { display: flex; gap: .16rem; padding: .16rem .3rem; padding-bottom: calc(.16rem + env(safe-area-inset-bottom)); background: #fff; }
.chat-input-bar .form-input { flex: 1; margin-bottom: 0; }

/* ---------- 专题入口 / 消息角标 / 数据看板 ---------- */
.topic-row { display: flex; gap: .16rem; padding: 0 .3rem .2rem; }
.quick-chip.on { border-color: var(--primary); color: var(--primary); background: #EEF3FF; }
.badge { background: #E64340; color: #fff; font-size: .2rem; border-radius: .99rem; padding: .02rem .1rem; margin-left: .08rem; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem; margin: .2rem .3rem; }
.stat-card { background: #fff; border-radius: .16rem; padding: .3rem .2rem; text-align: center; box-shadow: 0 .04rem .16rem rgba(0,0,0,.05); }
.stat-num { font-size: .5rem; font-weight: bold; color: var(--primary); }
.stat-label { font-size: .24rem; color: var(--text-light); margin-top: .08rem; }
.cat-row { display: flex; justify-content: space-between; padding: .16rem 0; border-bottom: 1px solid #F0F1F3; font-size: .26rem; }
.cat-row:last-child { border-bottom: none; }
.cat-count { color: var(--text-light); }
.points-big { font-size: .6rem; font-weight: bold; color: var(--orange); text-align: center; }
.points-label { font-size: .24rem; color: var(--text-light); }
.reward-icon { font-size: .5rem; }
.reward-name { font-size: .26rem; margin-top: .08rem; }
.suggest-line { font-size: .22rem; color: var(--orange); margin-top: .16rem; }
.swap-line { margin-top: .12rem; font-size: .24rem; color: #8A6D1A; background: #FFF7E6; border-radius: .1rem; padding: .12rem .16rem; }

/* ---------- 响应式兜底：桌面端限制宽度 ---------- */
@media (min-width: 640px) {
  html { font-size: 85.3px; }
  body { background: #ECEDF1; }
  #app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
    box-shadow: 0 0 .4rem rgba(0,0,0,.1);
  }
  .topbar, .category-bar, .mini-toolbar, .tabbar, .bottom-bar, .submit-bar, .back-bar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
  }
}