/* ===== 剧本杀：编辑器 ===== */
.ve { max-width:760px; margin:0 auto; padding:0 0 40px; }
.ve-head { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 4px; background:var(--bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.ve-head .ve-back { width:38px; height:38px; padding:0; border:0; background:none; font-size:26px; line-height:1; border-radius:50%; }
.ve-saved { flex:1; min-width:0; text-align:right; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ve-head .ve-more { width:34px; height:38px; padding:0; border:0; background:none; font-size:20px; }
.ve-menu { position:absolute; right:4px; top:48px; min-width:150px; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:30; }
.ve-menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:10px 12px; border-radius:10px; }
.ve-menu button.danger { color:var(--danger); }
.ve-tabs { display:flex; border-bottom:1px solid var(--border); margin:0 -2px; }
.ve-tabs button { flex:1; border:0; border-radius:0; background:none; padding:12px 4px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; }
.ve-tabs button:hover { transform:none; }
.ve-tabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.ve-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:14px 0 6px; }
.ve-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:10px; font-size:13.5px; background:rgba(229,72,77,.12); color:var(--danger); }
.ve-chip i { width:15px; height:15px; border-radius:50%; background:var(--danger); color:#fff; font-style:normal; font-size:11px; font-weight:800; display:grid; place-items:center; }
.ve-chip.ok { background:rgba(46,160,67,.13); color:#2ea043; } .ve-chip.ok i { background:#2ea043; }
.ve-hint { text-align:center; color:var(--muted); font-size:13px; padding:4px 0 12px; border-bottom:1px solid var(--border); }
.ve-count { text-align:center; color:var(--muted); font-size:13px; padding:10px 0; border-bottom:1px solid var(--border); }
.ve-sec { padding:22px 2px; border-bottom:1px solid var(--border); }
.ve-sec:last-of-type { border-bottom:0; }
.ve-sec h3 { margin:0 0 14px; font-size:21px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ve-sec h3 small { font-size:13px; font-weight:500; color:var(--muted); }
.ve-sec label.ve-l { display:block; margin:16px 0 6px; font-weight:600; font-size:15px; }
.ve-sec label.ve-l small { font-weight:400; color:var(--muted); }
.ve-seg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ve-seg.three { grid-template-columns:repeat(3,1fr); }
.ve-seg button { padding:14px 8px; border-radius:14px; background:var(--card2); border:1px solid var(--border); font-size:16px; }
.ve-seg button.on { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card2)); font-weight:600; }
.ve-note { color:var(--accent2); font-size:14px; margin:10px 0 0; }
.ve-wide { width:100%; margin-bottom:10px; }
.ve-ta { position:relative; }
.ve-ta textarea { padding-bottom:30px; }
.ve-ta .ve-cnt { position:absolute; right:14px; bottom:9px; font-size:12.5px; color:var(--muted); pointer-events:none; }
.ve-empty { text-align:center; padding:26px 16px; border-radius:20px; background:var(--card2); border:1px solid var(--border); }
.ve-empty .ico { font-size:42px; line-height:1.2; } .ve-empty p { color:var(--muted); margin:8px 0 14px; }
.ve-empty .btns { display:flex; gap:10px; } .ve-empty .btns button { flex:1; }
.ve-need { color:var(--danger); font-size:13px; margin:8px 0 0; text-align:center; }
.ve-list { display:grid; gap:10px; margin-bottom:12px; }
.ve-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--card2); border:1px solid var(--border); }
.ve-item .av { width:48px; height:48px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background:var(--card); font-size:24px; }
.ve-item .av img { width:100%; height:100%; object-fit:cover; }
.ve-item .tx { flex:1; min-width:0; } .ve-item .tx b { display:block; } .ve-item .tx small { display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ve-item button { width:34px; height:34px; padding:0; border-radius:50%; border:0; background:none; }
.ve-bgs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.ve-bg { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:var(--card2); border:1px solid var(--border); }
.ve-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.ve-bg span { position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px; font-size:12.5px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ve-bg button { position:absolute; top:6px; right:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:13px; }
.ve-nav { display:flex; gap:10px; padding-top:22px; } .ve-nav button { flex:1; padding:14px; }
.ve-turn { padding:12px; border-radius:16px; background:var(--card2); border:1px solid var(--border); margin-bottom:10px; }
.ve-turn .row { display:flex; gap:8px; margin-bottom:8px; align-items:center; } .ve-turn select { flex:1; min-width:0; padding:8px 10px; font-size:14px; }
.ve-turn .row button { width:32px; height:32px; padding:0; border:0; border-radius:50%; background:none; flex:none; }
.ve-turn textarea { background:var(--card); }
.ve-choice { border-radius:16px; background:var(--card2); border:1px solid var(--border); margin-bottom:10px; overflow:hidden; }
.ve-choice .hd { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.ve-choice .hd b { flex:1; } .ve-choice .hd button { width:32px; height:32px; padding:0; border:0; background:none; border-radius:50%; }
.ve-choice .bd { padding:0 14px 14px; }
.ve-sw { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 2px; cursor:pointer; }
.ve-sw .tt { flex:1; min-width:0; } .ve-sw .tt b { display:block; font-size:17px; font-weight:600; } .ve-sw .tt small { display:block; color:var(--muted); margin-top:3px; line-height:1.5; }
.ve-sw input { position:relative; appearance:none; -webkit-appearance:none; width:46px; height:28px; padding:0; flex:none; border-radius:999px; background:var(--border); border:0; cursor:pointer; transition:background .15s; }
.ve-sw input::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.ve-sw input:checked { background:var(--accent2); } .ve-sw input:checked::after { transform:translateX(18px); }
.ve-sub { margin:0 0 6px; padding:12px; border-radius:14px; background:var(--card2); border:1px solid var(--border); }
.ve-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ve-tags .tg { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--card2); border:1px solid var(--border); font-size:14px; }
.ve-tags .tg button { padding:0; border:0; background:none; width:18px; height:18px; line-height:1; color:var(--muted); }
.ve-cover { display:flex; gap:14px; align-items:flex-start; } .ve-cover .cvprev { width:112px; }
.ve-ov { }
.ve-ov .cap-top { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.ve-ov .cap-top b { font-size:17px; } .ve-ov .cap-top button.x { width:40px; padding:6px; border:0; background:none; font-size:24px; line-height:1; }
.ve-ov .cap-top button.ok { padding:8px 16px; font-size:15px; background:var(--grad); color:#fff; }
.ve-ov .ve-body { flex:1; overflow-y:auto; padding:6px 16px 30px; }
.ve-otabs { display:flex; gap:22px; border-bottom:1px solid var(--border); margin:14px 0; }
.ve-otabs button { border:0; border-radius:0; background:none; padding:10px 0; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; }
.ve-otabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.ve-outfits { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; align-items:center; }
.ve-outfits button { flex:none; white-space:nowrap; padding:8px 14px; border-radius:999px; }
.ve-outfits button.on { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card2)); font-weight:600; }
.ve-sprite { width:150px; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:var(--card2); border:1px dashed var(--border); display:grid; place-items:center; color:var(--muted); font-size:13px; text-align:center; }
.ve-sprite img { width:100%; height:100%; object-fit:cover; }
.ve-lib { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ve-lib button { padding:0; aspect-ratio:3/4; border-radius:12px; overflow:hidden; } .ve-lib img { width:100%; height:100%; object-fit:cover; display:block; }
.ve-lib button.on { outline:3px solid var(--accent2); }
.ve-src { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px; margin-bottom:8px; border-radius:14px; }
.ve-src .ic { width:44px; height:44px; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:var(--card); font-size:22px; flex:none; } .ve-src .ic img { width:100%; height:100%; object-fit:cover; }
.ve-src small { display:block; color:var(--muted); }

/* ===== 剧本杀：游玩 ===== */
body.chatpage main:has(.vp) { padding:0; }
.vp { --size:62%; position:relative; width:100%; max-width:560px; height:100dvh; margin:0 auto; overflow:hidden; background:#0b0a12; color:#fff; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; }
@media (min-width:721px) { .vp { height:calc(100dvh - 32px); margin-top:16px; border-radius:26px; box-shadow:0 20px 60px rgba(0,0,0,.4); } }
.vp-bg { position:absolute; inset:0; background:#14121f center/cover no-repeat; transition:opacity .6s; }
.vp-bg.b { opacity:0; } .vp-bg.b.show { opacity:1; }
.vp-shade { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.6) 0,rgba(0,0,0,.35) 30%,rgba(0,0,0,.6) 100%); pointer-events:none; }
.vp-top { position:relative; z-index:5; display:flex; align-items:center; gap:6px; padding:calc(10px + env(safe-area-inset-top)) 10px 6px; }
.vp-top button { width:38px; height:38px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; font-size:18px; position:relative; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-top .ttl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6); padding-left:4px; }
.vp-top .dot[hidden] { display:none; } .vp-top .dot { display:block; position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius:50%; background:#ff4d6d; }
.vp-date { position:relative; z-index:5; align-self:center; padding:4px 14px; border-radius:999px; background:rgba(0,0,0,.45); font-size:13px; margin-bottom:4px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-gauge { position:relative; z-index:5; margin:4px 16px; padding:8px 12px; border-radius:14px; background:rgba(120,20,40,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:13px; }
.vp-gauge .bar { height:8px; border-radius:6px; background:rgba(255,255,255,.2); overflow:hidden; margin-top:6px; } .vp-gauge .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb347,#ff4d6d); transition:width .5s; }
/* 剧情对话：头像 + 名字 + 气泡，玩家在右边，旁白居中，换场景插一张场景图 */
.vp-feed { position:relative; z-index:6; flex:1; min-height:0; overflow-y:auto; padding:6px 12px 10px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; cursor:pointer; user-select:text; -webkit-user-select:text; }
.vp-feed::before { content:""; flex:1; }      /* 内容少时贴在底部 */
.vp-item { opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; }
.vp-item.in { opacity:1; transform:none; }
.vp-scene { margin:4px 0 12px; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:rgba(255,255,255,.06); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.vp-scene img { width:100%; height:100%; object-fit:cover; display:block; }
.vp-row { display:flex; gap:9px; align-items:flex-start; max-width:92%; }
.vp-row.me { flex-direction:row-reverse; margin-left:auto; }
.vp-av { width:40px; height:40px; border-radius:50%; flex:none; overflow:hidden; background:rgba(255,255,255,.14); display:grid; place-items:center; font-size:18px; font-weight:700; border:1px solid rgba(255,255,255,.2); }
.vp-av img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; }      /* 全身立绘当头像：取上半身 / 脸 */
.vp-bw { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.vp-row.me .vp-bw { align-items:flex-end; }
.vp-who { font-size:12.5px; color:rgba(255,255,255,.7); margin:0 0 3px 4px; }
.vp-b { padding:10px 14px; border-radius:4px 18px 18px 18px; background:rgba(14,12,24,.82); border:1px solid rgba(255,255,255,.12); font-size:16px; line-height:1.7; white-space:pre-wrap; word-break:break-word; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vp-row.me .vp-b { border-radius:18px 4px 18px 18px; background:var(--grad); border-color:transparent; }
.vp-nar { align-self:stretch; padding:8px 14px; border-radius:14px; background:rgba(0,0,0,.35); color:#d8d4ea; font-style:italic; font-size:15px; line-height:1.7; white-space:pre-wrap; text-align:left; }
.vp-act { position:relative; z-index:6; padding:0 12px calc(12px + env(safe-area-inset-bottom)); display:grid; gap:8px; }
.vp-ch { padding:13px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.18); background:rgba(40,34,70,.78); color:#fff; text-align:left; font-size:15.5px; line-height:1.5; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vp-fold { justify-self:end; height:30px; padding:0 12px; border-radius:15px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; font-size:12.5px; }
.vp-ch:hover { background:rgba(80,60,140,.85); } .vp-ch .dc { margin-right:6px; }
.vp-free { display:flex; gap:8px; align-items:flex-end; }
.vp-free textarea { flex:1; min-height:46px; max-height:120px; resize:none; border-radius:16px; background:rgba(20,18,34,.85); color:#fff; border:1px solid rgba(255,255,255,.18); padding:12px 14px; }
.vp-free button, .vp-modes button { height:46px; padding:0 16px; border-radius:16px; border:0; background:var(--grad); color:#fff; font-weight:600; }
.vp-modes { display:flex; gap:8px; } .vp-modes button { flex:1; height:36px; background:rgba(255,255,255,.12); font-weight:500; font-size:13.5px; }
.vp-dice { padding:14px; border-radius:16px; border:0; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:700; font-size:16px; }
.vp-roll { text-align:center; padding:14px; border-radius:16px; background:rgba(14,12,24,.85); border:1px solid rgba(255,255,255,.14); }
.vp-roll .n { font-size:46px; font-weight:800; line-height:1.1; } .vp-roll.ok .n { color:#34d399; } .vp-roll.bad .n { color:#f87171; }
.vp-timer { height:6px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden; } .vp-timer i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ffb347,#ff4d6d); }
.vp-wait { text-align:center; padding:14px; color:#cfc9ee; font-size:14px; }
.vp-polish { padding:12px; border-radius:16px; background:rgba(14,12,24,.9); border:1px solid rgba(255,255,255,.16); }
.vp-polish p { margin:0 0 10px; line-height:1.6; } .vp-polish .btns { display:flex; gap:8px; } .vp-polish .btns button { flex:1; }
.vp-ov { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(0,0,0,.55); }
.vp-pn { max-height:78%; display:flex; flex-direction:column; border-radius:26px 26px 0 0; background:#222; padding:10px 16px calc(16px + env(safe-area-inset-bottom)); }
.vp-pn .grip { width:44px; height:4px; border-radius:4px; background:#555; margin:0 auto 10px; flex:none; }
.vp-pn h4 { margin:4px 2px 12px; font-size:18px; display:flex; justify-content:space-between; align-items:center; } .vp-pn h4 button { padding:4px 10px; border:0; background:none; color:#aaa; font-size:20px; }
.vp-pn .bd { overflow-y:auto; }
.vp-q { display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.08); } .vp-q.done span { text-decoration:line-through; color:#888; } .vp-q span { flex:1; } .vp-q button { border:0; background:none; color:#999; padding:4px 8px; }
.vp-log p { margin:0 0 10px; line-height:1.65; font-size:14.5px; } .vp-log b { color:#c4b5fd; } .vp-log .me { text-align:right; color:#93c5fd; }
.vp-ph-list button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 8px; border:0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; background:none; color:#fff; }
.vp-ph-list .av { width:42px; height:42px; border-radius:50%; background:#444; overflow:hidden; display:grid; place-items:center; flex:none; } .vp-ph-list .av img { width:100%; height:100%; object-fit:cover; }
.vp-ph-list small { color:#999; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.vp-ph-list .u { width:10px; height:10px; border-radius:50%; background:#ff4d6d; margin-left:auto; flex:none; }
.vp-msgs { display:flex; flex-direction:column; gap:8px; min-height:140px; }
.vp-m { max-width:80%; padding:9px 13px; border-radius:16px; line-height:1.55; background:#3a3a44; align-self:flex-start; } .vp-m.mine { align-self:flex-end; background:#6d4cff; }
.vp-end { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-endc { width:100%; max-width:420px; padding:28px 22px; border-radius:24px; text-align:center; background:linear-gradient(160deg,#2b2350,#171326); border:1px solid rgba(255,255,255,.14); }
.vp-endc .k { font-size:13px; letter-spacing:3px; color:#c4b5fd; } .vp-endc h2 { margin:8px 0 14px; font-size:28px; } .vp-endc p { color:#d6d2ea; line-height:1.8; text-align:left; margin:0 0 22px; }
.vp-endc .btns { display:grid; gap:10px; } .vp-endc button { padding:13px; }
.vp-load { position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:#0b0a12; }
.vp-menu { position:absolute; right:10px; top:calc(54px + env(safe-area-inset-top)); z-index:25; min-width:170px; padding:6px; border-radius:14px; background:#262332; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.vp-menu button { display:block; width:100%; text-align:left; border:0; background:none; color:#fff; padding:11px 12px; border-radius:10px; } .vp-menu button:hover { background:rgba(255,255,255,.08); transform:none; }

/* 类型标记 / 筛选 */
.flag.vn { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }
.kindtabs { display:flex; gap:18px; margin:2px 0 14px; border-bottom:1px solid var(--border); }
.kindtabs button { border:0; border-radius:0; background:none; padding:10px 2px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; }
.kindtabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.kindtabs button:hover { transform:none; }
.typecards { display:grid; gap:12px; }
.typecards button { text-align:left; padding:16px; border-radius:18px; display:block; width:100%; }
.typecards b { display:block; font-size:17px; margin-bottom:4px; } .typecards small { color:var(--muted); line-height:1.5; display:block; }

.pp-chips .vnchip { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:600; }
.vn-scenes { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.vn-scenes figure { margin:0; flex:none; width:128px; }
.vn-scenes img { width:128px; aspect-ratio:3/4; object-fit:cover; border-radius:14px; display:block; background:var(--card2); }
.vn-scenes figcaption { margin-top:6px; font-size:12.5px; color:var(--muted); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-main { min-width:0; }      /* 否则横向滑动的场景栏会把详情页右侧栏撑宽，内容溢出屏幕 */
.vn-scenes { max-width:100%; min-width:0; }

.cv-strip { position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cv-strip::-webkit-scrollbar { display:none; }
.cv-strip > * { flex:none; width:100%; height:100%; scroll-snap-align:center; object-fit:cover; }
.cv-strip .cv-emoji { display:grid; place-items:center; font-size:110px; color:#fff; }
.cv-dots { position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.cv-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); } .cv-dots i.on { background:#fff; }
.intro-text.md { white-space:normal; } .md-h { margin:14px 0 6px; } .md-p { margin:0 0 10px; } .md-ul { margin:0 0 10px; padding-left:20px; } .md-img { display:block; max-width:100%; border-radius:14px; margin:8px 0; }
.wb-cards { display:grid; gap:10px; }
.wb-card { position:relative; display:block; width:100%; text-align:left; padding:14px 40px 14px 16px; border-radius:16px; background:var(--card2); border:1px solid var(--border); }
.wb-card b { display:block; font-size:16px; } .wb-card small { display:block; color:var(--muted); margin-top:3px; line-height:1.5; } .wb-card i { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-style:normal; font-size:22px; color:var(--muted); }

.dicebar { padding:6px 12px 0; } .dicebar .vp-dice { width:100%; }
.vp-dice { padding:14px; border-radius:16px; border:0; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:700; font-size:16px; }
.vp-ph-list button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 8px; border:0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; background:none; color:#fff; }
.vp-ph-list .av { width:42px; height:42px; border-radius:50%; background:#444; overflow:hidden; display:grid; place-items:center; flex:none; } .vp-ph-list .av img { width:100%; height:100%; object-fit:cover; }
.vp-ph-list small { color:#999; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.vp-msgs { display:flex; flex-direction:column; gap:8px; min-height:100px; } .vp-m { max-width:80%; padding:9px 13px; border-radius:16px; line-height:1.55; background:#3a3a44; color:#fff; align-self:flex-start; } .vp-m.mine { align-self:flex-end; background:#6d4cff; }
.vp-free { display:flex; gap:8px; align-items:flex-end; } .vp-free textarea { flex:1; min-height:46px; max-height:120px; resize:none; border-radius:16px; padding:12px 14px; } .vp-free button { height:46px; padding:0 16px; border-radius:16px; border:0; background:var(--grad); color:#fff; font-weight:600; }

.home-top { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:4px 0 12px; }
.home-top .tabs2 { display:flex; gap:18px; align-items:baseline; flex:none; }
.home-top b { font-size:22px; font-weight:800; color:var(--fg); cursor:pointer; white-space:nowrap; }
.hsearch { display:flex; align-items:center; gap:8px; flex:1; max-width:300px; min-width:0; padding:0 14px; height:40px; border-radius:999px; background:var(--card2); border:1px solid var(--border); color:var(--muted); }
.hsearch input { border:0; background:none; padding:0; height:100%; min-width:0; box-shadow:none; } .hsearch input:focus { box-shadow:none; } .hsearch .qclr { flex:none; border:0; background:none; padding:4px; font-size:14px; line-height:1; color:var(--muted); box-shadow:none; } .hsearch .qclr[hidden] { display:none; }
.tagrow[hidden] { display:none; } .tagrow { display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; scrollbar-width:none; } .tagrow::-webkit-scrollbar { display:none; }
.tagrow button { flex:none; border-radius:999px; padding:6px 14px; font-size:13.5px; background:var(--card); border:1px solid var(--border); }
.cats { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; scrollbar-width:none; } .cats::-webkit-scrollbar { display:none; }
.cats button { flex:none; border-radius:999px; padding:7px 15px; font-size:14.5px; font-weight:600; background:none; color:var(--muted); border:0; }      /* 没选中：只是文字 */
.cats button.on { background:var(--accent2); color:#fff; box-shadow:0 4px 12px color-mix(in srgb,var(--accent2) 40%,transparent); }      /* 选中：实心色块 */

.cats-row { display:flex; align-items:center; gap:8px; margin:6px 0 10px; } .cats-row .cats { flex:1; min-width:0; margin:0; }
.hicons { display:flex; gap:6px; flex:none; } .hicons button svg { width:23px; height:23px; } .hicons button { width:42px; height:42px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:21px; background:var(--card2); border:1px solid var(--border); color:var(--fg); }

/* ---- 动态（Feed） ---- */
.post-card { padding:14px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.post-date { color:var(--muted); font-size:14px; margin-bottom:6px; }
.post-text { line-height:1.65; word-break:break-word; } .post-text .md-p { margin:0 0 4px; } .post-text a { color:var(--accent2); text-decoration:underline; }
.post-imgs { display:grid; gap:6px; margin-top:8px; } .post-imgs.n1 { grid-template-columns:1fr; } .post-imgs.n2 { grid-template-columns:1fr 1fr; } .post-imgs.n3 { grid-template-columns:repeat(3,1fr); }
.post-imgs img { width:100%; border-radius:12px; object-fit:cover; max-height:360px; aspect-ratio:1; cursor:zoom-in; } .post-imgs.n1 img { aspect-ratio:auto; }
.post-acts { display:flex; align-items:center; gap:20px; margin-top:10px; }
.post-acts .pa { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 0; color:var(--text); font-weight:700; cursor:pointer; } .post-acts .pa.on { color:#ff5d7a; }
.post-tools { position:sticky; bottom:0; display:flex; align-items:center; gap:6px; padding:10px 0; border-top:1px solid var(--border); background:var(--bg); overflow-x:auto; }
.post-tools button { background:none; border:0; color:var(--muted); font-size:17px; padding:6px 10px; cursor:pointer; white-space:nowrap; } .post-tools .sep { width:1px; height:22px; background:var(--border); }
.post-edit-imgs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; } .post-edit-imgs .pi { position:relative; } .post-edit-imgs img { width:84px; height:84px; object-fit:cover; border-radius:10px; }
.post-edit-imgs .pi button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:#000a; color:#fff; padding:0; cursor:pointer; }
.post-sort { margin:14px 0 6px; padding-top:10px; border-top:8px solid var(--card2); } .post-sort select { background:none; border:0; color:var(--muted); font-size:15px; padding:0; width:auto; }
.post-cmt { display:flex; gap:10px; padding:12px 0; align-items:flex-start; } .post-cact { display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .post-cact button { background:none; border:0; color:var(--muted); display:inline-flex; gap:4px; align-items:center; padding:2px; cursor:pointer; } .post-cact button.on { color:#ff5d7a; }
.post-cbar { position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0; background:var(--bg); } .post-cbar[hidden] { display:none; } .post-cbar input { flex:1; border-radius:999px; padding:12px 16px; } .post-cbar button { width:44px; border-radius:50%; flex:none; }

/* ---- 信息栏 / 日历与时钟 ---- */
.pg-chips { display:flex; flex-wrap:wrap; gap:8px; } .pg-chips button { padding:6px 12px; border-radius:999px; font-size:13.5px; background:var(--card); border:1px solid var(--border); color:var(--text); cursor:pointer; } .pg-chips button.on { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.clockbar { display:flex; justify-content:center; padding:6px 14px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--muted); border-bottom:1px solid var(--border); background:var(--bar); } .clockbar[hidden] { display:none; }
.infobox { margin-top:10px; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.5; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); }
.infobox b { color:var(--muted); font-weight:600; white-space:nowrap; } .infobox span { word-break:break-word; }
.vp-info { position:relative; z-index:5; align-self:center; max-width:92%; margin:0 0 6px; padding:6px 12px; background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .vp-info[hidden] { display:none; } .vp-info b { color:rgba(255,255,255,.7); }

/* ---- 剧情插件：任务 / 突发事件 / 恋爱线 / 日记 / 插图 / 直播 / 结局 ---- */
.plugbar { display:flex; flex-direction:column; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border); background:var(--bar); } .plugbar[hidden] { display:none; }
.pl-chips { display:flex; gap:8px; flex-wrap:wrap; } .pl-chips button { padding:5px 12px; border-radius:999px; font-size:13px; background:var(--card); border:1px solid var(--border); color:var(--text); cursor:pointer; white-space:nowrap; } .pl-chips button.on { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.pl-lock { width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:8px 12px; border-radius:12px; font-size:13px; background:color-mix(in srgb,#f5a623 16%,transparent); border:1px solid color-mix(in srgb,#f5a623 40%,transparent); color:var(--text); cursor:pointer; }
.pl-lock .lk-main { flex:1; min-width:0; } .pl-lock .lk-t { display:block; font-weight:600; } .pl-lock .lk-l { display:block; margin-top:2px; font-size:12.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }      /* 用了哪些插件：一行，放不下省略 */
.pl-lock .lk-btn { flex:none; padding:5px 12px; border-radius:999px; border:0; font-size:12.5px; font-weight:600; background:#f5a623; color:#fff; box-shadow:none; }
.pl-gauge { font-size:13px; } .pl-gauge span { float:right; font-weight:700; } .pl-gauge.success span { color:#2ea043; } .pl-gauge.failed span { color:var(--danger); }
.bar { height:6px; border-radius:99px; background:rgba(128,128,128,.25); overflow:hidden; margin-top:5px; } .bar i { display:block; height:100%; background:linear-gradient(90deg,#8a5cff,#ff5da2); border-radius:99px; }
.pl-list { display:flex; flex-direction:column; gap:10px; } .pl-q { padding:12px 14px; border-radius:12px; background:#333; color:#eee; } .pl-q.done { opacity:.55; text-decoration:line-through; }
.pl-love, .pl-diary { padding:12px 14px; border-radius:14px; background:#333; color:#eee; } .pl-love em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; background:rgba(255,93,162,.2); color:#ff8cc0; font-size:12.5px; } .pl-love small, .pl-diary small { display:block; color:#9a9aa5; margin-top:5px; }
.pl-diary p { margin:8px 0 0; line-height:1.7; }
.pl-cuts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pl-cuts button, .pl-cuts .lock { display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; color:#ddd; cursor:pointer; } .pl-cuts img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; } .pl-cuts .lock { aspect-ratio:3/4; align-items:center; justify-content:center; border-radius:12px; background:#333; cursor:default; } .pl-cuts .lock span { font-size:26px; } .pl-cuts small { font-size:12px; text-align:center; }
.pmarks { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; } .pmarks span { padding:3px 10px; border-radius:99px; font-size:12px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.livebox { margin-top:10px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.55; background:rgba(20,20,28,.78); color:#eee; } .livebox .lv-h { display:flex; justify-content:space-between; margin-bottom:6px; font-weight:700; } .livebox .lv-live { color:#ff4d6a; } .livebox b { color:#9ad; margin-right:6px; } .livebox .gift { color:#ffd166; }
.cutcard { margin-top:10px; border-radius:14px; overflow:hidden; background:var(--card2); text-align:center; padding:10px; font-size:13px; color:var(--muted); } .cutcard img { display:block; width:100%; max-height:420px; object-fit:cover; border-radius:10px; cursor:zoom-in; } .cutcard small { display:block; margin-top:6px; }
.endcard { margin:10px 0; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(138,92,255,.16),rgba(255,93,162,.12)); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); } .endcard b { font-size:16px; } .endcard em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; font-size:12px; background:rgba(128,128,128,.25); } .endcard em.good { background:rgba(46,160,67,.22); color:#2ea043; } .endcard em.bad { background:rgba(229,72,77,.2); color:var(--danger); } .endcard p { margin:8px 0; line-height:1.7; } .endcard button { padding:7px 14px; border-radius:99px; }
.mdl-plug { display:block; font-size:12px; margin-top:6px; color:#9a9aa5; } .mdl-plug.ok { color:#8fd19e; }
.vp-lock { position:relative; z-index:6; align-self:center; max-width:92%; margin:0 0 4px; padding:6px 12px; border-radius:12px; font-size:12.5px; background:rgba(245,166,35,.25); border:1px solid rgba(245,166,35,.55); color:#fff; cursor:pointer; backdrop-filter:blur(6px); }
.vp-live { position:absolute; right:10px; top:104px; z-index:7; width:min(46%,220px); padding:8px 10px; border-radius:12px; font-size:12px; line-height:1.5; background:rgba(0,0,0,.6); color:#eee; backdrop-filter:blur(6px); } .vp-live[hidden] { display:none; } .vp-live .h { display:flex; justify-content:space-between; font-weight:700; margin-bottom:4px; } .vp-live .r { color:#ff4d6a; } .vp-live b { color:#9ad; margin-right:4px; } .vp-live .g { color:#ffd166; }
.vp-cutc { max-width:min(92%,420px); text-align:center; } .vp-cutc img { width:100%; max-height:62vh; object-fit:cover; border-radius:16px; } .vp-cutc .k { margin-bottom:10px; font-weight:800; letter-spacing:.1em; } .vp-cutc small { color:#aaa; }
.vp-lv { padding:12px 14px; margin-bottom:10px; border-radius:14px; background:#333; color:#eee; } .vp-lv em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; background:rgba(255,93,162,.2); color:#ff8cc0; font-size:12.5px; } .vp-lv small { display:block; color:#9a9aa5; margin-top:5px; }
.vp-cuts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .vp-cuts button, .vp-cuts .lock { display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; color:#ddd; } .vp-cuts img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; } .vp-cuts .lock { aspect-ratio:3/4; align-items:center; justify-content:center; border-radius:12px; background:#333; } .vp-cuts .lock span { font-size:26px; } .vp-cuts small { font-size:12px; text-align:center; }
.vp-wh { display:flex; gap:8px; flex-wrap:wrap; } .vp-wh button { padding:5px 12px; border-radius:99px; border:1px solid #555; background:#333; color:#eee; } .vp-wh button.on { background:var(--accent2); border-color:var(--accent2); }
.vp-cost { margin:8px 0 0; font-size:12px; color:#9a9aa5; text-align:center; }      /* 每步按所选模型扣点的提示 */
.vp-mdl { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:8px; padding:14px 16px; border-radius:14px; border:1px solid #444; background:#2c2c2c; color:#eee; } .vp-mdl.on { border-color:var(--accent2); } .vp-mdl span { font-size:12.5px; color:#9a9aa5; }
.plugbar .pl-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .plugbar .pl-chips::-webkit-scrollbar { display:none; }
/* 短信「正在输入中…」：三个跳动的点 */
.vp-m.typing { display:flex; align-items:center; gap:5px; color:#bbb; font-size:13px; }
.vp-m.typing i { width:6px; height:6px; border-radius:50%; background:#bbb; animation:vptyp 1.1s infinite; }
.vp-m.typing i:nth-child(2) { animation-delay:.18s; } .vp-m.typing i:nth-child(3) { animation-delay:.36s; } .vp-m.typing span { margin-left:4px; }
@keyframes vptyp { 0%, 80%, 100% { opacity:.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.vp-qhint { margin:0 0 10px; color:#aaa; font-size:12.5px; line-height:1.6; }
.mdl-plug small { display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--muted); font-weight:400; }
.mdl-plug .ic { width:14px; height:14px; margin-right:5px; vertical-align:-2px; }

.vp-act { color:var(--muted); font-style:italic; opacity:.85; }      /* 气泡里的动作 / 心理活动：灰色斜体 */