/* ===================================================================
   缘圈 —— 组件样式
   =================================================================== */

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  border:1px solid var(--line);
  padding:14px;
  margin-bottom:12px;
}
.card.tight{padding:10px 12px;}
.card.flat{box-shadow:none;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.card-h h3{font-size:15.5px;font-weight:650;}
.card-h .more{font-size:12.5px;color:var(--sub);}

.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 2px 10px;font-size:14px;font-weight:700;color:var(--text-2);
}
.section-title .r{font-size:12.5px;font-weight:500;color:var(--sub);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:var(--r-full);border:1px solid transparent;
  background:var(--c-accent);color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;line-height:1.3;
}
.btn:active{transform:scale(.97);}
.btn.block{width:100%;padding:13px 16px;border-radius:var(--r-md);font-size:15px;}
.btn.sm{padding:6px 12px;font-size:12.5px;}
.btn.xs{padding:3px 9px;font-size:11.5px;font-weight:500;}
.btn.ghost{background:var(--card);color:var(--text);border-color:var(--line-strong);}
.btn.ghost.acc{color:var(--c-accent);border-color:var(--c-accent);}
.btn.soft{background:var(--c-accent-soft);color:var(--c-accent);}
.btn.soft.pink{background:var(--c-accent-2-soft);color:var(--c-accent-2);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.soft-danger{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);}
.btn.ok{background:var(--ok);color:#fff;}
.btn[disabled]{opacity:.45;pointer-events:none;}
.btn-link{background:none;border:none;color:var(--c-accent);font-size:13px;font-weight:500;cursor:pointer;padding:4px;}

/* ---------- 表单 ---------- */
.field{margin-bottom:13px;}
.field > label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px;}
.field .hint{font-size:11.5px;color:var(--sub);margin-top:5px;line-height:1.45;}
.input,.textarea,.select{
  width:100%;padding:11px 13px;border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--card-2);color:var(--text);
  outline:none;transition:.15s;font-size:15px;
}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--c-accent);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 14%,transparent);
}
.textarea{resize:vertical;min-height:92px;line-height:1.6;}
.select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;}
.switch{position:relative;width:46px;height:27px;border-radius:var(--r-full);
  background:var(--line-strong);border:none;cursor:pointer;transition:.2s;flex:none;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s;}
.switch.on{background:var(--c-accent);}
.switch.on::after{transform:translateX(19px);}

/* ---------- 选择片 ---------- */
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:none;padding:6px 13px;border-radius:var(--r-full);font-size:13px;
  background:var(--card);border:1px solid var(--line-strong);color:var(--text-2);
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.chip.on{background:var(--c-accent);border-color:var(--c-accent);color:#fff;font-weight:600;}
.chip.sm{font-size:12px;padding:4px 10px;}

/* 多选勾选 chip：左边一个真的方块，勾上时填色并显示 ✓。
   用户要求"用对勾表示是否选择，别只是按钮颜色变化" —— 颜色在偏色屏 / 强光下
   根本传不到，方块里有没有对勾是一眼可见的。 */
.chip.ck-chip{display:inline-flex;align-items:center;gap:6px;}
.chip.ck-chip .ck{
  width:15px;height:15px;border-radius:4px;flex:none;
  border:1.5px solid var(--line-strong);background:var(--bg-elev);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;color:transparent;transition:.15s;
}
.chip.ck-chip.on .ck{background:#fff;border-color:#fff;color:var(--c-accent);}

.tag{display:inline-block;padding:1.5px 8px;border-radius:var(--r-full);
  font-size:11px;font-weight:600;line-height:1.7;white-space:nowrap;}
.tag.acc{background:var(--c-accent-soft);color:var(--c-accent);}
.tag.pink{background:var(--c-accent-2-soft);color:var(--c-accent-2);}
.tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);}
.tag.danger{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger);}
.tag.gray{background:var(--card-2);color:var(--sub);border:1px solid var(--line);}

/* ---------- 头像 ---------- */
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;background:var(--c-accent);
  user-select:none;
}
.avatar.sm{width:28px;height:28px;font-size:12px;}
.avatar.lg{width:62px;height:62px;font-size:24px;}

/* ---------- 空状态 / 加载 ---------- */
.empty{
  padding:52px 20px;text-align:center;color:var(--sub);
}
.empty .ico{font-size:40px;opacity:.5;filter:grayscale(.4);}
.empty .t{margin-top:10px;font-size:14px;font-weight:600;color:var(--text-2);}
.empty .d{margin-top:5px;font-size:12.5px;line-height:1.6;}
.spinner{width:22px;height:22px;border:2.5px solid var(--line-strong);
  border-top-color:var(--c-accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto;}
.loading{padding:34px;text-align:center;}

/* ---------- 底部弹出层 ---------- */
.sheet-mask{position:fixed;inset:0;background:rgba(10,10,16,.42);z-index:200;
  display:flex;align-items:flex-end;justify-content:center;animation:pop .16s ease both;
  backdrop-filter:blur(2px);overscroll-behavior:contain;}
.sheet{
  width:100%;max-width:620px;background:var(--bg-elev);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px calc(18px + var(--safe-b));
  max-height:88vh;overflow-y:auto;animation:slideUp .24s cubic-bezier(.22,1,.36,1) both;
  /* 用户 v1.10.0：弹层滚到顶/底再继续滑，底层页面会被带着滚 —— 就是滚动链。
     这一行让"滚到头"就到头，不再把滑动量交给背后那一层。 */
  overscroll-behavior:contain;}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:6px auto 12px;}
.sheet-title{font-size:17px;font-weight:700;margin-bottom:4px;}
.sheet-desc{font-size:13px;color:var(--sub);margin-bottom:14px;line-height:1.6;}
.sheet-actions{display:flex;gap:10px;margin-top:18px;}
.sheet-actions .btn{flex:1;}

.dialog-mask{position:fixed;inset:0;background:rgba(10,10,16,.42);z-index:210;
  display:flex;align-items:center;justify-content:center;padding:26px;animation:pop .16s ease both;
  overscroll-behavior:contain;}
.dialog{width:100%;max-width:330px;background:var(--bg-elev);border-radius:var(--r-lg);
  padding:20px;text-align:center;box-shadow:var(--sh-2);animation:pop .2s ease both;}
.dialog h3{font-size:16.5px;font-weight:700;margin-bottom:8px;}
.dialog p{font-size:13.5px;color:var(--text-2);line-height:1.6;}
.dialog-actions{display:flex;gap:10px;margin-top:18px;}
.dialog-actions .btn{flex:1;}

/* ---------- Toast ----------
   ⚠️ z-index 必须**高于所有浮层**（弹层 200 / 对话框 210 / 选图确认层 470 /
   全屏查看器 500）。踩过的坑：原来是 400，比查看器低 ——
   "保存到相册"的提示是在全屏查看器里点的，于是提示**渲染出来了却被查看器盖住**，
   用户从来没见过它，一直以为这个功能没有提示。改 z-index 时别只看弹层。 */
.toast-host{position:fixed;left:0;right:0;top:calc(var(--safe-t) + 14px);z-index:900;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.toast{
  max-width:78%;padding:10px 18px;border-radius:var(--r-full);
  background:rgba(24,24,30,.92);color:#fff;font-size:13.5px;font-weight:500;
  box-shadow:var(--sh-2);animation:fadeUp .2s ease both;backdrop-filter:blur(8px);
  text-align:center;
}
html[data-theme="dark"] .toast{background:rgba(240,240,246,.95);color:#15151A;}
.toast.ok{background:var(--ok);color:#fff;}
.toast.err{background:var(--danger);color:#fff;}

/* ---------- 图片网格 ----------
   ⚠️ 一律小图。这里**不按原图比例铺满宽度**：
   手机竖拍的照片动辄 3:4 / 9:16，一旦按比例渲染，
   一条帖子就能占满一屏，翻起来极其难受。
   想看原尺寸点进去，走 UI.viewer() 全屏查看器。

   旧实现（已废弃）：
     .mediagrid.n1 img{aspect-ratio:auto;max-height:420px;object-fit:contain}
   就是它导致「一张图一个屏幕」。 */
.mediagrid{display:grid;gap:4px;justify-content:start;}
.mediagrid .mg-cell{
  position:relative;overflow:hidden;border-radius:var(--r-sm);
  background:var(--card-2);cursor:zoom-in;
}
.mediagrid .mg-cell img{width:100%;height:100%;object-fit:cover;display:block;}

/* 缩略图档：列表卡片 / 评论 / 失物，固定 84px 小方图（单图 112px） */
.mediagrid.thumb{grid-template-columns:repeat(3,84px);}
.mediagrid.thumb .mg-cell{width:84px;height:84px;}
.mediagrid.thumb.only1{grid-template-columns:112px;}
.mediagrid.thumb.only1 .mg-cell{width:112px;height:112px;}

/* 详情档：帖子详情页主图，只大一号（单图 168px），仍然限死尺寸 */
.mediagrid.detail{grid-template-columns:repeat(3,108px);}
.mediagrid.detail .mg-cell{width:108px;height:108px;}
.mediagrid.detail.only1{grid-template-columns:168px;}
.mediagrid.detail.only1 .mg-cell{width:168px;height:168px;}

/* 评论里再收一档，免得抢了正文的视觉重心 */
.cmt-media .mediagrid.thumb{grid-template-columns:repeat(3,72px);}
.cmt-media .mediagrid.thumb .mg-cell{width:72px;height:72px;}
.cmt-media .mediagrid.thumb.only1{grid-template-columns:104px;}
.cmt-media .mediagrid.thumb.only1 .mg-cell{width:104px;height:104px;}

.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.ph-grid .cell{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;
  background:var(--card-2);cursor:pointer;}
.ph-grid .cell img{width:100%;height:100%;object-fit:cover;}
.ph-grid .cell .dupflag{position:absolute;right:4px;top:4px;background:rgba(229,72,77,.92);
  color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:var(--r-full);}
/* 只是"像"而不是同一张 —— 用中性色，别搞得像出错 */
.ph-grid .cell .dupflag.soft{background:rgba(20,16,20,.55);font-weight:600;}
/* 每张图右上角的管理入口（只有本人/管理员看得到） */
.ph-grid .cell .cellmenu{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(20,16,20,.5);color:#fff;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px;}

/* ---------- 查重：我这版 vs 库里那版 ---------- */
/* 刻意不做"谁更清晰"的判断，只把两张并排摆出来让人自己看 */
.cmp-row{display:flex;align-items:center;gap:8px;margin-top:8px;
  background:var(--card-2);border-radius:var(--r-sm);padding:8px;}
.cmp-cell{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;}
.cmp-vs{flex:none;font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.5px;}

/* ---------- 款式 / 相册的图片小卡 ---------- */
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:8px;}
.style-grid .s-cell{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--card-2);
  border:1px solid var(--line);}
.style-grid .s-cell img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.style-grid .s-cell .s-name{font-size:10.5px;padding:3px 5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.style-grid .s-cell .s-empty{width:100%;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;font-size:20px;color:var(--sub);}

/* ---------- 缩略图上传格 ---------- */
.upgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
/* ⚠️ u-cell 是「缩略图 + 底下一行小字」的列容器，方图是里面的 u-thumb。
   小字写的是这张图**实际入库**的像素尺寸和体积 —— 用户据此判断
   自己传的到底是不是原图（去跟相册里那张的「详情」对数字）。 */
.upgrid .u-cell{position:relative;min-width:0;}
.upgrid .u-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--card-2);}
.upgrid .u-thumb img{width:100%;height:100%;object-fit:cover;}
.upgrid .u-cap{margin-top:3px;font-size:9.5px;line-height:1.35;color:var(--sub);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.upgrid .u-cap.raw{color:var(--c-accent);font-weight:700;}
.upgrid .u-del{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:none;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.upgrid .u-add{aspect-ratio:1;border-radius:var(--r-sm);border:1.5px dashed var(--line-strong);
  background:var(--card-2);display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--sub);cursor:pointer;}
/* 勾了「原图上传」的图，左下角标一下 —— 让用户确认自己传的确实是原图 */
.upgrid .u-raw{position:absolute;left:3px;bottom:3px;background:rgba(232,54,138,.94);color:#fff;
  font-size:8.5px;font-weight:700;padding:1px 4px;border-radius:var(--r-full);letter-spacing:.2px;}

/* ---------- 数据条 ---------- */
.stat{display:flex;gap:8px;}
.stat-item{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 8px;text-align:center;}
.stat-item .v{font-size:19px;font-weight:750;letter-spacing:-.5px;}
.stat-item .k{font-size:11px;color:var(--sub);margin-top:1px;}

.bar{height:7px;border-radius:var(--r-full);background:var(--card-2);overflow:hidden;
  border:1px solid var(--line);}
.bar > i{display:block;height:100%;border-radius:var(--r-full);background:var(--c-accent);}

/* ---------- 倒计时 ---------- */
.cd-banner{
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--c-accent) 0%,var(--c-accent-2) 100%);
  color:#fff;box-shadow:0 6px 22px color-mix(in srgb,var(--c-accent) 32%,transparent);
  position:relative;overflow:hidden;
}
.cd-banner::after{content:"";position:absolute;right:-28px;top:-38px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.14);}
.cd-banner .k{font-size:12px;opacity:.92;font-weight:500;}
.cd-banner .t{font-size:18px;font-weight:750;margin-top:2px;letter-spacing:-.3px;}
.cd-nums{display:flex;gap:6px;margin-top:11px;}
.cd-num{background:rgba(255,255,255,.2);border-radius:8px;padding:4px 0;min-width:44px;text-align:center;
  backdrop-filter:blur(4px);}
.cd-num b{display:block;font-size:17px;font-weight:750;line-height:1.2;font-variant-numeric:tabular-nums;}
.cd-num span{font-size:9.5px;opacity:.88;}

/* 横幅上的操作按钮。
   ⚠️ 不能用 .btn.ghost 那套：横幅是粉色渐变底，而 .btn.ghost 的背景是
   var(--card)（浅色主题下就是纯白），再配上给深色底准备的白字，
   按钮就成了"有框没字"的空按钮 —— 能点，但什么都看不见。
   这里统一压一层深色半透明底 + 白字 + 半透明描边，深浅主题都可读。 */
.cd-banner .btn{
  background:rgba(0,0,0,.24);color:#fff;
  border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(4px);
}
.cd-banner .btn:active{background:rgba(0,0,0,.36);}

/* ---------- 列表行 ---------- */
.list-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);}
.list-row:last-child{border-bottom:none;}
.list-row .lr-ico{width:34px;height:34px;border-radius:10px;background:var(--c-accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.list-row .lr-t{font-size:14.5px;font-weight:600;}
.list-row .lr-d{font-size:12px;color:var(--sub);margin-top:1px;}
.list-row .lr-arrow{color:var(--sub);font-size:15px;flex:none;}

/* ---------- 帖子 ---------- */
.post-h{display:flex;gap:10px;align-items:center;}
.post-body{margin-top:10px;font-size:14.5px;line-height:1.66;white-space:pre-wrap;word-break:break-word;}
.post-foot{display:flex;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);}
.pact{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--sub);
  background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--r-full);}
.pact.on{color:var(--c-accent);background:var(--c-accent-soft);}
.pact:active{background:var(--card-2);}
.post-foot.wrap{flex-wrap:wrap;}

/* 广场顶部的「有新版本」小条（紧挨首页公告） */
.update-bar{cursor:pointer;border:1px solid var(--c-accent-2);
  background:linear-gradient(180deg,var(--c-accent-2-soft),var(--c-accent-soft));}
.update-bar:active{opacity:.85;}

/* ---------- 头像裁剪层（v1.10.0，见 js/core/cropper.js） ---------- */
/* 深色底是刻意的：裁剪照片时，周围越暗，注意力越在中间那张脸上 */
.crop-mask{position:fixed;inset:0;z-index:520;background:rgba(8,8,12,.96);
  display:flex;flex-direction:column;color:#fff;overscroll-behavior:contain;}
.crop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-t) + 12px) 16px 6px;}
.crop-head .btn-link{color:#fff;font-size:14.5px;}
.crop-title{font-size:16px;font-weight:700;}
.crop-body{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0;}
.crop-stage{position:relative;overflow:hidden;border-radius:4px;background:#1a1a20;
  touch-action:none;cursor:grab;}
.crop-img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;
  user-select:none;-webkit-user-drag:none;transform-origin:center;will-change:transform;}
/* 圆形虚线框：圈外靠一圈超大的 box-shadow 压暗，再由 .crop-stage 的
   overflow:hidden 裁掉 —— 所以框外是暗的、框内是亮的，一眼看得出"哪块是头像"。 */
.crop-ring{position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(255,255,255,.92);
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;}
.crop-foot{padding:4px 20px calc(22px + var(--safe-b));}
.crop-zoom{width:100%;accent-color:var(--c-accent);}
.crop-tip{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.72);text-align:center;}

/* 进别人主页的链接（头像 / 昵称都套这层，见 UI.linkUser） */
.ulink{display:inline-flex;align-items:center;gap:4px;}
.ulink.tappable{cursor:pointer;}
.ulink.tappable:active{opacity:.6;}

/* 收藏按钮 —— **只在帖子详情页**出现。
   用户 v1.10.0："未收藏状态下太小了，看不清" → 做成带文字的大胶囊，
   ☆/★ 放大到 18px，边框画出来，没收藏的时候也一眼看得见。 */
.fav-btn{display:inline-flex;align-items:center;gap:6px;
  padding:6px 15px;border-radius:var(--r-full);
  border:1px solid var(--line-strong);background:var(--card);
  color:var(--sub);font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;}
.fav-btn .ico{font-size:18px;line-height:1;}
.fav-btn:active{background:var(--card-2);}
.fav-btn.on{color:var(--c-accent);border-color:var(--c-accent-2);background:var(--c-accent-soft);}

/* ---------- 无料卡 ---------- */
.goods-cover{display:flex;gap:10px;}
.goods-cover .thumb{width:88px;height:88px;border-radius:var(--r-md);overflow:hidden;
  background:var(--card-2);flex:none;border:1px solid var(--line);}
.goods-cover .thumb img{width:100%;height:100%;object-fit:cover;}
.goods-meta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text-2);min-width:0;}
.goods-meta .l{display:flex;gap:5px;align-items:center;}
/* 字段名用中文写出来（时间 / 地点 / 领取条件 …），不再用表情符号代指 ——
   用户原话是"别用表情包，看不懂"。min-width 让右边那列对齐，读起来像一张表。
   4.2em 是按最长的四字标签（领取条件）算的，够用且不浪费宽度。 */
.goods-meta .l .k{flex:none;min-width:4.2em;color:var(--sub);}
.stockbar{margin-top:9px;}

/* ---------- 瀑布流 ---------- */
.wf{column-count:2;column-gap:7px;}
.wf .wf-item{break-inside:avoid;margin-bottom:7px;border-radius:var(--r-md);overflow:hidden;
  background:var(--card-2);position:relative;cursor:pointer;border:1px solid var(--line);}
.wf .wf-item img{width:100%;display:block;}
.wf .wf-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;font-size:11px;}

/* ---------- 分类九宫格 ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 14px;box-shadow:var(--sh-1);cursor:pointer;transition:.15s;position:relative;overflow:hidden;}
.tool-card:active{transform:scale(.975);}
.tool-card .tc-ico{font-size:23px;line-height:1;margin-bottom:9px;display:block;}
.tool-card .tc-t{font-size:14.5px;font-weight:650;}
.tool-card .tc-d{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.45;}
.tool-card .tc-badge{position:absolute;right:11px;top:11px;font-size:10px;font-weight:700;
  background:var(--c-accent);color:#fff;border-radius:var(--r-full);padding:1px 7px;}
/* 站外入口那两张卡是 <a>，得把链接的默认样式抹掉，否则会变蓝带下划线。
   右上角的 ↗ 是"这个会离开应用"的记号 —— 整张卡的样子和模块卡保持一致。 */
a.tool-card{display:block;text-decoration:none;color:inherit;}
.tool-card .tc-link{position:absolute;right:11px;top:9px;font-size:12px;line-height:1;
  color:var(--sub);opacity:.85;}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{text-align:left;color:var(--sub);font-weight:600;padding:6px 6px;border-bottom:1px solid var(--line);
  font-size:11.5px;}
.tbl td{padding:7px 6px;border-bottom:1px solid var(--line);}
.tbl tr:last-child td{border-bottom:none;}

/* ---------- 图片查看器 ---------- */
.viewer{position:fixed;inset:0;background:rgba(8,8,12,.96);z-index:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;animation:pop .16s ease both;}
.viewer img{max-width:100%;max-height:78vh;object-fit:contain;}
.viewer .vbar{position:absolute;bottom:calc(20px + var(--safe-b));left:0;right:0;
  display:flex;gap:10px;justify-content:center;}
.viewer .vclose{position:absolute;top:calc(var(--safe-t) + 12px);right:16px;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  border:none;font-size:18px;cursor:pointer;}
.viewer .vinfo{position:absolute;top:calc(var(--safe-t) + 16px);left:16px;color:#fff;font-size:12.5px;
  max-width:65%;line-height:1.5;}
.viewer .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28);}

/* ---------- 首次引导 ---------- */
.guide{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:26px 20px;}
.guide .brand{font-size:30px;font-weight:800;letter-spacing:-.8px;
  background:linear-gradient(120deg,var(--c-accent),var(--c-accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.guide .sub{color:var(--sub);font-size:13.5px;margin-top:6px;line-height:1.6;}

/* ---------- 选图确认层（微信式：选完图当场决定要不要原图） ---------- */
.pick-confirm{
  position:fixed;inset:0;z-index:470;background:var(--bg);
  display:flex;flex-direction:column;animation:pop .16s ease both;
}
.pick-confirm .pc-head{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 12px) 16px 10px;
  border-bottom:1px solid var(--line);
}
.pick-confirm .pc-head .btn-link{font-size:15px;color:var(--sub);padding:0;}
.pick-confirm .pc-count{flex:1;text-align:center;font-size:15px;font-weight:700;}
.pick-confirm .pc-head-pad{width:34px;flex:none;}
.pick-confirm .pc-grid{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px;
  align-content:start;
}
.pick-confirm .pc-cell{
  position:relative;border-radius:10px;overflow:hidden;background:var(--card-2);
}
.pick-confirm .pc-cell img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
}
.pick-confirm .pc-noimg{
  width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:22px;
}
/* 体积写在图上，压一层半透明底，深色浅色都看得清 */
.pick-confirm .pc-cap{
  position:absolute;left:0;right:0;bottom:0;padding:3px 6px 4px;
  font-size:11px;font-weight:600;color:#fff;text-align:right;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.pick-confirm .pc-foot{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px calc(11px + var(--safe-b));
  border-top:1px solid var(--line);background:var(--bg-elev);
}
.pick-confirm .pc-orig{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 12px 5px 9px;border-radius:var(--r-full);
  background:var(--card);border:1px solid var(--line-strong);
  color:var(--text-2);font-size:13px;font-weight:600;cursor:pointer;
}
.pick-confirm .pc-orig.on{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.pick-confirm .pc-orig .ck{
  width:16px;height:16px;border-radius:4px;flex:none;
  border:1.5px solid var(--line-strong);background:var(--bg-elev);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;color:transparent;
}
.pick-confirm .pc-orig.on .ck{background:#fff;border-color:#fff;color:var(--c-accent);}
.pick-confirm .pc-size{font-size:13px;font-weight:700;color:var(--text);}
.pick-confirm .pc-tip{font-size:11.5px;color:var(--sub);margin-top:3px;}
.pick-confirm .pc-warn{font-size:11.5px;color:var(--danger);margin-top:3px;font-weight:600;}

/* ---------- 下拉刷新指示器 ---------- */
.pull-ind{
  position:fixed;left:50%;top:calc(var(--safe-t) + 8px);z-index:400;
  transform:translate(-50%,-62px);opacity:0;
  display:flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--r-full);
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  font-size:12.5px;font-weight:600;color:var(--text-2);
  pointer-events:none;white-space:nowrap;
}
.pull-ind .pi-spin{
  width:12px;height:12px;border-radius:50%;flex:none;
  border:2px solid var(--line-strong);border-top-color:var(--c-accent);
}
.pull-ind.spin .pi-spin{animation:spin .7s linear infinite;}

/* ===================================================================
   社交（v1.9.0）：个人主页 / 关注粉丝 / 收藏 / 消息
   =================================================================== */

/* 自定义头像：用 background-image 铺满，盖住原来的首字底色 */
.avatar.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent;}

/* 昵称下面那行 UID（按注册名次发的） */
.uid-line{font-size:11.5px;color:var(--sub);letter-spacing:.3px;margin-top:2px;}

/* 主页上的资料简介 —— 用户要求"简介应直接显示在主页"，所以给它正经的位置 */
.bio-line{font-size:13px;line-height:1.5;margin-top:6px;word-break:break-word;color:var(--text-2);}
.bio-line.dim{color:var(--sub);}

/* 动态 / 关注 / 粉丝 / 收藏 —— 一排可点的数字格 */
.gridnav{display:flex;gap:4px;}
.gn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:none;border:none;padding:8px 0;cursor:pointer;color:inherit;
  border-radius:var(--r-md);transition:background .15s;
}
.gn-item:active{background:var(--c-accent-soft);}
.gn-item b{font-size:18px;font-weight:750;letter-spacing:-.5px;}
.gn-item span{font-size:11.5px;color:var(--sub);}

/* 统计格变可点：给个按压反馈，让人知道"这格能点开" */
.stat-item.tap{cursor:pointer;transition:transform .12s,background .15s;}
.stat-item.tap:active{transform:scale(.97);background:var(--c-accent-soft);}

/* 右上角的设置齿轮：只有图标、没有文字 */
.gear-btn{font-size:20px;line-height:1;padding:0 4px;}

/* 消息列表项（有去处的整条可点，点了去对应的帖子 / 失物） */
.msg-item:active{background:var(--c-accent-soft);}

/* 收藏列表里无料 / 失物的小缩略图 */
.fav-thumb{
  width:46px;height:46px;border-radius:var(--r-md);overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-accent-soft);font-size:20px;
}
.fav-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* 关注 / 粉丝列表：整行可点进主页 */
.user-row{cursor:pointer;}
.user-row:active{background:var(--c-accent-soft);}