/* ==================================================================
   设计令牌 —— 取自我们自己站点的设计系统，保持同一套视觉语言。
   改这里一处，全站跟着变；不要在组件里写死颜色。
   ================================================================== */
:root{
  --base:#191013;
  --gradient-brand:linear-gradient(135deg,#f79bb6 0%,#e85c85 100%);
  --gradient-brand-90:linear-gradient(90deg,#f79bb6 0%,#e85c85 100%);
  --gradient-ai:linear-gradient(135deg,#f79bb6 0%,#e85c85 100%);
  --color-brand-glow:#e85c8552;
  --shadow-brand:0 10px 24px -8px #e85c8580;
  --shadow-brand-lg:0 16px 35px -10px #e85c8599;
  --shadow-ai:0 0 28px #e85c854d;

  --hairline:#ffffff14;
  --hairline-strong:#ffffff24;
  --inset-highlight:inset 0 1px 0 #ffffff0d;
  --elev-1:0 2px 4px #0000008c,0 6px 16px #00000073;
  --elev-2:0 10px 32px #0009,0 3px 8px #0000008c;
  --elev-3:0 24px 56px #000000b3,0 8px 20px #0000008c;

  --glass-blur:36px; --glass-blur-sm:14px; --glass-saturate:170%;
  --glass-chrome-fill:#1f1418e8;
  --glass-chrome-fill-strong:#191013f2;
  --glass-fill:#ffffff0a; --glass-fill-strong:#ffffff14; --glass-edge:#ffffff1c;
  --glass-specular:inset 0 1px 0 #ffffff57,inset 0 0 0 .5px #ffffff14;
  --media-refresh-fill:#201823d9; --media-refresh-fill-hover:#54316a;
  --coin-gold:#ffd247; --coin-gold-highlight:#fff0a6; --coin-gold-engraving:#a65d08;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --t1:#f7eef0; --t2:#c6a9b2; --t3:#a98b95; --t4:#80646e;

  --xs:4px; --sm:8px; --md:12px; --lg:16px; --xl:24px; --xxl:32px;
  --display:28px; --title:22px; --subtitle:17px; --body:15px; --caption:13px; --tiny:11px;

  --dock-h:64px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior-y:none}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.coin-icon{display:inline-block;width:1em;height:1em;flex:none;color:var(--coin-gold);vertical-align:-.125em;
  filter:none}
body{
  background:var(--base); color:var(--t1);
  font:400 var(--body)/1.5 -apple-system,system-ui,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit;color:inherit;border:0;background:none;outline:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:0;height:0}
.chat-profile{display:none}

/* 顶部那层暖色辉光。原站首屏也有，是这套视觉的底味 */
body::before{
  content:'';position:fixed;inset:0 0 auto;height:52vh;pointer-events:none;z-index:0;
  background:radial-gradient(100% 80% at 65% 0%,#49232f 0%,#26141a 42%,transparent 72%);
}

/* ---------------------------------------------------------------- 版式 */
.display{font-size:var(--display);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.title{font-size:var(--title);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.subtitle{font-size:var(--subtitle);font-weight:600;line-height:1.4}
.caption{font-size:var(--caption);line-height:1.4;color:var(--t3)}
.tiny{font-size:var(--tiny);line-height:1.3;color:var(--t3)}
.t2{color:var(--t2)} .t3{color:var(--t3)}
.grad-text{background:var(--gradient-brand-90);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* ---------------------------------------------------------------- 控件 */
.btn{
  height:47px;padding:0 20px;border-radius:15px;font-size:var(--body);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* line-height:1 —— 按钮是固定高度的，行盒不能比它高。继承来的 1.5
     在某些字体（尤其 macOS 的 -apple-system 重字重）下会把文字顶出按钮。
     nowrap + min-width:0：窄屏 flex:1 压缩时宁可截断也不换行成两行。 */
  line-height:1;white-space:nowrap;min-width:0;
  background:var(--glass-fill);box-shadow:var(--inset-highlight);
  transition:transform .12s ease,filter .12s ease;
}
.btn:active{transform:scale(.975)}
.btn.brand{background:var(--gradient-brand);box-shadow:var(--shadow-brand);color:#3a1220}
.btn.brand:active{box-shadow:var(--shadow-brand-lg)}
.btn.pill{border-radius:9999px}
.btn.block{width:100%}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline)}
.btn[disabled]{opacity:.42;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:9999px;background:#000000bf;font-size:var(--tiny);font-weight:500;
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
}
.chip.glass{background:var(--glass-fill);box-shadow:inset 0 0 0 .5px var(--glass-edge)}
.chip.brand{background:var(--gradient-brand);color:#fff}

.card{border-radius:16px;overflow:hidden;position:relative;background:#2e1d25;
  box-shadow:inset 0 0 0 1px var(--hairline),var(--elev-1)}

/* ---------------------------------------------------------------- 骨架 */
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column}
.view{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:calc(var(--sat) + 8px);
  padding-bottom:calc(var(--dock-h) + var(--sab) + 16px);display:none}
.view.on{display:block}
.pad{padding-left:var(--lg);padding-right:var(--lg)}

.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--md);
  padding:var(--sm) var(--lg) var(--md);
  background:linear-gradient(180deg,var(--base) 62%,transparent);
}
.topbar .grow{flex:1;min-width:0}

/* ---------------------------------------------------------------- 底部 dock */
#dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--dock-h) + var(--sab));
  padding-bottom:var(--sab);background:var(--base);
  box-shadow:0 -.5px 0 var(--hairline);
  display:grid;grid-template-columns:repeat(3,1fr);
}
/* Discover 是沉浸式竖屏流，dock 浮在内容之上而不是把内容顶上去 */
#dock.over{background:transparent;box-shadow:none;
  background:linear-gradient(0deg,#000000d9,transparent)}
#dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--t4);font-size:var(--tiny);transition:color .15s}
#dock button.on{color:var(--t1)}
#dock .ic{width:24px;height:24px;display:grid;place-items:center}
#dock .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* 中间那个强调项：渐变实心圆，和原站 Hub 一个处理 */
#dock button.hero .ic{
  width:38px;height:38px;border-radius:9999px;background:var(--gradient-brand);
  box-shadow:var(--shadow-brand);margin-top:-6px}
#dock button.hero .ic svg{width:20px;height:20px;stroke:#fff}
#dock button.hero{color:var(--t2)}
#dock button.hero.on{color:var(--t1)}

/* ---------------------------------------------------------------- 首页分区与过滤 */
.segtabs{display:flex;gap:var(--sm);padding:0 var(--lg) var(--md)}
.segtabs button{flex:1;height:38px;border-radius:12px;background:var(--glass-fill);
  box-shadow:var(--inset-highlight);font-size:var(--body);font-weight:600;
  color:var(--t3);transition:color .15s,transform .12s}
.segtabs button:active{transform:scale(.97)}
.segtabs button.on{background:var(--gradient-brand);box-shadow:var(--shadow-brand);
  color:#fff}
.filters{display:flex;gap:var(--sm);padding:0 var(--lg) var(--md);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.filters .chip{height:30px;padding:0 13px;font-size:var(--caption);
  color:var(--t2);flex:none}
.filters .chip.on{background:var(--gradient-brand);color:#fff;
  box-shadow:var(--shadow-brand)}

/* ---------------------------------------------------------------- 首页卡墙 */
.wall{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);padding:0 var(--lg)}
.ch{aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:flex-end}
.ch .art{position:absolute;inset:0}
.ch .art .ph{position:absolute;inset:0}
.ch .art img,.ch .art video{width:100%;height:100%;object-fit:cover;display:block}
/* 循环视频叠在封面之上：封面先出，视频播起来再淡入 —— 加载过程不露黑屏 */
/* hover 才播，淡入要跟手 —— .45s 是自动播时代的节奏，配 hover 会显得迟钝 */
.ch .art video.loop{position:absolute;inset:0;opacity:0;transition:opacity .22s ease}
.ch .art video.loop.live{opacity:1}
.ch .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 80%,#000000b3 90%,#000000e6 100%)}
.ch .meta{position:relative;padding:var(--md);display:flex;flex-direction:column;gap:3px}
.ch .nm{font-size:18px;font-weight:800;line-height:1.25}
.ch .tl{font-size:var(--tiny);color:#ffffffa8;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ch .cost{position:absolute;top:10px;right:10px}
.ch .badge{position:absolute;top:10px;left:10px}

/* 素材未就绪时的占位。用角色 ID 派生的渐变，至少每个角色长得不一样 */
.ph{background:linear-gradient(150deg,var(--c1),var(--c2))}
.ph::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 22%,#ffffff1f,transparent 70%)}
.ph .initial{position:absolute;inset:0;display:grid;place-items:center;
  font-size:56px;font-weight:700;color:#ffffff1a;letter-spacing:-.04em}

/* ---------------------------------------------------------------- Discover */
/* Discover 全屏出血：内容铺到 dock 底下，dock 半透明浮在上面 */
#v-discover{padding:0}
#discover{padding:0;overflow:hidden;height:100%}
.feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch}
.slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end}
.slide .art{position:absolute;inset:0}
.slide video,.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,#00000073 0%,transparent 26%,transparent 44%,#000000d9 92%)}
/* 右边留出 rail 的宽度 —— 不留的话正文会跑到点赞/收藏按钮底下，
   两边都点不准也读不清 */
.slide .body{position:relative;padding:var(--lg);padding-right:76px;
  padding-bottom:calc(var(--dock-h) + var(--sab) + var(--xl));
  display:flex;flex-direction:column;gap:var(--md)}
.slide .body .btn{margin-right:calc(-76px + var(--lg))}   /* CTA 仍占满宽 */
.slide .nm{font-size:var(--title);font-weight:700}
.slide .hook{font-size:var(--body);color:#ffffffd6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slide .tags{display:flex;gap:6px;flex-wrap:wrap}
.rail{position:absolute;right:var(--lg);bottom:calc(var(--dock-h) + var(--sab) + 130px);
  display:flex;flex-direction:column;gap:var(--lg);align-items:center}
.rail button{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:var(--tiny);color:#ffffffd0}
.rail svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pending{position:absolute;top:calc(var(--sat) + 14px);left:0;right:0;
  display:flex;justify-content:center}

/* ---------------------------------------------------------------- 会话列表 */
.sess{display:flex;align-items:center;gap:var(--md);padding:12px var(--lg);
  position:relative}
.sess:active{background:var(--glass-fill)}
.sess .av{width:54px;height:54px;border-radius:9999px;position:relative;flex:none;
  overflow:hidden}
.sess .av .ph{position:absolute;inset:0}
.sess .av .initial{font-size:22px;color:#ffffff40}
.sess .grow{flex:1;min-width:0}
.sess .nm{font-size:var(--body);font-weight:600;display:flex;align-items:center;gap:6px}
.sess .last{font-size:var(--caption);color:var(--t3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.sess .side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.sess .ago{font-size:var(--tiny);color:var(--t4)}
.sess::after{content:'';position:absolute;left:calc(var(--lg) + 54px + var(--md));
  right:0;bottom:0;height:.5px;background:var(--hairline)}
.sess:last-child::after{display:none}

/* ---------------------------------------------------------------- 充值 */
.packs{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);padding:0 var(--lg)}
.pack{padding:var(--lg) var(--md);border-radius:16px;background:var(--glass-fill);
  box-shadow:var(--glass-specular);text-align:center;position:relative;
  display:flex;flex-direction:column;gap:2px;align-items:center}
.pack.best{background:linear-gradient(160deg,#ff5e8a1f,#b65cff1a);
  box-shadow:inset 0 0 0 1px #ff5e8a5c,var(--shadow-ai)}
.pack .amt{font-size:var(--title);font-weight:700}
.pack .tagpill{position:absolute;top:-9px;left:50%;transform:translateX(-50%)}
.balance{
  margin:0 var(--lg) var(--lg);padding:var(--xl) var(--lg);border-radius:20px;
  background:linear-gradient(150deg,#1c1020,#140d1c);
  box-shadow:inset 0 0 0 1px var(--hairline),var(--elev-2);
  display:flex;flex-direction:column;align-items:center;gap:var(--xs)}
.balance .n{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1.1}

.profile-card{margin:0 var(--lg);padding:var(--lg);border-radius:18px;background:var(--glass-fill);
  box-shadow:var(--glass-specular);display:flex;align-items:center;gap:var(--md)}
.profile-card .avatar{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:var(--gradient-brand);box-shadow:var(--shadow-brand);font-size:18px;font-weight:700}
.profile-card .grow{flex:1;min-width:0}

/* ---------------------------------------------------------------- 我的 */
.rows{margin:0 var(--lg);border-radius:16px;background:var(--glass-fill);
  box-shadow:var(--glass-specular);overflow:hidden}
.row{display:flex;align-items:center;gap:var(--md);padding:14px var(--lg);
  box-shadow:0 .5px 0 var(--hairline)}
.row:last-child{box-shadow:none}
.row .grow{flex:1;min-width:0}
.row .v{color:var(--t3);font-size:var(--caption)}
.row svg{width:18px;height:18px;fill:none;stroke:var(--t4);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ledger{margin:var(--md) var(--lg) 0}
.led{display:flex;align-items:center;gap:var(--md);padding:10px 0;
  box-shadow:0 .5px 0 var(--hairline)}
.led .amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.led .amt.plus{color:#4ade80} .led .amt.minus{color:var(--t2)}

/* ---------------------------------------------------------------- 聊天 */
#chat{position:fixed;inset:0;z-index:60;background:var(--base);
  display:none;flex-direction:column;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1)}
#chat.on{display:flex;transform:none}
#chatBg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--base);pointer-events:none}
#chatBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#08080ccc 0%,#08080c3d 24%,#08080c55 58%,#08080cf2 100%)}
#chatBg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;filter:saturate(.88);transform:scale(1.015)}
/* 桌面端【有意】不要聊天背景：三栏布局下满幅背景会跟左右两栏的实底打架，
   而且中间列本来就窄。2026-09-04 试着打开过一次，用户看完说 PC 不用改，已回退。
   要再打开的话，记得 ::after 那层压暗一起开 —— 少了它亮图会让气泡文字读不清。 */
@media (min-width:760px){
  #chatBg img,#chatBg .chat-bg-fallback{display:none}
  #chatBg::after{display:none}
}
#chatBg .chat-bg-fallback{position:absolute;inset:0;
  background:linear-gradient(150deg,var(--c1),var(--c2))}
#chat .head{position:relative;display:flex;align-items:center;gap:var(--md);
  padding:calc(var(--sat) + 10px) var(--lg) 10px;
  background:var(--glass-chrome-fill-strong);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:0 .5px 0 var(--hairline);position:relative;z-index:9}
#chat .head .grow{flex:1;min-width:0}
#chat .head .nm{font-size:18px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 副标题必须单行截断。角色的 scenario 可能好几百字，
   不截断会把整个头部撑成半屏，聊天区被挤没 */
#chat .head .tiny{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{width:36px;height:36px;border-radius:9999px;display:grid;place-items:center;
  background:var(--glass-fill);flex:none}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* 头部带文字的按钮（Memory）。只有图标时用户不知道那是什么 ——
   一个脑袋形状的图标既可能是"记忆"也可能是"人设/心理"，写出来最省事。 */
.headbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;
  border:0;border-radius:9999px;flex:none;cursor:pointer;
  background:var(--glass-fill);color:inherit;font-size:13px;font-weight:600;letter-spacing:.01em}
.headbtn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.headbtn:hover{background:rgba(255,255,255,.14)}
.headbtn:active{transform:scale(.97)}
/* 窄屏（<360px）名字更值钱，退回只有图标 */
@media (max-width:359px){.headbtn span{display:none}.headbtn{padding:0;width:34px;justify-content:center}}
/* 聊天背景是绝对定位的 z-index:0 层；消息区和输入区必须明确处在其上方。
   否则消息已经写入 DOM，却会被背景图片（及其渐变蒙层）完整遮住。 */
#msgs{position:relative;z-index:1;flex:1;overflow-y:auto;padding:var(--lg);display:flex;
  flex-direction:column;gap:var(--md)}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:var(--body);
  line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg.her{align-self:flex-start;background:#191922;border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--gradient-brand);color:#fff;
  border-bottom-right-radius:6px;box-shadow:var(--shadow-brand)}
.msg .nar{color:#f79bb6;font-style:italic;font-weight:600}
.msg.me .nar{color:#ffffffc4}
/* 她的消息行：头像 + 气泡 */
.mrow{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:88%}
.mrow .msg{max-width:100%}
.mav{width:32px;height:32px;border-radius:50%;flex:0 0 32px;overflow:hidden;display:grid;
  place-items:center;font-weight:600;font-size:13px;color:#fff;background:#333}
.mav img{width:100%;height:100%;object-fit:cover;display:block}
.mtime{font-size:10.5px;color:var(--t3);margin:-4px 2px 2px}
.mtime.her{align-self:flex-start;margin-left:42px}
.mtime.me{align-self:flex-end}
.head-av{width:46px;height:46px;flex:0 0 46px;margin-right:4px;font-size:17px}
/* 输入栏通话按钮：与发送按钮同规格 */
#callbtn{width:44px;height:44px;flex:0 0 44px;border-radius:9999px;border:0;cursor:pointer;
  color:#8fd3ff;background:linear-gradient(145deg,#173f6a,#102b4b);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px #72c5ff38,0 5px 14px #061a304d;
  transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}
#callbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
#callbtn:hover,#callbtn:focus-visible{color:#d9f1ff;background:linear-gradient(145deg,#22598f,#143b67);
  box-shadow:inset 0 0 0 1px #9edbff73,0 7px 18px #061a3066}
#callbtn:active{transform:scale(.94)}
#callbtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* 通话消息标识（小电话角标） */
.msg.call .callic{display:block;margin:0 0 6px;opacity:.55}
.msg.call .callic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
/* 通话结束气泡 */
.callend{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:8px 0}
.callend .ce-card{display:flex;align-items:center;gap:8px;background:var(--gradient-brand);
  color:#fff;border-radius:14px;padding:10px 16px;font-size:13px;font-weight:600}
.callend .ce-card svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
.callend .ce-again{border:0;border-radius:999px;padding:9px 18px;background:#243024;color:#8be28b;
  font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.callend .ce-again svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
/* 聊天收起把手：悬浮在头部下方居中，点一下收起消息流只看背景 */
/* 聊天菜单 */
/* 偏好弹层控件 */
.opt-card{display:block;width:100%;text-align:left;border:1px solid var(--hairline);
  border-radius:12px;background:#221c31;color:var(--t1);padding:12px 14px;margin-top:8px;cursor:pointer}
.opt-card.on{border-color:#ec4899;background:#2c1f33}
.opt-card .oc-t{font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
.opt-card .oc-d{font-size:12px;color:var(--t2);margin-top:2px}
.opt-card .lockchip{margin-left:auto;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--gradient-brand);color:#fff}
.seg-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.seg-row button{flex:1;border:0;border-radius:999px;padding:8px 4px;font-size:12px;
  background:#28223a;color:var(--t2);cursor:pointer;min-width:60px}
.seg-row button.on{background:var(--gradient-brand);color:#fff}
.mem-item{display:flex;align-items:center;gap:8px;background:#221c31;border-radius:10px;
  padding:9px 12px;margin-top:8px;font-size:13px}
.mem-item button{margin-left:auto;border:0;background:none;color:#f87171;cursor:pointer;font-size:14px}
.sheet-tabs{display:flex;gap:8px;margin-bottom:12px}
.sheet-tabs button{flex:1;border:0;border-radius:999px;padding:9px 0;font-weight:600;font-size:13px;
  background:#28223a;color:var(--t2);cursor:pointer}
.sheet-tabs button.on{background:var(--gradient-brand);color:#fff}
.pref-input{width:100%;box-sizing:border-box;background:#221c31;color:var(--t1);
  border:1px solid var(--hairline);border-radius:10px;padding:10px 12px;font-size:14px;margin-top:8px}
textarea.pref-input{min-height:90px;resize:vertical}
.msg.crisis{max-width:100%;background:#3a2024;border:1px solid #e77b82;color:#fff}
.crisis-title{font-weight:700;margin-bottom:6px}.crisis-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.crisis-actions a{color:#fff;background:#b83d48;border-radius:999px;padding:7px 11px;text-decoration:none;font-size:13px}
.typing{display:inline-flex;gap:4px;padding:3px 0}
.typing i{width:6px;height:6px;border-radius:9999px;background:var(--t4);
  animation:bl 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,60%,100%{opacity:.28} 30%{opacity:1}}
/* 每条她的消息下面的播放按钮。playing 态换成品牌渐变，一眼看出哪条在响 */
.play{width:26px;height:26px;border-radius:50%;border:0;flex:none;cursor:pointer;
  display:grid;place-items:center;background:var(--gradient-brand);color:#fff;
  box-shadow:var(--shadow-brand);transition:opacity .15s,transform .15s;padding:0}
.play svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.play:hover{transform:scale(1.08)}
.play.loading{opacity:.55}
.play.loading svg{animation:bl 1.1s infinite}
.play.playing{background:transparent;color:#f0648c;box-shadow:inset 0 0 0 2px #f0648c}
#composer{position:relative;z-index:1;padding:var(--sm) var(--lg) calc(var(--sab) + var(--md));
  display:flex;flex-direction:column;gap:6px;align-items:stretch;
  background:var(--glass-chrome-fill-strong);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:0 -.5px 0 var(--hairline)}
#composerMain{order:3;display:flex;gap:var(--sm);align-items:flex-end;width:100%}
#inputShell{flex:1;min-width:0}
#input{display:block;box-sizing:border-box;width:100%;min-height:44px;max-height:132px;padding:11px var(--lg);
  border-radius:22px;background:var(--glass-fill);resize:none;line-height:1.4;
  box-shadow:inset 0 0 0 .5px var(--glass-edge)}
#mediaActions{order:1;display:flex;align-items:center;gap:8px;min-height:44px}
.media-action{width:44px;height:44px;border-radius:9999px;display:grid;place-items:center;flex:none;
  color:#fff;background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--hairline-strong);
  transition:background .15s ease,color .15s ease,transform .15s ease}
.media-action:hover,.media-action:focus-visible{background:#f0648c24;color:#ffd3df}
.media-action.on{background:#f0648c24;color:#ffd3df;box-shadow:inset 0 0 0 1px #f79bb66e}
.media-action:active{transform:scale(.94)}
.media-action svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}
#mediaComposer{display:none;order:2;width:100%;box-sizing:border-box;padding:10px 0 2px}
#mediaComposer.on{display:grid;gap:10px}
#mediaCollapse{display:none;width:44px;height:44px;border-radius:9999px;place-items:center;
  color:var(--t2);background:transparent;box-shadow:inset 0 0 0 1px var(--hairline)}
#composer.media-open #mediaCollapse{display:grid}
#mediaCollapse:hover,#mediaCollapse:focus-visible{color:var(--t1);background:#ffffff14}
#mediaCollapse svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.media-presets{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:9px;overflow-x:auto;
  padding:1px 1px 3px;scrollbar-width:none}
.media-presets::-webkit-scrollbar{display:none}
.spicy-row{display:flex;align-items:center;gap:8px;padding:2px 2px 8px}
.spicy-row .sw{position:relative;width:38px;height:22px;flex:0 0 38px;border-radius:999px;
  background:#3a2730;transition:background .16s;cursor:pointer;border:0;padding:0}
.spicy-row .sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .16s}
.spicy-row .sw[aria-checked="true"]{background:var(--gradient-brand,#e75480)}
.spicy-row .sw[aria-checked="true"]::after{transform:translateX(16px)}
.spicy-row label{font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
.spicy-row .hint{font-size:11.5px;color:var(--t3)}
/* 通用确认弹窗。层级压过建号向导（#v-create）与聊天页 */
#confirmModal{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  padding:20px;background:#08080cbf;backdrop-filter:blur(4px)}
#confirmModal.on{display:grid}

/* 金币不足弹窗：复用 #paywall 的卡片样式，只加数字这一行 */
#coinWall{position:fixed;inset:0;z-index:170;display:none;
  align-items:center;justify-content:center;
  padding:20px;background:#08080cbf;backdrop-filter:blur(4px)}
#coinWall.on{display:flex}
/* Memory 弹窗 */
#memModal{position:fixed;inset:0;z-index:170;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:16px}
#memModal.on{display:flex}
#memModal .mem-card{text-align:left;width:min(440px,100%)}
#memModal .pw-title,#memModal .pw-sub{text-align:center}
.mem-tabs{display:flex;gap:6px;margin:0 0 14px;padding:4px;border-radius:12px;background:#140c10}
.mem-tabs button{flex:1;height:34px;border:0;border-radius:9px;background:transparent;color:#8f7e85;
  font-size:13px;font-weight:700;cursor:pointer}
.mem-tabs button.on{background:#2e1d25;color:#fff}
.mem-count{font-size:12.5px;font-weight:700;color:#c9b8bf;margin:0 0 8px}
.mem-count.full{color:#ff6b8a}
.mem-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;margin:0 0 12px}
.mem-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:11px;
  background:#241820;border:1px solid rgba(255,255,255,.05);font-size:13.5px;line-height:1.5;color:#e9dbe1}
.mem-item span{flex:1;min-width:0;word-break:break-word}
.mem-item small{color:#8f7e85;font-size:11px;white-space:nowrap}
.mem-item button{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.06);
  color:#c9b8bf;cursor:pointer;display:grid;place-items:center}
.mem-item button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mem-item button:hover{background:rgba(255,107,138,.2);color:#ff6b8a}
.mem-empty,.mem-hint{font-size:13px;color:#8f7e85;line-height:1.6;margin:6px 0 12px;text-align:center}
.mem-full{margin:0 0 12px;font-size:13px;line-height:1.55;color:#ff6b8a;font-weight:600}
.mem-full a{color:#ff6b8a;text-decoration:underline}
.mem-add{display:flex;flex-direction:column;gap:10px;margin:0}
.mem-add input{height:44px;border:0;border-radius:12px;padding:0 14px;background:#28191f;color:#fff;
  font-size:14px;box-shadow:inset 0 0 0 1px var(--hairline);outline:0}
.mem-add input:focus{box-shadow:inset 0 0 0 1px #e85c85}
.mem-add .pw-go{height:46px}
.mem-add[hidden]{display:none}
#coinWall .pw-crown.coin{display:grid;place-items:center}
#coinWall .pw-crown.coin .coin-icon{width:26px;height:26px}
.cw-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 4px}
.cw-nums>div{background:#ffffff0d;border-radius:12px;padding:12px 6px;text-align:center}
.cw-nums span{display:block;font:700 19px/1.2 ui-monospace,monospace;
  font-variant-numeric:tabular-nums}
.cw-nums small{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--t3)}
.cw-nums .short span{color:#f8a2b6}

/* 卡片回填的那句是只读的：给一点视觉交代，否则用户会以为输入框坏了 */
#input.prompt-locked{cursor:default;opacity:.82}
#input.prompt-locked::selection{background:var(--hairline-strong)}

/* Spicy 关掉时不再整排藏卡片 —— 现在由 presetsFor() 决定渲染哪几张
   （视频只留 Boobs），卡片区一直在。 */
/* Spicy 开关只属于视频：图片模式永远按 spicy 走，没有可关的东西 */
/* 2026-08-31 图片模式也有 Spicy 开关了（关=正经人像走 Seedream），这行藏开关的规则删除 */
.media-preset{position:relative;display:grid;gap:6px;color:var(--t2)}
.media-preset-select{display:grid;justify-items:center;gap:6px;padding:0;text-align:center;color:inherit;background:transparent}
.media-preset-image{position:relative;display:block;width:77px;height:auto;overflow:hidden;border-radius:10px;
  background-color:#30232b;box-shadow:inset 0 0 0 1px var(--hairline);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
img.media-preset-image{object-fit:contain}
.media-preset[data-random="true"] .media-preset-image{height:77px;display:grid;place-items:center;background:#232323;
  box-shadow:inset 0 0 0 1px #5a5a5a,0 3px 9px #0004}
/* 正常照 Random 的 icon 用主题色，和 spicy 的紫色区分 */
.media-preset-image.casual .media-preset-random-icon{stroke:#e85c85}
.media-preset-random-icon{width:43px;height:43px;fill:none;stroke:#b06aff;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px #7c3cff55)}
.media-preset-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:11.5px;line-height:1.25}
/* 姿势模版格（2026-09-09）：无缩略图，深底 + 两字母缩写 */
.media-preset[data-tpl="true"] .media-preset-image.tpl{width:77px;height:77px;display:grid;place-items:center;background:#232323;
  color:#f7b2c4;font-size:22px;font-weight:700;letter-spacing:.5px}
.media-preset[data-tpl="true"][data-selected="true"] .media-preset-image.tpl{background:#3a1f2a}
.media-preset[data-tpl="true"] .media-preset-image.tpl img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
.media-preset[data-tpl="true"] .media-preset-image.tpl.noimg{background:#232323}
.media-preset-pose-icon{width:40px;height:40px;fill:#e07aa0;stroke:#e07aa0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.media-preset-select:hover,.media-preset-select:focus-visible{color:#fff}
.media-preset-select:hover .media-preset-image,.media-preset-select:focus-visible .media-preset-image{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #f79bb6,0 5px 14px #0006}
.media-preset[data-selected="true"] .media-preset-select{color:var(--t1)}
.media-preset[data-selected="true"] .media-preset-image{box-shadow:inset 0 0 0 1.5px #f7b2c4,0 7px 18px #0008}
.media-preset-refresh{position:absolute;top:5px;right:5px;z-index:1;width:28px;height:28px;padding:0;border-radius:8px;display:grid;place-items:center;
  color:var(--t1);background:var(--media-refresh-fill);box-shadow:inset 0 0 0 1px var(--hairline-strong),0 3px 10px #0008;backdrop-filter:blur(var(--glass-blur-sm));
  opacity:0;pointer-events:none;transform:scale(.86);transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),background .16s var(--ease-out)}
.media-preset[data-selected="true"] .media-preset-refresh{opacity:1;pointer-events:auto;transform:scale(1)}
.media-preset-refresh:hover,.media-preset-refresh:focus-visible{color:#fff;background:var(--media-refresh-fill-hover);transform:scale(1)}
.media-preset-refresh:active{transform:scale(.92)}
.media-preset-refresh:disabled{opacity:0;pointer-events:none}
.media-preset-refresh svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.media-preset-image,.media-preset-refresh{transition:none}}
#mediaPresetScroll{appearance:none;-webkit-appearance:none;width:100%;height:18px;margin:0;cursor:pointer;touch-action:manipulation;background:transparent}
#mediaPresetScroll::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff12}
/* 宽度由 JS 按"可见宽度 / 内容总宽度"算好写进 --thumb-w，像真滚动条一样
   传达"还剩多少没看"。固定宽度会在只有几张卡时也显得"后面还很长"。 */
#mediaPresetScroll::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb-w,32px);height:13px;margin-top:-4px;border-radius:999px;background:var(--gradient-brand);box-shadow:0 1px 5px #e85c8580;transition:width .18s var(--ease-out)}
#mediaPresetScroll::-moz-range-track{height:5px;border-radius:999px;background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff12}
#mediaPresetScroll::-moz-range-thumb{width:var(--thumb-w,32px);height:13px;border:0;border-radius:999px;background:var(--gradient-brand);box-shadow:0 1px 5px #e85c8580}
#mediaPresetScroll:focus-visible{outline:2px solid #f79bb6;outline-offset:2px;border-radius:999px}
/* 没得滚就整条藏掉：一条滑到底也不动的滚动条只会让人以为界面卡了 */
#mediaPresetScroll:disabled{display:none}
#composer.media-open #callbtn{display:none}
#sendb .send-cost{display:none}
#composer.media-open #sendb{width:auto;min-width:76px;padding:0 13px;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;gap:7px;background:var(--gradient-brand);color:#fff}
#composer.media-open #sendb .send-cost{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:700}
#composer.media-open #sendb .send-cost .coin-icon{display:block;width:15px;height:15px}
#composer.media-open #inputShell{display:flex;align-items:stretch;border-radius:22px;background:var(--glass-fill);
  box-shadow:inset 0 0 0 .5px var(--glass-edge)}
#composer.media-open #input{min-width:0;flex:1;background:transparent;box-shadow:none}
#composer.media-open #input:focus{outline:0}
#composer.media-open #inputShell:focus-within{outline:2px solid #f79bb680;outline-offset:1px}
@media (max-width:759px){
  #mediaComposer{padding-top:6px}
  .media-presets{gap:8px}
  .media-preset-image{width:72px}
  .media-preset[data-random="true"] .media-preset-image{height:72px}
  #composer.media-open #sendb{min-width:72px;padding:0 12px;font-size:12px}
}
/* 占位卡跟 .generated-media 同宽同圆角：成品替换进来时消息流不跳位 */
/* 尺寸全部继承 .generated-media，这里只管里面的骨架屏 */
/* 生成中的骨架屏。**不挂在 .media-progress 下面**：创建虚拟人向导的头像框
   也要长成一样，两边各写一份必然漂移（一边改了扫光速度另一边没改）。
   这一组是通用工具类，谁需要谁挂 mp-frame。 */
.mp-frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:10px;
  background:#171015;display:grid;place-items:center;gap:10px;overflow:hidden;
  padding:12px}
/* grid 子项默认 min-width:auto —— 按钮行和带 task id 的长错误串都能把隐式列
   撑宽，然后整块溢出卡片。这两行是标准解药。 */
.mp-frame > *{min-width:0;max-width:100%}
/* 扫光：告诉用户"在动"，比静态灰块可信。只在 busy 时扫 —— 空态还在扫，
   用户会以为已经点了生成。 */
.mp-frame.busy::before{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,#ffffff0f 50%,transparent 65%);
  transform:translateX(-100%);animation:mp-sweep 1.6s ease-in-out infinite}
@keyframes mp-sweep{to{transform:translateX(100%)}}
.mp-spin{width:34px;height:34px;border-radius:50%;
  border:3px solid #ffffff1f;border-top-color:#f0648c;animation:mp-spin .9s linear infinite}
@keyframes mp-spin{to{transform:rotate(360deg)}}
.mp-text{position:relative;color:var(--t2);font-size:13px;font-weight:600;
  text-align:center;overflow-wrap:anywhere}
/* overflow-wrap:anywhere —— 供应商的错误串常常是一长条没有空格的 task id，
   不给断点就会把整张卡撑破。 */
.mp-sub{position:relative;color:var(--t3);font-size:11.5px;margin-top:-4px;
  text-align:center;overflow-wrap:anywhere;line-height:1.45}
.mp-bar{position:relative;width:62%;height:3px;border-radius:999px;background:#ffffff14;overflow:hidden}
.mp-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:var(--gradient-brand,#e75480);transition:width .4s var(--ease-out)}
/* 不定量进度：/api/create/avatar 是同步接口，没有百分比可报。
   与其显示一根永远不动的 0% 长条，不如让它来回跑。 */
.mp-bar.indet i{width:38%;animation:mp-indet 1.2s ease-in-out infinite}
@keyframes mp-indet{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
/* 环形进度。和 .mp-spin 一样是通用工具类 —— 聊天页那边要统一时直接挂上就行。
   数字用 tabular-nums：等宽数字，从 8% 跳到 9% 时不会整块左右抖。 */
.mp-ring{position:relative;width:96px;height:96px;display:grid;place-items:center}
.mp-ring svg{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg)}     /* 从 12 点开始画，不是 3 点 */
.mp-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.mp-ring .track{stroke:#ffffff14}
.mp-ring .bar{stroke:#e75480;transition:stroke-dashoffset .45s var(--ease-out)}
.mp-ring b{position:relative;font-size:19px;font-weight:800;color:#e75480;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){
  .mp-ring .bar{transition:none}
}

/* 空态：还没点生成。不转圈、不扫光，只是一个和成品同尺寸的占位。 */
.mp-frame.idle .mp-spin{animation:none;border-top-color:#ffffff2e;opacity:.5}
.media-progress.failed .mp-frame::before{animation:none}
/* 失败时把加载圈整个撤掉。留一个"停住的转圈"比没有更让人困惑 ——
   它看着像还在转、只是卡住了，而实际已经结束了。 */
.media-progress.failed .mp-spin{display:none}
.media-progress.failed .mp-text{color:#f4a0ae}
/* 失败的卡不该还占着 3:4 那么大一块空白 —— 里面只有一行错误和两个按钮。
   改成按内容高度自适应，视觉上也和"这条没成"更相称。 */
.media-progress.failed .mp-frame{aspect-ratio:auto;min-height:150px;padding:20px 14px}
/* 失败卡上的操作区：重试 + 关闭。窄屏放不下就换行，绝不横向溢出。 */
.mp-acts{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin-top:4px;width:100%}
.mp-retry{flex:0 1 auto;padding:6px 14px;border-radius:999px;
  border:1px solid #f4a0ae;background:transparent;color:#f4a0ae;
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.mp-retry:hover{background:#f4a0ae14}
.mp-retry:disabled{opacity:.5;cursor:default}
.mp-retry.ghost{border-color:#ffffff2e;color:var(--t3)}
.mp-retry.ghost:hover{background:#ffffff0d}

.generated-media{width:min(280px,78%);padding:9px;border-radius:16px 16px 16px 6px;
  background:#241820e8;border:1px solid var(--hairline);box-shadow:var(--elev-1)}
.generated-media-row{align-items:flex-end}
.generated-media .gm-label{display:flex;align-items:center;gap:6px;margin:1px 3px 8px;
  color:var(--t2);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.generated-media .gm-label svg{width:14px;height:14px;fill:none;stroke:#f7a8bf;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.generated-media img,.generated-media video{display:block;width:100%;border-radius:10px;background:#120c0e}
.generated-media .gm-actions{display:flex;justify-content:flex-end;margin-top:8px}
.generated-media .gm-cost{display:inline-flex;align-items:center;gap:3px;margin-left:8px;
  font-size:12px;opacity:.9}
.gm-create-video{min-height:44px;padding:0 12px;border:1px solid #f79bb65c;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;cursor:pointer;
  color:#ffd3df;background:#f0648c1a;font-size:12px;font-weight:700;
  transition:background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out)}
.generated-media .gm-create-video svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.generated-media .gm-create-video:hover,.generated-media .gm-create-video:focus-visible{color:#fff;background:#f0648c42;border-color:#f7a8bf}
.generated-media .gm-create-video:focus-visible{outline:2px solid #f7a8bf;outline-offset:2px}
.generated-media .gm-create-video:disabled{cursor:wait;opacity:.58}
#sendb{width:44px;height:44px;border-radius:9999px;background:var(--gradient-brand);
  box-shadow:var(--shadow-brand);display:grid;place-items:center;flex:none}
#sendb>img{width:20px;height:20px;display:block}
#sendb svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
#sendb .coin-icon{stroke:none}
#sendb[disabled]{opacity:.4}

/* ---------------------------------------------------------------- 通话条 */
/* 通话不再全屏接管：像 WhatsApp 那样在聊天顶部挂一条绿条，
   聊天内容照常可见。计时、状态、静音/挂断都在条里。 */
#callbar{display:none;align-items:center;gap:var(--md);position:relative;z-index:1;
  padding:9px var(--lg);
  background:linear-gradient(90deg,#0b2e1f,#0d3a27);
  box-shadow:0 .5px 0 var(--hairline)}
#callbar.on{display:flex}
#callbar .av{width:32px;height:32px;border-radius:9999px;position:relative;flex:none;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#ffffff59;
  background:linear-gradient(150deg,var(--c1),var(--c2))}
/* 说话时的呼吸光环。用户看不到嘴型，这圈光是"她正在说"的唯一线索 */
#callbar .av::before{content:'';position:absolute;inset:-4px;border-radius:9999px;
  box-shadow:0 0 0 1.5px #4ade8073;opacity:0;transition:opacity .2s}
#callbar.speaking .av::before{opacity:1;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.07);opacity:1}}
#callbar .grow{flex:1;min-width:0}
#callbar .l1{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
#callbar .l1 .tm{color:#4ade80;font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
#callbar .l2{font-size:var(--tiny);color:var(--t3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 按钮仿 WhatsApp：圆形，静音激活时反白，挂断是红底白机 */
#callbar .cbtn{width:38px;height:38px;border-radius:9999px;display:grid;
  place-items:center;background:#ffffff1a;flex:none;transition:background .15s}
#callbar .cbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#callbar .cbtn.off{background:#fff;color:#0d3a27}
#callbar .cbtn.hang{background:#e5484d;color:#fff;
  box-shadow:0 4px 14px -3px #e5484d99}
#vadline{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:#4ade80;opacity:.8;transition:width .08s linear}

/* ---------------------------------------------------------------- 通用 */
.empty{padding:64px var(--xl);text-align:center;color:var(--t3);font-size:var(--caption)}
.sheet{position:fixed;inset:0;z-index:70;background:#000000a8;display:none;
  align-items:flex-end;backdrop-filter:blur(6px)}
.sheet.on{display:flex}
.sheet .inner{width:100%;background:#12121a;border-radius:22px 22px 0 0;
  padding:var(--xl) var(--lg) calc(var(--sab) + var(--xl));
  box-shadow:var(--elev-3);animation:up .24s cubic-bezier(.32,.72,0,1)}
@keyframes up{from{transform:translateY(14px);opacity:.6}}
/* ---- 免费额度用尽：开通会员弹窗 ---- */
#paywall{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
  background:rgba(8,5,7,.72);backdrop-filter:blur(4px);padding:20px}
#paywall.on{display:flex}
.pw-card{width:400px;max-width:100%;background:#1f1418;border:1px solid rgba(255,255,255,.09);
  border-radius:22px;box-shadow:0 30px 80px #000c;padding:30px 26px 24px;text-align:center;position:relative}
.pw-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.06);color:#c9b8bf;display:grid;place-items:center}
.pw-x:hover{background:rgba(255,255,255,.12);color:#fff}
.pw-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.pw-crown{width:64px;height:64px;margin:2px auto 14px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#f79bb6,#e85c85);box-shadow:0 10px 26px rgba(232,92,133,.45)}
.pw-crown svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linejoin:round}
.pw-title{margin:0 0 8px;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pw-sub{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:#c9b8bf}
.pw-perks{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;text-align:left}
.pw-perk{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#e9dbe1;
  background:#241820;border:1px solid rgba(255,255,255,.05);border-radius:11px;padding:10px 12px}
.pw-perk svg{width:16px;height:16px;flex:none;stroke:#e85c85;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pw-go{display:block;width:100%;height:52px;border:0;border-radius:15px;cursor:pointer;font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#f79bb6,#e85c85);box-shadow:0 10px 24px rgba(232,92,133,.4)}
.pw-later{display:block;width:100%;margin-top:10px;height:40px;border:0;background:transparent;
  color:#8f7e85;font-size:13px;font-weight:600;cursor:pointer}
.pw-later:hover{color:#c9b8bf}
/* 首字迟迟不来时挂在打字气泡里的一行小字。只在等待期间存在，收到第一个字就整体替换掉 */
.typing-slow{display:block;margin-top:6px;font-size:11.5px;color:#8f7e85;letter-spacing:.01em}
#toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + var(--sab) + 20px);
  transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none}
.toast{padding:10px 16px;border-radius:9999px;background:#000000d9;font-size:var(--caption);
  box-shadow:var(--elev-2);backdrop-filter:blur(var(--glass-blur-sm));
  animation:up .2s ease;max-width:86vw;text-align:center}
.toast.err{background:#3b1016e6;box-shadow:inset 0 0 0 1px #ff5e8a4d,var(--elev-2)}
.skel{background:linear-gradient(100deg,#ffffff0a 28%,#ffffff17 44%,#ffffff0a 60%);
  background-size:220% 100%;animation:sh 1.3s infinite}
@keyframes sh{from{background-position:180% 0}to{background-position:-60% 0}}

/* ---------------------------------------------------------------- Desktop shell
   参考界面的核心是安静的暖玫瑰色工作台：导航固定、内容分区清晰，
   而不是把手机界面等比放大。窄屏继续使用原本的沉浸式交互。 */
#sidebar{display:none}
.top-search{display:none}
.home-cta{display:none}
.home-hero,.home-section-head,.membership-hero,.tiers{display:none}
@media (min-width:760px){
  :root{--dock-h:0px;--lg:30px;--xl:30px;--display:30px;--title:20px}
  html,body{min-width:760px;background:#120c0e}
  body::before{height:100%;background:radial-gradient(80% 58% at 68% 0%,#3c2028 0%,#191013 54%,#120c0e 100%)}
  #app{min-height:100vh;margin-left:240px;background:#191013}
  #sidebar{position:fixed;z-index:90;display:flex;flex-direction:column;left:0;top:64px;bottom:0;width:240px;padding:18px 14px;background:#1f1418;border-right:1px solid var(--hairline)}
  .brand{padding:3px 10px 24px;font-weight:800;font-size:23px;letter-spacing:-.04em;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-nav button{height:43px;padding:0 12px;display:flex;align-items:center;gap:12px;border-radius:11px;text-align:left;color:var(--t2);font-size:14px;font-weight:500}
  .side-nav button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .side-nav button.on{color:var(--t1);background:#28191f}
  .side-nav button.on svg{color:#f79bb6}
  .side-upgrade{margin-top:auto;padding:15px;border-radius:14px;border:1px solid var(--hairline);background:linear-gradient(160deg,#3c2028,#26141a)}
  .side-upgrade b{font-size:13px;color:#f0a9b8}.side-upgrade p{margin:6px 0 12px;font-size:11.5px;line-height:1.5;color:var(--t2)}
  .side-upgrade button{width:100%;height:35px;border-radius:10px;font-size:12.5px;font-weight:700;color:#3a1220;background:var(--gradient-brand)}
  .side-account{display:flex;gap:10px;align-items:center;margin-top:14px;padding:7px 6px;font-size:13px;font-weight:600}.side-account span{display:block;margin-top:1px;font-size:11px;font-weight:400;color:var(--t3)}
  .side-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#f0a9b8;background:#37232c}
  #dock{display:none}
  .view{padding:0 0 30px;overflow-y:auto}.view.on{display:block}
  .topbar{height:70px;padding:0 30px;border-bottom:1px solid var(--hairline);background:#191013;position:sticky;top:0}.topbar .title{font-size:19px}.topbar .caption{display:none}
  .top-search{display:flex;align-items:center;gap:10px;width:min(440px,46vw);height:42px;padding:0 14px;border:1px solid var(--hairline);border-radius:12px;background:#28191f;color:var(--t3);font-size:13.5px}.top-search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}.top-search input{width:100%;font-size:13.5px;color:var(--t1)}.top-search input::placeholder{color:var(--t3)}
  .home-cta{display:inline-flex;height:42px;padding:0 17px;align-items:center;gap:7px;border-radius:12px;font-size:13px;font-weight:700;color:#3a1220;background:var(--gradient-brand)}.home-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
  #v-home .topbar .grow{display:none}#v-home .topbar::after{content:'';flex:1}.topbar .chip{height:42px;padding:0 14px;border-radius:12px;background:#28191f;color:var(--t2);box-shadow:inset 0 0 0 1px var(--hairline)}
  .segtabs{padding:28px 30px 14px;gap:8px}.segtabs button{flex:none;height:34px;padding:0 15px;border-radius:99px;background:#28191f;box-shadow:inset 0 0 0 1px var(--hairline);font-size:12.5px;color:var(--t2)}.segtabs button.on{color:#3a1220;background:var(--gradient-brand);box-shadow:none}
  .filters{padding:0 30px 22px;gap:8px}.filters .chip{height:30px;padding:0 13px;border:1px solid var(--hairline);background:#28191f;color:var(--t2)}.filters .chip.on{color:#3a1220;border-color:transparent;box-shadow:none}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:0 30px 32px}.ch{aspect-ratio:2/3;border-radius:18px;background:#2e1d25;box-shadow:inset 0 0 0 1px var(--hairline);transition:transform .18s ease,box-shadow .18s ease}.ch:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #f79bb655,0 16px 30px #0005}.ch .meta{padding:14px}.ch .nm{font-size:18px}.ch .tl{font-size:11.5px;color:#c6a9b2}.ch .scrim{background:linear-gradient(180deg,transparent 80%,#191013cc 90%,#191013f2)}.chip{background:#191013c9;color:#f0a9b8}
  #v-chats .topbar .grow,#v-me .topbar .grow{display:block}.sess{max-width:880px;margin:0 auto;padding:13px 20px;border-bottom:1px solid var(--hairline)}.sess:after{display:none}.sess:hover{background:#28191f}.sess .av{width:48px;height:48px}.sess .last{color:var(--t3)}
  #v-me{max-width:1050px;margin:0 auto}.balance{background:linear-gradient(160deg,#3c2028,#26141a);border:1px solid var(--hairline);box-shadow:none}.pack,.profile-card,.rows{background:#2e1d25;box-shadow:inset 0 0 0 1px var(--hairline)}.pack.best{background:linear-gradient(160deg,#482632,#2e1d25);box-shadow:inset 0 0 0 1px #f79bb670,var(--shadow-ai)}
  #chat{left:240px;top:64px;background:#191013}.chat-bg-fallback{background:linear-gradient(150deg,#3c2028,#191013)!important}#chat .head{padding:14px 30px;background:#1f1418}.iconbtn{border-radius:11px;background:#28191f;box-shadow:inset 0 0 0 1px var(--hairline)}#msgs{max-width:none;width:100%;margin:0;padding:26px 28px}.msg.her{background:#2e1d25;box-shadow:inset 0 0 0 1px var(--hairline)}.msg.me{color:#3a1220;box-shadow:none}#composer{padding:16px 30px 22px;background:#1f1418}#input{background:#28191f;box-shadow:inset 0 0 0 1px var(--hairline)}#sendb{color:#3a1220;box-shadow:none}#sendb svg{stroke:#3a1220}
}

/* Figma desktop refresh — Aura four-screen layout */
@media (min-width:760px){
  body{background:#120c0e} #app{min-height:900px;background:#191013}
  .brand{font-size:22px;text-transform:none}.side-nav button{height:41px}
  .side-nav button[data-action]{color:var(--t2)}
  .side-nav button[data-action]:hover{color:var(--t1);background:#28191f}
  .side-upgrade{margin-bottom:0}.topbar{background:#191013}
  #v-home .segtabs{display:none} #v-home .filters{justify-content:flex-end;padding:10px 30px 16px}
  #v-home .wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:0}
  #v-home:before,#v-home:after{display:none}
  .home-hero{display:flex;position:relative;min-height:230px;margin:26px 30px 0;padding:28px;align-items:flex-end;overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:radial-gradient(270px 130px at 82% 15%,#6c3a4c 0%,transparent 62%),linear-gradient(150deg,#3a2028,#211016)}
  .home-hero::after{content:'';position:absolute;right:7%;bottom:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#f0a9b866 0 12%,#6c3a4c70 13% 34%,transparent 35%);filter:blur(3px)}
  .home-hero .hero-copy{position:relative;z-index:1;max-width:560px}.home-hero .eyebrow{margin-bottom:5px;color:#f0a9b8;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}.home-hero h1{margin:0;font-size:30px;line-height:1.2;letter-spacing:-.03em}.home-hero p{margin:8px 0 16px;color:var(--t2);font-size:14px}.home-hero .btn{height:42px;border-radius:12px;font-size:14px;font-weight:700}
  .home-section-head{display:flex;align-items:center;justify-content:space-between;margin:26px 30px 0}.home-section-head h2{margin:0;font-size:20px;letter-spacing:-.02em}.home-section-head span{font-size:12px;color:var(--t3)}
  .ch{aspect-ratio:2/3;border-radius:16px}.ch .art{background:linear-gradient(150deg,#4b2a36,#2e1d25)}.ch .meta{padding:14px}.ch .scrim{background:linear-gradient(180deg,transparent 80%,#191013cc 90%,#191013f4)}
  #v-chats{background:#191013}.sess{max-width:none;margin:0 30px;padding:14px 12px;border-radius:12px}.sess+.sess{margin-top:4px}.sess:hover{background:#28191f}
  #v-me{max-width:none;margin:0;padding:64px 80px 40px}.balance,#v-me>.subtitle,#v-me>.caption,#v-me>.profile-card,#v-me>.rows,#v-me>.ledger{display:none}
  #v-me .topbar{margin:0 -80px;height:0;border:0;overflow:hidden}
  .membership-hero{display:block;text-align:center;padding-top:48px;color:var(--t2)}.membership-hero .crown{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 12px;border-radius:22px;background:linear-gradient(150deg,#4c2a36,#26141a);color:#f0a9b8;font-size:28px}.membership-hero h1{margin:0;color:var(--t1);font-size:30px;letter-spacing:-.03em}.membership-hero p{margin:8px auto 14px;font-size:14px}.billing-toggle{display:flex;gap:4px;width:max-content;margin:0 auto 22px;padding:5px;border-radius:13px;background:#28191f}.billing-toggle button{height:34px;padding:0 16px;border-radius:10px;color:var(--t2);font-size:13px}.billing-toggle button.on{background:#3a242d;color:var(--t1)}.billing-toggle small{margin-left:7px;color:#f0a9b8}
  .packs{display:none}
  .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:980px;margin:0 auto}
  .tier{display:flex;flex-direction:column;min-height:372px;padding:26px;text-align:left;border:1px solid var(--hairline);border-radius:20px;background:#2e1d25;color:var(--t1);position:relative}
  .tier.best{box-shadow:0 0 0 1.5px #f79bb6,0 24px 50px -20px #e2683f80;background:linear-gradient(160deg,#3c2028,#26141a)}
  .tier .tagpill{position:absolute;top:-12px;left:26px}
  .tier-name{font-size:14px;font-weight:700;color:#f0a9b8;letter-spacing:.02em}
  .tier-price{margin:8px 0 4px;display:flex;align-items:baseline;gap:6px}
  .tier-price .amt{font-size:38px;font-weight:800;letter-spacing:-.04em}
  .tier-price .per{font-size:13px;color:var(--t3)}
  .tier-feats{list-style:none;margin:16px 0 20px;padding:0;flex:1;display:flex;flex-direction:column;gap:11px;color:var(--t2);font-size:13px;line-height:1.4}
  .tier-feats li{position:relative;padding-left:24px}
  .tier-feats li:before{content:'✓';position:absolute;left:0;top:-1px;color:#f79bb6;font-weight:700}
  .tier-feats li.off{color:var(--t4);text-decoration:line-through}
  .tier-feats li.off:before{content:'✕';color:var(--t4);text-decoration:none}
  .tier .btn{margin-top:auto}
  #chat.on{left:240px;display:grid;grid-template-columns:320px minmax(0,1fr) 380px;grid-template-rows:70px 1fr auto;background:#191013}.chat-profile{position:relative;z-index:2;display:block;grid-column:3;grid-row:1/4;border-left:1px solid var(--hairline);padding:28px 22px;background:#1f1418;text-align:center}.chat-profile .portrait{width:96px;height:96px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(145deg,#7b4255,#2e1d25);display:grid;place-items:center;font-size:32px;color:#f0a9b8}.chat-profile h3{margin:0;font-size:18px}.chat-profile p{font-size:12px;color:var(--t2);line-height:1.6}.chat-profile .facts{margin-top:18px;text-align:left;border-top:1px solid var(--hairline);padding-top:14px;color:var(--t2);font-size:13px;line-height:1.7}.chat-profile{overflow-y:auto}.chat-profile .portrait{overflow:hidden}.chat-profile .portrait img{width:100%;height:100%;object-fit:cover}.chat-profile .f-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:4px}.chat-profile .f-body{margin:0;font-size:12.5px;color:var(--t2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.chat-profile .ptags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}.chat-profile .ptags span{font-size:11px;padding:3px 10px;border-radius:999px;background:#2e1d25;color:#f0a9b8}.chat-profile .psettings{margin-top:18px;text-align:left;border-top:1px solid var(--hairline);padding-top:14px}.chat-profile .psettings .btn{margin-top:8px;font-size:13px;height:38px}.chat-profile .ptabs{display:flex;gap:6px;margin-bottom:14px}.chat-profile .ptabs button{flex:1;border:0;border-radius:999px;padding:8px 0;font-size:13px;font-weight:600;background:#28191f;color:var(--t2);cursor:pointer}.chat-profile .ptabs button.on{background:var(--gradient-brand);color:#fff}#ptab-gallery{display:grid;grid-template-columns:1fr;gap:10px}#ptab-gallery img,#ptab-gallery video{width:100%;border-radius:14px;display:block}#ptab-gallery .empty-g{color:var(--t3);font-size:12px;padding:30px 0;text-align:center}
  #chat .head{grid-column:2;grid-row:1;padding:14px 30px;background:#191013;border-bottom:1px solid var(--hairline)}#msgs{grid-column:2;grid-row:2;max-width:none;margin:0;padding:26px 28px}#composer{grid-column:2;grid-row:3;padding:16px 30px 22px;background:#1f1418;border-top:1px solid var(--hairline)}#callbar{grid-column:2;grid-row:2;align-self:start;width:100%;z-index:5}
}
/* ================================================================== Auth (Login / Sign Up) */
/* 游客态：body 上挂 .guest。需要账号的东西一律藏掉，而不是点了才报错 ——
   让人看见一个点了没用的按钮，比不显示更糟。 */
.gt-login{display:none;height:36px;padding:0 18px;font-size:14px;flex:none}
body.guest .gt-login{display:inline-flex;align-items:center}
body.guest #gtCoins,body.guest #gtMe{display:none}

/* 登录/注册是【弹窗】，不是一整屏页面：未登录也能浏览首页，
   需要登录的动作才把它弹出来盖在上面。 */
#auth{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:20px;
  color:var(--t1);background:#08080ccc;backdrop-filter:blur(6px);overflow-y:auto}
#auth.on{display:grid}
.auth-x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border:0;
  border-radius:50%;background:#0000005c;backdrop-filter:blur(4px);color:#fff;
  display:grid;place-items:center;cursor:pointer}
.auth-x:hover{background:#00000094}
.auth-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* 强制登录时（没有游客态可退回）把叉藏掉，别给一个点了没用的按钮 */
#auth.forced .auth-x{display:none}
/* .auth-logo 用的是渐变文字（background-clip:text + color:transparent）。
   顶栏那套写法里 .ai 是纯白的，这里必须显式把它从渐变里摘出来，
   否则 ".ai" 会跟着变透明，看着像丢了几个字。 */
.auth-logo .ai{-webkit-text-fill-color:#fff;color:#fff;background:none}
/* 上半区：配图打底 + 品牌名 + 一行欢迎语。
   图片用 background 而不是 <img>：它是装饰，不该进无障碍树，也不该被
   右键另存当成内容。 */
.auth-hero{position:relative;height:400px;flex:none;
  background:#2a1a20 center 38%/cover no-repeat;
  /* 先写普通 url 兜底：不认 image-set 的浏览器保留这一条，不会变成没有背景 */
  background-image:url("/static/assets/auth/auth-hero.jpg");
  background-image:-webkit-image-set(url("/static/assets/auth/auth-hero.jpg") 1x,
                                     url("/static/assets/auth/auth-hero@2x.jpg") 2x);
  background-image:image-set(url("/static/assets/auth/auth-hero.jpg") 1x,
                             url("/static/assets/auth/auth-hero@2x.jpg") 2x)}
/* 2026-08-31：按产品要求去掉整块黑渐变蒙层 —— 配图要看得清清楚楚。
   压字改由文字自己的投影负责（见 .auth-hero-copy），不再糊一层黑纱在图上。
   代价：图和下半区之间会出现一条硬边，这是明确接受的取舍。 */
/* 没有黑蒙层之后，文字全靠自身投影从亮图上浮起来。
   drop-shadow 而不是 text-shadow：logo 是 background-clip:text 的渐变字，
   text-shadow 会画在文字下面被渐变整个盖住，等于没加。 */
.auth-hero-copy{position:absolute;left:26px;right:26px;bottom:18px;z-index:1;
  filter:drop-shadow(0 1px 2px #000000b3) drop-shadow(0 2px 12px #00000080)}
/* line-height:1 是这里的关键：34px 的字默认行高会在下方留出约 7px 行距，
   看着就是 logo 和 slogan 中间空了一块，光调 margin 是压不掉的。 */
.auth-hero-copy .auth-logo{margin:0;font-size:34px;line-height:1}
/* slogan 跟 logo 齐头左对齐；用 --t1 而不是 --t2 —— 少了黑底之后
   次级灰在亮图上会直接消失 */
.auth-hero-copy p{margin:3px 0 0;font-size:14px;line-height:1.25;
  color:var(--t1);letter-spacing:.01em}
/* padding-top 与 h2 的下边距都取 14px —— 和 .fld 的 margin-bottom 一致。
   三段间距相等，"Sign in"才不会看着一半贴天花板、一半贴输入框。 */
.auth-body{padding:14px 26px 26px;display:flex;flex-direction:column}
/* 2026-08-27：注册表单砍到只剩邮箱/密码/确认三项，和登录页一样短了，
   上半区那张图放回来 —— 两页就此完全同构，只差标题和按钮文案。
   （原来收掉它，是因为注册页还有年龄/国家/两个勾选框，会挤到滚两屏。） */
.auth-wrap{position:relative;width:100%;max-width:420px;margin:auto;
  display:flex;flex-direction:column;overflow:hidden;
  background:#000;border:1px solid var(--hairline);border-radius:20px;
  box-shadow:0 30px 80px #000a}
.auth-logo{font-weight:800;font-size:22px;letter-spacing:-.04em;background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;margin-bottom:24px}
.auth-wrap h2{margin:0 0 14px;font-size:19px;letter-spacing:-.01em}
.auth-sub{margin:5px 0 18px;color:var(--t3);font-size:12.5px}
/* 这句是插在 h2 和第一个输入框【之间】的，所以要把 h2 那 14px 借过来用：
   h2 底 -14（负边距抵消）+ 自己上下各留一点，总高仍然约等于一段间距。 */
/* 标题行：左标题、右"已有账号"。基线对齐，不是居中 ——
   两者字号差一倍，居中会让小字看着往上飘。 */
.auth-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.auth-head h2{margin:0}
.auth-head .link{margin-left:auto;font-size:13.5px}
/* 18+ 确认：左对齐，紧挨主按钮上方 */
.auth-age{margin:2px 0 14px}
.auth-err{margin:0 0 16px;padding:11px 14px;border-radius:12px;background:#3b1016;
  box-shadow:inset 0 0 0 1px #ff5e8a4d;color:#ffd7df;font-size:13px;display:none}
.auth-err.on{display:block}
.fld{margin-bottom:14px}
.fld > label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:7px}
.inp{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:13px;
  background:#eceef8;box-shadow:none}
.inp:focus-within{box-shadow:0 0 0 2px #f79bb6}
.inp > svg{width:17px;height:17px;flex:none;color:#5b5f70;fill:none;stroke:currentColor;stroke-width:1.8}
.inp input,.inp select{flex:1;min-width:0;background:none;color:#171a22;font-size:14.5px}
.inp input::placeholder{color:#8b90a2}
/* Chrome 自动填充会强行套自己那套浅蓝底 —— 不覆盖的话，填过的框和没填的
   框看起来是两种控件（邮箱亮、密码里嵌一块亮），正是这次要修的现象。
   背景改不动，只能用一层超大的 inset 阴影盖住。 */
.inp input:-webkit-autofill,
.inp input:-webkit-autofill:hover,
.inp input:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 100px #eceef8;
  -webkit-text-fill-color:#171a22;
  caret-color:#171a22;
  transition:background-color 9999s ease-out 0s}
.inp select{appearance:none;-webkit-appearance:none;cursor:pointer}
.inp .eye{flex:none;color:#5b5f70;display:grid;place-items:center;width:24px;height:24px;cursor:pointer}
.inp .eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.inp .faint{color:#8b90a2;font-size:14.5px}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-hint{font-size:11.5px;color:var(--t4);margin-top:6px}
.frow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 18px;font-size:13px}
.chk{display:inline-flex;align-items:flex-start;gap:9px;color:var(--t2);cursor:pointer;font-size:13px;line-height:1.45;position:relative}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .box{width:18px;height:18px;border-radius:6px;flex:none;margin-top:1px;background:#28191f;
  box-shadow:inset 0 0 0 1px var(--hairline-strong);display:grid;place-items:center;transition:.15s}
.chk input:checked + .box{background:var(--gradient-brand);box-shadow:none}
.chk .box svg{width:12px;height:12px;opacity:0;stroke:#3a1220;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chk input:checked + .box svg{opacity:1}
.link{color:#f0a9b8;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.auth-cta{width:100%;height:52px;border-radius:14px;font-size:15px;font-weight:700;color:#3a1220;
  background:var(--gradient-brand);box-shadow:var(--shadow-brand);margin-top:2px;transition:filter .12s,opacity .12s}
.auth-cta:active{transform:scale(.99)}
.auth-cta:disabled{opacity:.55;pointer-events:none}
/* 条款声明：放在按钮下方，提交即视为同意（取代原来那两个勾选框） */
/* 注册表单底部的协议同意行。2026-09-01 应要求【临时隐藏】——
   HTML（index.html 的 .auth-terms）原样保留，要恢复只删下面这条 display:none 即可。
   注意：ToS 第 1 节写的是"创建账号即接受"，界面上不展示这句会削弱同意的可举证性，
   正式上线前要么恢复，要么在别处给一个等效的告知。 */
.auth-terms{display:none;margin:14px 0 0;text-align:center;color:var(--t4);font-size:11.5px;line-height:1.5}
.auth-foot{margin-top:18px;text-align:center;color:var(--t3);font-size:13.5px}

/* ---- H5（窄屏）：登录/注册是【整页】，不是弹窗 ----
   手机上一个居中的圆角卡片周围留一圈背景，看着像半成品；而且卡片比视口高时
   还要在弹层里再滚一层。宽屏保持弹窗不变（那是叠在卡墙上的临时动作），
   窄屏铺满整屏，让它就是一张页面。 */
@media (max-width:759px){
  #auth{padding:0;place-items:stretch;overflow:hidden}
  .auth-wrap{max-width:none;margin:0;height:100vh;height:100dvh;
    border:0;border-radius:0;box-shadow:none;overflow:hidden}
  /* 关键：让【配图】去吸收剩余高度，表单按自己的内容高度占位。
     这样不管屏幕多高多矮，表单永远完整落在视口内、不需要滚动；
     屏幕高就多露一点图，屏幕矮就少露一点。
     min-height 兜住极矮的屏（横屏、带键盘的小机型），
     那种情况下宁可让图小到几乎没有，也要保证表单能用。 */
  .auth-hero{flex:1 1 auto;height:auto;min-height:120px;
    background-position:center top}
  .auth-body{flex:0 0 auto;padding-bottom:calc(var(--sab) + 20px)}
  /* 刘海/灵动岛下面：叉号要躲开安全区 */
  .auth-x{top:calc(var(--sat) + 12px)}
}


/* ================================================================== Profile Settings */
#v-settings{padding:calc(var(--sat, 0px) + 62px) 0 40px}
@media (min-width:760px){#v-settings{padding:64px 0 40px}}
.set-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:64px;padding:calc(var(--sat)) 18px 0;background:var(--base);box-shadow:0 .5px 0 var(--hairline)}
.set-top .title{font-size:18px}
.set-save{height:40px;padding:0 16px;border-radius:12px;font-size:13.5px;font-weight:700;color:#3a1220;
  background:var(--gradient-brand);box-shadow:var(--shadow-brand);display:inline-flex;align-items:center;gap:7px}
.set-save svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.set-save:disabled{opacity:.5;pointer-events:none}
.setwrap{padding:16px}
.setnav{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.setnav .cap{display:none}
.setnav a{flex:none;height:36px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;
  background:#28191f;box-shadow:inset 0 0 0 1px var(--hairline);color:var(--t2);font-size:13px;cursor:pointer;white-space:nowrap}
.setnav a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.setnav a.on{color:var(--t1);background:#3a242d}
.setnav a.danger{color:#ff9aa8}
.sec-h{font-size:20px;letter-spacing:-.02em;margin:8px 2px 4px}
.sec-s{color:var(--t3);font-size:13.5px;margin:0 2px 18px}
.card2{background:#2e1d25;border-radius:18px;box-shadow:inset 0 0 0 1px var(--hairline);padding:22px;margin-bottom:16px}
.card2 h3{margin:0 0 18px;font-size:15px}
.avrow{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.avbig{width:64px;height:64px;border-radius:20px;flex:none;display:grid;place-items:center;font-size:24px;
  font-weight:700;color:#f0a9b8;background:linear-gradient(145deg,#7b4255,#2e1d25)}
.btn-line{height:38px;padding:0 14px;border-radius:10px;background:#28191f;box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:13px;color:var(--t1);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.btn-line:active{transform:scale(.98)}
.avhint{font-size:12px;color:var(--t4);margin-top:9px}
.badge-ok{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:9999px;
  font-size:11.5px;background:#12331f;color:#5fd39a}
.badge-no{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:9999px;
  font-size:11.5px;background:#3a242d;color:var(--t3)}
.planbar{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;
  background:linear-gradient(150deg,#3c2028,#26141a);box-shadow:inset 0 0 0 1px var(--hairline);flex-wrap:wrap}
.planbar .pill-ic{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:#4c2a36;color:#f0a9b8;font-size:20px}
.planbar .grow{flex:1;min-width:140px}
.rowset{display:flex;align-items:center;gap:14px;padding:16px 0;box-shadow:0 .5px 0 var(--hairline)}
.rowset:first-of-type{padding-top:2px}
.rowset:last-child{box-shadow:none;padding-bottom:2px}
.rowset .grow{flex:1;min-width:0}
.rowset .r-t{font-size:14.5px}
.rowset .r-s{font-size:12.5px;color:var(--t3);margin-top:3px}
.sel{height:40px;padding:0 34px 0 12px;border-radius:11px;background:#28191f no-repeat right 12px center;
  box-shadow:inset 0 0 0 1px var(--hairline);color:var(--t1);font-size:13.5px;appearance:none;-webkit-appearance:none;cursor:pointer}
.tgl{width:46px;height:27px;border-radius:9999px;background:#3a242d;box-shadow:inset 0 0 0 1px var(--hairline);
  position:relative;flex:none;cursor:pointer;transition:background .18s}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .18s}
.tgl.on{background:linear-gradient(90deg,#f79bb6,#e85c85);box-shadow:none}
.tgl.on::after{transform:translateX(19px)}
@media (min-width:760px){
  .set-top{height:70px;padding:0 30px;border-bottom:1px solid var(--hairline);box-shadow:none}
  .setwrap{display:grid;grid-template-columns:224px 1fr;padding:0}
  .setnav{flex-direction:column;gap:4px;overflow:visible;padding:20px 14px;border-right:1px solid var(--hairline);
    min-height:calc(100vh - 70px)}
  .setnav .cap{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);padding:6px 12px 4px}
  .setnav a{width:100%;height:40px}
  .setnav a.danger{margin-top:auto}
  .setmain{padding:30px 40px 60px;max-width:980px}
  .setmain .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}

/* ---- 角色资料卡（candy 风格重排） ---- */
.chat-profile{padding:0 0 20px}
.chat-profile .ptabs{display:flex;gap:0;margin:0;height:70px;border-bottom:1px solid var(--hairline);
  /* 固定在面板顶部：面板自己是 overflow-y:auto，不 sticky 的话往下翻图就被推走了。
     背景必须给实色，否则下面的图会从半透明的缝里透上来。 */
  position:sticky;top:0;z-index:4;background:#1f1418}
/* 子 tab（Images / Videos）跟着一起钉住，贴在主 tab 下面 */
#ptab-gallery .gtabs{position:sticky;top:70px;z-index:3;background:#1f1418;
  padding:12px 0 10px;margin:-14px 0 4px}
.chat-profile .ptabs button{flex:1;border:0;border-radius:0;padding:0;font-size:14px;height:100%;
  font-weight:600;background:transparent;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.chat-profile .ptabs button.on{background:transparent;color:#fff;border-bottom-color:#e75480}
#ptab-profile{padding:0 16px;text-align:left}
#ptab-gallery{padding:14px 18px}
.gtabs{display:flex;gap:6px;margin-bottom:12px}
.gtabs button{flex:1;border:0;border-radius:999px;padding:7px 0;font-size:12.5px;
  font-weight:600;background:#28191f;color:var(--t2);cursor:pointer}
.gtabs button.on{background:var(--gradient-brand,#e75480);color:#fff}
/* 图片视频都两张一行（2026-08-31 对齐；原来视频一行一个是怕控件挤没法点，
   实际竖版视频两列下原生控件仍够用 —— 点视频本体即可播放/暂停）。 */
#gal-image,#gal-video{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gal-grid img,.gal-grid video{width:100%;border-radius:12px;display:block}
#gal-image img,#gal-video video{aspect-ratio:3/4;object-fit:cover}
.gal-item{position:relative;border-radius:14px;overflow:hidden}
.gal-item img{width:100%;display:block}
/* 桌面悬浮显示；触屏没有 hover，由 JS 点按加 .show-acts */
.gal-acts{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;
  flex-wrap:wrap;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease}
.gal-item:hover .gal-acts,.gal-item.show-acts .gal-acts{opacity:1;pointer-events:auto}
/* 三个按钮（Video / Background / Delete）在 2 列布局下的一张卡片里放不下一行 ——
   加了 Background 之后 Delete 被挤出卡片外（2026-09-04）。允许换行，并把内边距和
   字号收一档；min-width:0 + 文字省略，保证再长的词也不会把整行撑爆。 */
.gal-act{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;
  padding:6px 10px;font-size:11.5px;font-weight:600;cursor:pointer;min-width:0;max-width:100%;
  background:rgba(20,12,16,.78);color:#fff;backdrop-filter:blur(6px)}
.gal-act span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-act svg{flex:none}
.gal-act svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.gal-act:hover{background:rgba(45,25,33,.9)}
.gal-act.danger{background:rgba(122,32,38,.85)}
.gal-act.danger:hover{background:rgba(150,40,46,.95)}
.gal-grid .empty-g{grid-column:1/-1;color:var(--t3);font-size:12px;
  padding:26px 0;text-align:center}
.pcard{position:relative;margin:16px 0 16px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,#7b4255,#2e1d25)}
.pcard img,.pcard video{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.pc-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:0;background:#000000a6;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.pc-nav.prev{left:12px}.pc-nav.next{right:12px}
.pc-nav:hover{background:#000000d9}
.pc-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:7px}
.pc-dots span{width:7px;height:7px;border-radius:50%;background:#ffffff66}
.pc-dots span.on{background:#fff}
.pname-row{display:flex;align-items:center;gap:10px}
.pname-row h3{margin:0;font-size:26px}
.pfav{border:1px solid var(--hairline);background:#28191f;width:34px;height:34px;border-radius:50%;
  cursor:pointer;font-size:15px;display:grid;place-items:center;flex:none}
.pbio{font-size:13.5px;color:var(--t2);line-height:1.65;margin:10px 0 16px}
.pgen{width:100%;border:1px solid #e75480;color:#e75480;background:transparent}
.about-label{margin-top:24px;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:12px}
.about-grid .ai .k{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3)}
.about-grid .ai .v{font-size:13px;font-weight:600;margin-top:3px}
.chat-profile .psettings{margin-top:22px}

/* ---- candy 壳：全局顶栏 / 侧栏按钮 / 聊天三列 ---- */
#gtop{display:none}
.chat-list{display:none}
@media (min-width:760px){
  #gtop{display:flex;position:fixed;top:0;left:0;right:0;height:64px;z-index:80;align-items:center;
    justify-content:space-between;padding:0 22px;background:#150d11;border-bottom:1px solid var(--hairline)}
  .gt-brand{font-size:22px;font-weight:800;color:#f0648c;letter-spacing:.3px;margin-right:auto;padding-left:6px}.gt-brand .ai{color:#fff}
  .gt-right{display:flex;align-items:center;gap:12px}
  .gt-tokens{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;
    border:1px solid var(--hairline);background:#221419;color:var(--t1);font-size:13.5px;font-weight:600;cursor:pointer}
  #gtCoins .coin-icon{width:calc(1em + 4px);height:calc(1em + 4px)}
  .gt-tokens b{font-size:14px}
  .tok-plus{color:#f0648c;font-weight:800;margin-left:2px}
  .gt-me{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:12px;border:0;
    background:transparent;color:var(--t1);font-size:13.5px;font-weight:600;cursor:pointer}
  .gt-me .caret{color:var(--t3)}
  .gt-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#e75480,#7b4255);
    display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
  .view{padding-top:64px}
  /* 侧栏：candy 式描边按钮 */
  .side-nav{gap:9px}
  .side-nav button{height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--hairline);
    background:#1c1216;font-size:13.5px;font-weight:600;color:var(--t1)}
  .side-nav button.on{background:#2a1a21;border-color:#e75480}
  /* 聊天左列：会话列表 */
  .chat-list{display:flex;flex-direction:column;grid-column:1;grid-row:1/4;min-height:0;
    border-right:1px solid var(--hairline);background:#171015;padding:20px 14px 10px;position:relative;z-index:2}
  .cl-title{font-size:22px;font-weight:800;margin:0 4px 14px}
  .cl-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 13px;border-radius:12px;
    background:#241820;border:1px solid var(--hairline);margin-bottom:12px}
  .cl-search svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:2;flex:none}
  .cl-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:13.5px;outline:none}
  .cl-chips{display:flex;gap:8px;margin-bottom:12px}
  .cl-chips button{height:32px;padding:0 15px;border-radius:999px;border:1px solid var(--hairline);
    background:transparent;color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer}
  .cl-chips button.on{border-color:#e75480;color:#fff;background:#2a1a21}
  .cl-sess{flex:1;overflow-y:auto;min-height:0;margin:0 -6px;padding:0 6px}
  .cl-item{display:flex;align-items:center;gap:11px;padding:11px 8px;border-radius:12px;cursor:pointer}
  .cl-item:hover{background:#241820}
  .cl-item.on{background:#2a1a21}
  .cl-item .mav{width:44px;height:44px;flex:none}
  .cl-item .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-item .lm{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .cl-item .grow{flex:1;min-width:0}
  .cl-item .tm{font-size:11px;color:var(--t3);flex:none;align-self:flex-start;margin-top:4px;margin-left:auto;text-align:right}
  #back{display:none}
}

/* ---- Buy Coins 独立页（candy 版式） ---- */
.shop-hero{display:none}
.benefits{margin:26px var(--lg) 0;padding:20px;border-radius:16px;background:#241820;
  border:1px solid var(--hairline)}
.benefits .cap{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:12px}
.benefits .bi{font-size:13.5px;font-weight:600;padding:7px 0}
@media (min-width:760px){
  #v-shop{max-width:none;margin:0;padding:64px 80px 40px}
  #v-shop .topbar{display:none}
  .shop-hero{display:block;text-align:center;padding-top:46px}
  .shop-hero h1{margin:0;font-size:30px;letter-spacing:-.03em}
  .shop-hero p{margin:8px auto 26px;font-size:14px;color:var(--t2);max-width:520px}
  #v-shop .balance{max-width:980px;margin:0 auto 26px}
  #v-shop>.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:920px;margin:0 auto;padding:0}
  #v-shop>.caption{display:block;max-width:980px;margin:18px auto 0;padding:0}
  .benefits{max-width:980px;margin:30px auto 0;padding:24px}
  /* 桌面端 shop 页不显示账号/流水（那是手机 Me 页的内容） */
  #v-shop>.subtitle,#v-shop>.profile-card,#v-shop>.rows,#v-shop>.ledger{display:none}
}

/* ---- Membership 页（candy 模版） ---- */
.plan-toggle{display:flex;gap:4px;width:max-content;margin:26px auto 20px;padding:5px;border-radius:999px;background:#28191f}
.plan-toggle button{height:38px;padding:0 20px;border:0;border-radius:999px;color:var(--t2);font-size:13.5px;font-weight:700;background:transparent;cursor:pointer}
.plan-toggle button.on{background:#3a242d;color:#fff}
.membership-hero2{text-align:center;margin-bottom:26px}
.membership-hero2 h1{margin:0;font-size:30px;letter-spacing:-.03em}
.membership-hero2 p{margin:8px auto 0;font-size:14px;color:var(--t2)}
.durs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:920px;margin:0 auto}
.dur{position:relative;padding:22px;border-radius:18px;border:1px solid var(--hairline);background:#2e1d25;display:flex;flex-direction:column}
.dur.best{background:linear-gradient(170deg,#4c2531 0%,#2e1d25 70%);box-shadow:0 0 0 1.5px #f79bb6}
.dur-top{display:flex;align-items:center;justify-content:space-between}
.dur-m{font-size:15px;font-weight:800}
.dur-off{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:#f2c14e;color:#3a2a05}
.dur-bv{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:#f0a9b8;margin-top:4px}
.dur-price{margin-top:22px}
.dur-price b{font-size:30px}
.dur-price span{font-size:12.5px;color:var(--t2);margin-left:3px}
.dur-strike{font-size:13px;color:var(--t3);text-decoration:line-through;margin:2px 0 18px}
.dur-sub{font-size:12.5px;color:var(--t3);margin:2px 0 18px}
.packs{grid-template-columns:repeat(2,minmax(0,1fr))}
.packs .dur{min-width:0}
.pk{position:relative;align-items:center;text-align:center;padding:30px 18px 18px;cursor:pointer;overflow:visible}
.pk-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap}
.pk-coins{font-size:26px;font-weight:800;margin:12px 0 22px}
.pk .pk-price{font-size:16px;font-weight:800;margin-top:auto;width:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}

#v-shop>.packs,.packs{row-gap:26px}
@media (max-width:759px){.pk{padding:24px 12px 14px}.pk-coins{font-size:21px}.pk .pk-price{font-size:14px}}
.dur .btn{margin-top:auto}
.pb-cap{max-width:920px;margin:34px auto 12px;font-size:16px;font-weight:800}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:920px;margin:0 auto}
.pb-item{display:flex;align-items:center;gap:10px;padding:15px 16px;border-radius:13px;background:#2e1d25;border:1px solid var(--hairline);font-size:13.5px;font-weight:600}
.cmp{max-width:920px;margin:0 auto;border:1px solid var(--hairline);border-radius:16px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1fr 130px 130px;align-items:center;padding:13px 18px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--hairline)}
.cmp-row:last-child{border-bottom:0}
.cmp-row>div:nth-child(2),.cmp-row>div:nth-child(3){text-align:center}
.cmp-row .hl{background:#31202b;margin:-13px 0;padding:13px 0;height:100%;display:flex;align-items:center;justify-content:center}
.cmp-head{background:#241820;font-weight:800}
.cmp-head .hl{color:#f0a9b8}
.ck{color:#4ade80;font-weight:800}
.xx{color:#f87171;font-weight:800}
@media (max-width:759px){
  .durs{grid-template-columns:1fr;padding:0 var(--lg)}
  .pb-grid{grid-template-columns:1fr;padding:0 var(--lg)}
  .cmp{margin:0 var(--lg)}
  .membership-hero2{padding:0 var(--lg)}
}

/* ---- 充值页 Ultimate 升级横幅（candy 同款） ---- */
.promo{position:relative;display:flex;align-items:center;gap:16px;max-width:920px;
  margin:0 var(--lg) 22px;padding:18px 20px;border-radius:14px;border:1px solid transparent;
  background:linear-gradient(#1d1218,#1d1218) padding-box,linear-gradient(90deg,#6366f1,#e75480) border-box}
.promo-tag{position:absolute;top:-10px;left:20px;background:#150d11;padding:0 8px;
  font-size:13px;font-weight:800;color:#c084fc}
.promo .grow b{font-size:14.5px}
.promo .grow p{margin:3px 0 0;font-size:12.5px;color:var(--t2)}
.promo .btn{height:40px;padding:0 22px;flex:none}
@media (min-width:760px){.promo{margin:0 auto 24px}}

/* ---- 卡片按钮居中 + 默认高亮/悬停跟随 ---- */
.dur .btn{display:flex;align-items:center;justify-content:center;width:100%;line-height:1;text-align:center}
/* 充值档位：默认第一张亮，鼠标移入谁谁亮 */
.packs:not(:hover) .pk:first-child,.packs .pk:hover{
  background:linear-gradient(170deg,#4c2531 0%,#2e1d25 70%);box-shadow:0 0 0 1.5px #f79bb6}
.packs:not(:hover) .pk:first-child .pk-price,.packs .pk:hover .pk-price{
  background:var(--gradient-brand);color:#fff;box-shadow:none}
/* 订阅时长卡：默认 BEST VALUE 那张亮，鼠标移入谁谁亮 */
.durs .dur.best{background:#2e1d25;box-shadow:none}
.durs:not(:hover) .dur.best,.durs .dur:hover{
  background:linear-gradient(170deg,#4c2531 0%,#2e1d25 70%);box-shadow:0 0 0 1.5px #f79bb6}
.durs:not(:hover) .dur.best .btn,.durs .dur:hover .btn{
  background:var(--gradient-brand);color:#fff;box-shadow:none}
/* 充值页升级横幅：按钮右对齐 */
.promo{justify-content:space-between}
.promo .grow{flex:1;min-width:0}
.promo .btn{margin-left:auto}

/* ---- H5：全局顶栏（汉堡 + logo + coins）与抽屉 ---- */
.gt-burger{display:none}
#mdrawer{display:none;position:fixed;inset:0;z-index:120;background:#000a}
#mdrawer.on{display:block}
.md-panel{position:absolute;left:0;top:0;bottom:0;width:80%;max-width:340px;background:#171015;
  border-right:1px solid var(--hairline);padding:calc(var(--sat, 0px) + 14px) 14px 24px;overflow-y:auto}
.md-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  color:var(--t1);font-size:15px;font-weight:700;padding:13px 8px;border-bottom:1px solid var(--hairline);
  cursor:pointer;text-align:left}
.md-row .caret{margin-left:auto;color:var(--t3)}
.md-profile{padding:8px;border-bottom:1px solid var(--hairline)}
.md-sec{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--t3);margin:20px 8px 8px}
#mdrawer .ledger,#mdrawer .rows,#mdrawer .profile-card{margin:0}
@media (max-width:759px){
  #gtop{display:flex;position:fixed;top:0;left:0;right:0;height:calc(var(--sat, 0px) + 54px);
    z-index:50;align-items:center;justify-content:space-between;gap:10px;
    padding:var(--sat, 0px) 12px 0;background:#150d11;border-bottom:1px solid var(--hairline)}
  .gt-burger{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;
    background:transparent;color:var(--t1);cursor:pointer}
  .gt-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .gt-brand{font-size:18px;margin-right:auto}
  .gt-me{display:none}
  .gt-tokens{height:34px;padding:0 10px;font-size:12.5px}
  .view{padding-top:calc(var(--sat, 0px) + 54px)}      /* 贴合顶栏高度，去掉顶部空带 */
  .topbar{padding-top:2px}
}

/* ---- logo 配色（移动端也生效） ---- */
.gt-brand{font-weight:800;color:#f0648c;letter-spacing:.3px}
.gt-brand .ai{color:#fff}
/* ---- 充值页右上角消费记录入口 ---- */
#v-shop{position:relative}
.shop-history{display:inline-flex;position:absolute;z-index:5;cursor:pointer;
  top:calc(var(--sat, 0px) + 66px);right:14px;height:32px;padding:0 12px;font-size:12px}
@media (min-width:760px){
  .shop-history{top:100px;right:84px;height:36px;padding:0 14px;font-size:13px}
}

/* ---- Profile Settings（candy 版式） ---- */
.ps-wrap{max-width:640px;margin:0 auto;padding:10px 18px 40px}
.ps-title{text-align:center;font-size:30px;letter-spacing:-.03em;margin:16px 0 26px}
.ps-card{background:#1d1218;border:1px solid var(--hairline);border-radius:16px;padding:22px;margin-bottom:18px}
.ps-account{display:flex;align-items:center;gap:22px}
.ps-avatar{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:34px;font-weight:800;color:#fff;background:linear-gradient(145deg,#e75480,#7b4255)}
.ps-fields{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;min-width:0}
.ps-field .k{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:7px}
.ps-field .v{font-size:14px;font-weight:700;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pedit{width:20px;height:20px;border-radius:50%;border:1px solid var(--hairline);background:#28191f;
  color:var(--t2);font-size:10px;cursor:pointer;display:grid;place-items:center;padding:0}
.ps-cap{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:14px}
.ps-dashed{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border-radius:13px;
  border:1.5px dashed #4a3540;background:transparent;color:var(--t1);font-size:14px;font-weight:700;cursor:pointer}
.ps-dashed .plus{width:36px;height:36px;border-radius:50%;background:#2b1e26;display:grid;place-items:center;font-size:17px}
.ps-dashed .chev{margin-left:auto;color:var(--t3);font-size:20px}
.ps-row2{display:flex;align-items:center;gap:18px}
/* .grow 在本项目里是按组件逐个定义的（.topbar .grow / .sess .grow / …），
   设置页这一处一直漏了 —— 于是文字块按内容宽度收缩，右边的按钮就紧跟着
   文字排，文案多长按钮飘到哪，几张卡片的按钮右边缘对不齐。
   补上这条，所有尾部控件才会被推到卡片右内边缘。 */
.ps-row2 > .grow{flex:1;min-width:0}
/* 尾部控件一律不参与伸缩，否则长文案会把它们压扁 */
.ps-row2 > .btn,.ps-row2 > .ps-switch,.ps-row2 > .ps-link{flex:none}
.ps-row2 h3{margin:0;font-size:15.5px}
.ps-row2 p{margin:6px 0 0;font-size:12.5px;color:var(--t2);line-height:1.6}
.ps-row2 .btn{flex:none;height:40px;padding:0 20px}
.ps-plan{background:linear-gradient(160deg,#2c1b23,#1d1218)}
@media (max-width:759px){.ps-fields{grid-template-columns:1fr 1fr;gap:14px}.ps-account{flex-direction:column;text-align:left}.ps-avatar{width:84px;height:84px}}

/* ---- Profile Settings：开关 / 绑卡 ---- */
.ps-switch{width:46px;height:26px;border-radius:999px;border:0;background:#3a2b33;position:relative;
  cursor:pointer;flex:none;transition:background .15s}
.ps-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:left .15s}
.ps-switch.on{background:var(--gradient-brand)}
.ps-switch.on::after{left:23px}
.ps-link{border:0;background:transparent;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:underline;color:var(--t2);flex:none}
.ps-link.danger:hover{color:#f87171}
.pm-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--hairline)}
/* 已绑卡行：卡号块伸缩，右边 Set default / Remove 贴右 */
.pm-item > .grow{flex:1;min-width:0}
.pm-item > .ps-link,.pm-item > .pm-def,.pm-item > .pm-brand{flex:none}
.pm-brand{width:46px;height:30px;border-radius:6px;background:#fff;color:#1a1f71;font-size:10px;
  font-weight:900;display:grid;place-items:center;flex:none;letter-spacing:.5px}
.pm-item .nm{font-size:14px;font-weight:700}
.pm-item .exp{font-size:12px;color:var(--t3);margin-top:2px}
.pm-def{color:#f0648c;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px;flex:none}
.pm-item .ps-link{font-size:12px}
.pm-backup{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--hairline)}
/* 备用卡那一行同理：它不是 .ps-row2，得单独补，否则 Add 按钮会比上面两个
   按钮更靠左，三个按钮呈阶梯状 */
.pm-backup > .grow{flex:1;min-width:0}
.pm-backup > .btn,.pm-backup > .pm-plus{flex:none}
.pm-backup .btn{height:40px;padding:0 20px}
.pm-plus{width:46px;height:30px;border-radius:6px;border:1.5px dashed #4a3540;display:grid;
  place-items:center;color:var(--t3);flex:none}
.pm-backup b{font-size:13.5px}
.pm-backup p{margin:3px 0 0;font-size:12px;color:var(--t3)}
.pm-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:16px;
  border-top:1px solid var(--hairline);font-size:12.5px;color:var(--t2)}
.pm-foot b{color:var(--t1)}
.pm-foot .ps-link{padding:0}

/* ---- Home FAQ ---- */
.faq-wrap{max-width:880px;margin:40px auto 30px;padding:0 var(--lg)}
.faq-title{text-align:center;font-size:26px;letter-spacing:-.02em;margin:0 0 22px}
.faq-title span{color:#f0648c}
.faq-item{border:1px solid var(--hairline);border-radius:14px;background:#1d1218;margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:18px 20px;border:0;background:transparent;color:var(--t1);font-size:15px;font-weight:700;
  cursor:pointer;text-align:left}
.faq-q .chev{color:var(--t3);transition:transform .18s;flex:none}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 18px;font-size:13.5px;line-height:1.7;color:var(--t2)}
.faq-item.open .faq-a{display:block}
@media (min-width:760px){.faq-wrap{margin:56px auto 40px}.faq-title{font-size:30px}}

/* ---- Coin History 弹窗：桌面居中 modal，H5 顶栏以下全屏 ---- */
/* 2026-09-04 用户报"下滑不到底"：底部最后几条永远看不全。
   根因不是滚动容器 —— 是 z-index。这个弹窗原来是 45，而底部 dock 是 50，
   于是 dock 整条（64px + 安全区）浮在弹窗上面，把列表末尾盖住了；
   #histBody 自己那 24px 内边距远不够高，滚到底也还压着一条半。
   全站其它浮层（sheet 70 / mdrawer 120 / coinWall 170 / paywall 220）都在 dock 之上，
   只有这个漏了。抬到 130 跟桌面端对齐，顺带把底部安全区留出来（iPhone 底部横条）。 */
#histModal{display:none;position:fixed;left:0;right:0;bottom:0;top:calc(var(--sat, 0px) + 54px);
  z-index:130;background:#000a}
#histModal.on{display:block}
.hm-panel{position:absolute;inset:0;background:#140d12;display:flex;flex-direction:column}
.hm-head{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--hairline)}
.hm-head b{font-size:17px}
.hm-body{flex:1;overflow-y:auto;min-height:0;padding:4px 20px calc(var(--sab) + 24px);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hm-body .led{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--hairline)}
.hm-body .led:last-child{border-bottom:0}
@media (min-width:760px){
  #histModal{top:0}
  .hm-body{padding-bottom:24px}          /* 桌面没有 dock 也没有安全区 */
  .hm-panel{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:560px;
    max-height:78vh;border-radius:18px;border:1px solid var(--hairline);box-shadow:0 30px 80px #000c}
}

/* ---- 消息元信息行 / 编辑删除 ---- */
.mmeta{display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--t3);
  margin:-2px 2px 8px;position:relative}
.mmeta.her{align-self:flex-start;margin-left:42px}
.mmeta.me{align-self:flex-end}
.mm-btn{border:0;background:transparent;color:var(--t3);cursor:pointer;padding:2px 3px;
  font-size:12px;line-height:1;display:grid;place-items:center;border-radius:6px}
.mm-btn:hover{color:var(--t1);background:#ffffff14}
.mm-btn.on{color:#f0648c}
.mm-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-pop{position:absolute;bottom:20px;right:0;z-index:20;display:flex;flex-direction:column;
  min-width:150px;padding:6px;border-radius:12px;background:#241820;border:1px solid var(--hairline);
  box-shadow:0 14px 40px #000a}
.mm-pop button{border:0;background:transparent;color:var(--t1);font-size:13px;font-weight:600;
  text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center}
.mm-pop button:hover{background:#332438}
.mm-pop button.danger{color:#f87171}
/* 删除确认弹窗（candy 风格） */
/* 通话中离开的确认框与删除确认框共用整套外观 —— 同一个产品里两个
   确认框长得不一样是没有理由的。z-index 比它高一档：通话浮层
   （callbar）盖在聊天上，确认框必须再盖住它。 */
#delModal,#callLeaveModal{display:none;position:fixed;inset:0;z-index:140;background:#000a}
#delModal.on{display:grid;place-items:center}
#callLeaveModal{z-index:160}
#callLeaveModal.on{display:grid;place-items:center}
.del-card{width:min(360px,88vw);background:#1d1218;border:1px solid var(--hairline);
  border-radius:18px;padding:26px 24px;text-align:center;position:relative}
.del-card h3{margin:0 0 10px;font-size:20px}
.del-card p{margin:0 0 20px;font-size:13px;color:var(--t2);line-height:1.6}
.del-card .row{display:flex;gap:12px}
/* 输入型确认弹窗（取代 prompt()）。默认 hidden，askConfirm 传了 input 才显示。 */
.cfm-input{width:100%;box-sizing:border-box;height:44px;margin:0 0 18px;padding:0 14px;
  border-radius:12px;background:#140c10;box-shadow:inset 0 0 0 1px var(--hairline);
  color:var(--t1);font-size:15px}
.cfm-input:focus{box-shadow:inset 0 0 0 1.5px #f0648c}
.cfm-input[hidden]{display:none}
/* 确认弹窗的两个按钮必须长得完全一样，只有底色不同。
   2026-08-28：用户报"Discard 比 Cancel 大、还溢出"。量下来字号其实相同 ——
   是 .btn.brand 的深色文字（#3a1220）在浅粉底上产生的视觉膨胀，
   再加上按钮外那圈 shadow-brand 辉光把边缘糊掉，看着就像撑破了。
   显式钉死字号/字重/行高，并统一成白字，两个按钮才真的对等。 */
.del-card .row .btn{
  flex:1;height:42px;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:0;
  color:#fff;                       /* 覆盖 .btn.brand 的深色文字 */
  padding:0 12px;                   /* 窄屏也不会把文字挤出去 */
}
/* 主按钮不再带辉光：辉光让边界看不清，正是"溢出"错觉的另一半来源。
   保留渐变底色，层级照样分得出来。 */
.del-card .row .btn.brand,
.del-card .row .btn.danger-btn{box-shadow:none}
/* askConfirm({danger:true}) 一直在 toggle 这个类，但 CSS 里从来没有它 ——
   也就是说"删除/丢弃"这类按钮和普通确认长得一模一样，用户看不出轻重。 */
.btn.danger-btn{background:linear-gradient(90deg,#e0475f,#f2647a);
  box-shadow:0 6px 18px #e0475f4d;color:#fff}
.del-x{position:absolute;top:12px;right:12px}
/* 编辑条 */
#composer{position:relative}
#editBar{display:none;position:absolute;bottom:calc(100% + 2px);left:16px;right:16px;z-index:12;
  align-items:center;gap:10px;padding:12px 14px;
  border-radius:13px;background:#241838;border:1px solid #4c3a6e;box-shadow:0 -8px 30px #0008}
#editBar.on{display:flex}
#editBar .cap{font-size:12px;font-weight:700;color:#b39ddb;display:flex;gap:6px;align-items:center;flex:none}
#editBar .txt{flex:1;min-width:0;font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 首页卡片：年龄 / 四列限宽 / H5 去重复余额角标 ---- */
.ch .nm .age{font-weight:800;color:#ffffffb0;margin-left:6px}
@media (min-width:760px){
  #v-home .wall{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1380px;margin:0 auto}
}
@media (max-width:759px){
  #coinChip{display:none!important}
  .ch .nm{font-size:18px}
}
@media (min-width:760px){
  /* 首页：去掉搜索/建角色顶栏 与 Trending 大横幅 */
  #v-home .topbar{display:none!important}
  .home-hero{display:none!important}
}


/* ---- Create my AI 向导 ---- */
/* ---- Create my AI 弹窗 ---- */
#v-create{display:none;position:fixed;inset:0;z-index:120;background:rgba(8,5,7,.66);backdrop-filter:blur(3px)}
#v-create.on{display:flex;align-items:center;justify-content:center;padding:16px}
.cw-modal{width:460px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;
  background:#1f1418;border:1px solid var(--hairline);border-radius:22px;box-shadow:0 30px 80px #000a;overflow:hidden}
.cw-hd{display:flex;align-items:center;gap:9px;padding:18px 20px 12px;flex:none}
.cw-hd .cw-title{flex:1;margin:0;font-size:19px;font-weight:800;color:#fff;text-align:left;letter-spacing:-.01em}
.cw-ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;border:0;
  background:rgba(255,255,255,.06);color:#c9b8bf;cursor:pointer}
.cw-ic:hover{background:rgba(255,255,255,.12);color:#fff}
.cw-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cw-prog{display:flex;gap:6px;padding:0 20px 4px;flex:none}
.cw-prog span{height:4px;border-radius:99px;flex:1;background:rgba(255,255,255,.1)}
.cw-prog span.on{background:linear-gradient(90deg,#f79bb6,#e85c85)}
.cw-sec{font-size:13px;font-weight:700;color:#c9b8bf;letter-spacing:.2px;padding:14px 22px 0;flex:none}
.cw-sec2{font-size:13px;font-weight:700;color:#c9b8bf;letter-spacing:.2px;margin:16px 2px 10px}
.cw-body{flex:1;min-height:0;overflow-y:auto;padding:10px 20px 6px}
.cw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cw-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cw-opt{position:relative;border:0;border-radius:14px;padding:0;cursor:pointer;text-align:center;
  background:linear-gradient(160deg,#3a2531,#231821);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;transition:box-shadow .15s}
.cw-opt:hover{box-shadow:inset 0 0 0 1px #f79bb6aa}
.cw-opt.on{box-shadow:inset 0 0 0 2px #e85c85}
.cw-opt.on::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;z-index:2;
  background:#e85c85 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 6'/></svg>") center/13px no-repeat}
.cw-opt .oi{width:100%;aspect-ratio:3/4;object-fit:cover;
  background:linear-gradient(150deg,#4b2a36,#2e1d25);display:grid;place-items:center;font-size:22px;color:#f0a9b8}
.cw-opt .ol{position:relative;font-size:13.5px;font-weight:700;padding:8px 6px;color:#fff;
  /* 多语言：Sjuksköterskeuniform / Krankenschwester-Uniform 这类长复合词在 109px 的格子里
     放不下，不换行就被 overflow:hidden 切掉半截。break-word 只在整词放不下时才断。 */
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;line-height:1.25}
.cw-opt.photo-opt{display:block;position:relative}
.cw-opt.photo-opt img.oi{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.cw-opt.photo-opt .ol{position:absolute;left:0;right:0;bottom:0;padding:28px 8px 9px;
  background:linear-gradient(transparent,rgba(0,0,0,.78))}
.cw-opt.chip-opt{padding:16px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px}
.cw-opt.chip-opt .ol{padding:0}
.cw-opt .oe{font-size:20px;line-height:1}
.cw-showbar{padding:6px 20px 0;flex:none}
.cw-showbar:empty{display:none}
.cw-showall{display:block;width:100%;margin:0;height:46px;border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);background:transparent;color:#f0a9b8;font-size:13.5px;font-weight:700;cursor:pointer}
.cw-showall:hover{background:#2a1a21}
.cw-name{margin:0}
.cw-slider{margin:6px 0 0;padding:22px 20px;border-radius:16px;background:#241820;border:1px solid var(--hairline)}
.cw-slider-pill{width:max-content;margin:0 auto 20px;padding:8px 16px;border-radius:12px;
  background:#2a1a21;border:1px solid rgba(255,255,255,.08);color:#fff;font-size:15px;font-weight:800}
.cw-slider-row{display:flex;align-items:center;gap:14px}
.cw-slider-end{font-size:13px;font-weight:700;color:var(--t2);flex:none}
.cw-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:linear-gradient(90deg,#f79bb6 0,#e85c85 var(--pct,0%),rgba(255,255,255,.12) var(--pct,0%));outline:none}
.cw-slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px}
.cw-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;cursor:pointer;margin-top:-7px;box-shadow:0 2px 6px #0006}
.cw-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.cw-name-in{position:relative}
.cw-name input{width:100%;height:52px;padding:0 52px 0 16px;border-radius:14px;background:#241820;
  border:1px solid var(--hairline);color:var(--t1);font-size:16px;outline:none}
.cw-roll{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:9px;
  background:#2e2030;color:#f0648c;cursor:pointer;display:grid;place-items:center}
.cw-roll:hover{background:#3a2740}
.cw-roll svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cw-name .hint{font-size:12px;color:var(--t3);text-align:right;margin-top:6px}
/* 选音色。一行一个，左边一个播放键、右边名字 —— 音色是听出来的，
   所以播放键必须比"选中"更好点，而不是藏在选中之后。 */
.cw-voices{display:flex;flex-direction:column;gap:8px}
.cw-voice{display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 14px;border-radius:14px;text-align:left;
  background:#1c1218;box-shadow:inset 0 0 0 1px var(--hairline);
  transition:box-shadow .12s ease,background .12s ease}
.cw-voice.on{background:#2e1b24;box-shadow:inset 0 0 0 1.5px #f0648c}
.cw-voice-play{flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#3a2028;cursor:pointer}
.cw-voice-play:hover{background:#4d2a35}
.cw-voice-play:focus-visible{outline:2px solid #f0648c;outline-offset:2px}
.cw-voice-play svg{width:14px;height:14px;fill:#f0a9b8;stroke:none;
  margin-left:2px}                      /* 三角形视觉重心偏左，补 2px 才居中 */
/* 只有名字。音色靠耳朵选，不靠读描述 —— 副标题那一行已按产品决定去掉。 */
.cw-voice-txt{min-width:0}
.cw-voice-txt b{font-size:15px;font-weight:600}

.cw-avatar{display:flex;flex-direction:column;align-items:center;gap:16px}
.cw-avatar .frame{width:220px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#4b2a36,#2e1d25);display:grid;place-items:center;color:var(--t3);font-size:13px}
/* 头像框直接复用聊天页那套骨架屏（.mp-frame），只改宽度和圆角 —— 圆角要跟
   向导其余控件一致，聊天气泡的 10px 放在这里会显得生硬。 */
.cw-avatar .frame.mp-frame{width:220px;border-radius:18px}
.cw-avatar .frame img{width:100%;height:100%;object-fit:cover}
.cw-nav{display:flex;gap:12px;padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.06);flex:none}
.cw-btn{height:52px;border-radius:15px;border:0;font-size:15px;font-weight:700;cursor:pointer}
.cw-btn.next{flex:1;color:#fff;background:linear-gradient(135deg,#f79bb6,#e85c85);box-shadow:0 8px 22px rgba(232,92,133,.35)}
.cw-btn.next:disabled{opacity:.6;cursor:default}
.cw-btn.back{padding:0 22px;background:transparent;color:#c9b8bf;border:1px solid rgba(255,255,255,.12)}
.cw-btn.back:hover{background:rgba(255,255,255,.05)}
@media (max-width:759px){
  #v-create.on{padding:0}
  .cw-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .cw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 侧栏折叠（rail）+ 桌面汉堡 ---- */
.gt-burger-d{display:none}
@media (min-width:760px){
  .gt-burger-d{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;
    background:transparent;color:var(--t1);cursor:pointer;margin-right:2px}
  .gt-burger-d svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  body.nav-rail #app{margin-left:74px}
  body.nav-rail #sidebar{width:74px;padding:18px 10px}
  body.nav-rail .side-nav button{justify-content:center;padding:0;gap:0}
  body.nav-rail .side-nav button{font-size:0}                  /* 文字是裸文本节点，用 font-size 收起 */
  body.nav-rail .side-nav button > *:not(svg){display:none}
  body.nav-rail #chat{left:74px}
  body.nav-rail #chat.on{left:74px}
  #sidebar,#app,#chat{transition:margin-left .18s,width .18s,left .18s}
}
/* ---- My AI 页 ---- */
#v-myai .myai-wrap{padding:26px 30px 40px;max-width:1380px;margin:0 auto}
.myai-title{font-size:30px;letter-spacing:-.02em;margin:6px 0 20px}
.myai-title span{color:#f0648c}
.myai-tabs{display:flex;gap:10px;margin-bottom:22px}
.myai-tabs button{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--hairline);
  background:transparent;color:var(--t2);font-size:13.5px;font-weight:700;cursor:pointer}
.myai-tabs button.on{border-color:#e75480;color:#fff;background:#2a1a21}
.myai-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.myai-new{aspect-ratio:2/3;border-radius:18px;background:var(--gradient-brand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  cursor:pointer;color:#fff;font-size:18px;font-weight:800}
.myai-new .plus{width:56px;height:56px;border-radius:50%;background:#ffffff2e;display:grid;place-items:center;font-size:28px}
.myai-card{position:relative;aspect-ratio:2/3;border-radius:18px;overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,#4b2a36,#2e1d25)}
.myai-card img{width:100%;height:100%;object-fit:cover;display:block}
.myai-card .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;
  background:linear-gradient(transparent,#000000e0);color:#fff}
.myai-card .cap .nm{font-size:18px;font-weight:800}
.myai-card .cap .ag{font-size:12px;color:#ffffffb0;margin-top:1px}
.myai-card .cap .ds{font-size:12px;color:#ffffffcc;margin-top:6px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.myai-empty{grid-column:1/-1;color:var(--t3);font-size:13px;padding:20px}
@media (max-width:759px){.myai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- 高清图工作台 ---- */
#v-studio{padding:28px 30px 48px}.studio-wrap{max-width:1180px;margin:0 auto}.studio-head{margin-bottom:22px}.studio-head h1{margin:0;font-size:30px;letter-spacing:-.03em}.studio-head p{margin:8px 0 0;color:var(--t2);line-height:1.55}.studio-grid{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:20px}.studio-card{background:#21161b;border:1px solid var(--hairline);border-radius:18px;padding:18px}.studio-card h2{font-size:15px;margin:0 0 14px}.studio-label{display:block;margin:14px 0 7px;font-size:12px;font-weight:700;color:#cdbbc1}.studio-select,.studio-text{box-sizing:border-box;width:100%;border:1px solid #503640;border-radius:12px;background:#160e12;color:var(--t1);font:inherit;outline:none}.studio-select{height:46px;padding:0 12px}.studio-text{min-height:130px;padding:12px;resize:vertical;line-height:1.5}.studio-select:focus,.studio-text:focus{border-color:#f0648c;box-shadow:0 0 0 2px #f0648c33}.studio-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.studio-mode{min-height:48px;border:1px solid #503640;border-radius:12px;background:#181014;color:var(--t2);font-weight:700;cursor:pointer}.studio-mode.on{background:#3b1f2a;border-color:#f0648c;color:#fff}.studio-upload{display:flex;align-items:center;justify-content:center;min-height:112px;border:1px dashed #70505c;border-radius:12px;background:#180f13;color:#d8c3ca;cursor:pointer;text-align:center;padding:10px;box-sizing:border-box}.studio-upload input{display:none}.studio-ref-preview{width:100%;max-height:190px;object-fit:contain;border-radius:10px;margin-top:10px;background:#160e12}.studio-submit{width:100%;min-height:50px;margin-top:16px;border:0;border-radius:13px;background:var(--gradient-brand);color:#fff;font-size:15px;font-weight:800;cursor:pointer}.studio-submit:disabled{opacity:.58;cursor:wait}.studio-note{margin:10px 0 0;font-size:12px;color:var(--t3);line-height:1.5}.studio-progress{min-height:20px;margin-top:12px;color:#f3b3c4;font-size:13px}.studio-result{min-height:280px;display:grid;place-items:center;border:1px dashed #4a3540;border-radius:14px;background:#180f13;color:var(--t3);overflow:hidden}.studio-result img{display:block;width:100%;max-height:680px;object-fit:contain;background:#10090c}.studio-library{grid-column:1/-1}.studio-library-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.studio-item{position:relative;border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:#160e12}.studio-item img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.studio-item button{width:100%;min-height:40px;border:0;background:#2c1b23;color:#f5d8df;font-size:12px;font-weight:700;cursor:pointer}.studio-item.anchor{border-color:#f0648c;box-shadow:0 0 0 1px #f0648c55}.studio-item.anchor button{background:#7e314a;color:#fff}.studio-item button:focus-visible,.studio-mode:focus-visible,.studio-submit:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (max-width:759px){#v-studio{padding:20px 16px 36px}.studio-grid{grid-template-columns:1fr}.studio-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- 手机端首页 / My AI 版式
   2026-09-04 用户定，**只动手机端**：桌面端这三处一律保持原样。

   ① 首页去掉 "Home" 标题与副标题。手机端 topbar 里搜索框 / 金币 chip / Create Character
      本来就都是隐藏的（.top-search、.home-cta、#coinChip），标题一去掉整条就空了 ——
      所以整条隐藏，别留一道空白带。DOM 节点留着：renderWall() 里有
      `$('#v-home .title').textContent = …`，删节点会 null 报错。
      桌面端 `#v-home .topbar .grow` 早就是 display:none，本来就看不见，不受影响。
   ② 分区只留 Girls。Anime / Guys 两个分区一张公共角色卡都没有（149 张全是 girls），
      入口留着只会点进空页。**只在手机端隐藏**：桌面端那两个按钮、后端 segment 字段、
      后台配置全部原样不动 —— 以后真上了男性/动漫角色，删掉这两行就回来了。
      只剩一个按钮时 flex:1 会把它拉成整行宽，所以改成 flex:none 的胶囊。
   ③ 两组标签吸顶，贴在固定顶栏 #gtop 下面（它高 var(--sat) + 54px）。
      .view 是滚动容器且不占顶部（#gtop 是 fixed，不在流里），所以 top 直接写顶栏高度。
      吸顶条**必须自带不透明背景**：底下是滚动的卡片，透出来就糊成一片。
      配色对齐 #gtop 的 #150d11 —— 读起来像顶栏高了一截，而不是浮着一块异色板。
      .myai-tabs 在 .myai-wrap（左右各 30px 内边距）里面，吸顶后左右会漏出滚动的卡片，
      所以用负边距撑满再把内边距加回来。.segtabs 是 .view 直接子元素，本来就满宽。 */
@media (max-width:759px){
  #v-home .topbar{display:none}
  /* 会员页那条 "Membership / Plans & subscription" 同理：手机端这条 topbar 里只有
     这个标题（搜索框/金币/CTA 都是隐藏的），进来第一眼就是套餐卡更直接。
     桌面端另有一条规则把它压成 0 高，本来就看不见，不受影响。 */
  #v-me .topbar{display:none}
  .myai-title{display:none}
  /* 2026-09-07 用户定：只剩一个 Girls 也不要，整条分区栏隐藏。
     它原来兼任"给固定顶栏让位"（margin-top = 顶栏高），现在这份让位改由 .wall 出
     —— 它成了 #v-home 第一个可见子元素（.topbar / hero / section-head 都是隐藏的）。
     DOM、JS（SEG 默认 girls）、桌面端三个按钮全不动；以后要回来把这两行删掉即可。 */
  #v-home .segtabs{display:none}
  #v-home .wall{padding-top:calc(var(--sat, 0px) + 54px + 14px)}

  /* 吸顶条贴在固定顶栏 #gtop 下面。这里有个坑：.view 原本用 padding-top 给顶栏让位，
     而 sticky 的 top 从滚动容器的哪条边算起（padding 边还是内容边）各引擎口径不一致 ——
     Chromium 实测按内容边，于是 54(容器 padding) + 54(top) 叠成 108，吸顶条卡在半空。
     不赌引擎：**这两页把 .view 的 padding-top 归零**，顶栏那段空间改由内部元素自己出。
     滚动容器没有内边距了，两种口径就都指向同一条边，Safari/Chrome 结果一致。 */
  #v-home, #v-myai{padding-top:0}
  .segtabs, .myai-tabs{
    position:sticky;top:calc(var(--sat, 0px) + 54px);z-index:15;
    /* 边界跟充值页顶栏一个处理：上半段实色托住内容，下半段渐隐到透明，
       不用硬分隔线（2026-09-04 用户定，参照 .topbar 原本的写法）。
       之前试过"整块 93% 半透明"—— 那是错的：整块均匀半透会把底下的粉色
       Create new AI 卡透出一个矩形轮廓，像渲染坏了。渐隐不会：内容坐在
       实色那段上，只有下缘的淡出区能看见卡片划过，那正是想要的效果。
       所以实色段要吃满内容高度，淡出留给多出来的那段 padding。 */
    background:linear-gradient(180deg,#150d11 0%,#150d11 62%,transparent 100%);
  }
  /* 顶栏高度由它自己的 margin 出（.topbar 已隐藏，它是第一个可见子元素） */
  .segtabs{margin:calc(var(--sat, 0px) + 54px) 0 0;padding:10px var(--lg) 20px}
  /* 顶栏高度由 wrap 的 padding 出；标题没了，原来那 26px 留白一并并进去 */
  #v-myai .myai-wrap{padding-top:calc(var(--sat, 0px) + 54px)}
  /* 负边距撑满 wrap 的 30px 内边距，再把内边距加回来 —— 否则吸顶时左右两条会透出卡片 */
  .myai-tabs{margin:0 -30px 6px;padding:10px 30px 20px}

  #dock{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------------------------------- 底部 tab 选中态：实心填充
   2026-09-04 用户定（参照竞品）：以前选中只是把描边图标从灰变白，两个状态离得太近，
   扫一眼看不出在哪一页。改成【选中 = 实心 + 品牌色】，未选中仍是描边灰。
   图标路径本来是按描边画的，同时给 fill 和 stroke 才能填实（只给 fill 会漏出细缝）。
   金币图标是 <use> 引的独立 symbol，自带配色，别被这条规则染成粉的。 */
#dock button.on{color:#f0648c}
#dock button.on .ic svg:not(.coin-icon){fill:currentColor;stroke:currentColor}

/* ---------------------------------------------------------------- 充值页：去掉余额卡
   2026-09-04 用户定：Buy Coins 页里那块「Coin Balance + 大数字 + 计费说明」去掉。
   顶栏本来就一直挂着 Coins 余额，同一个数字在一屏里出现两次是纯冗余。

   查证过的两件事（跟直觉不同，写下来免得以后有人"修复"它）：
   · 全站只有这一处 class="balance"，就在 #v-shop 里。会员页(#v-me)那些
     `#v-me>.balance` 规则是历史残留，选不到任何东西 —— 不存在误伤会员页的问题。
   · 桌面端【本来就没显示这块】：min-width:760px 那段里有一条裸的 `.balance{display:none}`，
     它一直生效；下面 `#v-shop .balance{max-width:980px…}` 只设了尺寸，没把它显示回来。
     所以这次改的实际只有手机端。仍然包一层 max-width，是为了万一以后桌面端把它放出来，
     这条不会跟着把它按死。

   用 display:none 不删 DOM：#meBal 是余额刷新的目标节点之一，删了 app.js 会报错。 */
@media (max-width:759.98px){
  #v-shop > .balance{display:none}
}

/* ---------------------------------------------------------------- 会话列表：去掉背景光斑
   2026-09-04 用户报：Chats 列表顶部有一块暖色光斑。
   来源是全局那层 body::before（radial-gradient 辉光，首页的底味）—— 会话列表这一页
   本身没有底色，辉光就从卡片和头像后面透出来，看着像脏了一块。
   桌面端早就给这一页铺了 #191013 底色，所以只有手机端能看见。
   这里把同一个底色补给手机端，只关这一页：首页/详情那些页的辉光是刻意的，不动。 */
#v-chats{background:var(--base)}

/* ---------------------------------------------------------------- 底部 tab 文字
   2026-09-04 上午用户定去掉文字、只留图标；同日下午改口：文字要回来（Home / My AI /
   Chat / Coins）。这里不写任何覆盖规则，沿用文件开头 #dock 的基础样式（图标 22px +
   文字一行）。留这段注释是为了下次再有人想"只留图标"时知道来龙去脉：
   · 文字节点包在 .dk 里、按钮带 aria-label —— 这两样是上午改的时候加的，无害，留着。
   · 要再藏文字只需一条 `#dock .dk{display:none}`，别再动 DOM。 */

/* ---------------------------------------------------------------- 手机端：虚拟人详情 / 资产
   桌面端这两块是聊天页右侧第三栏里的两个 tab，共用一份 DOM（.chat-profile）。
   手机端用户要的是【两个独立页面】：点头像进详情、点顶部相册图标进资产 ——
   所以这里把同一份 DOM 当成一个全屏页推上来，由 JS 指定显示哪一块，
   顶部那条 Profile/Gallery 切换在手机端不出现（下面 .ptabs 隐藏）。
   不复制 DOM 的原因：画廊加载、轮播、收藏全是按 id 绑的，复制一份就得维护两套。
   层级要压过 #chat（z-index 60）。 */
@media (max-width:759px){
  .chat-profile{
    display:block;position:fixed;inset:0;z-index:66;
    background:var(--base);overflow-y:auto;
    padding:0 var(--lg) calc(var(--sab) + 24px);
    transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
    visibility:hidden;
  }
  #chat.cp-open .chat-profile{transform:none;visibility:visible}
  /* 手机端是两个独立页面，不要页内 tab 切换 */
  .chat-profile .ptabs{display:none}
  /* 每页自带返回栏（桌面端下面那条 min-width 规则里隐藏） */
  .cp-mhead{
    position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;
    margin:0 calc(var(--lg) * -1);padding:calc(var(--sat, 0px) + 6px) var(--lg) 10px;
    background:linear-gradient(180deg,var(--base) 0%,var(--base) 66%,transparent 100%);
  }
  /* 标题居中。直接 text-align:center 会被左边的返回键挤偏，所以给右侧补一个
     和返回键等宽的空占位（.iconbtn 是 36px），左右对称后标题才真在正中。
     用占位而不是绝对定位：绝对定位要自己处理顶部安全区那段不对称的 padding。 */
  .cp-mtitle{flex:1;min-width:0;text-align:center;font-size:16px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cp-mhead::after{content:'';width:36px;flex:none}
  /* Images/Videos 那条本来 sticky 在 top:70（桌面第三栏的表头高度），
     手机端要贴在上面那条返回栏下面。两列网格和 .gtabs 本身是基础规则，
     手机端本来就生效，不用再写一遍。 */
  #ptab-gallery .gtabs{top:calc(var(--sat, 0px) + 44px);background:var(--base)}

  /* ---- 充值页顶部：标题居中（版式参照用户给的竞品图，组件与文案用我们自己的） ---- */
  #v-shop .topbar{display:block;text-align:center;padding-top:10px}
  /* Coin History 那颗 chip 是绝对定位在右上角的（top 66 / right 14）。标题居中后
     两者一个居中一个靠右，实测不重叠，所以位置不动 —— 用例里按三个宽度钉住了。 */
}
@media (min-width:760px){
  .cp-mhead{display:none}
}

/* 已经是聊天背景的那张：按钮用品牌色实心，文字显示 Now。
   背景只有一张，所以这个高亮在同一批图里最多出现一次。 */
.gal-act.on{background:var(--gradient-brand);color:#fff}
.gal-act.on:hover{background:var(--gradient-brand);filter:brightness(1.06)}

/* ---------------------------------------------------------------- 弹窗尺寸兜底
   2026-09-04：memModal(440) 和 coinWall(400) 在 390 宽的手机上整块溢出屏幕，
   关闭按钮被切掉一半。根因不是宽度写死 —— .pw-card 本来就带 max-width:100%，
   而是这两个容器用的是 `display:grid; place-items:center`：栅格轨道按内容
   撑到 440，百分比 max-width 于是以 440 为参照，等于没限制。同样是 .pw-card 的
   #paywall 用 flex 居中就正常。上面已把这两处统一成 flex。
   下面这条是【兜底】：不管以后谁再加弹窗、用哪种居中方式，卡片都不许超出视口，
   内容超高就自己滚，别把按钮顶到屏幕外。 */
.pw-card, .del-card, .mem-card{
  max-width:min(100%, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow-y:auto;
}

/* ---------------------------------------------------------------- 聊天页顶部抽屉
   2026-09-04：8 月下线的 ⋯ 菜单以抽屉形式回来，只留四项。
   名字本身就是触发器（点名字下拉），旁边一个小箭头提示可点。 */
.head-name{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-width:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:0}

/* 把手：贴在顶栏下沿的小凸起，常驻可见 —— 这是抽屉的主入口。
   原来是名字旁一个小箭头，太不起眼；把手是个明确的"可以拉下来"的信号。
   它挂在面板【下沿】，所以收起时贴着顶栏，展开时跟着落到面板底下。 */
.cm-grip{pointer-events:auto;display:grid;place-items:center;
  width:64px;height:17px;margin:0 auto;padding:0;border:0;cursor:pointer;
  background:#1b1218;border-radius:0 0 11px 11px;box-shadow:0 3px 8px #0007}
.cm-grip span{display:block;width:26px;height:3px;border-radius:2px;background:#6b555f;
  transition:background .18s}
.cm-grip:active span{background:#9b8189}
#chatMenu.on .cm-grip span{background:#e75480}

/* 抽屉本体：从顶栏下面压下来，盖住聊天内容。点空白处关闭（JS 里绑在这层）。 */
/* 遮罩铺满整个聊天页，但面板要从【顶栏下面】落下来 —— inset:0 直接铺的话
   面板会盖住返回键和头像（踩过）。顶栏 z-index 抬到 9 压在遮罩之上保持可点，
   面板则靠 --cm-top 让位，这个值在打开时按顶栏实际高度量出来写进去
   （顶栏高度含刘海安全区，写死必然在某些机型上错位）。 */
/* 这一层【常驻】而不是 hidden 切换 —— 把手要一直看得见。所以默认整层不吃点击
   （pointer-events:none），只有把手自己吃；打开时整层才变成可点的遮罩。 */
#chatMenu{position:absolute;top:0;bottom:0;
  left:var(--cm-left, 0px);right:var(--cm-right, 0px);
  z-index:8;background:transparent;
  padding-top:var(--cm-top, 64px);pointer-events:none;transition:background .2s}
#chatMenu.on{background:#08080c99;pointer-events:auto}
.cm-panel{background:#1b1218;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  border-radius:0 0 18px 18px;box-shadow:0 18px 40px #0009;
  max-height:0;padding:0 12px;overflow:hidden;border-bottom:0;
  transition:max-height .24s cubic-bezier(.32,.72,0,1),padding .24s,border-bottom-width .24s}
#chatMenu.on .cm-panel{max-height:220px;padding:12px;
  border-bottom:1px solid var(--hairline)}
.cm-item{display:flex;align-items:center;gap:10px;min-width:0;
  padding:14px 12px;border:1px solid var(--hairline);border-radius:14px;
  background:#241820;color:var(--t1);font-size:13.5px;font-weight:700;
  cursor:pointer;text-align:left}
.cm-item svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cm-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-item:active{transform:scale(.98)}
.cm-item.danger{color:#ff8a9e;border-color:#5a2630}
.cm-item.on{border-color:#e75480;color:#ffd7e2}

/* ---------------------------------------------------------------- 改名弹窗 */
#renameModal{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;background:#08080cbf}
#renameModal.on{display:flex}
#renameInput{width:100%;height:44px;margin:0 0 18px;padding:0 14px;border-radius:12px;
  border:1px solid var(--hairline);background:#150e13;color:var(--t1);font-size:14px}

/* ---------------------------------------------------------------- Memory：手机端从下方弹出
   桌面端保持居中卡片不动；手机端改成底部抽屉（贴底、上圆角、内容长了自己滚），
   跟系统级的分享面板一个手感，拇指够得着。 */
@media (max-width:759px){
  #memModal{align-items:flex-end;justify-content:stretch;padding:0}
  #memModal .mem-card{
    width:100%;max-width:100%;
    border-radius:22px 22px 0 0;border-bottom:0;
    padding:22px 18px calc(var(--sab) + 18px);
    max-height:86vh;
    animation:memUp .24s cubic-bezier(.32,.72,0,1);
  }
  @keyframes memUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
  #memModal .mem-list{max-height:44vh}
}

/* 记忆条目：读态一行字 + 两个小按钮；编辑态整行换成输入框 */
.mem-item .mem-acts{display:flex;gap:2px;flex:none;margin-left:auto}
.mem-item .mem-acts button{width:28px;height:28px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:#8f7e85;display:grid;place-items:center}
.mem-item .mem-acts button:hover{background:#2e1d25;color:#fff}
.mem-item .mem-acts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mem-item.editing{display:block}
.mem-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mem-edit input{flex:1 1 140px}
.mem-edit input{flex:1;min-width:0;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--hairline);background:#150e13;color:var(--t1);font-size:13px}
/* width:auto 是必须的：上面 .mem-item button 给老版那颗删除图标写死了 26x26 圆形，
   同specificity、在前面 —— 我这条不显式覆盖 width 的话，Save/Cancel 会被压成
   26px 的小圆点，文字裁成"Sav""Canc"（2026-09-04 用户截图）。 */
.mem-edit button{flex:none;width:auto;height:34px;padding:0 12px;border:0;border-radius:9px;
  font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  background:var(--gradient-brand);color:#fff}
.mem-edit button.ghost{background:#2e1d25;color:var(--t2)}

/* ---------------------------------------------------------------- 站内通知
   2026-09-04：图片/视频生成要一两分钟，用户常常切走等着。以前切走后只有一句
   纯文本 toast（"Image ready in your earlier chat"）—— 不说是谁、也点不动，
   等于让用户自己回想刚才在跟谁聊。改成可点的通知卡：头像 + 缩略图 + 一句话，
   点一下直接回到那个虚拟人的聊天。

   层级 120：压过聊天页(60)和顶栏(50/80)，但【低于】各种弹窗(170+)——
   用户正在弹窗里操作时不该被一张卡糊住。
   视觉沿用站里的卡片语言：#1b1218 底、hairline 描边、18px 圆角、品牌粉点缀。 */
#notif{position:fixed;z-index:120;left:0;right:0;top:calc(var(--nt-top, 8px) + 8px);
  display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:0 12px;pointer-events:none}
.nt{pointer-events:auto;display:flex;align-items:center;gap:11px;width:100%;max-width:440px;
  padding:10px 12px;border-radius:18px;cursor:pointer;text-align:left;
  background:#1b1218f2;border:1px solid var(--hairline);
  box-shadow:0 14px 34px #000a;backdrop-filter:blur(10px);
  animation:ntIn .22s cubic-bezier(.32,.72,0,1)}
@keyframes ntIn{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
.nt.out{animation:ntOut .18s ease forwards}
@keyframes ntOut{to{transform:translateY(-10px);opacity:0}}
/* 2026-09-04 用户定：左边那颗头像去掉，文字顶到最左（右边的成品缩略图才有信息量）。
   .nt-av 的样式留着不删 —— 万一以后要加回来，省得重写；现在没有节点会用到它。 */
.nt .nt-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff}
.nt .nt-av img{width:100%;height:100%;object-fit:cover}
.nt .nt-txt{flex:1;min-width:0}
.nt .nt-nm{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt .nt-sub{font-size:12px;color:var(--t3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt .nt-thumb{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;background:#2a1a21}
.nt .nt-thumb img,.nt .nt-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.nt .nt-x{flex:none;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);color:#c9b8bf;display:grid;place-items:center}
.nt .nt-x:hover{background:rgba(255,107,138,.2);color:#ff6b8a}
.nt .nt-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (min-width:760px){
  /* 桌面端靠右上角，别横在正中间挡住内容 */
  #notif{left:auto;right:18px;top:78px;width:380px;padding:0;align-items:flex-end}
}

/* ---------------------------------------------------------------- 未读红点
   底部 Chat 图标右上角、会话列表行右侧。数字用同一个组件，位置各自定。 */
.ubadge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:9999px;background:#e5384f;color:#fff;
  font-size:10.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
/* 图标上的角标要脱离图标本身的居中布局，钉在右上角，并压住图标一角 */
#dock .ic{position:relative}
#dock .ic .ubadge{position:absolute;top:-5px;left:calc(50% + 4px);
  box-shadow:0 0 0 2px var(--base)}
/* 会话行：时间戳在上、红点在下，右对齐 */
.sess .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* ---------------------------------------------------------------- 图片加载中的缺省图
   2026-09-04 用户要求：图还没下来时别露黑框，给个占位图。

   **做在容器的 background 层，不用 JS 逐张监听 onload。** <img> 在画出来之前是透明的，
   背景自然透出来；一旦画出来就把背景盖住 —— 零 JS、零清理，也就不存在"某条路径
   忘了摘占位"的问题。图挂了（404/断网）就一直显示占位，这正是"缺省图"该有的样子。
   图标用 MEDIA_ICONS.image 同一个字形，站内一致。
   注意 data URI 里 # 要写成 %23，否则被当成片段标识符，整条 background 失效。 */
:root{
  --img-skel-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b555f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="3"/><circle cx="8.5" cy="9" r="1.5"/><path d="m4 17 5-5 3.2 3 2.6-2.5L20 18"/></svg>');
}
.ch .art,
.myai-card,
.gal-item,
.nt .nt-thumb,
#gal-image .gal-item,
#gal-video .gal-item{
  background-color:#1b1218;
  background-image:var(--img-skel-glyph);
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(38%, 64px);
}
/* 会话列表那颗小圆头像：容器很小，图标按比例缩，别糊成一团 */
.sess .av{
  background-color:#241820;
  background-image:var(--img-skel-glyph);
  background-repeat:no-repeat;background-position:center;background-size:46%;
}
/* 没有图可加载的（用 phStyle 画的渐变底 + 首字母）不该露占位图 —— 那不是"在加载"，
   是"本来就没有"。它们自带 inline background，这里把图层单独关掉。 */
.ch .art .ph, .sess .av .ph{background-image:none}

/* ---------------------------------------------------------------- 聊天顶栏：两端各管各的
   2026-09-04 用户定。手机端和桌面端的信息架构本来就不同，同一排按钮不该照搬：
   · 手机端：没有右侧资料栏，所以顶栏要有【相册图标】进资产页；抽屉靠顶栏下沿的把手拉开。
   · 桌面端：右边第三栏本来就有 Profile / Gallery 两个 tab，再放个相册图标是重复入口；
     把手那种"下拉"手势在鼠标上也不自然。所以桌面端换成一颗 ⋮，点开同一个抽屉面板。
   两边点开的是同一份 DOM、同一套动作，只是入口不同。 */
#chatMoreBtn{display:none}
/* 2026-09-04 用户定：这颗不要圆形底色，三个点加粗（点半径 1.4 → 2，在 index.html 里）。
   只改这一颗，不动 .headbtn —— 相册键和返回键还要保留底色。
   hover 时给一层浅底，不然鼠标移上去完全没有反馈，不像个按钮。 */
#chatMoreBtn{background:transparent;padding:0;width:34px;justify-content:center}
#chatMoreBtn:hover{background:rgba(255,255,255,.12)}
#chatMoreBtn svg{width:19px;height:19px;fill:currentColor;stroke:none}
@media (min-width:760px){
  #galBtn{display:none}        /* 右侧 Gallery tab 已经是入口，别放两个 */
  .cm-grip{display:none}       /* 桌面端由 ⋮ 负责开合，把手是手机端的手势 */
  #chatMoreBtn{display:inline-flex}
}

/* ---------------------------------------------------------------- 聊天输入区改版
   2026-09-04 整块做成一张圆角卡，让输入框和 Image/Video 看起来是一组。
   同日用户改口径：【顺序不动】—— Image/Video 仍在输入框上方靠左，输入框 +
   电话 + 发送键仍在最底下（跟改版前一样）；中间那行 "Show me the scene:"
   提示文案去掉。所以这里只保留卡片外观和 chip 样式，order 一律沿用基础规则
   （mediaActions 1 / mediaComposer 2 / composerMain 3），不再覆盖。

   注意：媒体面板的开合逻辑（closeMediaComposer、media-open 那套）挂在
   #mediaActions / #composerMain 这些 id 上，所以这里只改样式、不动 DOM。 */
#composer{
  margin:0 var(--lg) calc(var(--sab) + var(--md));
  padding:11px 12px 12px;
  border-radius:20px;
  background:#241820e6;
  box-shadow:0 10px 30px #0007, inset 0 0 0 1px var(--hairline);
  gap:9px;
}
#composerMain{align-items:center}
#mediaActions{min-height:0;gap:8px;flex-wrap:wrap}
/* 输入框在卡片里，不再自己带一层胶囊底 —— 两层圆角套着显得脏 */
#input{background:transparent;box-shadow:none;padding:9px 6px;min-height:38px}
#input:focus{outline:0}
/* chip：图标 + 文字 */
.media-action{width:auto;height:34px;padding:0 13px 0 11px;border-radius:11px;
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.media-action span{white-space:nowrap}
.media-action svg{width:17px;height:17px}
/* 媒体面板展开时输入框那层胶囊底要回来（它自己是独立一块） */
#composer.media-open #inputShell{background:var(--glass-fill)}

/* ---------------------------------------------------------------- 通话按钮的电话图标
   2026-09-04：原来是描边字形，而且 24 格里留白比纸飞机多，视觉上明显比发送键小一圈。
   换成实心字形 + 填白，并按纸飞机的视觉尺寸放大 —— 两颗并排才像同一套。 */
#callbtn svg{width:22px;height:22px;fill:#fff;stroke:none}
#callbtn{color:#fff}
#callbtn:hover,#callbtn:focus-visible{color:#fff}


/* ---- Papi 渠道：藏掉本站登录 / 套餐 / 充值入口（服务端另有 403 闸，这里只是不显示）----
   【2026-09-08 本地：全渠道隐藏登录/会员/充值】：改成不分渠道一律隐藏。原来的 body.papi 限定写在每条规则上面，
   要恢复"只有 Papi 渠道隐藏"，把注释掉的那几行放回来、删掉现在生效的那几行即可。 */
/* #papiShop{display:none} */
/* body.papi #papiShop{display:block;max-width:560px;margin:8px auto 0;padding:0 var(--lg)} */
#papiShop{display:block;max-width:560px;margin:8px auto 0;padding:0 var(--lg)}
.papi-card{background:linear-gradient(160deg,#3c2028,#26141a);border:1px solid var(--hairline);
  border-radius:22px;padding:30px 26px;text-align:center}
.papi-card .n{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:6px 0 10px}
.papi-card .tiny{color:var(--t2);max-width:380px;margin:0 auto 20px;line-height:1.55}
.papi-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.papi-actions .btn{min-width:220px;height:44px}
/* body.papi #v-shop>.caption, body.papi .shop-history{display:none !important} */
/* body.papi #gtLogin, body.papi #logoutBtn, body.papi #shopPromo, body.papi #packs,
   body.papi #coinBenefits, body.papi #payNote, body.papi .ps-plan, body.papi #planUpgrade,
   body.papi #promoUp, body.papi .tok-plus{display:none !important} */
#v-shop>.caption, .shop-history{display:none !important}
#gtLogin, #logoutBtn, #shopPromo, #packs,
#coinBenefits, #payNote, .ps-plan, #planUpgrade,
#promoUp, .tok-plus{display:none !important}


/* ---- 多语言：语言选择（顶栏 + 设置页）---- */
.lang-sel{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.06);color:var(--t2);border:1px solid var(--hairline);
  border-radius:999px;height:32px;padding:0 26px 0 12px;font:inherit;font-size:12.5px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px}
.lang-sel:focus{outline:none;border-color:#f79bb6}
/* 原生 <select> 展开后的选项列表由系统绘制，能改的只有底色和字色 —— 不设的话
   在深色站点上会弹出一片白底小字，非常突兀。option 上必须写死颜色值，
   var() 在某些浏览器的原生列表里不生效。 */
.lang-sel option{background:#1d1218;color:#f2e9ec;font-size:14px}
.lang-sel option:checked{background:#e85c85;color:#fff}
.lang-sel-set{height:36px;font-size:13.5px;color:var(--t1)}
/* 手机端顶栏右上角让给语言切换（2026-09-08）：金币入口底部导航里已经有一个，
   顶栏再放一遍是重复占位；而语言在手机端原本只能进设置页改，藏得太深。 */
@media (max-width:759.98px){
  .gt-right .lang-sel{display:block;height:34px;max-width:140px;padding:0 24px 0 10px;
    font-size:12.5px;text-overflow:ellipsis}
  .gt-right #gtCoins{display:none}
}
/* 希伯来语等 RTL：整体镜像，聊天气泡方向跟着文字走 */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .msg.me{margin-left:0;margin-right:auto}
html[dir="rtl"] .msg.ai{margin-right:0;margin-left:auto}


/* ---------------------------------------------------------------- 首访弹窗 / 试听续费 */
.intro-mask{position:fixed;inset:0;z-index:70;background:rgba(8,5,7,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.intro-mask[hidden]{display:none}
.intro-card{position:relative;width:100%;max-width:340px;text-align:center;overflow:hidden;
  border-radius:26px;background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.intro-x{position:absolute;top:10px;right:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(0,0,0,.42);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  backdrop-filter:blur(4px)}
.intro-x:hover{background:rgba(0,0,0,.62)}
/* 上半部分整块形象图：4:5 竖构图，底部渐隐进卡片，名字压在图上 */
.intro-hero{position:relative;width:100%;aspect-ratio:4/5;background-size:cover;background-position:center top;
  display:flex;align-items:flex-end;justify-content:center}
.intro-hero[data-ph]:not([data-ph=""])::before{content:attr(data-ph);position:absolute;inset:0;
  display:grid;place-items:center;font-size:72px;font-weight:700;color:rgba(255,255,255,.26)}
.intro-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.30) 0 20%,transparent 44%,rgba(0,0,0,.88) 84%,#000 100%)}
.intro-name{position:relative;z-index:1;font-size:22px;font-weight:700;color:#fff;padding-bottom:12px;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.intro-tag{color:var(--t2);font-size:13px;line-height:1.5;margin:6px 22px 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.intro-go{display:flex;align-items:center;justify-content:center;text-align:center;
  width:calc(100% - 44px);margin:0 auto;height:48px;padding:0 16px;font-size:15px;line-height:1;
  animation:introBounce 1.4s ease-in-out infinite}
.intro-go:hover{animation-play-state:paused}
@keyframes introBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}55%{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.intro-go{animation:none}}
.intro-note{margin:10px 22px 20px;color:var(--t4);font-size:11.5px;line-height:1.5}
.trial-card{max-width:320px;padding:26px 22px 22px}
.trial-count{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:2px 0 16px;color:#f0a9b8}

/* 非 Papi 渠道的「去 Papi App」引导窗：复用首访弹窗的遮罩与卡片，只是没有形象图 */
.gate-card{max-width:320px;padding:30px 22px 24px}
.gate-icon{font-size:44px;line-height:1;margin-bottom:14px}
.gate-card .intro-name{padding-bottom:0;margin-bottom:8px;text-shadow:none}
.gate-card .intro-tag{-webkit-line-clamp:4;margin-bottom:20px}
.gate-card .intro-go{text-decoration:none}

/* 本地调试开关（只在 DEV_MODE=true 出现）：左下角一条，显示当前渠道并一键切换 */
.devbar{position:fixed;left:12px;bottom:12px;z-index:80;display:flex;align-items:center;gap:8px;
  height:30px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.14);
  color:#e8dde1;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;backdrop-filter:blur(6px)}
.devbar[hidden]{display:none}
.dev-dot{width:8px;height:8px;border-radius:50%;background:#7ed07e}
.devbar.papi .dev-dot{background:#e85c85}
.devbar button{height:20px;padding:0 8px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font:inherit}
.devbar button:hover{background:rgba(255,255,255,.26)}

/* 【2026-09-09 解锁图】【2026-09-10 改版】锁、按钮、配文全部叠在图上（对标产品那种），
   不再挂在图下面。图固定 3:4，底部一层渐变压暗保证白字可读。 */
.locked-media .lm-wrap{position:relative;border-radius:14px;overflow:hidden;background:#120c0e;aspect-ratio:3/4}
.locked-media .lm-wrap img{display:block;width:100%;height:100%;object-fit:cover;
  filter:blur(14px) saturate(1.1);transform:scale(1.08);
  pointer-events:none;user-select:none;-webkit-user-select:none}
.locked-media .lm-lock{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}   /* 锁居整张图正中 */
.locked-media .lm-lock svg{width:56px;height:56px;padding:14px;border-radius:50%;background:#000a;
  fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  box-shadow:0 2px 14px #0007}
.locked-media .lm-overlay{position:absolute;left:0;right:0;bottom:0;padding:10px 10px 12px;
  background:linear-gradient(180deg,transparent 0%,rgba(8,4,8,.55) 35%,rgba(8,4,8,.92) 100%)}
.locked-media .lm-unlock{width:100%;min-height:46px;margin:0;border:0;border-radius:999px;
  background:var(--gradient-brand);color:#fff;font-size:14px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow-brand)}
.locked-media .lm-unlock:disabled{opacity:.55;cursor:wait}
.locked-media .lm-unlock .gm-cost{margin-left:2px;font-size:14px}
.locked-media .lm-caption{margin:9px 2px 0;color:#f3eef6;font-size:13px;line-height:1.4;
  text-shadow:0 1px 2px #000a;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 解锁后的普通图卡下面那句配文（不叠图） */
.lm-caption{margin:8px 3px 1px;color:var(--t2);font-size:13px;line-height:1.35}

/* 【2026-09-09 解锁图】 */
.locked-media .lm-wrap{position:relative;border-radius:10px;overflow:hidden;background:#120c0e}
.locked-media .lm-wrap img{display:block;width:100%;filter:blur(14px) saturate(1.1);transform:scale(1.08);
  pointer-events:none;user-select:none;-webkit-user-select:none}
.locked-media .lm-lock{position:absolute;inset:0;display:grid;place-items:center}
.locked-media .lm-lock svg{width:54px;height:54px;padding:13px;border-radius:50%;background:#0009;
  fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  box-shadow:0 2px 12px #0006}
.locked-media .lm-unlock{width:100%;min-height:46px;margin-top:9px;border:0;border-radius:12px;
  background:var(--gradient-brand);color:#fff;font-size:14px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow-brand)}
.locked-media .lm-unlock:disabled{opacity:.55;cursor:wait}
.locked-media .lm-unlock .gm-cost{margin-left:2px;font-size:14px}
.lm-caption{margin:8px 3px 1px;color:var(--t2);font-size:13px;line-height:1.35}

/* 2026-09-10 锁卡过期：图再糊一点、按钮灰 */
.locked-media.expired .lm-wrap img{filter:blur(18px) saturate(.6);opacity:.7}
.locked-media.expired .lm-unlock{background:#4a4550;color:#bbb;cursor:default;box-shadow:none}
.locked-media.expired .lm-lock{opacity:.5}