/*
 * Nephelune治愈所 · Web 端视觉基底（theme.css）
 *
 * 本文件是从 public/index.html 的 <style> 块**逐字外移**而来，内容一字未改。
 * 外移的原因：游戏通道页（games/*.html）需要复用同一套视觉，
 * 而复制一份样式会造成「改一处漏一处」。现在 index.html 与 games 页共用这一份。
 *
 * ⚠️ 这里只放「跨页共用的基底」：CSS 变量、重置、天空背景、卡片、按钮、合规件。
 *    单页专属样式仍写在各页的 <style> 里。
 */
/* ============================================================
 * 主题色变量（--tint-*）
 * ------------------------------------------------------------
 * 由 public/skin.js 从当前皮肤的 from / to / accent 推导后写进 :root。
 * 这里给的是默认皮肤（云端）的值 —— 万一 skin.js 没加载，界面也得是完整的，
 * 不能变成一堆没颜色的裸框。
 *
 * 用法约定（改样式时照这个来，别再写死颜色）：
 *   --tint-deep   主色：按钮、选中态、我发的气泡、进度条
 *   --tint-accent 装饰色：小色条、头像环、强调点
 *   --tint-wash   页面底：白 + 一点点主题色
 *   --tint-soft   卡片内小块底 / 选中底
 *   --tint-line   描边：卡片、输入框、chip、分割线
 *   --tint-strong 激活描边
 * 旧的 --brand / --line 保留名字但改指主题色，历史样式自动跟着换肤。
 * ============================================================ */
/* ============================================================
 * 配色：克莱因蓝 + 黑金 + 白（主理人 2026-10-11 16:39 定稿）
 * ------------------------------------------------------------
 * 「是黑金色，不是黑色跟金色，还是要保留原来的深蓝，但是要酷一点，
 *   深蓝和黑金一起，蓝改成克莱因蓝。」
 *
 * → 主色是**克莱因蓝 #002FA7**（原来的深蓝换得更酷，不退场）；
 *   **黑金是一整道渐变**（--ink-gold），用在 ＋ 这种要压得住的地方，
 *   不是"黑块 + 金块"各摆一个；
 *   底色仍然是白。整站不要刷成黑金 —— 黑金是质感，不是全部。
 * ============================================================ */
:root{
  --klein:#002FA7;        /* 克莱因蓝：主色 */
  --klein-deep:#001B63;   /* 更深的蓝：天空顶、渐变另一端 */
  --ink:#0B0B0D;          /* 墨黑 */
  --gold:#C9A227;         /* 香槟金 */
  /* 黑金 = 一道渐变，黑里透金，不是两块纯色 */
  --ink-gold:linear-gradient(135deg,#0B0B0D 0%,#2A2110 46%,#C9A227 100%);
  --gold-soft:#F3E9D2;
  --paper:#FFFFFF;
  --paper-2:#F7F6F3;

  /* 默认皮肤 = 克莱因蓝（与 shared/game-kind/theme.js 的 skyDeep 同色，两边要同步） */
  --tint-deep:#002FA7; --tint-deep-dk:#001B63; --tint-mid:#1A4BC8;
  --tint-accent:#C9A227;
  --tint-wash:#FAFAF8; --tint-soft:#F0F3FA; --tint-line:#D8E0F0;
  --tint-strong:#002FA7; --tint-shadow:rgba(0,47,167,.22);

  /* 天空：克莱因蓝的夜空，压到黑金收尾 —— 云是金的 */
  /* 天空：克莱因蓝压到近黑，再收在黑金那道暖光上（--sky-1 必须等于 theme.js 的 skyDeep） */
  --sky-1:#002FA7; --sky-2:#001B63; --sky-3:#12101A; --sky-4:#2A2110;
  --sky-cloud-light:#C9A227; --sky-cloud-pale:#E6D9B8;
  --label-text:#FFFFFF; --label-shadow:rgba(0,0,0,.45);
  --card:#FFFFFF; --text:#1A1A1A; --text-sub:#8A8A8A;
  /* --brand / --line 必须指向 --tint-*，写死会在换肤时一半新一半旧（test-09 拦着） */
  --brand:var(--tint-deep); --brand-dark:var(--tint-deep-dk);
  --line:var(--tint-line); --warn:#B3261E;
  /* 造型语言（主理人 2026-10-11 深夜给的参考图）：
     卡片大圆角、按钮与标签一律胶囊、未选中的 tab 无边框纯文字。
     凡是方框都往圆的走 —— 「那些按钮都不是要么就是一个方框，
     人家都是那种椭圆形的那种感觉。四角都是圆弧的。」 */
  --r-card:18px;   /* 卡片 */
  --r-soft:14px;   /* 小卡 / 输入区 */
  --r-pill:999px;  /* 胶囊：按钮、标签、搜索、tab */

}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Helvetica,sans-serif;
  color:var(--text); background:var(--tint-wash); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 蓝天背景 ---------- */
.sky-bg{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 26%,var(--sky-3) 56%,var(--sky-4) 100%);
}
.sky-bg::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 76% 30% at 22% 18%, rgba(123,203,253,.55), transparent 70%),
    radial-gradient(ellipse 64% 24% at 78% 36%, rgba(184,228,255,.42), transparent 70%),
    radial-gradient(ellipse 70% 22% at 46% 86%, rgba(123,203,253,.34), transparent 72%);
}
.spark{position:absolute;color:#FFFDF0;font-size:14px;line-height:1;pointer-events:none;
  text-shadow:0 0 8px rgba(255,253,240,.9),0 0 18px rgba(255,243,196,.6);
  animation:tw 3.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}

/* ---------- 通用 ---------- */
.xy-label{color:var(--label-text);font-weight:900;line-height:1.25;letter-spacing:.04em;text-align:center;
  text-shadow:0 4rpx 16rpx var(--label-shadow)}
.wrap{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;position:relative}
/* 卡片：白底 + 主题色描边，顶部压一条极淡的主题色渐隐带 ——
   这样卡片既是白的，又带皮肤的色，不会像以前那样一整片死白。 */
/* 卡片：白底 + 12px 圆角 + 一层几乎看不见的投影。
   不再是渐变顶 + 彩色描边 + 大圆角 —— 那种"糖果卡"是老版本的观感。 */
.card{
  background:#fff;
  border:0;
  border-radius:var(--r-card);box-shadow:0 1px 3px rgba(0,0,0,.05);padding:16px;
}
/* 按钮上的字一律居中 —— 主理人 2026-10-12：「申请原创认证这个字在条框里面，
   位置要在中间，不是在左边。」（按钮本来就该居中，之前漏了 text-align） */
.btn{display:block;width:100%;border:none;border-radius:999px;background:var(--brand);color:#fff;
  font-size:16px;font-weight:600;padding:14px 0;cursor:pointer;text-align:center}
.btn:active{background:var(--brand-dark)}
/* 「申请原创认证」：长条按钮，字横竖都要在正中间
   （主理人：「申请原创认证这个字要在这个长条的中间」） */
.vf-apply{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 16px;line-height:1.2}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text-sub)}
input,textarea{font-family:inherit;font-size:16px;border:1px solid var(--line);border-radius:var(--r-soft);
  padding:12px 14px;width:100%;background:#fff;color:var(--text);outline:none}
input:focus,textarea:focus{border-color:var(--brand)}

/* ---------- 登录页 ---------- */
#login{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 24px 88px;z-index:50}
.login-hero{position:relative;z-index:2;text-align:center;margin-bottom:8px}
.login-hero img{width:220px;max-width:70vw;display:block;margin:0 auto;
  filter:drop-shadow(0 10px 24px rgba(255,233,168,.35));animation:fl 3.2s ease-in-out infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.login-title{font-size:34px;margin-top:10px}
.login-sub{color:rgba(255,255,255,.85);font-size:14px;margin-top:10px;line-height:1.7;text-align:center}
.login-box{position:relative;z-index:2;width:100%;max-width:360px;margin-top:28px}
.login-box input{margin-bottom:12px;text-align:center;letter-spacing:.06em}
.hint{color:#FFF3C4;font-size:13px;margin-top:12px;min-height:20px;text-align:center}
.hint.err{color:#FFD9D0}
.foot-note{position:relative;z-index:2;color:rgba(255,255,255,.7);font-size:12px;margin-top:28px;letter-spacing:.14em}

/* ---------- 登录：两种登法 / 四份条款 / 人机验证（2026-10-12 第 3 批）----------
   主理人原话：「前面做一个很正式的…隐私用户的条款，法律的条款，隐私政策，
   数据隐私的保护，以及我们的登录嘛，要接入…可以直接的用手机号或者是大家
   直接用微信账号登录，用手机号的话就是要有验证码，然后验证要点击验证，
   然后要有避免有机器人的那种出现的那个验证的一个程序顺序。」
   → 登录页是深色天空底，所以这一块的字都是浅色；条款入口常驻在页脚之上。 */
.lg-tabs{position:relative;z-index:2;display:flex;gap:8px;margin-bottom:14px}
.lg-t{flex:1;text-align:center;padding:9px 0;border-radius:var(--r-pill);font-size:14px;
  font-weight:600;color:rgba(255,255,255,.72);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);cursor:pointer}
.lg-t.on{background:#fff;color:var(--brand);border-color:#fff}
.lg-pane{position:relative;z-index:2;width:100%}
.lg-row{display:flex;gap:8px;align-items:stretch}
.lg-row input{flex:1;min-width:0;margin-bottom:12px}
.lg-vc{flex:none;width:106px;margin-bottom:12px;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-soft);background:rgba(255,255,255,.16);color:#fff;font-size:13px;
  font-weight:600;cursor:pointer}
.lg-vc:disabled{opacity:.55;cursor:default}
.lg-agree{display:flex;gap:8px;align-items:flex-start;text-align:left;
  color:rgba(255,255,255,.82);font-size:12px;line-height:1.75;margin:2px 0 14px;cursor:pointer}
.lg-agree b{color:#FFF3C4;font-weight:600;text-decoration:underline}
.lg-ck{flex:none;display:block;width:16px;height:16px;margin-top:3px;border-radius:5px;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);position:relative}
.lg-ck.on{background:#fff;border-color:#fff}
.lg-ck.on:after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--brand);font-size:12px;font-weight:700}
.lg-note{color:rgba(255,255,255,.74);font-size:12px;line-height:1.8;margin-top:10px;text-align:left}
.lg-note b{color:#FFF3C4;font-weight:600}
.lg-wx{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;
  border-radius:var(--r-pill);padding:13px 0;background:#07C160;color:#fff;font-size:16px;
  font-weight:600;cursor:pointer}
.wx-ic{font-size:18px;line-height:1}
.lg-links{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 14px;margin-top:16px}
.lg-links span{color:rgba(255,255,255,.78);font-size:12px;text-decoration:underline;cursor:pointer}

/* 人机验证：点选式 —— 按顺序点格子里的字，点对了才放行。
   不依赖任何第三方、不往外发一个字节。 */
.cap-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none}
.cap{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(320px,88vw);background:var(--card);border-radius:var(--r-card);
  box-shadow:0 12px 40px rgba(0,0,0,.28);z-index:201;display:none;overflow:hidden;padding-bottom:12px}
.cap-mask.on,.cap.on{display:block}
.cap-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--text)}
.cap-x,.cap-r{flex:none;font-size:13px;font-weight:400;color:var(--text-sub);cursor:pointer}
.cap-r{text-align:right}
.cap-tip{padding:12px 14px 10px;font-size:13px;color:var(--text-sub)}
.cap-tip em{font-style:normal;font-weight:700;color:var(--brand);letter-spacing:.14em}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 14px}
.cap-c{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;
  background:var(--tint-wash);overflow:hidden;cursor:pointer}
.cap-c span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  font-size:26px;font-weight:700;color:var(--brand);opacity:.88;line-height:1}
.cap-c.pick{border-color:var(--brand);box-shadow:inset 0 0 0 2px rgba(0,47,167,.16)}
.cap-c .ord{position:absolute;right:4px;top:3px;width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:flex;
  align-items:center;justify-content:center;z-index:2}
.cap-ft{padding:10px 14px 0;font-size:12px;color:var(--text-sub);min-height:20px;line-height:1.7}
.cap-ft.ok{color:var(--brand);font-weight:600}

/* 四份条款 / 关于小云：正式文件页 —— 一条一条分节，能从头读到尾 */
.lg-tabs2{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;
  border-bottom:1px solid var(--line);background:var(--card)}
.lg-tabs2::-webkit-scrollbar{display:none}
.lg-t2{flex:none;padding:7px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--text-sub);background:var(--paper-2);cursor:pointer;white-space:nowrap}
.lg-t2.on{background:var(--brand);color:#fff}
.lg-doc{padding:14px 16px 40px}
.lg-doc-hd{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.lg-doc-sub{font-size:12px;color:var(--text-sub);line-height:1.8;margin-bottom:14px}
.lg-sec{margin-top:18px}
.lg-sec-h{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;
  padding-left:9px;border-left:3px solid var(--brand);line-height:1.4}
.lg-sec-p{font-size:13px;line-height:1.95;color:var(--text-sub);white-space:pre-wrap}
.lg-sec-p b{color:var(--text);font-weight:600}
.lg-li{font-size:13px;line-height:1.95;color:var(--text-sub);padding-left:16px;position:relative}
.lg-li:before{content:'·';position:absolute;left:6px;color:var(--brand);font-weight:700}
.lg-meta{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.9;color:var(--text-sub)}
.lg-meta b{color:var(--text)}

/* ---------- 合规：AI 身份提示 / 热线入口 / 免责声明（文案一律取自 /compliance.js，禁止硬编码） ---------- */
.chat-notice{background:#FFF8E7;border-bottom:1px solid #FFE6B8;padding:9px 14px;
  font-size:12px;line-height:1.6;color:#6B5330}
.chat-notice .cn-ai{font-weight:700}
.chat-notice .cn-hot{margin-top:2px}
a.hot{color:var(--warn);font-weight:700;text-decoration:none}
.ai-tag{display:block;margin-top:6px;font-style:normal;font-size:10px;
  color:var(--text-sub);opacity:.85;letter-spacing:.02em}
/* 免责声明：页面底部固定常驻。
   ⚠️ z-index 必须高于二级页面容器 #pages(80)，否则打开商城/日记时会被整块盖住 ——
      合规件被盖住等同于没有，这是不可接受的。
   2026-10-11 主理人改口径：「本服务为娱乐的情绪陪伴…这个你前面首页和广场这些
   都不涉及，涉及的地方再阐释这条提示就可以。」
   → 节点本身照旧常驻在 #app / #pages 之外，JS 从不碰它的显示状态；
     只在 body 上标一个「当前这一屏涉不涉及」，由 CSS 决定它出不出现。
     涉及处 = 陪伴（小云 / 树洞 / 人工服务）、客服、测试报告。 */
.disclaimer{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 56px);
  z-index:90;background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  padding:6px 16px;font-size:11px;line-height:1.5;color:var(--text-sub);text-align:center;
  display:none}
body[data-involve="1"] .disclaimer{display:block}
/* 还没进主体（登录那一屏）也算涉及：它是这个服务的门 */
body:not([data-involve]) .disclaimer{display:block}

/* ---------- 主体 ---------- */
#app{display:none;flex:1;flex-direction:column;padding-bottom:104px}
/* 顶栏：一条 48px 的窄栏，品牌在左、我的头像在右，下面一根浅灰分隔线。
   不做渐变头图、不做满屏星星、不放头像大图 —— 主流 App 的顶栏是导航，不是海报。 */
.head{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 14px;background:#fff;border-bottom:1px solid #F0F0F0;overflow:hidden}
.head::before{display:none}
.head-brand{font-size:17px;font-weight:700;color:#111;letter-spacing:.6px;line-height:1.2}
.body{padding:16px 16px 0;display:flex;flex-direction:column;gap:14px}
/* 栏目标题左侧一根主题色小竖条：把皮肤色做成"装饰"而不是"背景" */
.sec-title{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;color:#111}
.sec-title span{font-size:12px;font-weight:400;color:#9A9A9A}

.moods{display:flex;justify-content:space-between;gap:6px}
.mood{flex:1;text-align:center;background:#fff;border:0;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);padding:10px 2px 8px;cursor:pointer;transition:.15s}
.mood.on{box-shadow:0 0 0 1.5px #111}
.mood.on em{color:#111;font-weight:600}
.mood img{width:100%;max-width:54px;display:block;margin:0 auto 4px}
.mood em{font-style:normal;font-size:11px;color:#9A9A9A}

.trend{display:flex;align-items:flex-end;gap:6px;height:96px;padding-top:6px}
.trend div{flex:1;background:linear-gradient(180deg,var(--tint-accent),var(--tint-deep));
  border-radius:6px 6px 2px 2px;min-height:6px;position:relative}
.trend div i{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-style:normal;font-size:10px;color:var(--text-sub)}

.care{background:#FFF8E7;border:1px solid #FFE6B8;border-radius:14px;padding:14px;font-size:14px;line-height:1.7;color:#6B5330}

.chat{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:78%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.6;word-break:break-word}
.bubble.them{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(43,43,60,.06)}
.bubble.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.composer{display:flex;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid var(--line)}
.composer input{flex:1;border-radius:999px}
.composer button{width:64px;border:none;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:600}

.diary-item{border-bottom:1px solid var(--line);padding:12px 0}
.diary-item:last-child{border:none}
.diary-date{font-size:11px;color:var(--text-sub);margin-bottom:4px}
.diary-text{font-size:14px;line-height:1.7;white-space:pre-wrap}

.row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border:none}
.switch{width:46px;height:26px;border-radius:999px;background:#D8D8E4;position:relative;transition:.2s;cursor:pointer}
.switch.on{background:var(--brand)}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch.on i{left:23px}

/* ---------- 底部导航 ---------- */
/* 主流 App 的底栏：一条浅灰分隔线，图标在上文字在下，选中是深色加粗。
   不要顶部彩色小横条、不要彩色投影 —— 那是老一套的皮肤味。 */
/* ---------- 发现：通道入口卡 ---------- */
.entry{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:var(--tint-soft);border:1px solid var(--line);cursor:pointer;transition:.15s}
.entry:active{background:var(--tint-line)}
.entry.soon{opacity:.62;cursor:default}
.entry img{width:56px;height:56px;border-radius:12px;object-fit:cover;display:block;flex:none}
.entry-body{flex:1;min-width:0}
.entry-title{font-size:15px;font-weight:700}
.entry-sub{font-size:12px;color:var(--text-sub);margin-top:3px;line-height:1.5}
.entry-go{font-size:20px;color:var(--text-sub);opacity:.55;flex:none}
.explore-note{font-size:11px;color:var(--text-sub);line-height:1.6;margin-top:10px}

/* ============================================================
 * 2026-10-03 增补：5-tab 结构（首页 / 陪伴 / 游戏 / 社区 / 我的）
 * + 二级页面（日记 / 商城 / 装扮 / 测试）
 * 说明：原「发现」页已改为「游戏」页与「社区」页，样式同步新增。
 * ============================================================ */

/* ---------- 头部：用户头像与 ID ---------- */
.head-me{flex:1;min-width:0}
.head-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.92);display:block;cursor:pointer;
  box-shadow:0 0 0 2px var(--tint-shadow)}
.head-id{position:relative;z-index:2;margin-top:6px;font-size:11px;
  color:rgba(255,255,255,.72);letter-spacing:.08em}

/* ---------- 首页快捷入口 ---------- */
.quick{display:flex;gap:8px}
.quick-item{flex:1;background:#fff;border:0;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:14px 4px 12px;text-align:center;cursor:pointer;transition:.15s}
.quick-item:active{background:#F5F5F5}
.quick-item b{display:block;font-size:20px;font-weight:400;line-height:1;margin-bottom:8px;color:#444}
.quick-item span{font-size:11px;color:#666}
.quick-item i{position:absolute}

/* ---------- 我的：名片 ---------- */
.me-card{display:flex;align-items:center;gap:14px}
.me-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;display:block;
  border:2px solid #fff;box-shadow:0 0 0 3px var(--tint-accent),0 4px 14px rgba(43,43,60,.12)}
/* 头像框：用多重 box-shadow 描边，不额外出图（省主包体积，也省设计师资源） */
.fr-f-star{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(150,180,255,.75),0 4px 14px rgba(43,43,60,.12)!important}
.fr-f-moon{box-shadow:0 0 0 2px rgba(255,252,240,.95),0 0 0 7px rgba(255,236,190,.45),
  0 4px 16px rgba(43,43,60,.12)!important}
.fr-f-rain{box-shadow:0 0 0 2px #EAF4FF,0 0 0 5px rgba(120,170,225,.55),
  0 4px 14px rgba(43,43,60,.12)!important}
.me-info{flex:1;min-width:0}
.me-nick{font-size:17px;font-weight:800}
.me-id{font-size:11px;color:var(--text-sub);margin-top:4px;letter-spacing:.06em}
.me-bio{font-size:12px;color:var(--text-sub);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-edit{flex:none;font-size:12px;color:var(--brand);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;cursor:pointer}

/* ---------- 入口列表 ---------- */
.rows{margin-top:2px}
.linkrow{display:flex;align-items:center;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.linkrow:last-child{border:none}
.linkrow b{font-size:16px;font-weight:400;width:22px;text-align:center;flex:none}
.linkrow .lr-t{flex:1;min-width:0}
.linkrow .lr-v{font-size:12px;color:var(--text-sub);flex:none}
.linkrow .lr-go{font-size:18px;color:var(--text-sub);opacity:.5;flex:none}

/* ---------- 游戏中心：云朵进度 ---------- */
.cloudbar{border-radius:14px;padding:14px;color:#fff;position:relative;overflow:hidden}
.cloudbar-top{display:flex;align-items:baseline;justify-content:space-between;position:relative;z-index:2}
.cloudbar-n{font-size:20px;font-weight:900;letter-spacing:.04em}
.cloudbar-s{font-size:12px;opacity:.9}
.cloudbar-track{margin-top:10px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.28);overflow:hidden;position:relative;z-index:2}
.cloudbar-fill{height:100%;border-radius:999px;background:rgba(255,255,255,.92);transition:width .4s}
.cloudbar-hint{margin-top:8px;font-size:12px;opacity:.92;line-height:1.6;position:relative;z-index:2}

/* ---------- 游戏中心：栏目 ---------- */
.coltabs{display:flex;gap:8px;margin-top:4px}
.coltab{flex:1;text-align:center;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:9px 4px;cursor:pointer;transition:.15s}
.coltab b{display:block;font-size:15px;font-weight:400;margin-bottom:2px}
.coltab span{font-size:11px;color:var(--text-sub)}
.coltab.on{background:var(--brand);border-color:var(--brand)}
.coltab.on span{color:rgba(255,255,255,.9)}
.coldesc{font-size:12px;color:var(--text-sub);margin:10px 2px 0;line-height:1.6}

/* ---------- 场景图鉴 ---------- */
.scenes{display:flex;gap:8px;flex-wrap:wrap}
.scene{width:calc(33.33% - 6px);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);position:relative}
.scene-img{height:56px;display:block}
.scene-name{font-size:11px;text-align:center;padding:6px 2px;color:var(--text-sub)}
.scene.lock .scene-img{filter:grayscale(1) opacity(.45)}
.scene.lock .scene-name{color:#A8A8BC}
.scene-cur{position:absolute;top:4px;right:4px;font-size:10px;color:#fff;
  background:rgba(43,43,60,.55);border-radius:999px;padding:2px 6px}

/* ---------- 社区 ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 14px;font-size:12px;color:var(--text-sub);cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

.people{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px}
.person{flex:none;width:76px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:10px 6px}
.person img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;margin:0 auto}
.person-n{font-size:12px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-b{margin-top:6px;font-size:11px;border:1px solid var(--brand);color:var(--brand);
  border-radius:999px;padding:3px 0;cursor:pointer}
.person-b.on{background:var(--tint-soft);color:var(--text-sub);border-color:var(--line)}

.post{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.post-head{display:flex;align-items:center;gap:10px}
.post-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;flex:none}
.post-who{flex:1;min-width:0}
.post-nick{font-size:14px;font-weight:700}
.post-bio{font-size:11px;color:var(--text-sub);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-act{flex:none;display:flex;gap:6px}
.mini{border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:999px;
  padding:5px 10px;font-size:11px;cursor:pointer}
.mini.grey{border-color:var(--line);color:var(--text-sub)}
.mini.on{background:var(--tint-soft);color:var(--text-sub);border-color:var(--line)}
.post-text{font-size:14px;line-height:1.75;margin-top:10px;white-space:pre-wrap}
.post-foot{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:11px;color:var(--text-sub)}
.post-tag{background:var(--tint-soft);border-radius:999px;padding:3px 8px}
.post-like{cursor:pointer}
.post-like.on{color:var(--brand);font-weight:700}

.fab{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 118px);
  width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:24px;line-height:52px;text-align:center;box-shadow:0 8px 20px rgba(91,123,240,.35);
  z-index:70;cursor:pointer}

/* ---------- 二级页面 ---------- */
#pages{position:absolute;inset:0;z-index:80;display:none;flex-direction:column;
  background:var(--tint-wash);overflow-y:auto}
.pbody{padding:14px 16px 120px;display:flex;flex-direction:column;gap:14px}

/* ---------- 商城 ---------- */
.shop-grid{display:flex;flex-wrap:wrap;gap:10px}
.shop-item{width:calc(50% - 5px);background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.shop-item img{width:100%;height:118px;object-fit:cover;display:block}
/* 渐变背景没有图可放，用色块预览 */
.shop-bgprev{width:100%;height:118px;display:block}
.shop-b{padding:10px 11px 12px;display:flex;flex-direction:column;flex:1}
.shop-n{font-size:14px;font-weight:700}
.shop-d{font-size:11px;color:var(--text-sub);line-height:1.6;margin-top:4px;flex:1}
.shop-btm{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-size:16px;font-weight:800;color:var(--brand)}
.price em{font-style:normal;font-size:11px;font-weight:400;margin-right:1px}
.buy{border:none;background:var(--brand);color:#fff;border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer}
.buy:active{background:var(--brand-dark)}
.stock{font-size:11px;color:var(--text-sub);margin-top:6px}

/* 二级页面里 tabBar 已隐藏，结算条贴底；免责声明在其上方常驻 */
.cartbar{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom);
  z-index:85;background:#fff;border-top:1px solid var(--line);padding:10px 16px;
  display:flex;align-items:center;gap:12px}
.cartbar-n{flex:1;font-size:13px;color:var(--text-sub)}
.cartbar-n b{font-size:17px;color:var(--brand);font-weight:800}
.cartbar button{border:none;background:var(--brand);color:#fff;border-radius:999px;
  padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer}

/* ---------- 装扮 ---------- */
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick-item{width:calc(33.33% - 7px);text-align:center}
.pick-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block;
  border:2px solid transparent}
.pick-item.on img{border-color:var(--brand)}
.pick-n{font-size:11px;color:var(--text-sub);margin-top:5px}
.pick-item.on .pick-n{color:var(--brand);font-weight:700}

/* 自定义头像：左边预览，右边说明与按钮 */
.custom-av{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px;
  border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.5)}
.custom-av img,.custom-av-ph{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  display:block;border:2px solid var(--line)}
.custom-av img.on{border-color:var(--brand)}
.custom-av-ph{display:flex;align-items:center;justify-content:center;font-size:26px;
  color:var(--text-sub);background:rgba(0,0,0,.03)}
.custom-av-t{flex:1;min-width:0}
.custom-av-h{font-size:14px;font-weight:700}
.custom-av-s{font-size:11px;color:var(--text-sub);line-height:1.6;margin:3px 0 8px}
.custom-av-b{display:flex;gap:8px}
/* 迷你按钮：卡片内并排用，不能用整行的 .btn */
.btn-mini{display:inline-block;width:auto;padding:8px 16px;font-size:13px;border-radius:999px;
  border:none;background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.btn-mini:active{background:var(--brand-dark)}
.btn-mini.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text-sub)}

/* ---------- 测试 ---------- */
.q-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px}
.q-step{font-size:11px;color:var(--text-sub);letter-spacing:.08em}
.q-text{font-size:19px;font-weight:800;margin:10px 0 16px;line-height:1.5}
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;
  border-radius:14px;padding:13px 14px;font-size:15px;margin-bottom:10px;cursor:pointer}
.opt:active{background:var(--tint-soft);border-color:var(--tint-strong)}
.opt.on{background:var(--tint-soft);border-color:var(--tint-strong);font-weight:700}

.result{text-align:center;padding:8px 0}
.result img{width:132px;height:132px;border-radius:24px;object-fit:cover;display:block;margin:0 auto}
.result-t{font-size:22px;font-weight:900;margin-top:14px}
.result-d{font-size:14px;color:var(--text-sub);line-height:1.8;margin-top:10px}
.result-note{font-size:11px;color:var(--text-sub);line-height:1.7;margin-top:12px}

/* ---------- 联系客服：像微信里跟人说话那样，一条一条往下排 ----------
   主理人 2026-10-12 深夜原话：「这个界面应该做成一个很长的，就像跟 AI 聊天的
   一个真正的就像微信里跟人对话的一条一条消息一条消息这样排，而不是说小云客服
   上面一栏下面一栏什么说点什么。」
   → 上面是能滚的对话流，底下一条输入栏；不再是两块卡片。 */
.cs-chat{display:flex;flex-direction:column;height:calc(100vh - 52px);background:#F5F6F8}
.cs-scroll{flex:1;overflow-y:auto;padding:12px 12px 4px;-webkit-overflow-scrolling:touch}
.cs-day{text-align:center;font-size:11px;color:#9AA3B2;margin:10px 0 14px}
.cs-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px}
.cs-row.you{justify-content:flex-start}
.cs-row.me{flex-direction:row-reverse}
.cs-row.sys{justify-content:center;margin-bottom:14px}
.cs-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--tint-deep),var(--tint-line))}
.cs-av.me{background:#D8DEE8;color:#5A6472}
.cs-col{min-width:0;max-width:74%}
.cs-nm{font-size:11px;color:#8A93A6;margin:0 2px 5px}
.cs-row.me .cs-nm{text-align:right}
.cs-bub{position:relative;padding:10px 12px 10px;border-radius:14px;font-size:14px;
  line-height:1.7;word-break:break-word;white-space:pre-wrap;background:#fff;
  border:1px solid var(--tint-line);border-top-left-radius:4px;
  box-shadow:0 1px 2px rgba(20,30,60,.04)}
.cs-row.me .cs-bub{background:var(--brand);color:#fff;border-color:var(--brand);
  border-top-left-radius:14px;border-top-right-radius:4px;
  padding-right:52px}
.cs-tm{position:absolute;right:9px;bottom:6px;font-size:10px;color:#B0B6C2;
  text-decoration:none;font-style:normal}
.cs-row.me .cs-tm{color:rgba(255,255,255,.72)}
.cs-sys{display:inline-block;max-width:90%;padding:6px 12px;border-radius:999px;
  background:rgba(120,132,155,.1);color:var(--text-sub);font-size:11px;
  line-height:1.6;text-align:center}
.cs-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 10px}
.cs-q{border:1px solid var(--tint-line);background:#fff;color:var(--tint-deep);
  font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer}
.cs-q:active{background:var(--tint-soft)}
.cs-bar{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#fff;
  border-top:1px solid var(--line)}
.cs-bar input{flex:1;min-width:0;height:38px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:#F5F6F8;font-size:14px;color:var(--text)}
.cs-bar input:focus{outline:none;border-color:var(--tint-line);background:#fff}
.cs-send{flex:none;height:38px;padding:0 18px;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.cs-send:active{opacity:.85}
.cs-tip{padding:8px 14px 12px;font-size:11px;color:var(--text-sub);line-height:1.7;
  text-align:center;background:#F5F6F8}

.empty{text-align:center;color:var(--text-sub);font-size:13px;padding:24px 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;background:rgba(43,43,60,.92);
  color:#fff;font-size:14px;padding:10px 18px;border-radius:999px;z-index:200;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

/* ============================================================
 * 2026-10-08 社区改版：活动海报位 + 分类切换
 * ============================================================ */
.promo-box{display:flex;flex-direction:column;gap:10px}
.promo-item{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#fff;min-height:88px;
  display:flex;align-items:center;padding:14px;gap:12px}
.promo-item .pi-tag{position:absolute;left:0;top:0;background:var(--brand);color:#fff;
  font-size:10px;font-weight:700;padding:3px 8px;border-bottom-right-radius:10px}
.promo-item img.pi-img{width:100%;height:120px;object-fit:cover;display:block}
.promo-item.hasimg{flex-direction:column;align-items:stretch;padding:0;min-height:0}
.promo-item.hasimg .pi-b{padding:12px 14px}
.pi-t{font-size:15px;font-weight:800;line-height:1.5}
.pi-s{font-size:12px;color:var(--text-sub);line-height:1.7;margin-top:4px}

/* 分类切换：社区 / 陪伴 共用 */
.cate-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 2px;-webkit-overflow-scrolling:touch}
.cate{flex:none;border:0;background:#F5F5F5;border-radius:6px;
  padding:6px 13px;font-size:13px;color:#666;cursor:pointer;white-space:nowrap;line-height:1.4}
.cate.on{background:#111;color:#fff;font-weight:500}
.cate{position:relative}
/* 陪伴「回声」栏的未读小红点：有没看的才出现 */
.accomp-dot{position:absolute;top:2px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);display:none}
.cate.on .accomp-dot{background:#fff}

/* ---------- 陪伴 = 会话列表（微信那种：小云是一栏，其余全是好友） ----------
   主理人 2026-10-11：「陪伴那一个页面肯定不是 AI…AI 只做成微信那种私聊中的
   一个栏目，一个横栏，其他全部都是好友。」顶部栏目做「全部 / 关注 / 未读」。 */
.chat-list{flex:1;min-height:0;overflow-y:auto;background:var(--paper);
  -webkit-overflow-scrolling:touch}
.cl-row{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#fff;
  border-bottom:1px solid #F5F5F5;cursor:pointer;position:relative}
.cl-row:active{background:#FAFAFA}
.cl-av{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--tint-soft)}
.cl-av.ai{border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--gold)}
.cl-av.sub{border-radius:8px;background:var(--tint-soft);color:var(--tint-deep);
  font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cl-body{flex:1;min-width:0}
.cl-top{display:flex;align-items:center;gap:6px}
.cl-name{font-size:15px;font-weight:500;color:#111;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cl-tag{flex:none;font-size:10px;line-height:15px;padding:0 4px;border-radius:3px;
  color:var(--gold);border:1px solid var(--gold)}
.cl-time{margin-left:auto;flex:none;font-size:11px;color:#B4B4B4}
.cl-sub{font-size:12px;color:#9A9A9A;margin-top:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cl-sep{height:8px;background:var(--paper-2)}
/* 未读的颜色口径见文件末尾（2026-10-11 晚改回红点：主理人「未读用红点表示」） */

/* 会话页：点开列表里某一条才出现，顶部一条返回，下面是聊的内容 */
.thread-body{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;background:var(--paper-2)}

/* ---------- ＋ 创作页：分明的类别 ----------
   主理人 2026-10-11：「加号的话它要创造一些东西…要像别的软件一样，
   加好选择性的创作一些视频那些，有一些分明类别…下面也不要有这些全部日常
   这些类别，说点什么也不要，小云商城这些都不在加号里。」 */
.post-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.post-kind{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:12px;
  background:var(--paper-2);cursor:pointer;border:1.5px solid transparent;transition:.18s}
.post-kind.on{border-color:var(--tint-deep);background:var(--tint-soft)}
.post-kind .pk-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:19px;color:#fff;
  background:var(--ink-gold)}
.post-kind .pk-t{font-size:14px;font-weight:600;color:#111;line-height:1.35}
.post-kind .pk-s{font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.4}
.post-note{font-size:12px;line-height:1.8;color:var(--text-sub)}

/* ---------- 我的 = 个人主页（QQ 空间那种：有背景，头像压在背景左下角） ----------
   主理人 2026-10-11：「我的上面的主页上面那一栏应该大一点…直接就上面装出
   一个 QQ 空间那种类型的，有背景有属于个人的背景，但是背景要和头像融为一体，
   头像在背景的左下角。」 */
.me-top{position:relative;margin:-16px -16px 0;overflow:visible}
.me-cover{height:180px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--sky-1) 0%,var(--sky-2) 46%,var(--sky-4) 100%)}
.me-cover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.38) 100%)}
.me-av-big{position:absolute;left:16px;bottom:-26px;width:74px;height:74px;border-radius:50%;
  object-fit:cover;background:var(--tint-soft);border:3px solid #fff;z-index:2;
  box-shadow:0 3px 10px rgba(0,0,0,.18)}
.me-meta{position:absolute;left:100px;bottom:8px;right:14px;z-index:2;text-align:left}
.me-meta .me-nick{font-size:18px;font-weight:700;color:#fff;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.4)}
.me-meta .me-id{font-size:11px;color:rgba(255,255,255,.82);margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* 编辑资料 + 我的个人空间（2026-10-12 晚：两个并排在右上角） */
.me-btns{position:absolute;right:12px;top:10px;z-index:3;display:flex;gap:6px}
.me-top .me-edit,.me-top .me-space{position:static;font-size:12px;
  padding:5px 12px;border-radius:14px;background:rgba(255,255,255,.9);color:#111;font-weight:600;
  cursor:pointer;white-space:nowrap}
.me-top .me-space{background:rgba(255,255,255,.72);color:#0B2A6B}
/* 个性签名跟着名字和 ID（主理人：「在名字和 ID 的下面，在星星关注粉丝的上面」） */
.me-meta .me-bio{font-size:12px;color:rgba(255,255,255,.9);margin-top:3px;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 原创认证的黄 V：压在头像框右下角（主理人：「头像框旁边打个勾，或者是黄 V」） */
.me-vb{position:absolute;left:70px;bottom:-26px;width:20px;height:20px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:12px;font-style:normal;font-weight:800;
  display:flex;align-items:center;justify-content:center;z-index:3;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* ---- 标签与资料条：整排挪到封面外面那一层（2026-10-12 主理人：「摆的太高了…
   名字、ID 和个人签名放在原来的位置，标签往下挪一格挪一层」） ----
   白底上要看得见，所以配色跟封面里那套反着来：淡蓝底 + 品牌蓝字。 */
.me-tagbar{display:flex;flex-direction:column;gap:8px;
  padding:11px 14px 13px;background:#fff;border-bottom:1px solid #F2F2F2}
.me-tagbar .me-tags,.me-tagbar .me-info{margin-top:0}
.me-tagbar .me-tag{background:var(--tint-soft);color:var(--tint-deep)}
.me-tagbar .me-tag.mbti{background:rgba(201,162,39,.16);color:#8A6D12}
.me-tagbar .me-tag.vf{background:rgba(201,162,39,.16);color:#8A6D12}
.me-tagbar .me-tag.none{background:#F4F5F8;color:var(--text-sub);font-weight:400}
.me-tagbar .me-tag i{opacity:.55}
.me-tagbar .me-if{background:#fff;border:1px solid var(--line);box-shadow:none}
.me-tagbar .me-if i{background:var(--tint-soft)}

/* 简介下面那一排小横条（自己的标签 / MBTI / 原创认证）—— 跟首页顶部那些 Tab 一个样子 */
.me-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.me-tag{font-size:11px;line-height:1;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);color:#0B2A6B;font-weight:600;
  display:inline-flex;align-items:center;gap:3px}
.me-tag.mbti{background:rgba(201,162,39,.92);color:#fff}
.me-tag.vf{background:var(--gold);color:#fff}
.me-tag.vf b{font-style:normal;font-size:11px}
.me-tag.none{background:rgba(255,255,255,.5);color:rgba(255,255,255,.85);font-weight:400}
.me-tag i{font-style:normal;font-size:10px;opacity:.6;cursor:pointer}
/* 生日 / 性别 / 职业 / 地区 / 学校（按设置里的开关显示）
   ⚠️ 主理人 2026-10-12：「它跟性格标签不能长得一样，性别生日地区职业学校
   那一排要稍微带点颜色、正规一点。」
   → 资料条 = 圆角小<b>方块</b> + 白底 + 品牌蓝字 + 小标签头；
     性格标签 = 胶囊 + 纯色底。一眼能分开，不会串成同一排同一种东西。 */
.me-info{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.me-if{font-size:11px;line-height:1;padding:5px 9px;border-radius:8px;
  background:rgba(255,255,255,.95);color:var(--tint-deep);font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 1px 3px rgba(0,20,60,.14)}
.me-if i{font-style:normal;font-size:10px;font-weight:700;color:var(--tint-deep);
  background:var(--tint-soft);border-radius:5px;padding:2px 4px;opacity:1}
/* 编辑资料里的标签编辑器 */
.tg-now{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tg-now .me-tag{background:var(--tint-soft);color:var(--tint-deep)}
.tg-now .me-tag.mbti{background:rgba(201,162,39,.16);color:#8A6D12}
.tg-now .me-tag.vf{background:rgba(201,162,39,.16);color:#8A6D12}
/* 创建标签：一整条输入框（不是一个胶囊 + 一个按钮并排）
   主理人 2026-10-12：「那个创建标签的输入框是一个胶囊，它应该是一条框。」
   → 外框一条圆角矩形，输入区无边框嵌在里面，右边「贴上」是这条框自带的一段。 */
.tg-add{display:flex;align-items:stretch;margin:0 0 10px;border:1px solid var(--line);
  border-radius:var(--r-soft);background:#fff;overflow:hidden}
.tg-add input{flex:1;min-width:0;margin:0;border:none;border-radius:0;background:transparent;
  padding:12px 14px;font-size:16px}
.tg-add input:focus{border:none;box-shadow:none}
/* ⚠️ 「贴上」这颗同时带着 .btn —— .btn 是 width:100% + padding:14px 0 + 圆角胶囊，
   不盖掉就会把整条撑歪（主理人：「它要一个长条形的，不是胶囊，你这个都错位了」）。
   所以这里显式改成：宽度自适应、上下零内边距、跟外框一样高、直角。 */
.tg-add-b{flex:none;width:auto;min-width:64px;display:flex;align-items:center;
  justify-content:center;padding:0 18px;margin:0;border-radius:0;border:none;
  background:var(--tint-deep);color:#fff;font-size:13px;font-weight:600;
  align-self:stretch;line-height:1}
.tg-pick-h{font-size:12px;color:var(--text-sub);margin:12px 0 7px}
.tg-pick-h span{font-size:11px;opacity:.8}
.tg-pick,.tg-mbti{display:flex;flex-wrap:wrap;gap:6px}
.tg-p,.tg-m{font-size:12px;padding:6px 11px;border-radius:999px;background:#F5F6F8;
  color:#444;cursor:pointer}
.tg-m{font-size:11px;padding:5px 9px;min-width:44px;text-align:center;font-weight:600}
.vf-on{padding:10px 12px;border-radius:12px;background:rgba(201,162,39,.12);
  font-size:13px;line-height:1.7;color:#7A5F10}
.vf-on b{color:#8A6D12}
.vf-pend{padding:10px 12px;border-radius:12px;background:var(--tint-soft);
  font-size:13px;line-height:1.7;color:var(--text)}
/* 个人主页「手账」那一栏：一本本小书 */
.me-book{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.me-book:last-child{border-bottom:0}
.me-bk-cv{flex:none;width:64px;height:88px;border-radius:6px 10px 10px 6px;position:relative;
  box-shadow:0 3px 8px rgba(0,0,0,.14);overflow:hidden}
.me-bk-cv .me-bk-n{position:absolute;left:8px;right:8px;bottom:9px;font-size:10px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1.3}
.me-bk-stitch{position:absolute;left:8px;top:12px;bottom:12px;width:1px;
  border-left:1px dashed rgba(255,255,255,.55)}
.me-bk-b{flex:1;min-width:0;padding-top:2px}
.me-bk-t{font-size:14px;font-weight:600;color:#111;display:flex;align-items:center;gap:6px}
.me-bk-p{font-size:11px;color:var(--text-sub);margin-top:3px}
.me-bk-ths{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;min-height:26px}
.me-bk-th{width:26px;height:26px;border-radius:7px;background:var(--tint-soft);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal}
.me-bk-th.t{background:#fff;border:1px solid var(--line);font-size:12px;color:#333}
.me-bk-th.f{border:1px dashed var(--line);background:transparent}
.me-bk-th.d{background:var(--tint-soft);border-radius:4px}
.me-bk-none{font-size:11px;color:var(--text-sub)}
/* 我的个人空间：风景图 + 听歌的标识 */
.sp-body{padding-bottom:24px}
.sp-cover{position:relative;height:200px;margin:-16px -16px 0;overflow:hidden}
.sp-cover-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.sp-cover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%)}
.sp-cover-in{position:absolute;left:16px;bottom:14px;right:14px;z-index:2}
.sp-who{font-size:17px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.sp-sign{font-size:12px;color:rgba(255,255,255,.92);margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* 2026-10-12 晚重做：封面右下角一个「点一下换风景」的小提示，
   点了立刻从底下弹出选风景 / 用自己照片（不再做成换风景那一栏 tab）。 */
.sp-tap{position:absolute;right:12px;bottom:12px;z-index:3;font-size:11px;color:#fff;
  background:rgba(17,24,39,.45);border-radius:999px;padding:5px 11px;font-weight:600}
/* 头像框 + 昵称 + ID（主理人：「下面就是头像框，像主页一样的」） */
.sp-me{display:flex;align-items:center;gap:12px;padding:14px}
.sp-avw{position:relative;flex:none;width:66px;height:66px}
.sp-av{width:66px;height:66px;border-radius:50%;object-fit:cover;background:var(--tint-soft);
  display:block}
.sp-me-b{flex:1;min-width:0}
.sp-nm{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px}
.sp-id{font-size:12px;color:var(--text-sub);margin-top:5px}
/* 个性签名：跟着名字和 ID，跟主页那一栏同一个排法 */
.sp-bio{font-size:12px;line-height:1.6;color:var(--text-sub);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-vb{flex:none;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#fff;
  font-size:10px;font-style:normal;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center}
/* 个人空间那四个数（主页是 星星 / 邻友 / 关注 / 粉丝，这里是这四样） */
.sp-counts{display:flex;background:#fff;margin-top:10px}
.sc{flex:1;text-align:center;padding:12px 0 13px;cursor:pointer}
.sc:active{background:#FAFAFA}
.sc b{display:block;font-size:17px;font-weight:800;color:var(--text);line-height:1.2}
.sc span{display:block;font-size:11px;color:var(--text-sub);margin-top:4px}
/* 封面顶上的装饰条：左边「我在听」的符号，右边一句话
   —— 头像挪到下面去了，上面不能空着（主理人：「那上面怎么办？重新装饰一下别的」） */
.sp-deco{position:absolute;left:12px;right:12px;top:12px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-listen{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.9);color:#0B2A6B;
  font-size:11px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,20,60,.16)}
.sp-listen i{font-style:normal;font-size:12px}
.sp-listen:active{background:#fff}
.sp-deco-r{font-size:11px;color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.45);padding:6px 2px}
/* 我的个人经历 / 个人资料 */
.sp-story{font-size:13px;line-height:1.95;color:var(--text-sub);white-space:pre-wrap}
.sp-pr{display:flex;flex-wrap:wrap;gap:6px}
.sp-pr .me-if{background:var(--tint-soft)}
/* 两个 tab：情绪碎片 / 日常心情记录（主理人：「这里写两个 tab」） */
.sp-tabs{display:flex;gap:8px;margin-top:14px}
.sp-t{flex:1;text-align:center;padding:9px 0;border-radius:var(--r-pill);font-size:14px;
  font-weight:600;color:var(--text-sub);background:var(--paper-2);cursor:pointer}
.sp-t.on{background:var(--brand);color:#fff}
.sp-pane{margin-top:10px}
/* 情绪碎片：一条输入框（跟创建标签那条一个做法），下面一条一条排 */
.sp-fr{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-soft);
  background:#fff;overflow:hidden;margin-bottom:10px}
.sp-fr input{flex:1;min-width:0;border:none;border-radius:0;margin:0;background:transparent}
.sp-fr input:focus{border:none;box-shadow:none}
.sp-fr-b{flex:none;display:flex;align-items:center;padding:0 16px;background:var(--brand);
  color:#fff;font-size:13px;font-weight:600}
.sp-frag{background:var(--tint-wash);border:1px solid var(--line);border-radius:var(--r-soft);
  padding:12px 14px;margin-bottom:8px}
.sp-frag-t{font-size:14px;line-height:1.8;color:var(--text);word-break:break-all}
.sp-frag-m{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--text-sub);margin-top:7px}
.sp-frag-x{flex:none;color:var(--warn);cursor:pointer}
.sp-music{position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:4px;
  padding:6px 11px;border-radius:14px;background:rgba(255,255,255,.88);font-size:11px;color:#0B2A6B;
  font-weight:600}
.sp-music b{font-style:normal;font-size:12px}
.sp-bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sp-bg{cursor:pointer}
.sp-bg i{display:block;height:58px;border-radius:10px;border:2px solid transparent}
.sp-bg span{display:block;font-size:11px;color:var(--text-sub);margin-top:5px;text-align:center}
.sp-bg.on i{border-color:var(--tint-deep)}
.sp-up{margin-top:12px;text-align:center}
.sp-up-b{display:inline-block;font-size:12px;color:var(--tint-deep);border:1px solid var(--line);
  border-radius:14px;padding:6px 14px;cursor:pointer}
.sp-add input{width:100%;margin-bottom:8px}
.sp-add-b{margin-top:2px}
.sp-songs{margin-top:6px}
.sp-song{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sp-song:last-child{border-bottom:0}
.sp-song i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint-soft);
  display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--tint-deep)}
.sp-s-b{flex:1;min-width:0}
.sp-s-n{font-size:14px;color:#111}
.sp-s-n span{font-size:12px;color:var(--text-sub)}
.sp-s-t{font-size:12px;color:var(--text-sub);margin-top:2px}
.sp-s-d{font-size:11px;color:#B0B0B0;margin-top:2px}
.sp-s-x{flex:none;font-size:11px;color:#B0B0B0;cursor:pointer}
.me-below{height:34px}

/* ---------- 广场 · 情绪树洞（整体挪到广场，陪伴里只留入口） ---------- */
.ptree-row{padding:11px 0;border-bottom:1px solid var(--line)}
.ptree-row:last-child{border-bottom:0}
.ptree-tx{font-size:13px;line-height:1.7;color:var(--text);word-break:break-word}
.ptree-echo{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--tint-soft);
  font-size:12px;line-height:1.7;color:var(--text)}
.ptree-s{font-size:11px;color:var(--text-sub);margin-top:5px;display:flex;gap:10px;align-items:center}
.ptree-s button{background:none;border:0;padding:0;font-size:11px;color:var(--tint-deep);cursor:pointer}

/* ---------- 回声箱（陪伴 · 被点亮 / 被回声 / 新邻友） ---------- */
.note-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.note-row:last-child{border-bottom:0}
.note-row.unread .note-t{font-weight:700}
.note-row.unread{background:var(--tint-soft);border-radius:10px;padding-left:8px;padding-right:8px}
.note-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:var(--tint-soft)}
.note-who{flex:1;min-width:0}
.note-t{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word}
.note-s{font-size:11px;color:var(--text-sub);margin-top:2px}

/* ---------- 私聊 ---------- */
.dm-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.dm-row:last-child{border-bottom:0}
.dm-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--tint-soft)}
.dm-who{flex:1;min-width:0}
.dm-n{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-s{font-size:11px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-unread{background:var(--brand);color:#fff;font-size:10px;font-weight:700;
  border-radius:999px;padding:2px 7px;flex:none}
.dm-thread{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;padding:2px 0}
.dm-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.7;
  word-break:break-word;white-space:pre-wrap}
.dm-msg.mine{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.dm-msg.peer{background:#fff;border:1px solid var(--tint-line);align-self:flex-start;
  border-bottom-left-radius:4px}
.dm-time{display:block;font-size:10px;opacity:.7;margin-top:4px}

/* ---------- 朋友圈动态 / 状态 ---------- */
.moment{padding:10px 0;border-bottom:1px solid var(--line)}
.moment:last-child{border-bottom:0}
.moment-n{font-size:13px;font-weight:700}
.moment-t{font-size:14px;line-height:1.8;margin-top:4px;word-break:break-word}
.moment-a{font-size:11px;color:var(--text-sub);margin-top:4px}
.vibe-chip{display:inline-block;background:var(--tint-soft);color:var(--brand);
  border-radius:999px;padding:2px 9px;font-size:11px;margin-right:6px}

/* ---------- 情绪树洞 ---------- */
.tree{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.tree-t{font-size:14px;line-height:1.8;word-break:break-word;white-space:pre-wrap}
.tree-reply{margin-top:10px;background:var(--tint-wash);border-left:3px solid var(--tint-strong);
  border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.8}
.tree-reply b{color:var(--brand);display:block;font-size:12px;margin-bottom:3px}
.tree-foot{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--text-sub)}
.tree-hug{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;
  font-size:12px;color:var(--text-sub);cursor:pointer}
.tree-hug.on{background:var(--tint-soft);border-color:var(--tint-strong);color:var(--brand);font-weight:700}
.tree-help{border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:999px;
  padding:4px 12px;font-size:12px;cursor:pointer}
.tree-esc{font-size:11px;color:var(--text-sub)}

/* ---------- 星球主页（2026-10-09） ----------
 * 主页的第一屏是一颗星球，不是一张功能清单。
 * 门牌号 = 用户在这颗星球上的住处；星球上的灯 = 真实存在的人。
 * 星球本体取当前皮肤的 from/to，换背景即换季。
 */
.planet-card{padding:0;overflow:hidden}
.planet-stage{background:linear-gradient(180deg,#F7FBFF 0%,#EAF3FF 100%);
  padding:6px 0 0;line-height:0}
.planet-stage svg{width:100%;height:auto;display:block}
.pl-body{fill:url(#plBody)}
.pl-ring{fill:none;stroke:var(--tint-line);stroke-width:2;opacity:.85}
.pl-dot{fill:#FFFFFF;opacity:.92}
.pl-halo{fill:#FFFFFF;opacity:.18}
.pl-mine{fill:#FFFFFF;stroke:var(--tint-deep);stroke-width:1.6}
.planet-addr{padding:12px 16px 14px;text-align:center;cursor:pointer}
.pa-k{font-size:11px;color:var(--text-sub);letter-spacing:.14em}
.pa-v{font-size:19px;font-weight:800;color:var(--text);margin-top:5px;letter-spacing:.04em}
.pa-s{font-size:12px;color:var(--text-sub);line-height:1.85;margin-top:7px}
/* ---------- 星空三层（2026-10-12 第 6 批：小星球做成一片会转的星空） ----------
   远的转得慢、近的转得快 —— 有前后差就有纵深，看着是立体的。
   这不是真 3D 引擎：真 3D 要 WebGL 那一整套，主包会撑大、低端机也吃力。
   用 SVG + CSS 自转做出纵深感，效果到位、体积不动。 */
.pl-sky{opacity:.96}
.pl-star{fill:#FFFFFF}
.st-far,.st-mid,.st-near{transform-box:view-box;transform-origin:160px 100px}
.st-far{animation:plSpin 150s linear infinite}
.st-mid{animation:plSpin 92s linear infinite}
.st-near{animation:plSpin 58s linear infinite}
@keyframes plSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .st-far,.st-mid,.st-near{animation:none}
}
/* 星球背光面：压一层暗的，球体才有体积（不是一块平色饼） */
.pl-shade{fill:rgba(0,0,0,.22)}
/* ---------- 换星系 ---------- */
.planet-gal{border-top:1px solid var(--line);padding:10px 14px 12px;background:#fff}
.pg-h{font-size:11px;color:var(--text-sub);letter-spacing:.14em;margin-bottom:8px}
.pg-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;
  -webkit-overflow-scrolling:touch}
.pg-i{flex:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:5px 10px 5px 6px;display:flex;align-items:center;gap:6px;cursor:pointer}
.pg-i.on{border-color:var(--tint-deep);background:var(--tint-wash)}
.pg-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pg-n{font-size:11px;color:var(--text)}
.pg-i.on .pg-n{color:var(--tint-deep);font-weight:700}
.pg-s{font-size:11px;color:var(--text-sub);line-height:1.7;margin-top:8px}

/* ---------- 我的房屋（广场上那一栏） ---------- */
.house-card{padding:14px 16px}
.hc-h{font-size:15px;font-weight:700;margin-bottom:10px}
.hc-row{display:flex;align-items:center;gap:12px;cursor:pointer}
.hc-door{width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-soft);
  background:var(--tint-wash);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:22px;color:var(--tint-deep)}
.hc-tx{flex:1;min-width:0}
.hc-t{font-size:14px;font-weight:700;color:var(--text)}
.hc-s{font-size:11px;color:var(--text-sub);line-height:1.7;margin-top:3px}
.hc-go{flex:none;font-size:12px;color:var(--tint-deep);font-weight:700}

/* ---------- 星云图鉴：一整片铺开的星系小 UI 框 ----------
   2026-10-12 第 7 批，主理人：「不要横着滑，不要横着滑，就直接都可以滑，
   不要有下面那个明显的滑动的符号。」
   → 所以这里**不横滑**：改成三列铺开的网格，六颗一次全看得见，
     底下也就没有那条滑动条了（没有 overflow，自然没有 scrollbar）。 */
.nb-wrap{margin:14px 0 0}
.nb-head{display:flex;align-items:baseline;gap:8px;padding:2px 2px 8px}
.nb-t{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.06em}
.nb-s{font-size:11px;color:var(--text-sub)}
.nb-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:2px 2px 4px}
.nb-i{border:1px solid var(--line);background:#fff;
  border-radius:var(--r-card);padding:12px 6px 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:0}
.nb-i:active{background:#FAFAFA}
/* 一枚星系：一颗小星球 + 两道斜环，图标压在中间 */
.nb-orb{position:relative;width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center}
.nb-orb b{font-size:15px;line-height:1;color:var(--tint-deep);z-index:2;font-weight:400}
.nb-r1,.nb-r2{position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid var(--tint-line)}
.nb-r1{width:40px;height:16px;margin:-8px 0 0 -20px;transform:rotate(-22deg)}
.nb-r2{width:16px;height:40px;margin:-20px 0 0 -8px;transform:rotate(-22deg)}
.nb-n{font-size:11px;color:var(--text);line-height:1}

/* ---------- 书架（广场最底下） ----------
   2026-10-12 第 7 批，主理人：「这个书架你做的是一个长条形的，
   我想要的是一个书的正面的一个形状，是 3:4 这种。」
   → 从「书脊竖条」改成「书的正面」：3:4 的书封，书名横排、底下压一条书脊线。 */
.shelf-card{padding:14px 16px}
.sh-h{font-size:15px;font-weight:700;margin-bottom:10px}
.sh-row{display:flex;align-items:flex-start;gap:12px;padding-bottom:4px}
.sh-b{flex:none;width:84px;height:112px;aspect-ratio:3/4;border-radius:6px;cursor:pointer;
  background:linear-gradient(160deg,#8FA9D8 0%,#6E8CC4 100%);
  box-shadow:inset -6px 0 0 rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.12);
  padding:10px 9px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:space-between}
.sh-b:nth-child(2n){background:linear-gradient(160deg,#C9A227 0%,#A8842A 100%)}
.sh-b:nth-child(3n){background:linear-gradient(160deg,#7E9E86 0%,#5F7D68 100%)}
.sh-spine{height:100%;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;min-width:0}
.sh-sn{font-size:12px;color:#fff;font-weight:700;letter-spacing:.04em;line-height:1.4;
  text-shadow:0 1px 2px rgba(0,0,0,.28)}
.sh-bmark{font-size:9px;color:rgba(255,255,255,.82);letter-spacing:.12em}
.sh-more{flex:none;font-size:18px;color:var(--text-sub);padding-top:44px}
.sh-empty{font-size:12px;color:var(--text-sub);line-height:1.8}
.sh-s{font-size:11px;color:var(--text-sub);margin-top:8px;line-height:1.7}

/* ---------- 云上之屋（整页） ---------- */
.hs-tabs{display:flex;gap:8px;background:#fff;border-bottom:1px solid var(--line);
  padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hs-tab{flex:none;font-size:13px;color:var(--text-sub);border-radius:var(--r-pill);
  padding:6px 14px;border:1px solid var(--line);background:#fff;cursor:pointer}
.hs-tab.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff;font-weight:700}
.hs-lead{font-size:12px;color:var(--text-sub);line-height:1.85;margin-bottom:12px}
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hs-slot{border:1px dashed var(--line);border-radius:var(--r-soft);background:#fff;
  padding:12px 6px;text-align:center;cursor:pointer;min-height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hs-slot.has{border-style:solid;border-color:var(--tint-line);background:var(--tint-wash)}
.hs-sn{font-size:11px;color:var(--text-sub);letter-spacing:.08em}
.hs-si{font-size:24px;line-height:1;color:var(--tint-deep)}
.hs-slot:not(.has) .hs-si{color:#C9CDD6}
.hs-st{font-size:11px;color:var(--text);font-weight:700}
.hs-slot:not(.has) .hs-st{color:var(--text-sub);font-weight:400}
.hs-note{font-size:11px;color:var(--text-sub);line-height:1.8;margin-top:12px}
/* 家具那一栏 */
.hs-f{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-soft);padding:12px;margin-bottom:8px;cursor:pointer}
.hs-f.owned{border-color:var(--tint-line);background:var(--tint-wash)}
.hs-fi{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#F4F5F8;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--tint-deep)}
.hs-ftx{flex:1;min-width:0}
.hs-fn{font-size:14px;font-weight:700;color:var(--text)}
.hs-fd{font-size:11px;color:var(--text-sub);line-height:1.7;margin-top:3px}
.hs-fb{flex:none;font-size:12px;font-weight:700;color:var(--tint-deep)}
/* 通道没接通时如实写的那一块 */
.hs-off{background:#F7F8FA;border-radius:var(--r-soft);padding:14px;margin-bottom:10px}
.hs-off-h{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.hs-off-s{font-size:12px;color:var(--text-sub);line-height:1.85}
/* 门牌 */
.hs-plate{background:var(--tint-wash);border:1px solid var(--tint-line);
  border-radius:var(--r-card);padding:16px;text-align:center}
.hs-pk{font-size:11px;color:var(--text-sub);letter-spacing:.14em}
.hs-pv{font-size:22px;font-weight:800;color:var(--text);margin-top:6px;letter-spacing:.04em}
.hs-ps{font-size:12px;color:var(--text-sub);line-height:1.85;margin-top:8px;text-align:left}
.hs-copy{margin-top:12px}
.hs-dress{background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);padding:14px;margin-bottom:12px}
.hs-dk{font-size:11px;color:var(--text-sub);letter-spacing:.14em}
.hs-dv{font-size:14px;color:var(--text);margin-top:6px;font-weight:700}

/* ---------- 书架整页 + 读绘本那一层 ---------- */
.sh-lead{font-size:12px;color:var(--text-sub);line-height:1.85;margin-bottom:12px}
.sh-card{display:flex;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:12px;margin-bottom:10px;cursor:pointer}
.sh-card:active{background:#FAFAFA}
.sh-cover{width:72px;height:96px;flex:0 0 72px;object-fit:cover;border-radius:8px;background:#F4F5F8}
.sh-ctx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.sh-cn{font-size:15px;font-weight:700;color:var(--text)}
.sh-cs{font-size:11px;color:var(--text-sub);line-height:1.7}
.sh-cp{font-size:11px;color:var(--tint-deep);font-weight:700}
/* 读书那一层：盖在书架页上面，关掉就回书架 */
.bk-read{position:absolute;left:0;right:0;top:0;bottom:0;z-index:60;background:#fff;
  display:flex;flex-direction:column;align-items:center;padding:14px 18px;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.bk-bar{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bk-x{border:0;background:#F4F5F8;width:34px;height:34px;border-radius:50%;
  font-size:14px;color:var(--text-sub);cursor:pointer;flex:0 0 34px}
.bk-t{flex:1;font-size:15px;font-weight:700;color:var(--text);text-align:center}
.bk-p{font-size:11px;color:var(--text-sub);flex:0 0 auto}
.bk-img{width:100%;max-width:300px;border-radius:var(--r-card);background:#F4F5F8}
.bk-tx{font-size:16px;line-height:2;color:var(--text);margin:18px 4px;text-align:center}
.bk-nav{display:flex;gap:12px;width:100%;margin-top:6px}
.bk-b{flex:1;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-pill);font-size:14px;color:var(--text);cursor:pointer}
.bk-b:disabled{color:#C0C4CC}
.bk-b.end{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff;font-weight:700}

/* ---------- 装扮 · 家具道具那一栏 ---------- */
.fn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fn-i{background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);
  padding:12px 8px;text-align:center;cursor:pointer}
.fn-i.owned{border-color:var(--tint-line);background:var(--tint-wash)}
.fn-ic{font-size:24px;line-height:1;color:var(--tint-deep)}
.fn-n{font-size:12px;font-weight:700;color:var(--text);margin-top:7px}
.fn-p{font-size:11px;color:var(--tint-deep);font-weight:700;margin-top:3px}
.fn-d{font-size:10px;color:var(--text-sub);line-height:1.6;margin-top:5px}

/* ---------- 首页 = 天空：栏目 + 双栏瀑布流 + 敲一敲（2026-10-11） ----------
 * 栏目按「这条云迹处于什么状态」分：邻友 / 飘着 / 在聊 / 亮着。
 * 第四栏不用「星图」—— 抖音巨量星图是广告接单平台，撞名。
 * 敲一敲的特效（边缘亮起 + 流星往上飞）是给敲的那个人当场看的，
 * 不是给内容挂装饰。震动与音效默认关闭，用户可在设置里开。
 */
/* ---------- 首页顶栏三行（主理人 2026-10-11 定） ----------
 *   第一行 = 我的符号 + 长条搜索
 *   第二行 = 栏目（关注 / 发现 / 社区 / 同城 / 状态），居中
 *   第三行 = 这一栏下面的分类
 * 最左边不做三条杠、也不做四条杠 —— 用一朵云里藏着一颗星（云会散，星留下）。
 */
.sky-bar{display:flex;align-items:center;gap:10px;padding:10px 14px 8px;background:#fff}
.sky-me{width:34px;height:34px;flex:none;border:0;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.sky-me svg{width:24px;height:24px;display:block}
.sky-me .sm-cloud{fill:var(--tint-deep)}
.sky-me .sm-star{fill:var(--gold)}
.sky-search{position:relative;flex:1;min-width:0}
.sky-search input{width:100%;padding:8px 12px 8px 32px;font-size:13px;
  border:1px solid #ECECEC;border-radius:999px;background:#F7F7F5;color:#111;outline:none}
.sky-search input::placeholder{color:#B0B0B0}
.ss-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:14px;color:#B0B0B0;pointer-events:none}
/* 顶栏：主流 App 那一套 —— 白底、居中的栏目、选中是深色加粗 + 短下划线。
   不再用彩色糖果底和自绘图形当装饰。 */
.sky-tabs{display:flex;align-items:center;gap:6px;padding:6px 12px 8px;background:#fff}
.sky-tabs-mid{justify-content:center;gap:6px;padding:4px 12px 10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.sky-tab{flex:none;font-size:16px;color:#8A8A8A;cursor:pointer;padding:7px 14px;
  border-radius:var(--r-pill);line-height:1.25;letter-spacing:.3px;
  border:0;background:transparent;transition:background .18s,color .18s;white-space:nowrap}
.sky-tabs-mid .sky-tab{font-size:16px;padding:7px 14px}
.sky-tab.on{color:#fff;font-weight:700;background:var(--tint-deep)}


.sky-hint{font-size:11px;color:#A0A0A0;margin-left:auto;flex:none;padding-left:12px}
/* 分类的分组标签（社区那一栏：热门 / 行业 / 娱乐项目） */
.sky-glab{flex:none;font-size:10px;color:#B0B0B0;padding:0 2px;letter-spacing:.06em;
  align-self:center}
.chips .sky-glab{font-size:10px;color:#B0B0B0;padding:0 4px}

/* 信息流：浅灰底 + 白卡 + 10px 圆角 + 8px 间距（主流双栏瀑布流的密度） */
/* 首页与广场统一：浅灰页底 + 白卡（主流信息流的底色，不是白到发光） */
#view-home{padding:0;gap:0;background:var(--paper-2)}
#view-plaza{background:var(--paper-2);padding:10px 10px 0;gap:10px}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 4px;background:var(--paper-2)}
.ycard{background:#fff;border:0;border-radius:10px;overflow:hidden;
  cursor:pointer;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:box-shadow .2s,transform .2s}
.ycard.lit{box-shadow:0 0 0 1.5px rgba(201,162,39,.28),0 1px 2px rgba(0,0,0,.05)}
/* 敲下去那一下：整体外边缘淡淡闪一下就收 —— 不是刷一条金线（金线太硬，主理人否了）。
   流星那种更重的特效后面再说。 */
.ycard.flash{animation:ycFlash .9s ease-out}
@keyframes ycFlash{
  0%{box-shadow:0 0 0 1.5px rgba(201,162,39,.20),0 0 0 0 rgba(201,162,39,0)}
  35%{box-shadow:0 0 0 1.5px rgba(201,162,39,.55),0 0 14px 3px rgba(201,162,39,.18)}
  100%{box-shadow:0 0 0 1.5px rgba(201,162,39,.28),0 1px 2px rgba(0,0,0,.05)}
}
/* 封面统一 3:4（主理人：「我们要的不是长方条，是属于那种 3:4 的感觉」） ——
   不再一高一矮交替，卡片短一点、齐一点。 */
.yc-art{position:relative;height:0;padding-top:133.333%;background:#EEF2F7;overflow:hidden}
.yc-cov{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;
  justify-content:center;padding:16px 14px;text-align:center;
  font-size:17px;line-height:1.5;font-weight:500;color:#2C2C2E;letter-spacing:.5px;
  word-break:break-word;overflow:hidden}
.yc-cov::after{content:'';position:absolute;left:14px;right:14px;bottom:12px;height:1px;
  background:rgba(0,0,0,.05)}
/* 同频标记：敲下去才浮出来，往上飘一下就散。
   它不是一个星星 —— 是「两部手机在同一时刻对准同一个点」的取景框。 */
.sync-ic{width:12px;height:12px;flex:none;display:inline-block;vertical-align:-1px;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.sync-ic circle{fill:currentColor;stroke:none}
/* 中心那一点要实心、要跟外框同色；两层框是描边的（一层套一层，像 WiFi） */
.sync-ic .sync-dot{fill:currentColor;stroke:none}
.yc-sync{position:absolute;top:10px;right:10px;width:22px;height:22px;color:var(--gold);
  opacity:0;pointer-events:none}
.yc-sync .sync-ic{width:22px;height:22px}
.yc-sync.go{animation:ycSync .9s ease-out}
@keyframes ycSync{
  0%{opacity:0;transform:translate(0,8px) scale(.6)}
  35%{opacity:1;transform:translate(0,-2px) scale(1)}
  100%{opacity:0;transform:translate(5px,-24px) scale(.85)}
}
.yc-body{padding:8px 10px 10px}
.yc-tx{font-size:13px;line-height:1.55;color:#333;padding:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yc-who{display:flex;align-items:center;gap:5px}
.yc-who img{width:18px;height:18px;border-radius:50%;flex:0 0 18px;object-fit:cover;
  background:#F0F0F0}
.yc-nick{font-size:11px;color:#999;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yc-star{font-size:11px;color:#999;flex:none;display:flex;align-items:center;gap:3px}
.yc-star.on{color:var(--gold);font-weight:600}
.yc-star b{font-weight:400;font-size:12px}
.flow-note{font-size:12px;color:#9A9A9A;text-align:center;
  padding:26px 16px;line-height:1.9}

/* 中间的 ＋ = 创作：主流的实心圆按钮，不在导航里占文字位 */

/* ============================================================
 * 2026-10-11 晚改版新增
 * ============================================================ */

/* ---------- 我的抽屉（最左边那个符号点开的） ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:84}
.drawer{position:fixed;left:0;top:0;bottom:0;width:76%;max-width:320px;background:#fff;
  z-index:85;transform:translateX(-102%);transition:transform .22s ease-out;
  padding:22px 16px 16px;display:flex;flex-direction:column;gap:4px;
  box-shadow:2px 0 18px rgba(0,0,0,.16)}
.drawer.on{transform:translateX(0)}
.dw-head{display:flex;align-items:center;gap:12px;padding:6px 2px 16px}
.dw-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  background:#F0F0F0}
.dw-who{min-width:0}
.dw-nick{font-size:16px;font-weight:700;color:#111;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dw-id{font-size:11px;color:var(--text-sub);margin-top:4px;letter-spacing:.06em}
.dw-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  padding:13px 4px;text-align:left;font-size:15px;color:#222;cursor:pointer}
.dw-row:active{background:#F7F7F5}
.dw-row b{font-size:17px;font-weight:400;width:24px;text-align:center;flex:none;color:#444}
.dw-row span{flex:1;min-width:0}
.dw-row i{font-style:normal;color:#C8C8C8;font-size:18px;flex:none}
.dw-foot{margin-top:auto;font-size:11px;line-height:1.7;color:#A8A8A8;padding:10px 4px}

/* ---------- 广场 · 边侧小软件坞 ----------
   主理人：「一些小游戏的话，这些就要做成软件的样子，做在边侧，
   不要让大家一直往下翻。」
   2026-10-12 第 6 批：竖着排那一列改成横着滑的一排，title《星云图鉴》，
   末尾一颗纸飞机 —— 样式见上面的 .nb-* 一套，.dock 那一套已经退掉。 */
#view-plaza{position:relative}
.plaza-note{font-size:12px;line-height:1.8;color:var(--text-sub);padding:4px 2px 0}

/* ---------- 陪伴 · 统计一栏 ---------- */
.ac-stats{display:flex;gap:0;background:#fff;border-bottom:1px solid #F0F0F0;
  padding:10px 0 12px}
.acs{flex:1;text-align:center;border-right:1px solid #F2F2F2}
.acs:last-child{border-right:0}
.acs b{display:block;font-size:19px;font-weight:700;color:#111;line-height:1.2}
.acs span{display:block;font-size:11px;color:var(--text-sub);margin-top:4px}
/* 会话列表里的分组标题（陪伴角色 / 功能和圈子） */
.cl-group{font-size:11px;color:#A0A0A0;padding:12px 16px 6px;background:var(--paper-2);
  letter-spacing:.06em}

/* 未读：主理人 2026-10-11 改回红点 —— 未读就该一眼看见，用红点。 */
.cl-badge{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--warn);color:#fff;font-size:11px;line-height:18px;text-align:center}
.cl-row .accomp-dot{top:8px;left:52px;right:auto;background:var(--warn)}

/* ---------- 同城 · 疗愈去处 ---------- */
.heal-row{padding:12px 0;border-bottom:1px solid var(--line)}
.heal-row:last-of-type{border-bottom:0}
.heal-t{font-size:14px;font-weight:600;color:#111;line-height:1.5}
.heal-k{display:inline-block;font-size:10px;color:var(--tint-deep);background:var(--tint-soft);
  border-radius:4px;padding:2px 6px;margin-top:5px}
.heal-s{font-size:12px;color:var(--text-sub);line-height:1.7;margin-top:6px}

/* ---------- 状态 ---------- */
.vibe-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.vibe-row:last-child{border-bottom:0}
.vibe-row img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  background:#F0F0F0}
.vibe-b{flex:1;min-width:0}
.vibe-n{font-size:12px;color:var(--text-sub)}
.vibe-t{font-size:14px;color:#222;line-height:1.6;margin-top:3px;word-break:break-word}
.vibe-at{font-size:11px;color:#B4B4B4;flex:none;padding-top:2px}

/* ---------- 创作页：类别上「还没开通」的小标 ---------- */
.pk-off{font-style:normal;font-size:10px;font-weight:400;color:var(--text-sub);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:6px}

/* ---------- 以后再做（代码留着，界面先收起） ---------- */
.later{display:none}

/* ---------- 陪伴页统计栏（2026-10-11 22:45 改：敲一敲 = 星星） ---------- */
.acs-note{font-size:11px;color:var(--text-sub);padding:6px 14px 8px;background:#fff;
  border-bottom:1px solid #F5F5F5;line-height:1.6}
.acs{cursor:pointer}
.acs:active{background:#FAFAFA}

/* ---------- 圈子：两级纵向分类 ----------
   左边一列「娱乐 / 行业」，右边一列是那一类下的圈子，一排一排竖着往下滑。
   主理人：「是竖着的…类似于那种大 APP 里面的分类」 */
.cpick{display:grid;grid-template-columns:88px 1fr;background:#fff;min-height:320px}
.cp-left{background:var(--paper-2);border-right:1px solid var(--line)}
.cp-g{padding:14px 12px;font-size:13px;color:var(--text-sub);cursor:pointer;
  border-bottom:1px solid var(--line)}
.cp-g.on{background:#fff;color:#111;font-weight:600;
  box-shadow:inset 3px 0 0 var(--tint-deep)}
.cp-g-any{border-top:1px solid var(--line);color:var(--text-sub)}
.cp-right{padding:0 0 6px}
.cp-c{display:flex;align-items:center;gap:8px;padding:13px 14px;
  border-bottom:1px solid var(--line);cursor:pointer}
.cp-c b{flex:1;font-size:14px;font-weight:500;color:#111;min-width:0}
.cp-c span{flex:none;font-size:11px;color:var(--text-sub)}
.cp-c i{flex:none;color:#C8C8C8;font-style:normal}
.cp-c.on{background:var(--tint-soft)}
.cp-c.on b{color:var(--tint-deep);font-weight:600}
.cp-right-inline{padding-top:2px}
/* 子栏里的「圈子」入口：带上下箭头，点了才展开纵向分类 */
.sky-chip-pick{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.sky-chip-pick i{font-style:normal;font-size:11px;opacity:.7}

/* ---------- 同城：地区竖着排 ---------- */
.city-list{display:block}
.city-row{display:flex;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);
  cursor:pointer}
.city-row b{flex:1;font-size:14px;font-weight:500;color:#111}
.city-row i{flex:none;font-style:normal;color:#C8C8C8}
.city-row.on b{color:var(--tint-deep);font-weight:600}
.city-row.on i{color:var(--tint-deep)}

/* ---------- 个人主页：四个数 + 栏目 ---------- */
.me-counts{display:flex;background:#fff;padding:10px 0;border-bottom:1px solid #F2F2F2}
.mc{flex:1;text-align:center;cursor:pointer}
.mc b{display:block;font-size:17px;font-weight:700;color:#111;line-height:1.2}
.mc span{display:block;font-size:11px;color:var(--text-sub);margin-top:3px}
/* 2026-10-12 晚：六栏（云迹/喜欢/游戏记录/动态/手账/日记本），
   挤在一行会看不清 —— 改成可以横着滑的一排。 */
.me-tabs{display:flex;background:#fff;border-bottom:1px solid #F2F2F2;padding:0 6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.me-tabs::-webkit-scrollbar{display:none}
.mt{flex:none;text-align:center;padding:11px 14px;font-size:13px;color:var(--text-sub);cursor:pointer;
  white-space:nowrap}
.mt.on{color:#111;font-weight:600;box-shadow:inset 0 -2px 0 var(--tint-deep)}
/* 栏目里的行：云迹 / 喜欢 / 作品 / 动态 共用 */
.wr-row{padding:12px 0;border-bottom:1px solid var(--line)}
.wr-row:last-child{border-bottom:0}
.wr-t{font-size:14px;color:#111;line-height:1.5;word-break:break-word}
.wr-s{font-size:11px;color:var(--text-sub);margin-top:5px}
.wf-row{display:flex;align-items:center;gap:8px;padding:11px 2px;border-bottom:1px solid var(--line);
  cursor:pointer}
.wf-row b{flex:1;font-size:14px;font-weight:500;color:#111}
.wf-row span{flex:none;font-size:11px;color:var(--text-sub)}
.wf-row i{flex:none;font-style:normal;color:#C8C8C8}
.mo-row{padding:12px 0;border-bottom:1px solid var(--line)}
.mo-row:last-child{border-bottom:0}
.mo-t{font-size:14px;line-height:1.6;color:#111;white-space:pre-wrap;word-break:break-word}
.mo-s{font-size:11px;color:var(--text-sub);margin-top:6px}

/* ============================================================
 * 2026-10-11 深夜重做（主理人给的六张参考图）
 * ------------------------------------------------------------
 * 造型口径：卡片大圆角、按钮/标签/输入框一律胶囊、未选中 tab 无边框纯文字。
 * 结构口径：顶部一级大 tab（没有第二行分栏），每个 tab 是一套完整页面。
 * ============================================================ */

/* ---------- 明确的圆形返回按钮（替换原来那条长条形可点区域） ----------
   主理人：「返回键不应该是很正常的，比如说我点进去应该是左上角或者是右上角。
   但你为什么做的是这种一个长条形的范围」 */
.head-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;
  gap:12px;padding:10px 14px;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px)}
.hd-back{width:36px;height:36px;flex:none;border:0;border-radius:50%;
  background:rgba(0,0,0,.05);font-size:22px;line-height:1;color:#222;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:0;transition:background .16s}
.hd-back:active{background:rgba(0,0,0,.11)}
.hd-t{flex:1;text-align:center;font-size:16px;font-weight:700;color:#111;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-r{width:36px;flex:none}

/* ---------- 首页四个 tab：每页自己的头部与排布 ---------- */
.skypage{padding:0 0 4px}
.sk-head{padding:8px 16px 12px;background:#fff}
.sk-head-in{padding:18px 16px 8px;background:transparent}
.sk-h1{font-size:19px;font-weight:800;color:#111;letter-spacing:.4px;line-height:1.3}
.sk-h2{font-size:12px;color:var(--text-sub);margin-top:5px;line-height:1.6}

/* ① 关注：一条一条的窄行 —— 不是瀑布流，一眼就看得出跟别的 tab 不一样 */
.frow-list{background:#fff;padding:0 16px}
.frow{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F4F4F4;
  cursor:pointer;align-items:flex-start}
.frow:last-child{border-bottom:0}
.frow:active{background:#FAFAFA}
.frow-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:#F0F0F0}
.frow-b{flex:1;min-width:0}
.frow-n{font-size:14px;font-weight:600;color:#111}
.frow-t{font-size:13px;color:#444;line-height:1.6;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frow-m{font-size:11px;color:var(--text-sub);margin-top:6px;display:flex;
  align-items:center;gap:3px}
.frow-m .sync-ic{width:11px;height:11px}

/* ② 发现：横向大卡 + 右侧数字榜（只有发现页是这个排布） */
.fd-stage{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;padding:12px 12px 4px;
  background:#fff}
.fd-hero{border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.07)}
.fd-hero-art{position:relative;height:112px;display:flex;align-items:center;
  justify-content:center;padding:12px 10px;text-align:center}
.fd-hero-cov{font-size:14px;line-height:1.45;font-weight:600;letter-spacing:.4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fd-hero-badge{position:absolute;top:8px;left:8px;font-size:10px;color:#3A2E12;
  background:var(--gold-soft);border-radius:var(--r-pill);padding:2px 8px;font-weight:600}
.fd-hero-b{padding:9px 11px 11px}
.fd-hero-t{font-size:12px;color:#333;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-hero-s{font-size:10px;color:var(--text-sub);margin-top:6px}
.fd-rank{background:#FBFBFA;border-radius:16px;padding:10px 11px}
.fd-rank-h{font-size:11px;font-weight:700;color:#111;margin-bottom:8px;letter-spacing:.4px}
.fd-rank-r{display:flex;align-items:center;gap:7px;padding:6px 0;cursor:pointer}
.fd-rank-n{flex:none;width:15px;font-size:11px;font-weight:800;color:#B9B9B9;
  font-style:normal;text-align:center}
.fd-rank-r:nth-child(2) .fd-rank-n{color:#E4432C}
.fd-rank-r:nth-child(3) .fd-rank-n{color:#F08A24}
.fd-rank-r:nth-child(4) .fd-rank-n{color:#E9B32A}
.fd-rank-t{flex:1;min-width:0}
.fd-rank-k{font-size:12px;color:#222;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fd-rank-s{font-size:10px;color:var(--text-sub);margin-top:1px}
.fd-rank-e{font-size:11px;color:var(--text-sub);padding:6px 0}
/* 发现页自己的胶囊筛选（别的 tab 没有这一排） */
.fd-filter{display:flex;gap:8px;padding:10px 12px 6px;background:#fff;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.fd-chip{flex:none;font-size:13px;padding:6px 15px;border-radius:var(--r-pill);
  background:#F4F4F2;color:#666;cursor:pointer;line-height:1.4;
  transition:background .16s,color .16s}
.fd-chip.on{background:var(--tint-deep);color:#fff;font-weight:600}

/* ③ 圈子：进去之后的收拢条（主理人：「选了以后它就自动收上去」） */
.cc-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff}
.cc-back{font-size:13px;color:var(--tint-deep);font-weight:600;cursor:pointer;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--tint-soft)}
.cc-back:active{opacity:.75}
.cc-cur{font-size:14px;font-weight:700;color:#111}

/* ④ 同城：地区是一条可收起的横条（选了就收上去） */
.ct-pick{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:4px 0 12px}
.ct-pick-l{flex:none;font-size:14px;color:#111;font-weight:600}
.ct-pick-v{flex:1;font-size:14px;color:var(--tint-deep);font-weight:700;
  text-align:right}
.ct-pick-g{flex:none;font-size:11px;color:var(--text-sub);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 11px}
.ct-pick.open{ padding-bottom:8px }
.ct-list{max-height:290px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid #F2F2F2}
.ct-row{display:flex;align-items:center;padding:12px 4px;border-bottom:1px solid #F6F6F6;
  cursor:pointer}
.ct-row:active{background:#FAFAFA}
.ct-row b{flex:1;font-size:14px;font-weight:500;color:#111}
.ct-row i{flex:none;font-style:normal;color:var(--tint-deep);font-weight:700}
.ct-row.on b{color:var(--tint-deep);font-weight:700}

/* ---------- 情绪树洞（2026-10-12 第 5 批：服务区 + 微聊） ----------
   主理人：「情绪树洞重做为服务区 + 微聊」—— 搜索、海报、两颗服务在海报下面、
   社区小圆圈、匿名树洞、漂流瓶、纸飞机、日记。 */
.tr-search{width:100%;box-sizing:border-box;height:38px;padding:0 14px;margin-bottom:12px;
  font-size:13px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff}
.tr-search::placeholder{color:#B0B0B8}
.tr-poster{position:relative;border-radius:var(--r-card);overflow:hidden;
  padding:20px 18px 18px;margin-bottom:12px;color:#fff;
  background:linear-gradient(150deg,#2C3A6B 0%,#4A5C93 48%,#7C8FBF 100%)}
.tr-po-h{font-size:20px;font-weight:800;letter-spacing:.5px}
.tr-po-s{font-size:12px;line-height:1.8;margin-top:6px;color:rgba(255,255,255,.92)}
.tr-po-n{font-size:11px;margin-top:10px;color:rgba(255,255,255,.78)}
/* 两颗服务：就摆在海报下面 */
.tr-svc{display:flex;gap:10px;margin-bottom:8px}
.tr-svc-i{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 12px;text-align:center;cursor:pointer}
.tr-svc-i:active{background:#FAFAFA}
.tr-svc-i i{display:block;font-style:normal;font-size:20px;color:var(--tint-deep);line-height:1}
.tr-svc-i b{display:block;font-size:14px;font-weight:700;margin-top:8px;color:var(--text)}
.tr-svc-i span{display:block;font-size:11px;color:var(--text-sub);margin-top:4px}
.tr-note{font-size:11px;color:var(--text-sub);line-height:1.75;padding:2px 2px 0}
.tr-sec{font-size:14px;font-weight:700;color:var(--text);margin:18px 0 10px}
/* 社区小圆圈：一排圆，点一个就只看这一类 */
.tr-circles{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch}
.tr-cir{flex:none;width:52px;height:52px;border-radius:50%;background:#F4F5F8;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#444;cursor:pointer;text-align:center;padding:0 4px;
  box-sizing:border-box;line-height:1.25}
.tr-cir.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff;font-weight:700}
/* 树洞那一条条 */
.tr-list{margin-top:10px}
.tr-item{background:var(--tint-wash);border:1px solid var(--line);
  border-radius:var(--r-soft);padding:12px 14px;margin-bottom:8px}
.tr-i-t{font-size:14px;line-height:1.8;color:var(--text);word-break:break-all}
.tr-i-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--text-sub);margin-top:7px}
.tr-i-x{flex:none;color:var(--warn);cursor:pointer}
.tr-send{margin-top:10px}
/* 小云在树洞里回的那一句（AI 服务，标得清清楚楚是它回的） */
.tr-i-r{margin-top:8px;padding:8px 10px;border-radius:var(--r-soft);
  background:#fff;border:1px solid var(--line);
  font-size:12px;line-height:1.8;color:var(--text)}
.tr-i-r b{display:inline-block;margin-right:6px;font-weight:700;color:var(--tint-deep)}
/* 抱抱：点一下就算抱过；点了变主色，不能抱两次 */
.tr-hug{flex:none;margin-right:auto;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;color:var(--text-sub)}
.tr-hug.on{color:var(--tint-deep);border-color:var(--tint-deep);
  background:var(--tint-wash);font-weight:700}
/* 已经递给客服了，就写清楚，不再给「想找人聊聊」 */
.tr-esc{flex:none;color:#8A8A94}
/* 「想找人聊聊」：只出现在自己那条上 */
.tr-help{flex:none;cursor:pointer;background:#fff;color:var(--tint-deep);
  border:1px solid var(--tint-deep);border-radius:var(--r-pill);padding:3px 10px}
.tr-help:active{background:var(--tint-wash)}
/* 漂流瓶 / 纸飞机：两个并排；日记是整条 */
.tr-two{display:flex;gap:10px}
.tr-t2{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 12px;text-align:center;cursor:pointer}
.tr-t2.wide{flex:none;width:100%}
.tr-t2:active{background:#FAFAFA}
.tr-t2 i{display:block;font-style:normal;font-size:19px;color:var(--tint-deep);line-height:1}
.tr-t2 b{display:block;font-size:13px;font-weight:700;margin-top:7px;color:var(--text)}
.tr-t2 span{display:block;font-size:11px;color:var(--text-sub);margin-top:3px}

/* ---------- 地区四级选择器（全国 → 省 → 市 → 区，2026-10-12） ----------
   主理人：「同城这里，我的地区就要给它弄的范围大一点，全国先选全国，
   再选省，再选城市，再选区。」 */
.rg{border-top:1px solid #F2F2F2;padding-top:10px}
.rg-search{width:100%;box-sizing:border-box;height:38px;padding:0 12px;
  font-size:13px;color:#111;background:#F7F7F9;border:1px solid var(--line);
  border-radius:var(--r-soft);outline:none}
.rg-search::placeholder{color:#B0B0B8}
.rg-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  padding:10px 2px 6px}
.rg-cb{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--text-sub);
  cursor:pointer}
.rg-cb i{font-style:normal;color:#C8C8CE;margin:0 2px}
.rg-cb.on{color:var(--tint-deep);font-weight:700}
.rg-list{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rg-row{display:flex;align-items:center;padding:12px 4px;
  border-bottom:1px solid #F6F6F6;cursor:pointer}
.rg-row:active{background:#FAFAFA}
.rg-row b{flex:1;font-size:14px;font-weight:500;color:#111}
.rg-row i{flex:none;font-style:normal;color:#C8C8CE;font-weight:700}
.rg-row.nat b{color:var(--tint-deep);font-weight:700}
.rg-none{padding:18px 4px;font-size:12px;color:var(--text-sub)}
.rg-hot{display:flex;flex-wrap:wrap;gap:7px;padding:12px 2px 4px}
.rg-hot-i{font-size:12px;color:#444;background:#F4F5F8;
  border-radius:var(--r-pill);padding:6px 12px;cursor:pointer}
.rg-hot-i:active{background:var(--tint-line);color:var(--tint-deep)}
.rg-note{font-size:12px;color:var(--text-sub);line-height:1.7;
  padding:2px 2px 10px}

/* ---------- 地图位（一圈套一圈把范围画清楚，不是假地图） ----------
   主理人：「我建议在同城这里可以加一个地图什么的」
   真地图要接地图服务（主体认证 + 授权），没接通前不画假的。 */
.ct-map{padding-bottom:14px}
.cm-wrap{padding:8px 0 4px}
.cm-r{position:relative;border:1px solid var(--line);border-radius:12px;
  padding:26px 12px 12px;background:#FCFCFE}
.cm-r .cm-r{background:#fff}
.cm-r.on{border-color:var(--tint-deep);
  box-shadow:0 0 0 2px var(--tint-line) inset;background:#fff}
.cm-r.dim{border-style:dashed;border-color:#E4E4EA;background:transparent}
.cm-lb{position:absolute;top:7px;left:11px;font-size:11px;color:#8A8A94;
  letter-spacing:.2px}
.cm-r.on .cm-lb{color:var(--tint-deep);font-weight:700}
.cm-dot{width:9px;height:9px;border-radius:50%;background:var(--tint-deep);
  margin:2px auto 0;box-shadow:0 0 0 4px var(--tint-line)}

/* ---------- 底部四栏 + 中间悬浮胶囊 ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;
  align-items:center;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid #EFEFEF;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tabbar div[data-v]{flex:1;text-align:center;padding:4px 0 3px;font-size:10px;
  color:#9A9A9A;cursor:pointer;transition:color .16s}
.tabbar div[data-v].on{color:#111;font-weight:600}
.tabbar div[data-v] b{display:block;font-size:20px;font-weight:400;margin-bottom:2px;
  line-height:1;color:inherit}
.tab-gap{flex:0 0 66px}
.tab-fab{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:61;
  width:54px;height:54px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:linear-gradient(180deg,#3B6BE8 0%,var(--tint-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,45,167,.36),0 2px 6px rgba(0,0,0,.14);
  transition:transform .16s}
.tab-fab:active{transform:translateX(-50%) scale(.94)}
.tab-fab svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round}

/* 情绪树洞那一套旧样式（.tree-lead / .tch-card / .tarea-wrap / .tform-b /
   .btn-pill / .btn-soft）2026-10-12 第 5 批整段删掉 ——
   树洞从陪伴页那个 pane 换成独立一整页 #page-tree，样式改用上面的 .tr-* 一套。
   死样式不留：页面里已经没有这些 class，这里也不再摆着。 */

/* ---------- 「我的状态」的圈子：竖排清单（不是横着拉的 chip） ---------- */
.vr-list{margin-top:10px;border-top:1px solid #F2F2F2;max-height:300px;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.vr-g{font-size:10px;color:#B0B0B0;letter-spacing:.08em;padding:10px 2px 4px}
.vr-row{display:flex;align-items:center;gap:8px;padding:12px 2px;
  border-bottom:1px solid #F6F6F6;cursor:pointer}
.vr-row:active{background:#FAFAFA}
.vr-row b{flex:1;font-size:14px;font-weight:500;color:#111}
.vr-row span{flex:none;font-size:12px;color:var(--tint-deep);font-weight:700}
.vr-row.on b{color:var(--tint-deep);font-weight:700}

/* ---------- 圈子分类面板：去掉「不限」常亮那个开关 ---------- */
.cp-g-all{font-weight:600;color:#111}
.cpick{border-radius:16px;overflow:hidden}

/* ============================================================
 * 第九轮（2026-10-12 主理人）：底部上滑的选择器 + 裁剪 + 两栏
 * ------------------------------------------------------------
 * 主理人原话：
 * 「它那个热力应该是像那个下滑上来的，不是点击的」
 * 「不要生日和下面这一个填上的框是分开两排的，应该是同一排」
 * 「点击头像就可以直接的从相册里选择，然后可以裁剪」
 * 「我发过的云迹应该像首页一样排布…还是两栏」
 * 「发布的动态就像哔哩哔哩那里一样一栏一栏的这么排序」
 * ========================================================== */

/* ---------- 底部上滑选择器（不是点击弹出来的小窗） ---------- */
.sh-mask{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:130;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.sh-mask.on{opacity:1;pointer-events:auto}
.sh{position:fixed;left:0;right:0;bottom:0;z-index:131;background:#fff;
  border-radius:22px 22px 0 0;transform:translateY(102%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:74vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -8px 30px rgba(0,0,0,.10)}
.sh.on{transform:translateY(0)}
.sh-bar{padding:14px 16px 10px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #F4F4F4;flex:none}
.sh-bar b{flex:1;font-size:15px;font-weight:700;color:#111;text-align:center}
.sh-bar span{font-size:13px;color:var(--tint-deep);font-weight:600;
  min-width:44px;text-align:right;cursor:pointer}
.sh-bar span.sh-cancel{color:#9A9A9A;text-align:left;font-weight:500}
.sh-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 12px}
.sh-row{display:flex;align-items:center;gap:10px;padding:14px 4px;
  border-bottom:1px solid #F6F6F6;cursor:pointer;font-size:15px;color:#111}
.sh-row:last-child{border-bottom:0}
.sh-row:active{background:#FAFAFA}
.sh-row i{flex:none;width:20px;font-style:normal;font-size:16px;text-align:center;color:#C8C8C8}
.sh-row.on i{color:var(--tint-deep)}
.sh-row em{font-style:normal;flex:1;font-size:12px;color:var(--text-sub)}
.sh-opt{padding:14px 4px;border-bottom:1px solid #F6F6F6;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:15px;color:#111}
.sh-opt:last-child{border-bottom:0}
.sh-opt:active{background:#FAFAFA}
.sh-opt s{flex:none;text-decoration:none;font-size:17px;color:#C8C8C8}
.sh-opt.on s{color:var(--tint-deep)}
.sh-opt em{font-style:normal;flex:1;font-size:12px;color:var(--text-sub)}
/* 生日：三列滚轮，从底下推上来 */
.sh-ymd{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;height:230px;
  padding:10px 0;flex:none}
.sh-col{overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:center;
  scrollbar-width:none;-moz-scrollbar-width:none}
.sh-col::-webkit-scrollbar{display:none}
.sh-col div{padding:11px 0;font-size:15px;color:#B4B4B4;border-radius:10px}
.sh-col div.on{color:#111;font-weight:700;background:#F4F6FA}
/* 地区：先搜再选 */
.sh-search{margin:10px 0 4px}
.sh-city{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.sh-city div{padding:10px 4px;text-align:center;font-size:13px;color:#333;
  background:#F6F7F9;border-radius:var(--r-soft);cursor:pointer}
.sh-city div.on{background:var(--tint-deep);color:#fff;font-weight:600}
/* 图片三来源：拍照 / 从相册选择 / 从系统里挑选 */
.sh-src{padding:6px 0 4px}
.sh-src .sh-opt s{font-size:20px;color:var(--tint-deep);opacity:.85}
/* 完成按钮那一条：主按钮独占一行 */
.sh-foot{padding:10px 16px calc(14px + env(safe-area-inset-bottom));flex:none;
  border-top:1px solid #F4F4F4}

/* ---------- 裁剪页：选完照片自己裁 ---------- */
.crop-stage{position:relative;background:#111;height:56vh;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none}
.crop-stage img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.crop-mask{position:absolute;inset:0;pointer-events:none}
.crop-win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.92);border-radius:6px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.52)}
.crop-win.round{border-radius:50%}
.crop-tip{font-size:12px;color:var(--text-sub);text-align:center;padding:10px 16px 0}
.crop-zoom{display:flex;align-items:center;gap:12px;padding:12px 16px 4px}
.crop-zoom span{font-size:12px;color:var(--text-sub);flex:none}
.crop-zoom input[type=range]{flex:1;accent-color:var(--tint-deep)}

/* ---------- 资料行：label 和值在同一排，不再上下两排 ---------- */
.pf-row{display:flex;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px solid #F4F4F4;min-height:50px}
.pf-row:last-of-type{border-bottom:0}
.pf-k{flex:none;width:60px;font-size:13px;color:#9A9A9A}
.pf-v{flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  font-size:15px;color:#111;text-align:left;cursor:pointer}
.pf-v.ph{color:#BFBFBF}
.pf-v i{flex:none;font-style:normal;font-size:14px;color:#D0D0D0;margin-left:auto}
.pf-v input,.pf-v textarea{border:0;background:transparent;outline:none;
  width:100%;font-size:15px;color:#111;padding:0;font-family:inherit}
.pf-v textarea{resize:none;line-height:1.6}
.pf-id{flex:1;font-size:14px;color:var(--text-sub);letter-spacing:.02em}
.pf-copy{flex:none;font-size:12px;color:var(--tint-deep);font-weight:600;cursor:pointer}
.pf-save{margin-top:16px}

/* ---------- 头像 / 背景：点一下就换，两个入口分开 ---------- */
.avpick{display:flex;align-items:center;gap:14px}
.avpick img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);flex:none;background:#F5F5F7}
.avpick .ap-t{flex:1;min-width:0}
.avpick .ap-h{font-size:14px;font-weight:600;color:#111}
.avpick .ap-s{font-size:11px;color:var(--text-sub);margin-top:4px;line-height:1.6}
.bgpick{margin-top:2px}
.bgpick .bg-pre{width:100%;aspect-ratio:16/9;border-radius:var(--r-soft);
  background:#EEF1F6;overflow:hidden;position:relative}
.bgpick .bg-pre img{width:100%;height:100%;object-fit:cover;display:block}
.bg-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bg-two .bg-b{border-radius:var(--r-soft);background:#F7F8FA;padding:14px 10px;
  text-align:center;cursor:pointer;transition:background .16s,transform .16s}
.bg-two .bg-b:active{background:#EFF2F7;transform:scale(.98)}
.bg-two .bg-i{font-size:20px;line-height:1;color:var(--tint-deep)}
.bg-two .bg-n{font-size:13px;font-weight:600;color:#111;margin-top:8px}
.bg-two .bg-d{font-size:10px;color:var(--text-sub);margin-top:4px;line-height:1.5}

/* ---------- 我的云迹 / 喜欢：两栏，跟首页一个排布 ---------- */
/* ---------- 六栏都能建文件夹（2026-10-12 深夜 主理人原话）----------
   「我让你做的文件夹你没做，就是比如说云记啊喜欢游戏记录动态包，
     还有后面要做的手账和日记，都要可以建立一个文件夹对吧。」
   → 每一栏上面一排文件夹，横着滑；「＋」新建一个；选中那个右边的 ⋮ 是改名 / 清空 / 删掉。
     每条右上角的 ⋮ 是把这一条归到某个文件夹（一条可以进好几个文件夹，
     移出文件夹只是不再归在那儿，不会把东西删掉）。 */
.mf-bar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.mf-bar::-webkit-scrollbar{display:none}
.mf-f{position:relative;flex:none;display:flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12px;color:var(--text-sub);cursor:pointer;transition:.16s}
.mf-f.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff}
.mf-f s{text-decoration:none;font-size:11px;opacity:.8}
.mf-f em{font-style:normal;font-size:10px;opacity:.62}
.mf-f.add{border-style:dashed;color:var(--tint-deep)}
.mf-dot{display:none;flex:none;width:16px;height:16px;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;border-radius:50%;background:rgba(255,255,255,.3)}
.mf-f.on .mf-dot{display:flex}
.mf-hint{font-size:11px;color:var(--text-sub);margin:2px 0 10px}
.mf-pane{display:block}
.mf-new{padding:6px 0 14px}
.mf-new input{width:100%;height:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:#F7F8FA;font-size:15px;color:var(--text)}
.mf-new input:focus{outline:none;border-color:var(--tint-line)}
.mf-mv{flex:none;margin-left:6px;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  font-style:normal;font-weight:700;color:var(--text-sub);background:#F0F2F6;cursor:pointer}
.mf-mv:active{background:var(--tint-soft);color:var(--tint-deep)}

.mygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mycard{position:relative;border-radius:var(--r-soft);overflow:hidden;background:#F7F8FA;
  cursor:pointer;transition:transform .16s}
.mycard .mf-mv{position:absolute;top:6px;right:6px;margin:0;
  background:rgba(255,255,255,.9);color:#5A6472;box-shadow:0 1px 3px rgba(20,30,60,.12)}
.mycard:active{transform:scale(.98)}
.mycard .yc-cov2{aspect-ratio:3/4;width:100%;object-fit:cover;display:block;
  background:linear-gradient(160deg,#EEF2F8,#F7F5F1)}
.mycard .yc-nop{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  padding:14px;background:linear-gradient(160deg,#EEF2F8 0%,#F7F5F1 100%);
  font-size:13px;line-height:1.7;color:#5A6472;text-align:center}
.mycard .yc-b{padding:9px 10px 11px}
.mycard .yc-t{font-size:12px;color:#333;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mycard .yc-s{font-size:10px;color:#A0A0A0;margin-top:5px;
  display:flex;align-items:center;gap:4px}

/* ---------- 我的动态：一栏一条，像 B 站那样竖着排 ---------- */
.molist{display:flex;flex-direction:column}
.mo-item{padding:14px 0;border-bottom:1px solid #F4F4F4}
.mo-item:last-child{border-bottom:0}
.mo-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mo-hd img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#F0F0F0}
.mo-hd .mo-n{font-size:13px;font-weight:600;color:#111}
.mo-hd .mo-d{font-size:11px;color:#B0B0B0;margin-left:auto}
.mo-tx{font-size:14px;line-height:1.75;color:#222;white-space:pre-wrap;word-break:break-word}
.mo-ft{display:flex;align-items:center;gap:16px;margin-top:10px;
  font-size:11px;color:#A8A8A8}
.mo-ft span{display:flex;align-items:center;gap:4px}

/* ---------- 设置页 ---------- */
.set-hd{padding:6px 16px 14px}
.set-hd .sh1{font-size:20px;font-weight:700;color:#111;letter-spacing:.01em}
.set-hd .sh2{font-size:12px;color:var(--text-sub);margin-top:6px;line-height:1.7}
.set-g{margin-bottom:14px}
.set-g .sg-t{font-size:11px;color:#B0B0B0;letter-spacing:.08em;
  padding:0 4px 8px}
.set-rows{border-radius:var(--r-card);background:#fff;overflow:hidden;
  box-shadow:0 1px 10px rgba(20,30,60,.05)}
.set-r{display:flex;align-items:center;gap:10px;padding:14px 14px;
  border-bottom:1px solid #F4F4F4;cursor:pointer}
.set-r:last-child{border-bottom:0}
.set-r:active{background:#FAFAFA}
.set-r .sr-i{flex:none;width:20px;text-align:center;font-size:15px;color:var(--tint-deep)}
.set-r .sr-t{flex:1;font-size:14px;color:#111}
.set-r .sr-v{flex:none;font-size:12px;color:var(--text-sub);max-width:46%;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-r .sr-g{flex:none;font-size:16px;color:#D0D0D0}
.set-note{font-size:11px;color:var(--text-sub);line-height:1.8;padding:10px 4px 0}
.about-h{font-size:14px;color:#111;line-height:1.9}
.about-s{font-size:12px;color:var(--text-sub);line-height:1.9;margin-top:8px}

/* ---------- 发布时选社区：纵排、可收缩 ---------- */
.pk-pick{margin-top:10px;border-top:1px solid #F2F2F2}
.pk-ph{display:flex;align-items:center;gap:8px;padding:13px 2px;cursor:pointer}
.pk-ph b{flex:1;font-size:14px;font-weight:500;color:#111}
.pk-ph span{font-size:12px;color:var(--tint-deep);font-weight:600}
.pk-ph i{font-style:normal;font-size:12px;color:#C8C8C8;transition:transform .2s}
.pk-ph.open i{transform:rotate(90deg)}
.pk-list{max-height:0;overflow:hidden;transition:max-height .26s ease}
.pk-list.open{max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- 手账：一个简单的记录 ---------- */
.nb-in{width:100%;border-radius:var(--r-soft);background:#F7F8FA;padding:12px;
  border:0;outline:none;font-size:15px;line-height:1.7;resize:none;font-family:inherit}
.nb-row{padding:12px 0;border-bottom:1px solid #F4F4F4}
.nb-row:last-child{border-bottom:0}
.nb-row .nb-d{font-size:11px;color:#B0B0B0;display:flex;align-items:center;gap:6px}
.nb-row .nb-x{font-size:14px;line-height:1.75;color:#222;margin-top:5px;
  white-space:pre-wrap;word-break:break-word}
.nb-row .nb-del{margin-left:auto;font-size:11px;color:var(--warn);cursor:pointer}

/* ---------- 云朵图鉴（2026-10-12 挪进商城） ---------- */
.atlas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.at-i{text-align:center;padding:10px 6px;border-radius:var(--r-soft);
  background:#F7F8FA;position:relative}
.at-i i{display:block;width:100%;aspect-ratio:1;border-radius:12px;margin-bottom:7px}
.at-i b{display:block;font-size:12px;font-weight:600;color:#111}
.at-i span{display:block;font-size:10px;color:#A0A0A0;margin-top:3px}
.at-i.on{background:#EEF3FC;box-shadow:inset 0 0 0 1.5px var(--tint-deep)}
.at-i.lock i{opacity:.35;filter:grayscale(.6)}
.at-i.lock b{color:#9A9A9A}

/* ============================================================
 * 第十轮（2026-10-12 主理人）：首页关注页 / 动态页 / 热门话题
 * ------------------------------------------------------------
 * 主理人原话：
 * 「关注的这一块就是像 B 站那样子，上面应该是一排小圆圈，然后这个用户，
 *   然后后面会有一些什么话，还有很多去关注的」
 * 「下面就是一栏一栏的作品，包括它的名气和它的动态」
 * 「同城后面再加一个动态的这个态」
 * ========================================================== */

/* ---------- 关注页最上面那一排小圆圈（B 站那种） ---------- */
.fr-rail{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:12px 16px 14px;background:#fff;gap:0;scrollbar-width:none}
.fr-rail::-webkit-scrollbar{display:none}
.fr-item{flex:none;width:74px;text-align:center;cursor:pointer}
.fr-av{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto;background:#EEF1F6;border:2px solid #fff;
  box-shadow:0 0 0 1.5px rgba(0,47,167,.14)}
.fr-item:active .fr-av{transform:scale(.95)}
.fr-av.ph{display:flex;align-items:center;justify-content:center;
  background:#F2F4F8;color:var(--tint-deep);font-size:22px;font-weight:400;
  border:1.5px dashed rgba(0,47,167,.35)}
.fr-n{font-size:11px;font-weight:600;color:#111;margin-top:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-s{font-size:10px;color:#A0A0A0;margin-top:2px;line-height:1.4;height:28px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fr-gap{flex:none;width:12px}

/* ---------- 发现页那张框框做成「活动」 ---------- */
.fd-hero.act .fd-hero-art{position:relative}
.fd-hero.act .fd-hero-cov{font-weight:700}

/* ---------- 热门话题页 ---------- */
.tp-row{display:flex;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px solid #F4F4F4;cursor:pointer}
.tp-row:last-child{border-bottom:0}
.tp-row:active{background:#FAFAFA}
.tp-n{flex:none;width:22px;font-size:15px;font-weight:700;color:#C8C8C8;text-align:center}
.tp-row:nth-child(1) .tp-n{color:var(--tint-deep)}
.tp-row:nth-child(2) .tp-n{color:#5B7FC7}
.tp-row:nth-child(3) .tp-n{color:#8FA9D0}
.tp-b{flex:1;min-width:0}
.tp-k{font-size:14px;font-weight:600;color:#111;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tp-s{font-size:11px;color:#A0A0A0;margin-top:3px}
.tp-g{flex:none;font-size:16px;color:#D0D0D0}

/* ============================================================
 * 2026-10-12 主理人改稿：圈子页去大字 + 小 tab / 小符号 + 纵排可滑
 * ------------------------------------------------------------
 * 「不要圈子那两个大字」「直接就显示一个小 tab 显示圈子，
 *   然后一个可以选择的小符号点一下，然后就可以选择娱乐和行业」
 * 「仍然是你纵向的这样的排列，但是不要做成这种表格的形式，感觉很 low」
 * → 表格（.cpick 左列+右列）已停用，改用 ＋ 里选社区那一套（.pk-list/.vr-row）。
 * ============================================================ */
.cc-top{display:flex;align-items:center;gap:8px;padding:12px 14px 4px}
.cc-tab{font-size:13px;font-weight:600;color:#fff;background:var(--tint-deep);
  border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-mark{margin-left:auto;width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:13px;color:#8B93AB;background:#F2F4F8;transition:transform .2s,background .2s}
.cc-mark.open{transform:rotate(180deg);background:var(--tint-deep);color:#fff}
.cc-tabs{display:flex;gap:18px;padding:8px 14px 0;border-bottom:1px solid #F2F2F2}
.cc-t{font-size:15px;font-weight:500;color:#8B93AB;padding:8px 0;cursor:pointer;position:relative}
.cc-t.on{color:var(--tint-deep);font-weight:700}
.cc-t.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--tint-deep);border-radius:2px}
/* 动态上标出发到了哪个圈子 */
.mo-cate{font-size:11px;color:var(--tint-deep);margin-top:6px;display:inline-block;
  background:rgba(0,47,167,.07);border-radius:var(--r-pill);padding:3px 10px}

/* ============================================================
 * 小游戏页（2026-10-12 主理人当场改稿 —— 以此为准，覆盖当天上午那一版）
 * ------------------------------------------------------------
 * 主理人原话：
 *   「搜索…还是要有一个搜索标识…放大镜…放在这个条框的左边」
 *   「云朵图鉴、游戏积分、游戏记录、好友记录这个放在侧栏，不要放在这下面」
 *   「搜索下面直接就是那个海报」
 *   「游戏类别…治愈系的、恐怖系的、趣味的…不要测试，这都指游戏」
 *   「推荐和排行榜搬到游戏解说的上面，它们两个换一个位置」
 *   「下面的这个大空游戏解说给它删了，已收集几朵云这些也删了，因为这个是云朵图鉴里的」
 *   「栏目就不是大堆都堆到一起五个，是一个游戏一个栏目。像海报一样」
 * → 右边一道竖的侧栏；主列：搜索(放大镜) → 大海报 → 类别条 → 推荐+排行榜
 *   → 游戏解说 → 一个游戏一张海报。
 * ========================================================== */
/* 2026-10-12 晚改：侧栏不再跟中间抢宽度。
   主理人：「右侧栏那四个占了太多位置，中间都变形了…把它做成两个图层，
             或者是压小一点，往右侧移，给中间腾位置。」
   → wrap 不再 flex，中间铺满；侧栏改成**浮在上面的一层**（fixed），
     压到 42px 宽、只留图标 + 一行小字。中间只让出 46px，比原来的 58+8 少。 */
.gc-wrap{position:relative;display:block;padding:10px 12px 0}
.gc-main{padding-right:46px}
.gc-rail{position:fixed;right:6px;top:62px;width:42px;z-index:60;
  display:flex;flex-direction:column;gap:6px}
.gc-rail-i{border-radius:var(--r-soft);background:#F2F4F8;padding:7px 2px 5px;
  text-align:center;cursor:pointer;transition:background .2s,color .2s}
.gc-rail-i:last-child{margin-bottom:0}
.gc-rail-i.on{background:var(--tint-deep);color:#fff}
.gc-rail-ic{font-size:15px;line-height:1.2}
.gc-rail-n{font-size:9px;font-weight:600;margin-top:2px;letter-spacing:.02em}

/* 侧栏抽屉（点一下从右边出来） */
.gc-dmask{display:none;position:fixed;top:0;right:0;bottom:0;left:0;
  background:rgba(0,0,0,.38);z-index:120}
.gc-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:78%;max-width:340px;
  background:#fff;z-index:121;overflow-y:auto;padding:14px 14px 24px;
  box-shadow:-8px 0 24px rgba(0,0,0,.14)}
.gc-drawer-hd{display:flex;align-items:center;justify-content:space-between;
  font-size:15px;font-weight:800;margin-bottom:10px;position:sticky;top:-14px;
  background:#fff;padding:14px 0 8px;z-index:2}
.gc-drawer-x{font-size:15px;color:#8B93AB;cursor:pointer;padding:0 2px}
.gc-drawer-b{padding-bottom:8px}
.gc-side-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);padding:12px}
.gc-side-r{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid #F2F2F2;font-size:12px;line-height:1.6}
.gc-side-r:last-of-type{border-bottom:0}
.gc-side-k{color:var(--text-sub);flex:none;max-width:46%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gc-side-v{font-weight:600;text-align:right}

/* 「已收集几朵云」—— 只在图鉴里 */
.gc-minicloud{border-radius:var(--r-soft);background:#F7F8FB;padding:10px 12px;margin-bottom:10px}
.gc-mc-top{display:flex;align-items:baseline;justify-content:space-between}
.gc-mc-n{font-size:15px;font-weight:900}
.gc-mc-s{font-size:11px;color:var(--text-sub)}
.gc-mc-track{margin-top:8px;height:6px;border-radius:999px;background:#EDEFF4;overflow:hidden}
.gc-mc-fill{height:100%;border-radius:999px;background:var(--tint-deep);transition:width .4s}
.gc-mc-hint{margin-top:7px;font-size:11px;color:var(--text-sub);line-height:1.6}

/* 搜索：放大镜在条框左边 */
.gc-search{padding:0 0 10px}
.gc-search-b{display:flex;align-items:center;gap:8px;height:38px;border-radius:999px;
  border:1px solid var(--line);background:#F7F8FB;padding:0 14px}
.gc-search-ic{width:13px;height:13px;border:1.6px solid #9AA0AE;border-radius:50%;
  position:relative;flex:none;display:block}
.gc-search-ic::after{content:'';position:absolute;right:-4px;bottom:-3px;width:6px;
  height:1.6px;background:#9AA0AE;transform:rotate(45deg);border-radius:2px}
.gc-search-in{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-size:13px;color:var(--text)}
.gc-search-in::placeholder{color:#A8A8BC}

/* 大海报 */
.gc-hero{margin:0}
.gc-hero-in{position:relative;height:150px;border-radius:var(--r-card);
  overflow:hidden;background:#101425}
.gc-hero-i{position:absolute;top:0;right:0;bottom:0;left:0;
  background-size:cover;background-position:center;cursor:pointer}
.gc-hero-b{position:absolute;left:14px;right:14px;bottom:14px;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.gc-hero-t{font-size:17px;font-weight:900;letter-spacing:.02em}
.gc-hero-s{font-size:12px;opacity:.92;margin-top:3px;line-height:1.5}
.gc-hero-ar{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;
  border-radius:999px;background:rgba(0,0,0,.34);color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.gc-hero-ar.l{left:8px}
.gc-hero-ar.r{right:8px}
.gc-hero-dots{display:flex;gap:5px;justify-content:center;padding:8px 0 0}
.gc-dot{width:6px;height:6px;border-radius:999px;background:#D8DCE6;
  display:block;cursor:pointer;transition:width .2s,background .2s}
.gc-dot.on{width:16px;background:var(--tint-deep)}

/* 游戏类别条 + 省略号 */
.gc-catbar{display:flex;align-items:center;gap:8px;padding:10px 0 0}
.gc-cats{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.gc-cats::-webkit-scrollbar{display:none}
.gc-cat{flex:none;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  color:#6B7280;background:#F2F4F8;border-radius:999px;padding:6px 12px;cursor:pointer}
.gc-cat.on{background:var(--tint-deep);color:#fff}
.gc-cat-i{font-size:12px;font-weight:400}
.gc-more{flex:none;width:30px;height:30px;border-radius:999px;background:#F2F4F8;
  color:#6B7280;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;cursor:pointer}
.gc-more.on{background:var(--tint-deep);color:#fff}
.gc-allcats{margin:8px 0 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:12px}
.gc-all-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.gc-all-hd b{font-size:15px;font-weight:800}
.gc-all-x{font-size:12px;color:var(--tint-deep);cursor:pointer}
.gc-all-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gc-all-i{border:1px solid var(--line);border-radius:var(--r-soft);padding:10px;cursor:pointer}
.gc-all-i.on{border-color:var(--tint-deep);background:rgba(0,47,167,.05)}
.gc-all-ic{font-size:18px}
.gc-all-n{font-size:13px;font-weight:700;margin-top:2px}
.gc-all-c{font-size:11px;color:var(--tint-deep);margin-top:2px}
.gc-all-i:not(.on) .gc-all-c{color:var(--text-sub)}

/* 推荐方片 + 排行榜：
   2026-10-12 晚改 —— 原来是左右两栏各占一半，手机上被挤成两条窄的，
   排行榜「很瘦」，推荐方片也被压成一条药胶囊。
   主理人：「推荐的图标变成了那种药胶囊，应该是像小说封面一样 3:4 的方块。」
   → 改成上下两行：推荐一行三格（封面 3:4），排行榜独占下面一整行。 */
.gc-row{display:block;margin-top:10px}
.gc-row>.card{min-width:0}
.gc-row>.card+.card{margin-top:10px}
.gc-recs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gc-rc{cursor:pointer;min-width:0}
.gc-rc-th{aspect-ratio:3/4;height:auto;border-radius:12px;background-size:cover;
  background-position:center;background-color:#EDEFF4}
.gc-rc-n{font-size:11px;font-weight:600;margin-top:5px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-flip{padding:8px 0 0;text-align:right}
.gc-flip-b{display:inline-block;font-size:12px;color:var(--tint-deep);cursor:pointer}
.gc-rk{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid #F2F2F2;font-size:12px}
.gc-rk:last-of-type{border-bottom:0}
.gc-rk-n{width:18px;height:18px;border-radius:999px;background:#F2F4F8;color:#6B7280;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.gc-rk:first-child .gc-rk-n{background:var(--tint-deep);color:#fff}
.gc-rk-b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-rk-c{color:var(--text-sub);flex:none}

/* 游戏解说（横滑） */
.gc-guide{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.gc-guide::-webkit-scrollbar{display:none}
.gc-g{flex:none;width:132px;cursor:pointer}
.gc-g-th{height:74px;border-radius:12px;background-size:cover;background-position:center;
  background-color:#EDEFF4}
.gc-g-t{font-size:12px;font-weight:700;margin-top:6px}
.gc-g-s{font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 一个游戏一个栏目，像海报一样 */
.gc-blocks{margin-top:10px}
.gc-blk{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background:#fff;margin-bottom:12px;cursor:pointer}
.gc-blk:last-child{margin-bottom:0}
.gc-blk-th{height:130px;background-size:cover;background-position:center;background-color:#101425}
.gc-blk-b{padding:10px 12px 12px}
.gc-blk-t{font-size:16px;font-weight:900;letter-spacing:.02em}
.gc-blk-c{display:inline-block;margin-top:5px;font-size:11px;color:var(--tint-deep);
  background:rgba(0,47,167,.07);border-radius:var(--r-pill);padding:3px 10px}
.gc-blk-d{font-size:12px;color:var(--text-sub);margin-top:7px;line-height:1.6}
.gc-blk-h{font-size:12px;margin-top:6px;line-height:1.65}
.gc-blk.soon{opacity:.72;cursor:default}
.gc-blk.soon .gc-blk-c{color:var(--text-sub);background:#F2F4F8}

/* ============================================================
 * 趣味测试中心页（2026-10-12 重写 —— 另一整页，连样式都不共用游戏页）
 * ------------------------------------------------------------
 * 主理人：「小游戏就是小游戏，然后趣味测试的界面不能跟小游戏一模一样的。」
 * 「旁边有图鉴、有玩儿、有那个记录，不是游戏记录好不好，这他妈是测试啊，
 *   趣味测试啊，还有跟好友一起玩的测试，就是可以邀请好友的，这个侧边栏的键」
 * 「海报贴上最近的测试」「排行榜做成大家都在测什么」「然后推荐的一些测试」
 * 「下面就是测试的分类…就像手机上面软件的排布一样，一横条排完再排一横」
 *
 * ⚠️ 这一页**一个 .gc-* 都不许复用**：
 *    .gc-* 是小游戏页的，.tc-* 是趣味测试的。
 *    上一版复用了 .gc-*，结果两页长得一模一样，被主理人当场点名——
 *    共用一套样式，迟早长得一模一样。
 *    区别：侧栏更宽(66px)且是白描边卡片（游戏页是灰胶囊）；
 *    海报更矮更圆(132px/22px)、左上角多一块「最近的测试」小牌；
 *    类别是**描边胶囊**（游戏页是灰底胶囊）；
 *    测试是**四列一排一排**（游戏页是一个游戏一张大海报）。
 * ========================================================== */

/* 骨架：中间一竖条 + 右边一道侧栏 */
/* 与游戏页同一个改法（2026-10-12 晚）：侧栏浮起来，中间铺满 */
.tc-wrap{position:relative;display:block;padding:12px 12px 0}
.tc-main{padding-right:46px}

/* 右侧栏：竖着排（比游戏页那道宽，是白描边卡片，不是灰胶囊） */
/* 浮在上面的一层（同游戏页的改法）：不再跟中间抢宽度 */
.tc-rail{position:fixed;right:6px;top:62px;width:42px;z-index:60;
  display:flex;flex-direction:column;gap:6px}
.tc-rail-i{border-radius:14px;background:#fff;border:1px solid var(--line);
  padding:10px 2px 8px;margin-bottom:8px;text-align:center;cursor:pointer;
  box-shadow:0 1px 2px rgba(17,24,39,.04)}
.tc-rail-i:last-child{margin-bottom:0}
.tc-rail-i.on{border-color:var(--tint-deep);background:rgba(0,47,167,.06)}
.tc-rail-i.on .tc-rail-ic{color:var(--tint-deep)}
.tc-rail-i.on .tc-rail-n{color:var(--tint-deep)}
.tc-rail-ic{font-size:17px;line-height:1.2;color:var(--text-sub)}
.tc-rail-n{font-size:10px;font-weight:700;margin-top:4px;letter-spacing:.02em;
  color:var(--text-sub)}

/* 抽屉（从右边出来） */
.tc-dmask{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(17,24,39,.34);
  z-index:120;display:none}
.tc-drawer{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:330px;
  background:#fff;z-index:121;display:none;box-shadow:-6px 0 24px rgba(17,24,39,.14);
  border-radius:18px 0 0 18px}
.tc-drawer-hd{display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 10px;font-size:15px}
.tc-drawer-x{color:var(--text-sub);font-size:15px;cursor:pointer;padding:2px 6px}
.tc-drawer-b{padding:0 16px 20px;max-height:calc(100% - 58px);overflow-y:auto}
.tc-side-c{font-size:13px;line-height:1.7}
.tc-side-note{font-size:12px;color:var(--text-sub);line-height:1.6;margin-bottom:10px}
.tc-side-r{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 0;border-bottom:1px solid #F2F2F2;font-size:13px}
.tc-side-r:last-of-type{border-bottom:0}
.tc-side-k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-side-v{font-size:12px;color:var(--text-sub);flex:none;cursor:pointer}

/* ① 搜索：放大镜在条框左边（CSS 画的，不靠字体） */
.tc-search-b{display:flex;align-items:center;gap:7px;background:#F5F6F9;
  border-radius:var(--r-pill);padding:8px 14px}
.tc-search-ic{width:13px;height:13px;border:1.6px solid #9AA0AE;border-radius:50%;
  position:relative;flex:none;display:block}
.tc-search-ic::after{content:'';position:absolute;left:8px;top:8px;width:6px;height:1.6px;
  background:#9AA0AE;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
.tc-search-in{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-size:13px;color:var(--text)}

/* ② 大海报：比游戏页矮一点、圆一点，左上角一块「最近的测试」小牌 */
.tc-hero{margin:10px 0 0}
.tc-hero-in{position:relative;height:132px;border-radius:22px;overflow:hidden;
  background:#EDEFF4}
.tc-hero-i{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;
  background-position:center;cursor:pointer}
.tc-hero-tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;
  color:#fff;background:rgba(17,24,39,.42);border-radius:var(--r-pill);padding:3px 9px}
.tc-hero-b{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.35)}
.tc-hero-t{font-size:16px;font-weight:900;letter-spacing:.02em}
.tc-hero-s{font-size:11px;opacity:.95;margin-top:3px;line-height:1.5}
.tc-hero-dots{display:flex;gap:5px;justify-content:center;padding:8px 0 0}
.tc-dot{width:6px;height:6px;border-radius:999px;background:#D9DDE5;cursor:pointer}
.tc-dot.on{background:var(--tint-deep);width:14px}

/* ③ 大家都在测什么（游戏页那个排行榜在这里改叫这个） */
.tc-hot{padding-top:2px}
.tc-hot-r{display:flex;align-items:center;gap:9px;padding:7px 0;
  border-bottom:1px solid #F2F2F2;font-size:12px}
.tc-hot-r:last-of-type{border-bottom:0}
.tc-hot-n{width:19px;height:19px;flex:none;border-radius:999px;background:#F2F4F8;
  color:var(--text-sub);font-size:10px;font-weight:800;display:flex;
  align-items:center;justify-content:center}
.tc-hot-r:first-child .tc-hot-n{background:var(--tint-deep);color:#fff}
.tc-hot-b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-hot-c{flex:none;color:var(--text-sub);font-size:11px}

/* ④ 推荐测试（横滑小卡） */
.tc-recs{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.tc-recs::-webkit-scrollbar{display:none}
.tc-rc{flex:none;width:118px;cursor:pointer}
.tc-rc-th{height:66px;border-radius:12px;background-size:cover;background-position:center;
  background-color:#EDEFF4}
.tc-rc-n{font-size:12px;font-weight:700;margin-top:6px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tc-rc-s{font-size:11px;color:var(--text-sub);margin-top:2px}

/* ⑤ 测试分类：描边胶囊（游戏页是灰底胶囊，这里要长得不一样） */
.tc-catbar{display:flex;align-items:center;gap:8px;padding:12px 0 0}
.tc-cats{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.tc-cats::-webkit-scrollbar{display:none}
.tc-cat{flex:none;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  color:var(--text-sub);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;cursor:pointer}
.tc-cat.on{border-color:var(--tint-deep);background:var(--tint-deep);color:#fff}
.tc-cat-i{font-size:12px;font-weight:400}
.tc-more{flex:none;width:30px;height:30px;border-radius:999px;background:#fff;
  border:1px solid var(--line);color:var(--text-sub);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:800;cursor:pointer}
.tc-more.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff}
.tc-allcats{margin-top:10px;background:#FAFBFD;border-radius:var(--r-soft);padding:12px}
.tc-all-hd{display:flex;align-items:center;justify-content:space-between;
  font-size:13px;margin-bottom:10px}
.tc-all-x{font-size:12px;color:var(--tint-deep);cursor:pointer}
.tc-all-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tc-all-i{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 4px;text-align:center;cursor:pointer}
.tc-all-i.on{border-color:var(--tint-deep);background:rgba(0,47,167,.06)}
.tc-all-ic{font-size:16px}
.tc-all-n{font-size:12px;font-weight:600;margin-top:3px}
.tc-all-c{font-size:10px;color:var(--text-sub);margin-top:2px}

/* ⑥ 测试像手机软件那样：一横条排完再排一横 */
.tc-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin-top:12px}
.tc-app{cursor:pointer;min-width:0;text-align:center}
.tc-app-ic{width:100%;aspect-ratio:1/1;border-radius:16px;background-size:cover;
  background-position:center;background-color:#EDEFF4}
.tc-app-n{font-size:11px;font-weight:600;margin-top:5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-app-s{font-size:10px;color:var(--text-sub);margin-top:2px}

/* 侧栏 · 测试图鉴（收的是测出来的卡，不是游戏那本云朵图鉴） */
.tc-atlas-hd{font-size:13px;margin-bottom:8px}
.tc-atlas-bar{height:6px;border-radius:999px;background:#F2F4F8;overflow:hidden;
  margin-bottom:12px}
.tc-atlas-fill{height:100%;background:var(--tint-deep);border-radius:999px;
  transition:width .3s}
.tc-atlas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tc-atlas-c{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:8px 4px;text-align:center}
.tc-atlas-av{width:100%;aspect-ratio:1/1;border-radius:10px;background-size:cover;
  background-position:center;background-color:#EDEFF4}
.tc-atlas-n{font-size:11px;font-weight:700;margin-top:5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-atlas-f{font-size:10px;color:var(--text-sub);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 侧栏 · 测试记录（记的是测过的测试，不是游戏记录） */
.tc-his{padding:9px 0;border-bottom:1px solid #F2F2F2;cursor:pointer}
.tc-his:last-child{border-bottom:0}
.tc-his-n{font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
.tc-his-d{font-size:11px;color:var(--text-sub);margin-top:2px}
.tc-his-r{font-size:12px;margin-top:5px;color:var(--tint-deep)}
.tc-his-x{font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.55}

/* ============================================================
 * 手账（2026-10-12 主理人：广场侧栏的手账）
 * ------------------------------------------------------------
 * 「中间肯定要有一本很大的笔记本，然后可以翻，对吧？
 *   要做到那种复古笔记本的质感」
 * 「下面有一栏，设计的比较高级一点，可以选择想要的笔记本的类型」
 * 「侧栏就是一些装扮的」
 * 「进到这一页里面，下面的话就会弹出一栏，就比如说贴纸」
 * 「弹出这一栏上面还要有一个小小的搜索框…搜索标识旁边还要有一个
 *   类似于小商店的一个按钮」
 * 「搜索条下面可以分类做一些小标签，比如说可爱的、活泼的等等」
 * 类名：.jb-* 手账本体，.js-* 贴纸商城（总库）。
 * ========================================================== */

.jb-body{padding-bottom:96px}
.jb-wrap{position:relative;display:block;padding:12px 12px 0}
.jb-main{padding-right:46px}

/* 那本很大的复古笔记本 */
.jb-book{position:relative;display:flex;border-radius:16px;overflow:hidden;
  border:1px solid #8A6A4B;box-shadow:0 10px 26px rgba(17,24,39,.16),
  inset 0 0 0 1px rgba(255,255,255,.25)}
.jb-spine{width:26px;flex:none;position:relative;
  border-right:1px dashed rgba(255,255,255,.55);
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.28) 0 6px, transparent 6px 14px)}
.jb-paper{flex:1;position:relative;min-height:430px;overflow:hidden;cursor:pointer;
  box-shadow:inset -14px 0 22px -18px rgba(17,24,39,.35)}
.jb-deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  --jb-line:#E7DCC7}
.jb-deco-none{background:none}
.jb-deco-line{background-image:repeating-linear-gradient(180deg,
  transparent 0 27px, var(--jb-line) 27px 28px)}
.jb-deco-grid{background-image:
  repeating-linear-gradient(180deg, transparent 0 21px, var(--jb-line) 21px 22px),
  repeating-linear-gradient(90deg, transparent 0 21px, var(--jb-line) 21px 22px)}
.jb-deco-dot{background-image:radial-gradient(var(--jb-line) 1.1px, transparent 1.2px);
  background-size:22px 22px}
.jb-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  touch-action:none}
.jb-items{position:absolute;top:0;right:0;bottom:0;left:0}
.jb-ribbon{position:absolute;right:16px;top:0;width:9px;height:68px;
  border-radius:0 0 7px 7px;box-shadow:0 3px 8px rgba(17,24,39,.24)}

/* 这一页上贴的东西 */
.jb-it{position:absolute;transform:translate(-50%,-50%);cursor:grab;
  font-size:34px;line-height:1;user-select:none;touch-action:none;
  filter:drop-shadow(0 2px 3px rgba(17,24,39,.18))}
.jb-it-img{width:66px;height:66px;border-radius:14px;background-size:cover;
  background-position:center;background-color:#EDEFF4}
.jb-it-text{font-weight:700;white-space:nowrap;max-width:92%;overflow:hidden;
  text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.jb-fr-solid{border:2px solid #6B7280;border-radius:10px}
.jb-fr-dash{border:2px dashed #9AA0AE;border-radius:10px}
.jb-fr-round{border:2px solid #8A6A4B;border-radius:999px}
.jb-fr-polaroid{border:8px solid #fff;border-bottom-width:22px;border-radius:4px;
  box-shadow:0 2px 8px rgba(17,24,39,.16);background:rgba(255,255,255,.35)}
.jb-fr-tape{border:1px solid rgba(0,0,0,.08);border-radius:3px;
  background:repeating-linear-gradient(135deg, rgba(201,162,39,.28) 0 8px,
    rgba(201,162,39,.14) 8px 16px)}
.jb-fr-note{border:1px solid #E3D3B4;border-radius:4px;background:rgba(255,247,214,.55);
  box-shadow:0 2px 6px rgba(17,24,39,.10)}
.jb-fr-stamp{border:3px double #B3261E;border-radius:50%}
.jb-fr-line{border:0;border-top:2px solid #9AA0AE;border-radius:0;height:0 !important}

/* 翻页 */
.jb-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0 2px}
.jb-pg-b{width:32px;height:32px;border-radius:999px;background:#F5F6F9;color:var(--text-sub);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;
  cursor:pointer}
.jb-pg-n{font-size:12px;font-weight:600;color:var(--text-sub)}
.jb-pg-a{font-size:12px;font-weight:700;color:var(--tint-deep);cursor:pointer}

/* 下面那一栏：换一本 */
.jb-sec{display:flex;align-items:baseline;gap:8px;padding:14px 0 8px}
.jb-sec b{font-size:14px}
.jb-sec-s{font-size:11px;color:var(--text-sub)}
.jb-books{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.jb-books::-webkit-scrollbar{display:none}
.jb-bk{flex:none;width:92px;cursor:pointer}
.jb-bk-cv{height:66px;border-radius:12px 12px 4px 4px;position:relative;padding:6px 8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.jb-bk-tag{font-size:9px;font-weight:700;color:#fff;background:rgba(17,24,39,.34);
  border-radius:999px;padding:2px 7px;display:inline-block}
.jb-bk-pg{height:46px;margin-top:3px;border-radius:4px 12px 12px 4px;position:relative;
  border:1px solid rgba(17,24,39,.08)}
.jb-bk-stitch{position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  border-left:1px dashed rgba(17,24,39,.18)}
.jb-bk-rb{position:absolute;right:9px;top:0;width:5px;height:26px;border-radius:0 0 4px 4px}
.jb-bk-n{font-size:11px;font-weight:600;margin-top:5px;text-align:center}
.jb-bk.on .jb-bk-n{color:var(--tint-deep)}

/* 侧栏：浮在上面的一层（同游戏页、测试页的改法，2026-10-12 晚） */
.jb-rail{position:fixed;right:6px;top:62px;width:42px;z-index:60;
  display:flex;flex-direction:column;gap:6px}
.jb-rail-i{border-radius:14px;background:#fff;border:1px solid var(--line);
  padding:8px 2px 6px;text-align:center;cursor:pointer}
.jb-rail-i.on{border-color:var(--tint-deep);background:rgba(0,47,167,.06)}
.jb-rail-ic{font-size:15px;color:var(--text-sub)}
.jb-rail-i.on .jb-rail-ic{color:var(--tint-deep)}
.jb-rail-n{font-size:9px;font-weight:700;margin-top:2px;color:var(--text-sub)}
.jb-rail-i.on .jb-rail-n{color:var(--tint-deep)}
.jb-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(17,24,39,.34);
  z-index:120;display:none}
.jb-drawer{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:330px;background:#fff;
  z-index:121;display:none;box-shadow:-6px 0 24px rgba(17,24,39,.14);
  border-radius:18px 0 0 18px}
.jb-drawer-hd{display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 10px;font-size:15px}
.jb-drawer-x{color:var(--text-sub);font-size:15px;cursor:pointer;padding:2px 6px}
.jb-drawer-b{padding:0 16px 20px;max-height:calc(100% - 58px);overflow-y:auto}
.jb-side-c{font-size:13px;line-height:1.7}
.jb-side-h{font-size:12px;font-weight:700;margin:12px 0 8px}
.jb-side-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jb-side-i{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:9px 4px;text-align:center;cursor:pointer}
.jb-side-i.on{border-color:var(--tint-deep);background:rgba(0,47,167,.06)}
.jb-side-ic{font-size:16px}
.jb-side-sw{height:34px;border-radius:9px;margin:0 6px}
.jb-side-n{font-size:11px;font-weight:600;margin-top:4px}
.jb-deco-mini{height:34px;border-radius:8px;margin:0 6px;background-color:#FBF6EC}

/* 底部弹出的那一栏 */
.jb-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;
  border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(17,24,39,.16);z-index:130;
  transform:translateY(106%);transition:transform .26s ease;max-height:58vh;
  overflow-y:auto;padding-bottom:14px}
.jb-sheet.on{transform:translateY(0)}
.jb-sh-tabs{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;
  position:sticky;top:0;background:#fff;z-index:2}
.jb-sh-t{flex:none;font-size:12px;font-weight:600;color:var(--text-sub);
  background:#F5F6F9;border-radius:999px;padding:6px 13px;cursor:pointer}
.jb-sh-t.on{background:var(--tint-deep);color:#fff}
.jb-sh-x{margin-left:auto;font-size:15px;color:var(--text-sub);cursor:pointer;
  padding:2px 4px}
.jb-sh-search{display:flex;align-items:center;gap:7px;background:#F5F6F9;
  border-radius:var(--r-pill);padding:7px 10px;margin:0 14px 10px}
.jb-sh-ic{width:13px;height:13px;border:1.6px solid #9AA0AE;border-radius:50%;
  position:relative;flex:none;display:block}
.jb-sh-ic::after{content:'';position:absolute;left:8px;top:8px;width:6px;height:1.6px;
  background:#9AA0AE;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
.jb-sh-in{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-size:13px;color:var(--text)}
.jb-sh-shop{display:flex;align-items:center;gap:4px;flex:none;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.jb-sh-shop-ic{font-style:normal;font-size:12px;color:var(--tint-deep)}
.jb-sh-shop span{font-size:11px;font-weight:700;color:var(--tint-deep)}
.jb-sh-cates{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;
  scrollbar-width:none}
.jb-sh-cates::-webkit-scrollbar{display:none}
.jb-chip{flex:none;font-size:11px;font-weight:600;color:var(--text-sub);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.jb-chip.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff}
.jb-sh-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 14px 6px}
.jb-sh-h{font-size:12px;font-weight:700;padding:0 14px 6px}
.jb-stk{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;background:#F7F8FA;border-radius:12px;cursor:pointer}
.jb-stk-img{background-size:cover;background-position:center;background-color:#EDEFF4}
.jb-fr-pick{text-align:center;cursor:pointer}
.jb-fr-mini{height:52px;border-radius:12px}
.jb-fr-n{font-size:10px;font-weight:600;margin-top:4px;color:var(--text-sub)}
.jb-br{background:#F7F8FA;border-radius:12px;padding:10px 4px;text-align:center;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jb-br.on{background:rgba(0,47,167,.08);box-shadow:inset 0 0 0 1px var(--tint-deep)}
.jb-br-line{display:block;width:70%;border-radius:999px}
.jb-br-n{font-size:10px;font-weight:600;margin-top:6px;color:var(--text-sub)}
.jb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 8px}
.jb-sw{width:26px;height:26px;border-radius:999px;border:2px solid transparent;cursor:pointer}
.jb-sw.on{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}
.jb-inp,.js-inp{width:calc(100% - 28px);margin:0 14px 8px;border:1px solid var(--line);
  border-radius:var(--r-soft);padding:9px 12px;font-size:14px;color:var(--text);
  background:#fff;font-family:inherit}
.jb-btn{margin:0 14px;background:var(--tint-deep);color:#fff;border-radius:var(--r-pill);
  padding:10px 0;text-align:center;font-size:13px;font-weight:700;cursor:pointer}
.jb-art-pv{margin:0 14px 8px;padding:10px 12px;background:#FAFBFD;border-radius:12px;
  text-align:center;min-height:24px}
.jb-side-h:first-child{margin-top:0}

/* ============================================================
 * 贴纸商城（总库）：贴纸 / 我的贴纸 / 做贴纸
 * 「贴纸总库有三个排列方式」 「第三个就是做贴纸…一个工作台…
 *   可以自己创作贴纸…上传自己的照片，图库里的照片…进行修改和涂鸦…
 *   提供画笔…做好了以后进行审核，审核通过以后就可以上架」
 * ========================================================== */
.js-tabs{display:flex;gap:8px;padding:12px 14px 0}
.js-t{flex:none;font-size:13px;font-weight:600;color:var(--text-sub);background:#F5F6F9;
  border-radius:999px;padding:7px 15px;cursor:pointer}
.js-t.on{background:var(--tint-deep);color:#fff}
.js-body{padding:12px 14px 40px}
.js-h{font-size:14px;font-weight:700;margin:14px 0 8px}
.js-back{display:inline-block;font-size:12px;font-weight:700;color:var(--tint-deep);
  margin-bottom:10px;cursor:pointer}
.js-hero{position:relative;height:150px;border-radius:var(--r-card);overflow:hidden;
  background-size:cover;background-position:center;background-color:#EDEFF4}
.js-hero-b{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.js-hero-t{font-size:18px;font-weight:900;letter-spacing:.02em}
.js-hero-s{font-size:12px;opacity:.95;margin-top:3px;line-height:1.5}
.js-search{display:flex;align-items:center;gap:7px;background:#F5F6F9;
  border-radius:var(--r-pill);padding:8px 14px}
.js-ic{width:13px;height:13px;border:1.6px solid #9AA0AE;border-radius:50%;
  position:relative;flex:none;display:block}
.js-ic::after{content:'';position:absolute;left:8px;top:8px;width:6px;height:1.6px;
  background:#9AA0AE;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
.js-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:13px;
  color:var(--text)}
.js-cates{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.js-cates::-webkit-scrollbar{display:none}
.js-cate{flex:none;font-size:11px;font-weight:600;color:var(--text-sub);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.js-cate.on{background:var(--tint-deep);border-color:var(--tint-deep);color:#fff}
.js-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.js-stk{position:relative;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;font-size:30px;line-height:1;background:#F7F8FA;
  border-radius:14px;cursor:pointer}
.js-stk-img{background-size:cover;background-position:center;background-color:#EDEFF4}
.js-stk-n{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:9px;
  color:var(--text-sub);background:rgba(255,255,255,.78);border-radius:0 0 14px 14px;
  padding:1px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.js-more{margin-top:12px;text-align:center;font-size:13px;font-weight:700;
  color:var(--tint-deep);cursor:pointer;padding:10px 0;background:#F5F7FB;
  border-radius:var(--r-soft)}
/* 做贴纸：工作台 */
.js-stage{display:flex;justify-content:center;padding:6px 0 10px}
.js-cv{width:280px;height:280px;max-width:100%;border-radius:16px;background:#FBFAF7;
  border:1px solid var(--line);touch-action:none;cursor:crosshair}
.js-up{display:flex;align-items:center;justify-content:space-between;
  border:1px dashed var(--line);border-radius:var(--r-soft);padding:11px 12px;
  font-size:13px;color:var(--text-sub);cursor:pointer}
.js-file{font-size:11px}
.js-lib{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.js-lib::-webkit-scrollbar{display:none}
.js-lib-i{flex:none;width:56px;height:56px;border-radius:12px;background-size:cover;
  background-position:center;background-color:#EDEFF4;cursor:pointer}
.js-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.js-btn{background:var(--tint-deep);color:#fff;border-radius:var(--r-pill);padding:11px 0;
  text-align:center;font-size:13px;font-weight:700;cursor:pointer;margin-top:8px}
.js-btn.ghost{background:#fff;color:var(--tint-deep);border:1px solid var(--line)}
.js-works{display:flex;flex-direction:column;gap:8px}
.js-work{display:flex;gap:10px;align-items:center;background:#FAFBFD;border-radius:12px;
  padding:8px}
.js-work-th{width:46px;height:46px;flex:none;border-radius:10px;background:#EDEFF4;
  background-size:cover;background-position:center}
.js-work-b{flex:1;min-width:0}
.js-work-n{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.js-work-s{font-size:11px;color:var(--text-sub);margin-top:2px}
.js-work-s.ok{color:#4E6B4F;font-weight:700}

/* ============================================================
 * 第 7 批（2026-10-12）—— 发布重做 / 云迹详情 / 加好友 / 聊天面板 / 皮肤 / 手机比例
 * ============================================================ */

/* ---------- 手机端比例 ----------
   主理人：「调整一下那个比例，让手机点进去的时候的比例正好。」
   原来 html,body{height:100%} 在手机上会被浏览器地址栏吃掉一截，
   底栏和内容对不上；这里换成 dvh，并把窄屏（≤400px，绝大多数手机）
   的留白、字号、卡片内衬整体收一格 —— 一屏能装下的东西更多，
   又不是把字缩小到看不清。 */
@supports (height:100dvh){
  html,body{height:100dvh}
  .wrap{min-height:100dvh}
}
@media (max-width:400px){
  .body{padding:12px 12px 0;gap:11px}
  .card{padding:13px}
  .head{padding:8px 12px}
  .head-brand{font-size:16px}
  .sec-title{font-size:14px;margin-bottom:8px}
  .btn{font-size:15px;padding:12px 0}
  input,textarea{font-size:16px;padding:11px 12px}
  .login-hero img{width:180px}
  .login-title{font-size:28px}
  .login-sub{font-size:13px}
  #app{padding-bottom:92px}
  .tabbar{padding-bottom:env(safe-area-inset-bottom)}
}
/* 矮屏（横着拿、或者小屏机）：登录那一屏别被 padding 顶出去 */
@media (max-height:680px){
  #login{padding:16px 20px 72px;justify-content:flex-start}
  .login-hero img{width:150px}
  .login-title{font-size:26px;margin-top:4px}
  .login-sub{margin-top:6px}
  .login-box{margin-top:14px}
}
/* 宽屏（桌面浏览器）：主体居中，两侧留白 —— 手机上看不到这条 */
@media (min-width:560px){
  .wrap{box-shadow:0 0 40px rgba(0,0,0,.06)}
}

/* ---------- 发布：横条竖列 ----------
   主理人：「这四种呢以横条的这种竖列的这种形式排布」
   「这些所有的选项都是那种横条的，就像那些大类 APP 它们跳出来的那样。」
   → 一条一个横条，竖着往下排；不是九宫格，也不是一排小方片。 */
.pk-col{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.pk-item{display:flex;align-items:center;gap:12px;
  width:100%;min-height:56px;padding:12px 14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);
  cursor:pointer;text-align:left;transition:.14s}
.pk-item:active{background:var(--tint-soft)}
.pk-item.on{border-color:var(--tint-deep);background:var(--tint-soft)}
.pk-item .pi-ic{flex:none;width:38px;height:38px;border-radius:11px;
  background:var(--tint-soft);color:var(--tint-deep);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.pk-item.on .pi-ic{background:var(--tint-deep);color:#fff}
.pk-item .pi-b{flex:1;min-width:0}
.pk-item .pi-n{font-size:15px;font-weight:600;color:#111;line-height:1.35}
.pk-item .pi-s{font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.5}
.pk-item .pi-g{flex:none;font-size:17px;color:#C8C8CE}
.pk-item.off{opacity:.62}
.pk-item.off .pi-ic{background:#F1F2F6;color:#A9AAB2}
.pk-tag{flex:none;font-size:10px;font-weight:600;color:var(--text-sub);
  background:#F1F2F6;border-radius:var(--r-pill);padding:3px 8px}
.pk-item.on .pk-tag{background:#fff;color:var(--tint-deep)}

/* ---------- 写点什么（#page-compose） ---------- */
.cm-row{display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer;
  border-top:1px solid #F2F3F7}
.cm-row:first-child{border-top:0}
.cm-k{flex:1;min-width:0;font-size:14px;font-weight:500;color:#111}
.cm-v{flex:none;font-size:12px;color:var(--tint-deep);font-weight:600;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-i{flex:none;font-style:normal;font-size:15px;color:#C8C8CE;transition:transform .2s}
.cm-row.open .cm-i{transform:rotate(90deg)}
.cm-list{max-height:0;overflow:hidden;transition:max-height .26s ease}
.cm-list.open{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cm-big{width:100%;border:0;border-bottom:1px solid #EEEFF3;border-radius:0;
  padding:6px 2px 12px;font-size:20px;font-weight:700;background:transparent}
.cm-sub{width:100%;border:0;border-bottom:1px solid #F2F3F7;border-radius:0;
  padding:10px 2px;font-size:14px;background:transparent;margin-top:8px}
.cm-big:focus,.cm-sub:focus{border-bottom-color:var(--tint-deep)}
.cm-big::placeholder,.cm-sub::placeholder{color:#B8B9C0;font-weight:400}
.cm-body{width:100%;border:1px solid var(--line);border-radius:var(--r-soft);
  padding:12px;margin-top:12px;font-size:15px;line-height:1.75;resize:vertical;
  min-height:120px}
.cm-count{text-align:right;font-size:11px;color:var(--text-sub);margin-top:6px}
.cm-seg{display:flex;gap:8px}
.cm-seg div{flex:1;text-align:center;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 4px;font-size:13px;cursor:pointer;color:var(--text-sub)}
.cm-seg div.on{border-color:var(--tint-deep);background:var(--tint-deep);color:#fff;font-weight:700}
.cm-sw{display:flex;flex-direction:column}
.cm-sw-row{display:flex;align-items:center;gap:10px;padding:11px 2px;
  border-top:1px solid #F2F3F7}
.cm-sw-row:first-child{border-top:0}
.cm-sw-row .sw-t{flex:1;min-width:0}
.cm-sw-row .sw-t b{display:block;font-size:14px;font-weight:500;color:#111}
.cm-sw-row .sw-t span{display:block;font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.5}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.cm-chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;
  font-size:13px;color:var(--text-sub);cursor:pointer;background:#fff}
.cm-chip.on{border-color:var(--tint-deep);background:var(--tint-deep);color:#fff;font-weight:600}
.cm-note{font-size:11px;line-height:1.8;color:var(--text-sub);padding:6px 2px 0}
.hd-go{border:0;background:var(--tint-deep);color:#fff;border-radius:var(--r-pill);
  padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer}
.hd-go:active{background:var(--tint-deep-dk)}

/* ---------- 一条云迹（#page-note） ---------- */
.nt-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid #EEEFF3}
.nt-bar input{flex:1;min-width:0;border-radius:var(--r-pill);padding:9px 14px;
  font-size:14px;background:#F4F5F8;border:1px solid transparent}
.nt-bar input:focus{background:#fff;border-color:var(--tint-deep)}
.nt-ic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:15px;cursor:pointer;line-height:1;display:flex;
  align-items:center;justify-content:center;color:var(--text-sub)}
.nt-ic.on{border-color:var(--tint-deep);background:var(--tint-soft);color:var(--tint-deep)}
.nt-bar button#ntSend{flex:none;border:0;background:var(--tint-deep);color:#fff;
  border-radius:var(--r-pill);padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer}
/* 详情页 */
.nt-hd{display:flex;align-items:center;gap:11px}
.nt-av{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;background:#EDEFF4;cursor:pointer}
.nt-who{flex:1;min-width:0}
.nt-nick{font-size:15px;font-weight:700;color:#111}
.nt-house{font-size:11px;color:var(--text-sub);margin-top:2px}
.nt-follow{flex:none;border:1px solid var(--tint-deep);color:var(--tint-deep);
  background:#fff;border-radius:var(--r-pill);padding:7px 14px;font-size:12px;
  font-weight:700;cursor:pointer}
.nt-follow.on{border-color:var(--line);color:var(--text-sub);font-weight:500}
.nt-title{font-size:20px;font-weight:700;line-height:1.45;margin-top:14px}
.nt-sub{font-size:13px;color:var(--text-sub);margin-top:5px;line-height:1.6}
.nt-text{font-size:15px;line-height:1.85;margin-top:12px;white-space:pre-wrap;word-break:break-word}
.nt-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:11px;color:var(--text-sub)}
.nt-meta span{background:var(--tint-soft);border-radius:var(--r-pill);padding:5px 10px}
.nt-decl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.nt-decl span{border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;
  font-size:11px;color:var(--text-sub)}
/* 云迹详情页底栏（2026-10-13 重排）
   主理人：「云迹详情页底栏挤得太紧了」—— 原来五个（同频 / 收藏 / 回声 / 转发 /
   分享给朋友）全挤在一行，手机上挤成一团。
   现在分成两块：上面一行三个**数字**，间距拉开；下面一行两个**动作**，做成胶囊。 */
.nt-acts{margin-top:16px;padding-top:14px;border-top:1px solid #F2F3F7}
.nt-nums{display:flex;align-items:center;gap:22px;padding:6px 2px 12px}
.nt-share{display:flex;align-items:center;gap:10px;padding-top:10px;
  border-top:1px dashed #F2F3F7}
.nt-act{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-sub);cursor:pointer}
.nt-act.on{color:var(--tint-deep);font-weight:700}
.nt-act i{font-style:normal;font-size:15px}
/* 数字那一行：字号抬到 14px，留够上下呼吸 */
.nt-nums .nt-act{font-size:14px;line-height:1.2;padding:2px 0}
.nt-nums .nt-act i{font-size:17px}
/* 动作那一行：胶囊小按钮，不是一行裸文字 */
.nt-share .nt-act{gap:6px;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:8px 15px;color:var(--text-sub)}
.nt-share .nt-act:active{background:var(--tint-soft)}
.nt-share .nt-act i{font-size:14px}
/* 窄屏（绝大多数手机）：两行都不要顶到边上，动作那颗允许换行 */
@media (max-width:400px){
  .nt-nums{gap:18px;padding:6px 0 12px}
  .nt-nums .nt-act{font-size:13px}
  .nt-share{flex-wrap:wrap}
}
/* 组件小框：挂在作品下面，可横滑但**不显示下面那条滑动标识**
   （主理人：「小框呢也可以横着滑的，但是没有下面那个横的那个标识」） */
.nt-comp{display:flex;gap:9px;overflow-x:auto;padding:12px 2px 2px;
  margin-top:12px;border-top:1px solid #F2F3F7;
  scrollbar-width:none;-ms-overflow-style:none}
.nt-comp::-webkit-scrollbar{display:none;height:0}
.cp-card{flex:none;width:132px;border:1px solid var(--line);border-radius:var(--r-soft);
  background:#fff;padding:11px 10px;cursor:pointer}
.cp-card .cp-ic{font-size:18px;color:var(--tint-deep)}
.cp-card .cp-n{font-size:13px;font-weight:700;margin-top:6px;color:#111;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-card .cp-s{font-size:11px;color:var(--text-sub);margin-top:3px;line-height:1.5}
.nt-eco{margin-top:14px;padding-top:12px;border-top:1px solid #F2F3F7}
.nt-eco-i{padding:9px 0;border-bottom:1px solid #F7F8FA}
.nt-eco-i:last-child{border-bottom:0}
.nt-eco-n{font-size:12px;font-weight:700;color:var(--tint-deep)}
.nt-eco-t{font-size:14px;line-height:1.7;margin-top:3px}
.nt-eco-d{font-size:11px;color:var(--text-sub);margin-top:3px}

/* ---------- 加好友（#page-addfriend） ---------- */
.af-plate{font-size:26px;font-weight:800;letter-spacing:.16em;text-align:center;
  color:var(--tint-deep);background:var(--tint-soft);border-radius:var(--r-soft);
  padding:20px 12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.af-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #F7F8FA}
.af-row:last-child{border-bottom:0}
.af-row .af-av{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;background:#EDEFF4}
.af-row .af-b{flex:1;min-width:0}
.af-row .af-n{font-size:14px;font-weight:600;color:#111}
.af-row .af-s{font-size:11px;color:var(--text-sub);margin-top:2px}
.af-btn{flex:none;border:1px solid var(--tint-deep);color:var(--tint-deep);background:#fff;
  border-radius:var(--r-pill);padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer}
.af-btn.ghost{border-color:var(--line);color:var(--text-sub);font-weight:500}
.af-btn.ok{border-color:var(--line);color:var(--text-sub);background:#F7F8FA;font-weight:500}

/* ---------- 系统皮肤（设置页里那一栏） ---------- */
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:2px 0}
.sk-i{border:1px solid var(--line);border-radius:var(--r-soft);padding:10px 8px 9px;
  cursor:pointer;background:#fff;text-align:center}
.sk-i.on{border-color:var(--tint-deep);box-shadow:0 0 0 1.5px var(--tint-deep) inset}
.sk-sw{height:44px;border-radius:10px;margin-bottom:8px}
.sk-n{font-size:12px;font-weight:700;color:#111}
.sk-d{font-size:10px;color:var(--text-sub);margin-top:3px;line-height:1.5}

/* ---------- 好友聊天：微信式输入条 ----------
   主理人：「那个输入框旁边，最右边一定有一个加号，加号旁边那有一个表情。」
   顺序：语音/键盘 → 输入框 → 表情 → ＋ */
.dm-bar{display:flex;align-items:center;gap:8px;padding:9px 10px
  calc(9px + env(safe-area-inset-bottom));background:#F7F7F9;border-top:1px solid #ECECEF}
.dm-bar .dm-ic{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:transparent;
  font-size:19px;color:#4A4A52;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dm-bar .dm-in{flex:1;min-width:0;border-radius:var(--r-pill);border:0;padding:9px 14px;
  font-size:15px;background:#fff}
.dm-bar .dm-plus{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:transparent;
  font-size:24px;line-height:1;color:#4A4A52;cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-weight:300}
.dm-bar .dm-ic.on{color:var(--tint-deep)}
/* ＋ 面板 / 表情面板 */
.dm-panel{border-top:1px solid #ECECEF;background:#F7F7F9;padding:12px 10px;
  display:none;max-height:236px;overflow-y:auto}
.dm-panel.open{display:block}
.dm-pg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px}
.dm-pi{text-align:center;cursor:pointer}
.dm-pi .dpi-box{width:52px;height:52px;margin:0 auto;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#4A4A52}
.dm-pi .dpi-n{font-size:11px;color:var(--text-sub);margin-top:5px;line-height:1.4}
.dm-pi.off .dpi-box{background:#EDEEF1;color:#B0B1B8}
.dm-pi.off .dpi-n{color:#B0B1B8}
.dm-emo{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.dm-emo span{text-align:center;font-size:22px;padding:5px 0;cursor:pointer;border-radius:8px}
.dm-emo span:active{background:#E6E7EB}
/* 语音输入那一格：按住说话 */
.dm-hold{flex:1;min-width:0;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;padding:9px 14px;font-size:14px;text-align:center;color:var(--text-sub);
  user-select:none;-webkit-user-select:none}
.dm-hold.on{background:var(--tint-soft);border-color:var(--tint-deep);color:var(--tint-deep);font-weight:700}

/* ---------- 广场 · 大家的云迹（第 7 批） ---------- */
.wk-card .wk-row{display:flex;align-items:center;gap:11px;padding:11px 0;
  border-bottom:1px solid #F4F5F8;cursor:pointer}
.wk-card .wk-row:last-child{border-bottom:0}
.wk-b{flex:1;min-width:0}
.wk-t{font-size:14px;font-weight:600;color:#111;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-s{font-size:11px;color:var(--text-sub);margin-top:4px;line-height:1.5}
.wk-d{display:inline-block;margin-top:5px;font-size:10px;color:var(--text-sub);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.wk-th{flex:none;width:56px;height:56px;border-radius:10px;background:#EDEFF4;
  background-size:cover;background-position:center}
.wk-more{margin-top:12px;text-align:center;font-size:13px;font-weight:700;
  color:var(--tint-deep);cursor:pointer;padding:8px 0}
/* 陪伴页那一排 tab 最右边的「＋ 加好友」 */
.ac-add{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:var(--tint-deep);
  border:1px solid var(--tint-deep);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer}
.ac-add:active{background:var(--tint-soft)}
/* 串门那一页最上面那一行小字 */
.sp-vt{font-size:11px;color:var(--text-sub);margin-bottom:12px;line-height:1.6}