:root{
  /* 皮肤：星火伴暖橙。填充用渐变，文字/描边用 --pri（渐变上的白字对比不足时靠它兜底） */
  --brand:#FF8A47; --brand2:#FF5E78; --grad:linear-gradient(135deg,#FF7A33,#F5476B);
  --bg:#FFF7F1; --card:#FFFFFF; --line:#F2E3D9; --txt:#221A15; --sub:#9A8A80;
  --pri:#C2410C; --pri-d:#9A3412; --me:var(--grad); --bubble:#FFFFFF;
  --ok:#16A34A; --warn:#D97706; --bad:#EF4444;
  --tint:#FFF1E8; --tint2:#FBE7DC; --shadow:0 6px 22px rgba(180,90,40,.10);
  --r:14px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --bar:56px; --tab:58px;
  font-size:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior-y:none}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.5; user-select:none; -webkit-font-smoothing:antialiased;
}
input,textarea{user-select:text; font:inherit; color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}

.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg)}
.view{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;background:var(--bg);
  transform:translateX(100%);transition:transform .22s ease}
.view.on{display:flex;transform:translateX(0)}
.view.base{transform:translateX(0)}
.view.base.leave{transform:translateX(-18%)}

/* 他的安卓浏览器内核实测是 Chrome 76（?diag=1 读出），不认 flex gap（Chrome 84+）：间距一律用 margin 表达 */
.bar>*+*{margin-left:8px}
.row>*+*{margin-left:12px}
.row .r>*+*{margin-top:5px}
.brand .brand-dot{margin-right:9px}
.hero .big>*+*{margin-left:6px}
.scard>.flame+*{margin-left:12px}
.scard .s1>*+*{margin-left:7px}
.scard .days>*+*{margin-left:3px}
.sparkbar>*+*{margin-left:9px}
.msgs>*+*{margin-top:2px}
.sheet .btns>*+*{margin-left:10px}
.swatches>*+*{margin-left:10px}
.tab>span+span{margin-top:2px}
/* ---------- 顶栏 ---------- */
.bar{
  flex:0 0 auto;display:flex;align-items:center;
  padding:calc(var(--safe-t) + 10px) 14px 10px;min-height:var(--bar);
  background:rgba(255,247,241,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);z-index:5
}
.bar h1{margin:0;font-size:17px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:20px;color:var(--sub)}
.bar .icon:active{background:var(--tint2)}
.bar .back{font-size:26px;line-height:1;margin-left:-8px}
.chat-head{flex:1;min-width:0}
.chat-head h1{font-size:16px}
.chat-head .sub{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--safe-b) + 78px)}

/* ---------- 认证 ---------- */
.auth{display:none;place-items:center;padding:24px;overflow-y:auto;background:linear-gradient(170deg,#FFE9D8,var(--bg) 46%)}
.auth.on{display:grid}
.auth-card{width:100%;max-width:380px;background:var(--card);border-radius:22px;padding:26px 22px 20px;
  box-shadow:0 12px 40px rgba(160,80,40,.14)}
.brand{font-size:26px;font-weight:700;display:flex;align-items:center;}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 5px rgba(255,122,51,.18)}
.brand-sub{margin:10px 0 20px;font-size:13px;color:var(--sub);line-height:1.7}
.tabs2{display:flex;background:var(--tint2);border-radius:12px;padding:4px;margin-bottom:16px}
.tab2{flex:1;padding:9px 0;border-radius:9px;font-size:14px;color:var(--sub);font-weight:600}
.tab2.on{background:var(--card);color:var(--pri);box-shadow:0 1px 4px rgba(160,80,40,.12)}
#authForm label{display:block;font-size:13px;color:var(--sub);margin-bottom:12px}
#authForm label[hidden]{display:none}
#authForm input{display:block;width:100%;margin-top:5px;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:#FFFCFA;font-size:16px;outline:none}
#authForm input:focus{border-color:var(--brand);background:var(--card)}
.err{min-height:18px;font-size:12.5px;color:var(--bad);margin:-4px 0 8px}
.primary{width:100%;padding:13px;border-radius:13px;background:var(--grad);color:#fff;font-size:16px;font-weight:600;
  box-shadow:0 4px 14px rgba(245,71,107,.28)}
.primary:active{filter:brightness(.94)}
.primary[disabled]{opacity:.55}
.tip{font-size:11.5px;color:var(--sub);text-align:center;margin:14px 0 0;line-height:1.6}
/* 备案号：固定在首页底部中间，链接到工信部站点（管局硬性要求） */
.beian{margin:16px 0 0;text-align:center;font-size:11px;line-height:1.6}
.beian a{color:var(--sub);text-decoration:none}

/* ---------- 列表行 ---------- */
.row{display:flex;align-items:center;padding:12px 15px;background:var(--card);position:relative}
.row+.row{box-shadow:0 -1px 0 var(--line)}
.row:active{background:var(--tint)}
.row .txt{flex:1;min-width:0}
.row .t{font-size:15.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.row .r{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;}
.row .time{font-size:11.5px;color:var(--sub)}
.row .sub2{font-size:11.5px;color:var(--sub)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;
  font-size:11.5px;font-weight:600;display:grid;place-items:center}
.badge.mute{background:#D8C8BE}
.empty{padding:56px 24px;text-align:center;color:var(--sub);font-size:13.5px;line-height:1.9}
.empty b{display:block;font-size:15px;color:var(--txt);margin-bottom:6px;font-weight:600}

.avatar{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  color:#fff;font-size:16px;font-weight:600;overflow:visible}
.avatar.sm{width:34px;height:34px;border-radius:10px;font-size:13px}
.avatar.lg{width:60px;height:60px;border-radius:18px;font-size:22px}
.avatar .on-dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:var(--ok);border:2.5px solid var(--card)}
.avatar.group{border-radius:13px;background:linear-gradient(135deg,#5986FF,#FF9458)}
/* 照片压在颜色+首字母上面：图挂了或还没加载时，下面那层就是兜底 */
.avatar img{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.avtap{position:relative;flex:0 0 auto}
.avcam{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--card);
  box-shadow:0 1px 5px rgba(120,60,30,.28);display:grid;place-items:center;font-size:12px}

/* ---- 头像框（商店）----
   戴框时头像裁成圆：环是圆的，方的四个角会顶在环里。
   .fr 是压在头像上的那一层，四枚图框（抠好圆孔的 PNG）和三枚色环（内嵌 SVG 描边）共用这一条几何，
   所以货架预览和实际戴上是同一段 CSS，不会「货架好看、戴上难看」。 */
.avatar.wear{border-radius:50%}
.avatar.wear img{border-radius:50%}
.avatar .fr{position:absolute;top:-12%;left:-12%;width:124%;height:124%;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain}
.avatar.xl{width:76px;height:76px;border-radius:22px;font-size:26px}
.fr-heat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFB03A'/%3E%3Cstop offset='1' stop-color='%23F5476B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='url(%23a)' stroke-width='12'/%3E%3C/svg%3E")}
.fr-leaf{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237BD3A8'/%3E%3Cstop offset='1' stop-color='%232FA37A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='url(%23a)' stroke-width='12'/%3E%3C/svg%3E")}
.fr-dust{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236D7EF7'/%3E%3Cstop offset='1' stop-color='%239B5CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='url(%23a)' stroke-width='12'/%3E%3C/svg%3E")}

/* ---------- 分组标题 ---------- */
.sec{padding:18px 16px 7px;font-size:12.5px;color:var(--sub);font-weight:600;letter-spacing:.3px}
.card{background:var(--card);border-radius:var(--r);margin:0 12px;overflow:hidden;box-shadow:var(--shadow)}
.card+.card{margin-top:10px}
.card .row{padding:14px 15px}
.card .row+.row{box-shadow:0 -1px 0 var(--line)}
.card .row .t{font-weight:500}
.card .row .val{color:var(--sub);font-size:13.5px;max-width:52%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danger{color:var(--bad)!important}

/* ---------- 搜索 ---------- */
.search{padding:8px 14px 10px;background:var(--card);border-bottom:1px solid var(--line)}
.search input{width:100%;padding:9px 13px;border-radius:11px;background:var(--tint2);border:0;outline:none;font-size:15px}

/* ---------- 舍利子首页 ---------- */
.hero{margin:14px 12px 4px;padding:18px 18px 20px;border-radius:20px;color:#fff;position:relative;overflow:hidden;
  background:var(--grad);box-shadow:0 10px 28px rgba(245,71,107,.30)}
.hero::after{content:"";position:absolute;right:-34px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.14)}
.hero .hi{font-size:12.5px;opacity:.9;letter-spacing:.4px}
.hero .big{display:flex;align-items:baseline;margin:6px 0 2px}
.hero .big b{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px}
.hero .big span{font-size:13px;opacity:.92}
.hero .lv{display:inline-block;margin-top:8px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.22);backdrop-filter:blur(4px)}
.hero .stat{margin-top:12px;font-size:12.5px;opacity:.94;line-height:1.7}

/* 图鉴：达到过的等级露真身，没到的模糊挡住；格子上不标等级也不标锁 */
.dr{display:flex}
.dr>*+*{margin-left:5px}
.dc{flex:1;min-width:0;text-align:center}
.dc .dt{position:relative;height:40px;border-radius:12px;overflow:hidden;background:var(--tint)}
.dc .dt img{display:block;width:100%;height:100%;object-fit:contain}
.dc .dt::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(255,247,241,.34);opacity:0;transition:opacity .2s}
.dc.lock .dt img{filter:blur(5px) saturate(.55)}
.dc.lock .dt::after{opacity:1}
.dex7{padding:0 16px 14px}
.dex7 .dc:active .dt::after{opacity:1}

/* ---------- 仔仔：聊天页悬浮小人（形象复用上面的 L1-L7） ---------- */
/* 位置用 left/top 百分比挂中心点，所以 transform 已被 translate(-50%,-50%) 占住，
   动画一律放在内层 .zzb 上，别在这里抢 transform */
.zz{position:absolute;z-index:8;width:56px;height:56px;transform:translate(-50%,-50%);touch-action:none;
  -webkit-user-select:none;user-select:none}
.zz[hidden]{display:none}
.zzb{position:relative;width:56px;height:56px;animation:zzBreath 3.2s ease-in-out infinite}
.zzb img{width:52px;height:52px;margin:2px 0 0 2px;object-fit:contain;
  filter:drop-shadow(0 4px 9px rgba(180,90,40,.3))}
.zzb:active{opacity:.9}
.zz.dim .zzb{animation-duration:5s;opacity:.7}
.zz.dim .zzb img{filter:grayscale(1) contrast(.92)}
.zz.dim .zzp{display:none}
.zzp i{position:absolute;left:50%;bottom:8px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--brand);opacity:0;animation:zzUp 2.6s linear infinite}
.zzp i:nth-child(2){margin-left:7px;animation-delay:.9s}
.zzp i:nth-child(3){margin-left:-11px;animation-delay:1.8s}
@keyframes zzBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
@keyframes zzUp{0%{opacity:0;transform:translateY(0) scale(.6)}22%{opacity:.9}100%{opacity:0;transform:translateY(-32px) scale(1)}}
.zz.boing .zzb,.zzbig.boing{animation:zzBoing .46s ease-out}
@keyframes zzBoing{0%{transform:scale(1)}28%{transform:scale(1.2) rotate(-7deg)}58%{transform:scale(.94) rotate(5deg)}100%{transform:scale(1)}}

.zzstage{position:relative;height:170px;margin:0 16px 10px;border-radius:20px;overflow:hidden;
  background:radial-gradient(circle at 50% 78%,var(--tint2),var(--tint) 70%)}
.zzstage.dim{filter:grayscale(1) contrast(.94)}
.zzsky i{position:absolute;bottom:26px;width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:0;
  animation:zzUp 3s linear infinite}
.zzsky i:nth-child(1){left:34%}
.zzsky i:nth-child(2){left:44%;animation-delay:.6s}
.zzsky i:nth-child(3){left:54%;animation-delay:1.2s}
.zzsky i:nth-child(4){left:64%;animation-delay:1.8s}
.zzbig{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  animation:zzBreath 3.2s ease-in-out infinite}
.zzbig img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(180,90,40,.26))}
/* 转台 sprite：一行 8 帧，background-size 800% 让一帧正好铺满，位置按 100/7 递进取帧 */
.zzturn{width:100%;height:100%;background-repeat:no-repeat;background-size:800% 100%;
  background-position:0 0;touch-action:pan-y;cursor:grab;filter:drop-shadow(0 8px 20px rgba(180,90,40,.26))}
.zzturn.back{transition:background-position .3s ease-out;cursor:auto}
.zzword{position:absolute;left:0;right:0;top:14px;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--pri-d);opacity:0;transition:opacity .18s}
.zzword.on{opacity:1}
.zzhead{display:flex;align-items:baseline;padding:0 16px}
.zzhead .lv{font-size:16.5px;font-weight:700;color:var(--pri)}
.zzhead .dd{margin-left:8px;font-size:12.5px;color:var(--sub)}
.zzhead .dd b{font-size:16px;color:var(--txt)}
.zzbar{padding:0 16px}

.scard{display:flex;align-items:center;background:var(--card);border-radius:18px;margin:0 12px 10px;
  padding:13px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.scard:active{transform:scale(.99)}
.scard.off{opacity:.62}
.scard .flame{flex:0 0 auto;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  background:var(--tint)}
.scard.fix .flame{background:#FFF3D6}
.scard.dead .flame{background:#EFEAE7;filter:grayscale(1)}
.scard .sb{flex:1;min-width:0}
.scard .s1{display:flex;align-items:center;}
.scard .sname{font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.scard .lvb{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--grad);color:#fff}
.scard .lvb.n{background:var(--tint2);color:var(--sub)}
.scard .days{display:flex;align-items:baseline;margin:3px 0 6px}
.scard .days b{font-size:25px;font-weight:800;line-height:1.1;letter-spacing:-.5px}
.scard .days i{font-style:normal;font-size:11.5px;color:var(--sub)}
.scard .days em{font-style:normal;font-size:11.5px;color:var(--sub);margin-left:9px}
.prog{height:5px;border-radius:3px;background:var(--tint2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:var(--grad);transition:width .3s ease}
.scard.fix .prog i{background:linear-gradient(90deg,#F59E0B,#EF4444)}
.scard .smsg{font-size:11.5px;color:var(--sub);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .pill{position:absolute;right:12px;top:12px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px}
.scard.fix .pill{background:#FFF0CE;color:#9A5B00}
.scard.dead .pill{background:#EFEAE7;color:#7A6E68}

.sparkbar{flex:0 0 auto;display:flex;align-items:center;padding:8px 14px;background:var(--tint);
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--pri)}
.sparkbar[hidden]{display:none}
.sparkbar .n{font-weight:800;font-size:14px}
.sparkbar .g{flex:1;min-width:0;height:5px;border-radius:3px;background:var(--tint2);overflow:hidden}
.sparkbar .g i{display:block;height:100%;background:var(--grad);border-radius:3px}
.sparkbar.fix{background:#FFF6E4;color:#9A5B00;border-bottom-color:#F5E2BE}
.sparkbar.fix .g i{background:linear-gradient(90deg,#F59E0B,#EF4444)}
.sparkbar.dead{background:#F3EEEB;color:#7A6E68}
.sparkbar .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}

/* ---------- 聊天窗口 ---------- */
.chat{background:#FBEDE4}
/* 聊天背景预设：只在本机生效，选择存 localStorage；预设用 --bgl/--bgs 两个变量，自选图由 JS 写同名变量 */
.p-paper{--bgl:radial-gradient(rgba(160,80,40,.10) 1px,transparent 1.2px),linear-gradient(#FBEDE4,#FBEDE4);--bgs:14px 14px,auto}
.p-grid{--bgl:linear-gradient(rgba(160,80,40,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(160,80,40,.08) 1px,transparent 1px),linear-gradient(#FFF4EC,#FFF4EC);--bgs:18px 18px,18px 18px,auto}
.p-sunset{--bgl:linear-gradient(160deg,#FFE1C7,#FFCFE0)}
.p-mint{--bgl:linear-gradient(160deg,#E4F5EC,#F5FBF2)}
.p-lilac{--bgl:linear-gradient(160deg,#EBE4FA,#FCEAF4)}
.p-sky{--bgl:linear-gradient(160deg,#E1EEFB,#F1F7FC)}
.chat.hasbg{background-image:var(--bgl);background-size:var(--bgs,cover);background-position:center}
.bggrid{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 11px 2px}
.bgcell{position:relative;height:64px;margin:5px;border-radius:13px;border:2px solid transparent;box-shadow:0 1px 3px rgba(120,60,30,.12);
  background-image:var(--bgl);background-size:var(--bgs,cover);background-position:center}
.bgcell span{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:11px;font-weight:600;
  color:#5C3520;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.bgcell.img{background-color:#FFF9F5;font-size:22px;text-align:center;padding-top:9px}
.bgcell.on{border-color:var(--brand)}
@media (prefers-color-scheme:dark){
  .chat.hasbg{background-image:linear-gradient(rgba(20,17,14,.88),rgba(20,17,14,.88)),var(--bgl);background-size:auto,var(--bgs,cover)}
  .bgcell span{color:#3A2416}
}
.msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 8px;display:flex;flex-direction:column;}
.msgs .more{align-self:center;font-size:12px;color:var(--pri);padding:6px 12px;margin-bottom:6px;background:var(--card);border-radius:20px}
.daysep{align-self:center;font-size:11.5px;color:var(--sub);background:rgba(150,80,40,.08);padding:3px 10px;border-radius:20px;margin:10px 0 6px}
.sys{align-self:center;font-size:11.5px;color:var(--sub);margin:6px 0;text-align:center;max-width:80%;line-height:1.6}
.m{display:flex;align-items:flex-end;margin-top:8px;max-width:100%}
.m.me{flex-direction:row-reverse}
/* 百分比宽度只能写在定宽的 .m 上：写在自动宽度的元素里会形成循环依赖，老内核按 min-content 算，中文变成一字一行 */
.m .col{max-width:74%;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.m.me .col{align-items:flex-end}
.m .bub{max-width:100%;padding:9px 12px;border-radius:16px;background:var(--bubble);font-size:15.5px;
  line-height:1.45;word-break:break-word;white-space:pre-wrap;box-shadow:0 1px 2px rgba(120,60,30,.08);position:relative}
.m .avatar{margin:0 8px}
/* 自己的气泡交给长按撤回，所以关掉系统长按（选中复制、保存图片）——不然 1 秒的按住会被它抢走 */
.m.me .bub{background:var(--me);color:#fff;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.m .bub.tail-l{border-bottom-left-radius:5px}
.m .bub.tail-r{border-bottom-right-radius:5px}
.m .who{font-size:11.5px;color:var(--sub);margin-bottom:3px}
.m .bub .st{font-size:10.5px;opacity:.8;margin-top:2px;text-align:right}
.m img.ph{border-radius:12px;max-width:220px;max-height:280px;object-fit:cover;background:#F3E2D6}
.m .bub.img-only{padding:3px;line-height:0;background:var(--card);border-radius:14px}
.m.me .bub.img-only{background:var(--card)}
.m .bub.img-only.tail-l,.m .bub.img-only.tail-r{border-radius:14px}
/* 商店「文字框」那栏卖的皮肤：四角各一张透明花纹 PNG，边框两条线由 CSS 画。
   花纹是定尺寸的，长消息只会把线拉长 —— 整条边压图那版试过，三行字就把松枝撑到盖住正文。
   底色/字色/四张图从目录经 --skbg / --skfg / --sk4 带进来，所以日后加一枚只改 lib/shop.js，不改这里。 */
.m .bub.sk,.sk.mini{border-radius:3px;background-color:var(--skbg);color:var(--skfg);box-shadow:none;
  background-image:var(--sk4);background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:left 5px top 5px,right 5px top 5px,left 5px bottom 5px,right 5px bottom 5px}
.m .bub.sk{padding:12px 43px;min-height:68px;background-size:28px 28px}
.m .bub.sk .st{opacity:.72}
.sk.mini{display:inline-block;padding:8px 25px;min-height:38px;font-size:12.5px;line-height:1.45;background-size:15px 15px}
.m .bub.sk:before,.sk.mini:before,.m .bub.sk:after,.sk.mini:after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.62);pointer-events:none}
.m .bub.sk:before,.sk.mini:before{top:0;left:0;right:0;bottom:0}
.m .bub.sk:after,.sk.mini:after{top:4px;left:4px;right:4px;bottom:4px}
.sk.mini:after{top:3px;left:3px;right:3px;bottom:3px}
.m .bub.img-only img.ph{border-radius:10px}
.typing{display:flex;align-items:center;padding:2px 4px;font-size:12px;color:var(--sub);margin:6px 0 2px}
.typing i{margin-left:4px;width:5px;height:5px;border-radius:50%;background:#B8A49A;display:inline-block;animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.composer{flex:0 0 auto;display:flex;align-items:flex-end;padding:9px 10px calc(var(--safe-b) + 9px);
  background:#FFF9F5;border-top:1px solid var(--line)}
.composer .icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:20px;color:var(--sub);flex:0 0 auto}
.composer textarea{flex:1;min-width:0;margin:0 8px;min-height:38px;max-height:120px;padding:8px 12px;border-radius:19px;border:1px solid var(--line);
  background:var(--card);outline:none;font-size:16px;resize:none;line-height:1.4;overflow-y:auto}
.composer textarea:focus{border-color:#F5C6A8}
.send{flex:0 0 auto;padding:0 15px;height:38px;border-radius:19px;background:var(--grad);color:#fff;font-size:15px;font-weight:600}
.send[disabled]{background:#E9CDBB}

/* ---------- 弹层 ---------- */
.sheet-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(46,22,10,.42);z-index:40;opacity:0;transition:opacity .2s}
.sheet-mask.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;max-height:82%;overflow:hidden;
  background:var(--bg);border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .25s ease;
  padding-bottom:calc(var(--safe-b) + 10px);display:flex;flex-direction:column}
.sheet.on{transform:translateY(0)}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 6px}
.sheet .grab{width:38px;height:4px;border-radius:3px;background:#E7D6C9;margin:6px auto 8px}
.sheet h3{margin:6px 18px 12px;font-size:16.5px}
.sheet .pad{padding:0 16px}
.sheet .btns{display:flex;padding:14px 16px 6px}
.sheet .btns button{flex:1;padding:13px;border-radius:13px;background:var(--card);font-size:15.5px;font-weight:600;box-shadow:0 1px 3px rgba(120,60,30,.08)}
.sheet .btns button.go{background:var(--grad);color:#fff}
.sheet .btns button.del{background:#FDE4E4;color:var(--bad)}
.field{display:block;padding:12px 16px;font-size:13px;color:var(--sub)}
.field input,.field select{display:block;width:100%;margin-top:6px;padding:12px 13px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:16px;outline:none}
.chips{display:flex;flex-wrap:wrap;padding:4px 12px 6px}
.chip{margin:4px;padding:7px 13px;border-radius:20px;background:var(--card);font-size:13.5px;box-shadow:0 1px 3px rgba(120,60,30,.08);border:1.5px solid transparent}
.chip.on{border-color:var(--brand);background:var(--tint);color:var(--pri);font-weight:600}
/* 标签：.tgs.in 用在列表行/资料卡里（小号），编辑器里的是可点删的大号 */
.tgs{display:flex;flex-wrap:wrap;padding:4px 12px 6px}
.tgs.in{padding:4px 0 0;margin-left:-5px}
.tg{margin:4px;padding:5px 11px;border-radius:20px;background:var(--tint2);color:var(--pri);font-size:12.5px;font-weight:600}
.tgs.in .tg{padding:2px 8px;font-size:11px;font-weight:500}
.tg.on{cursor:pointer}
.tg.n{background:rgba(150,80,40,.07);color:var(--sub);font-weight:400}
.swatches{display:flex;padding:6px 16px 12px}
.sw{width:32px;height:32px;border-radius:10px;border:3px solid transparent}
.sw.on{border-color:var(--txt)}

/* ---------- 朋友圈（发现） ---------- */
.pcard{display:flex;padding:14px 15px;background:var(--card);border-radius:var(--r);margin:12px 12px 0;box-shadow:var(--shadow)}
.pmain{flex:1;min-width:0}
/* 老内核不认 flex gap，纵向间距用兄弟选择器表达 */
.pmain>*+*{margin-top:9px}
.pname{font-size:15px;font-weight:600;color:var(--pri)}
.ptext{font-size:15px;line-height:1.55;word-break:break-word;white-space:pre-wrap}
.pvis{display:inline-block;font-size:11px;font-weight:600;color:var(--sub);background:var(--tint2);
  padding:2px 8px;border-radius:20px}
.ptime{font-size:11.5px;color:var(--sub)}
.pfoot{display:flex;align-items:center;justify-content:space-between}
.pbtns{display:flex;align-items:center}
.pbtns>*+*{margin-left:8px}
.pbtns button{padding:5px 11px;border-radius:20px;background:var(--tint);font-size:12.5px;color:var(--pri);font-weight:600}
.pbtns button.hot{background:var(--grad);color:#fff}
.pbtns button.del{color:var(--sub);font-weight:500;background:transparent}
/* 九宫格：格子全部定宽定高，百分比宽度只挂在这种已定宽的元素上 */
.pgrid{display:grid;grid-template-columns:repeat(3,88px);grid-gap:6px;gap:6px}
.pgrid.s1{grid-template-columns:150px}
.pgrid.s1 i{height:150px}
.pgrid.s2{grid-template-columns:repeat(2,110px)}
.pgrid.s2 i{height:110px}
.pgrid i{position:relative;height:88px;border-radius:9px;overflow:hidden;background:var(--tint2)}
.pgrid img{width:100%;height:100%;object-fit:cover}
.plikes{display:flex;align-items:center;padding:7px 10px;border-radius:10px;background:var(--tint);
  font-size:12.5px;color:var(--pri);line-height:1.5;word-break:break-word}
.plikes i{font-style:normal;margin-right:5px}
.pcmts{padding:7px 10px;border-radius:10px;background:var(--tint);font-size:13px;line-height:1.6}
.pcmts>*+*{margin-top:3px}
.pcmt{color:var(--txt);word-break:break-word;white-space:pre-wrap}
.pcmt b{color:var(--pri);font-weight:600}
.pempty{color:var(--sub);font-size:12.5px}
.pfimgs{display:flex;flex-wrap:wrap;padding:2px 11px 6px}
.pfimgs>*{margin:5px}
.pfthumb{position:relative;width:74px;height:74px;border-radius:11px;overflow:hidden;background:var(--tint2);flex:0 0 auto}
.pfthumb img{width:100%;height:100%;object-fit:cover}
.pfx{position:absolute;right:0;top:0;width:22px;height:22px;border-radius:0 0 0 10px;background:rgba(38,22,14,.66);
  color:#fff;font-size:13px;line-height:22px;text-align:center}
.pfadd{margin:2px 16px 8px;padding:11px 15px;border-radius:12px;background:var(--card);border:1.5px dashed #E7C9B3;
  font-size:13.5px;color:var(--sub);width:calc(100% - 32px);text-align:center}
.field textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);font-size:16px;outline:none;resize:none;min-height:88px;max-height:170px;line-height:1.45;overflow-y:auto}
.pload{padding:14px;text-align:center;font-size:12.5px;color:var(--pri)}

/* ---------- 广场：两栏（动态 / 商店）的分类条 ---------- */
#findFeed[hidden]{display:none}
.pzpills{display:flex;padding:6px 12px 8px}
.pzpills .pzp{flex:1;padding:8px 0;border-radius:999px;background:var(--card);color:var(--sub);font-size:13px;font-weight:600;box-shadow:0 1px 3px rgba(120,60,30,.07)}
.pzpills .pzp+*{margin-left:8px}
.pzpills .pzp.on{background:var(--grad);color:#fff}

/* ---- 商店（广场的两栏之一）----
   预览用的就是自己那张头像 + 同一段 .fr 几何，所以货架上看到什么，戴上就是什么。 */
.shp{padding:2px 14px 26px}
.shpbal{padding:14px 16px;border-radius:16px;background:var(--grad);color:#fff;
  box-shadow:0 6px 18px rgba(255,110,60,.24)}
.shpbal .top{display:flex;align-items:baseline}
.shpbal b{font-size:30px;font-weight:800;line-height:1}
.shpbal .u{font-size:12.5px;margin-left:5px}
.shpbal .d{display:block;margin-top:8px;font-size:11.5px;line-height:1.6;opacity:.93}
.shpgrid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;margin-top:12px}
.shphd{margin-top:20px;font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.5px}
.shpcard{padding:12px 12px 12px;border-radius:16px;background:var(--card);box-shadow:0 1px 4px rgba(120,60,30,.08);text-align:center}
.shpcard.wear{box-shadow:0 0 0 2px var(--pri),0 1px 4px rgba(120,60,30,.08)}
.shpav{height:94px;display:grid;place-items:center}
.shpname{font-size:14px;font-weight:600}
.shpdesc{margin-top:3px;height:34px;overflow:hidden;font-size:11px;line-height:1.55;color:var(--sub)}
.shpbtn{display:block;width:100%;margin-top:9px;padding:10px 0;border-radius:11px;
  background:var(--tint);color:var(--pri);font-size:13px;font-weight:600}
.shpbtn.go{background:var(--grad);color:#fff}
.shpbtn.no{background:var(--tint2);color:var(--sub)}
.shpgift{display:block;width:100%;margin-top:6px;padding:6px 0;font-size:11.5px;color:var(--sub)}
.shptag{margin-top:9px;font-size:11.5px;color:var(--pri);font-weight:600}

/* ---------- 头像取景 ---------- */
.crop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:43;background:#17130F;color:#fff;
  display:flex;flex-direction:column}
.crop[hidden]{display:none}   /* display:flex 会盖掉 hidden 属性，必须自己补一条 */
.crop-bar{display:flex;align-items:center;padding:12px 14px 4px}
.crop-bar b{flex:1;text-align:center;font-size:15.5px;font-weight:600}
.crop-bar button{padding:7px 14px;border-radius:11px;background:rgba(255,255,255,.14);font-size:14px;color:#fff}
.crop-bar button.ok{background:var(--grad)}
.crop-box{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 16px;min-height:0}
.crop-stage{position:relative;overflow:hidden;border-radius:18px;background:#241C17}
.crop-stage canvas{position:absolute;top:0;left:0;z-index:1;max-width:none;display:block;
  touch-action:none;-webkit-user-select:none;user-select:none}
.crop-frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
.crop-ctl{display:flex;align-items:center;padding:2px 24px 0}
.crop-ctl span{font-size:12px;opacity:.72}
.crop-ctl input{flex:1;margin:0 12px;-webkit-appearance:none;background:transparent;height:24px}
.crop-ctl input::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:rgba(255,255,255,.3)}
.crop-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;
  border-radius:50%;background:var(--brand);box-shadow:0 1px 5px rgba(0,0,0,.45)}
.crop-tip{padding:8px 22px calc(var(--safe-b) + 18px);font-size:12.5px;opacity:.72;text-align:center}

.rules{padding:2px 18px 8px;font-size:13.5px;line-height:1.85;color:var(--txt)}
.rules h4{margin:14px 0 2px;font-size:13px;color:var(--pri)}
.rules p{margin:0;color:var(--sub)}
.rules b{color:var(--txt)}

/* ---------- 底部导航 ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tab) + var(--safe-b));
  padding-bottom:var(--safe-b);display:flex;background:rgba(255,250,247,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:20}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sub);font-size:11px;position:relative}
.tab.on{color:var(--pri);font-weight:600}
.tab .ti{font-size:20px;line-height:1;filter:grayscale(1) opacity(.6)}
.tab.on .ti{filter:none}
.tab .dot{position:absolute;top:7px;left:50%;margin-left:6px;width:8px;height:8px;border-radius:50%;background:var(--bad)}

/* ---------- 提示条 ---------- */
.netbar{position:absolute;top:0;left:0;right:0;padding:calc(var(--safe-t) + 4px) 12px 6px;background:#FFEAD1;
  color:#8A5B00;font-size:12.5px;text-align:center;z-index:60;display:none}
.netbar.on{display:block}
.toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 96px);transform:translateX(-50%) translateY(8px);
  background:rgba(38,22,14,.93);color:#fff;padding:10px 16px;border-radius:12px;font-size:13.5px;z-index:70;
  opacity:0;transition:opacity .2s,transform .2s;max-width:80%;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 桌面 ---------- */
@media (min-width:760px){
  /* width 必须显式给出：.app 的子元素全是绝对定位，shrink-to-fit 会算成 0 宽，整列被 overflow:hidden 吞掉 */
  .app{width:430px;left:50%;right:auto;transform:translateX(-50%);box-shadow:0 0 0 1px var(--line),0 24px 70px rgba(120,60,30,.18)}
  body{background:radial-gradient(1200px 600px at 50% -10%,#FFE8D6,#F3DCCB)}
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#17130F; --card:#221C17; --line:#33291F; --txt:#F2E9E2; --sub:#9C8A7D;
    --pri:#FF9A5E; --pri-d:#FFB07A; --bubble:#262019; --tint:#2A211A; --tint2:#33281F;
    --shadow:0 6px 22px rgba(0,0,0,.34); --ok:#22C55E; --warn:#F59E0B;
  }
  .bar{background:rgba(23,19,15,.92)} .chat{background:#14110E}
  .msgs .more,.sys,.daysep{color:var(--sub)} .daysep{background:rgba(255,255,255,.07)} .msgs .more{background:var(--card)}
  .composer{background:#1C1712} .composer textarea{background:#262019;border-color:#3A2E24;color:var(--txt)}
  .tabbar{background:rgba(28,23,18,.94)} .sheet{background:#1C1712} .sheet .btns button{background:#262019;color:var(--txt)}
  .chip{background:#262019} .chip.on{background:#3A2A1C} .search input{background:#262019;color:var(--txt)}
  .auth{background:linear-gradient(170deg,#2A1D13,var(--bg) 46%)} .auth-card{background:var(--card)}
  .tab2{background:#262019} .tab2.on{background:#33281F} #authForm input{background:#262019;border-color:#3A2E24;color:var(--txt)}
  .avatar .on-dot{border-color:var(--card)} .sheet .grab{background:#3A2E24}
  .pfadd{border-color:#3A2E24}
  .scard .lvb{box-shadow:0 0 0 1px rgba(255,154,94,.35) inset}
  .sparkbar.fix{background:#2C2313;color:#F0B860;border-bottom-color:#3E3018}
  .sparkbar.dead{background:#221E1B;color:#9C8A7D}
  .scard.fix .flame{background:#33290F} .scard.dead .flame{background:#262119}
  .scard.fix .pill{background:#3A2E10;color:#F0B860} .scard.dead .pill{background:#262119;color:#9C8A7D}
  .send[disabled]{background:#4A3628} .badge.mute{background:#4A4038}
  .dc .dt{background:#262019} .dc .dt::after{background:rgba(28,23,18,.42)}
}