/* 用户端和运营后台共用的样式（原 index.html 里的 <style>） */
  :root {
    color-scheme: light dark;
    --bg:#f6f4fb; --glow1:rgba(255,92,138,.18); --glow2:rgba(139,92,246,.18);
    --card:#ffffff; --card2:#efecf8; --border:rgba(50,30,110,.10);
    --fg:#1b1730; --muted:#7b7692; --accent:#ee3f78; --accent2:#7c4dff;
    --grad:linear-gradient(135deg,#ff5c8a 0%,#8b5cf6 100%);
    --bubble:#ffffff; --shadow:0 8px 30px rgba(70,40,140,.12); --bar:rgba(255,255,255,.80);
    --hh:64px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#0c0b13; --glow1:rgba(255,92,138,.16); --glow2:rgba(139,92,246,.20);
      --card:rgba(255,255,255,.055); --card2:rgba(255,255,255,.075); --border:rgba(255,255,255,.10);
      --fg:#f4f2fb; --muted:#9d99b3; --accent:#ff5c8a; --accent2:#9b7bff;
      --bubble:rgba(255,255,255,.085); --shadow:0 10px 40px rgba(0,0,0,.45); --bar:rgba(14,12,22,.78);
    }
  }
  * { box-sizing:border-box; }
  @keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  #view > * { animation:pageIn .22s ease both; }
  #view > .pp.skel { animation:none; }
  .sk-line { height:16px; margin:14px 0; border-radius:8px; width:100%; background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
  .sk-line.w80 { width:80%; } .sk-line.w60 { width:60%; height:26px; } .sk-line.w40 { width:40%; }
  @keyframes shimmer { to { background-position:-200% 0; } }
  body {
    margin:0; color:var(--fg); font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background:radial-gradient(900px 520px at 12% -8%,var(--glow1),transparent 62%),radial-gradient(800px 520px at 92% -4%,var(--glow2),transparent 62%),var(--bg);
    background-attachment:fixed; -webkit-font-smoothing:antialiased;
  }
  a { color:var(--accent); }
  ::selection { background:color-mix(in srgb,var(--accent2) 35%,transparent); }
  ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }

  /* ---------- header / nav ---------- */
  header { position:sticky; top:0; z-index:40; height:var(--hh); display:flex; align-items:center; gap:16px; padding:0 28px;
    background:var(--bar); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px); border-bottom:1px solid var(--border); }
  .logo { margin:0; font-size:22px; font-weight:800; letter-spacing:.4px; cursor:pointer; white-space:nowrap; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  nav { display:flex; gap:4px; flex:1; margin-left:10px; align-items:center; }
  nav button { display:flex; align-items:center; gap:6px; padding:8px 15px; border:0; border-radius:999px; background:none; color:var(--muted); font-weight:600; }
  nav button i { font-style:normal; }
  nav button:hover { color:var(--fg); background:var(--card2); transform:none; }
  nav button.active { color:#fff; background:var(--grad); box-shadow:0 4px 14px rgba(139,92,246,.35); }
  .userbox { display:flex; align-items:center; gap:10px; margin-left:auto; }
  .whobtn { display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:999px; font-size:13px; font-weight:600; max-width:200px; }
  .whobtn .wav { width:28px; height:28px; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:#fff; font-size:13px; flex:none; background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .whobtn .wav img { width:100%; height:100%; object-fit:cover; } .whobtn .wn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #uilang { width:auto; padding:6px 28px 6px 12px; border-radius:10px; font-size:13px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237d7d99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; }
  .langbox { display:flex; align-items:center; }
  #nav-mine { display:none; }
  .userbox { display:flex; align-items:center; gap:10px; }

  main { max-width:1040px; margin:0 auto; padding:28px 24px 48px; }

  /* ---------- controls ---------- */
  button { font:inherit; cursor:pointer; border:1px solid var(--border); border-radius:12px; padding:9px 16px; background:var(--card2); color:var(--fg);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s; }
  button:hover { transform:translateY(-1px); }
  button:active { transform:translateY(0) scale(.98); }
  button:disabled { opacity:.5; cursor:default; transform:none; }
  button.primary { border:0; color:#fff; background:var(--grad); box-shadow:0 6px 18px rgba(139,92,246,.35); font-weight:600; }
  button.primary:hover { box-shadow:0 8px 24px rgba(255,92,138,.4); }
  input, textarea, select { font:inherit; width:100%; padding:11px 14px; border-radius:14px; border:1px solid var(--border); background:var(--card2); color:var(--fg); outline:none; transition:border-color .15s, box-shadow .15s; }
  input:focus, textarea:focus, select:focus { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 24%,transparent); }
  ::placeholder { color:var(--muted); opacity:.75; }
  input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
  form label { display:block; margin:16px 0 6px; font-size:13px; font-weight:600; color:var(--muted); }
  h2 { font-size:22px; margin:0 0 6px; }
  .muted { color:var(--muted); }
  .empty { text-align:center; color:var(--muted); padding:64px 0; }
  .empty b { display:block; font-size:44px; margin-bottom:8px; }
  .err { color:var(--accent); min-height:1.4em; font-size:13px; }

  /* ---------- home ---------- */
  .hero { padding:8px 0 22px; }
  .hero h2 { font-size:clamp(26px,4.2vw,38px); font-weight:800; line-height:1.2; margin:0 0 8px; letter-spacing:.3px; }
  .grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p { margin:0; color:var(--muted); }
  .tabs { display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:var(--card2); border:1px solid var(--border); margin-bottom:16px; }
  .tabs button { border:0; background:none; border-radius:999px; padding:8px 20px; font-weight:600; color:var(--muted); }
  .tabs button:hover { transform:none; color:var(--fg); }
  .tabs button.active { background:var(--grad); color:#fff; box-shadow:0 4px 14px rgba(139,92,246,.35); }
  .toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
  .toolbar input { flex:1; min-width:220px; padding-left:16px; border-radius:999px; }
  .toolbar button { border-radius:999px; padding:6px 13px; font-size:13px; background:var(--card); }
  .toolbar button:hover { border-color:var(--accent2); color:var(--accent); }
  .sec0 { margin:6px 0 14px; font-size:19px; } .sec0 small { font-size:12px; font-weight:400; margin-left:6px; }
  .tabs small { font-size:11px; opacity:.8; }
  .hscroll { display:flex; gap:16px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .hscroll > * { flex:none; scroll-snap-align:start; }
  .hscroll > .card.plot { width:220px; }
  .ccard { width:200px; display:flex; flex-direction:column; gap:3px; align-items:center; text-align:center; padding:20px 14px 16px; border-radius:20px; cursor:pointer;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .22s, border-color .22s; }
  .ccard:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent2) 55%,transparent); }
  .ccard .cav { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:28px; font-weight:800; color:#fff; margin-bottom:6px;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .ccard b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ccard small { color:var(--muted); font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ccard small.top { margin-top:4px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
  .card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; cursor:pointer; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; }
  .card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent2) 55%,transparent); box-shadow:0 18px 44px rgba(124,77,255,.25); }
  /* 剧情卡片：整张图铺满，文字压在图的下半部分的渐变上，但内容精简（标题 + 两行简介 + 一行标签），让图占大头 */
  .card.plot { display:block; padding:0; aspect-ratio:5/7; color:#fff; }
  .card.plot .cover { position:absolute; inset:0; height:auto; font-size:92px; padding-bottom:26%; }
  .card.plot .pbody { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:44px 14px 14px; gap:4px;
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 52%,transparent 100%); }
  .card.plot .pbody h3 { font-size:17px; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.5); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .card.plot .syn { color:rgba(255,255,255,.85); font-size:13px; line-height:1.45; }
  .card.plot .pplug { margin:0; font-size:12.5px; color:#ffd9a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }      /* 用了哪些插件：最多一行，放不下的省略号 */
  .card.plot .ptags { margin:0; font-size:12.5px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card.plot .flags { position:absolute; z-index:2; top:10px; left:10px; display:flex; gap:6px; }
  .card.plot .flags .flag { position:static; }
  .card.plot .flags .flag.mine { background:var(--grad); }
  .card.plot:hover .cover span { transform:scale(1.15) rotate(-4deg); }
  .cover { position:relative; height:132px; display:grid; place-items:center; font-size:58px; overflow:hidden;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .cover::before, .cover::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.16); filter:blur(2px); }
  .cover::before { width:150px; height:150px; right:-40px; top:-60px; }
  .cover::after { width:90px; height:90px; left:-24px; bottom:-40px; background:rgba(0,0,0,.14); }
  .cover span { position:relative; z-index:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition:transform .3s; }
  .card:hover .cover span { transform:scale(1.15) rotate(-4deg); }
  .cover em { font-style:normal; }
  .cover > img.cimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; z-index:0; }
  .card:hover .cover > img.cimg { transform:scale(1.05); } .cover > img.cimg { transition:transform .3s; }
  .cover .flag { position:absolute; z-index:2; top:10px; left:10px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; color:#fff; background:rgba(0,0,0,.38); backdrop-filter:blur(6px); }
  .cover .heat { position:absolute; z-index:2; top:10px; right:10px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; color:#fff; background:rgba(0,0,0,.38); backdrop-filter:blur(6px); }
  .pbody { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .pbody h3 { margin:0; font-size:17px; line-height:1.3; }
  .syn { margin:0; color:var(--muted); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cast { display:flex; align-items:center; }
  .cast .avatar { width:26px; height:26px; font-size:14px; margin-left:-7px; border:2px solid var(--bg); }
  .cast .avatar:first-child { margin-left:0; }
  .cast .names { margin-left:8px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
  .tag { display:inline-block; font-size:11px; padding:2px 10px; border-radius:999px; background:var(--card2); color:var(--muted); border:1px solid var(--border); }
  .card.char { aspect-ratio:3/4; padding:0; color:#fff;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .card.char > img.full { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .4s; }
  .card.char:hover > img.full { transform:scale(1.06); }
  .card.char .emo { position:absolute; inset:0 0 38% 0; display:grid; place-items:center; font-size:84px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
  .card.char .info { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:44px 14px 14px; text-align:left;
    background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 55%,transparent 100%); }
  .card.char h3 { margin:0 0 3px; font-size:17px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
  .card.char p { margin:0 0 8px; color:rgba(255,255,255,.82); font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card.char .tags { margin-top:0; padding-top:0; }
  .card.char .tag { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(6px); }
  .card.char .heat2 { position:absolute; z-index:2; top:10px; right:10px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; color:#fff; background:rgba(0,0,0,.38); backdrop-filter:blur(6px); }
  .avatar { flex:none; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--card2); font-size:30px; width:56px; height:56px; box-shadow:0 0 0 2px transparent, 0 4px 14px rgba(0,0,0,.18);
    background-clip:padding-box; position:relative; }
  .avatar img { width:100%; height:100%; object-fit:cover; }

  /* ---------- chat ---------- */
  .chat { --h:330; max-width:840px; margin:0 auto; height:calc(100dvh - var(--hh) - 56px); min-height:420px; display:flex; flex-direction:column;
    border-radius:26px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
    background:linear-gradient(180deg,hsl(var(--h) 75% 55% / .16),transparent 46%),var(--card); }
  .chat-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--bar); backdrop-filter:blur(14px); }
  .chat-head .ct { flex:1; min-width:0; } .chat-head b { font-size:17px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-head .muted { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-head .hbtn { width:38px; height:38px; padding:0; border:0; background:none; font-size:30px; line-height:1; border-radius:50%; flex:none; }
  .mdlpill { display:inline-flex; align-items:center; gap:6px; width:auto !important; flex:none; padding:5px 11px !important; border-radius:999px !important; border:1px solid var(--border); background:var(--card2); color:var(--fg); font-weight:600; font-size:12.5px !important; line-height:1.4; box-shadow:none; }
  .mdlpill svg { opacity:.65; flex:none; }
  .mdl-sub { color:#9a9aa5; font-size:13.5px; line-height:1.6; margin:2px 4px 14px; }
  .mdl-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; text-align:left; padding:16px 16px 14px; margin-bottom:10px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:#2d2d2d; color:#eee; }
  .mdl-card.on { border-color:#7c4dff; background:#2d2548; } .mdl-card.top:not(.on) { border-color:rgba(255,200,120,.35); background:linear-gradient(135deg,#2d2d2d,#352c26); }
  .mdl-name { font-size:24px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .mdl-name em { font-style:normal; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:linear-gradient(90deg,#8b5cf6,#ec4899); color:#fff; letter-spacing:0; }
  .mdl-desc { color:#c9c9d1; font-size:14.5px; line-height:1.55; padding-right:28px; } .mdl-price { color:#a78bfa; font-size:14px; font-weight:600; }
  .mdl-ck { display:none; position:absolute; right:16px; top:16px; font-style:normal; font-size:20px; color:#ddd; } .mdl-card.on .mdl-ck { display:block; }
  .chat { position:relative; }
  .chat-bottom { position:relative; flex:none; }
  .ctlrow { position:absolute; left:0; right:0; bottom:100%; display:flex; align-items:flex-end; justify-content:flex-start; gap:10px; padding:0 14px 8px; pointer-events:none; z-index:5; }
  .ctlrow > * { pointer-events:auto; }
  .msgend { display:flex; justify-content:flex-end; align-items:flex-end; gap:8px; min-height:52px; flex:none; } .msgend[hidden] { display:none; }
  .imgbtn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 6px; border:0; background:none; border-radius:12px; font-size:11px; color:var(--muted); text-shadow:0 1px 2px var(--bg); }
  .imgbtn[hidden] { display:none; }
  .imgbtn .ci { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:16px; background:var(--card); border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,.22); }
  .imgbtn:hover { transform:none; color:var(--fg); }
  .msgend .menu-wrap { display:inline-block; }
  .ctl { box-shadow:0 6px 18px rgba(0,0,0,.18); width:36px; height:36px; padding:0; border-radius:50%; font-size:18px; display:grid; place-items:center; background:var(--card); }
  .ctl[hidden], .vn[hidden] { display:none; } .vn { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .ctl:disabled { opacity:.35; }
  .menu.up { top:auto; bottom:calc(100% + 8px); }
  body.chatpage main { padding:0; max-width:none; }
  body.chatpage .chat { height:100dvh; border-radius:0; border:0; max-width:840px; }
  @media (min-width:721px) { body.chatpage main { padding:16px; } body.chatpage .chat { height:calc(100dvh - 32px); border-radius:26px; border:1px solid var(--border); } }
  .msgs { flex:1; overflow-y:auto; padding:22px 20px 10px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth; }
  .msg { max-width:86%; padding:12px 16px; border-radius:20px; white-space:pre-wrap; word-break:break-word; line-height:1.8; font-size:15.5px; animation:pop .28s ease both; }
  .msg.assistant { align-self:flex-start; background:var(--bubble); border:1px solid var(--border); border-top-left-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
  .msg.cont { animation:none; }
  .msg.user { align-self:flex-end; color:#fff; background:var(--grad); border-top-right-radius:6px; box-shadow:0 6px 20px rgba(139,92,246,.35); }
  .msg.user[data-who]:not([data-who=""])::before { content:attr(data-who); display:block; font-size:12px; font-weight:600; opacity:.88; margin:-2px 0 4px; line-height:18px; }
  .msg.user.whoimg::before { padding-left:24px; background:var(--wav) left center / 18px 18px no-repeat; }
  .msg img { display:block; max-width:min(380px,100%); border-radius:14px; cursor:zoom-in; box-shadow:0 8px 24px rgba(0,0,0,.25); }
  @keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
  .act { display:block; color:var(--muted); font-style:italic; font-size:14.5px; margin:1px 0 4px; line-height:1.7; }
  .msg.user .act { color:rgba(255,255,255,.82); }
  .seg { margin:2px 0 12px; }
  .seg:last-child { margin-bottom:0; }
  .who { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; margin-bottom:3px; letter-spacing:.3px; }
  .who i { font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--card2); display:inline-grid; place-items:center; font-size:13px; overflow:hidden; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent2) 45%,transparent); }
  .who i img { width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; }
  .env { display:flex; gap:8px; margin:8px 2px 10px; color:var(--muted); font-style:italic; font-size:14px; line-height:1.75; }
  .env::before { content:'≡'; font-style:normal; opacity:.6; flex:none; }
  .seg.narr { color:var(--muted); font-style:italic; font-size:14px; padding:8px 12px; border-left:3px solid color-mix(in srgb,var(--accent2) 60%,transparent); background:var(--card2); border-radius:8px; }
  .aff { margin-top:10px; padding:6px 12px; border-radius:14px; font-size:12px; line-height:1.5; font-weight:700; display:block; width:fit-content; max-width:100%; text-align:left; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); white-space:normal; }
  .typing { display:inline-flex; gap:5px; vertical-align:middle; margin-right:8px; }
  .typing i { width:7px; height:7px; border-radius:50%; background:var(--accent2); animation:blink 1.2s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay:.18s; } .typing i:nth-child(3) { animation-delay:.36s; }
  @keyframes blink { 0%,80%,100% { opacity:.25; transform:scale(.8); } 40% { opacity:1; transform:scale(1.15); } }
  .tt { color:var(--muted); font-size:13px; }
  .inputbar { display:flex; gap:10px; align-items:flex-end; padding:8px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bar); backdrop-filter:blur(14px); }
  .inwrap { flex:1; min-width:0; display:flex; align-items:flex-end; gap:4px; padding:4px 6px 4px 4px; border-radius:26px; border:1px solid var(--border); background:var(--card2); transition:border-color .15s, box-shadow .15s; }
  .inwrap { position:relative; }
  .inwrap.preparing { border-color:var(--accent2); background:linear-gradient(100deg,var(--card2) 30%,color-mix(in srgb,var(--accent2) 16%,var(--card2)) 50%,var(--card2) 70%) 0 0/220% 100%; animation:prepsh 1.5s linear infinite; }
  @keyframes prepsh { to { background-position:-220% 0; } }
  .inwrap .prep { display:none; position:absolute; top:50%; transform:translateY(-50%); align-items:center; gap:5px; color:var(--accent2); font-size:14.5px; pointer-events:none; }
  .inwrap .prep i { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:vptyp 1.1s infinite; } .inwrap .prep i:nth-child(2) { animation-delay:.18s; } .inwrap .prep i:nth-child(3) { animation-delay:.36s; } .inwrap .prep b { font-weight:500; margin-left:4px; }
  .inwrap.preparing textarea:placeholder-shown ~ .prep { display:flex; }
  .inwrap:focus-within { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 24%,transparent); }
  .inwrap textarea { flex:1; min-width:0; resize:none; height:40px; max-height:140px; padding:9px 6px; border:0 !important; box-shadow:none !important; background:transparent; border-radius:0; line-height:22px; overflow-y:auto; }
  .freebtn { display:flex; align-items:center; gap:3px; height:40px; padding:0 10px 0 8px; border:0; border-radius:20px; background:color-mix(in srgb,var(--accent2) 14%,transparent); font-size:13px; flex:none; }
  .freebtn span { font-size:16px; } .freebtn b { font-size:12px; color:var(--accent2); }
  .inputbar > button { width:48px; height:48px; padding:0; border-radius:50%; font-size:18px; flex:none; }
  .sugg { padding:8px 14px 0; display:flex; flex-direction:column; gap:8px; max-height:42vh; overflow-y:auto; } .sugg[hidden] { display:none; }
  .sg-head { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); } .sg-head button { width:30px; height:30px; padding:0; border-radius:50%; margin-left:6px; }
  .sg-item { text-align:left; padding:10px 14px; border-radius:16px; line-height:1.55; font-size:14.5px; background:var(--card); }
  .sg-item:hover { border-color:var(--accent2); }
  .menu-wrap { position:relative; }
  .menu { position:absolute; right:0; top:calc(100% + 8px); background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:6px; min-width:210px; z-index:20; box-shadow:0 14px 40px rgba(0,0,0,.35); }
  .menu[hidden] { display:none; }
  .menu button { display:block; width:100%; text-align:left; background:none; border:0; padding:9px 12px; border-radius:10px; }
  .menu button:hover { background:var(--card2); transform:none; }
  .menu small { display:block; color:var(--muted); font-size:12px; }

  /* ---------- list / rows / dialogs ---------- */
  .list-item { display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:18px; background:var(--card); border:1px solid var(--border); margin-bottom:12px; cursor:pointer; box-shadow:var(--shadow); transition:transform .18s, border-color .18s; }
  .list-item:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent2) 55%,transparent); }
  .list-item .avatar { width:52px; height:52px; font-size:26px; }
  .list-item .last { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(560px,58vw); }
  .row { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:16px; background:var(--card); border:1px solid var(--border); margin-bottom:10px; }
  .row .body { flex:1; min-width:0; }
  .row .body p { margin:4px 0 0; color:var(--muted); font-size:13px; white-space:pre-wrap; }
  .row button { padding:5px 12px; font-size:13px; }
  .badge { white-space:nowrap; font-size:11px; padding:2px 9px; border-radius:999px; background:var(--grad); color:#fff; margin-left:6px; font-weight:700; }
  h2.sec { margin:36px 0 4px; }
  .opt { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--card2); border:1px solid var(--border); margin-bottom:8px; cursor:pointer; }
  .opt input { width:auto; margin-top:5px; }
  dialog { border:1px solid var(--border); border-radius:22px; background:var(--bg); color:var(--fg); padding:24px; max-width:440px; width:90vw; box-shadow:0 30px 80px rgba(0,0,0,.5); }
  dialog::backdrop { background:rgba(8,6,16,.6); backdrop-filter:blur(4px); }
  .auth { max-width:400px; margin:6vh auto 0; padding:34px 30px 28px; border-radius:26px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
  .gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; padding:11px 14px; margin:4px 0 2px;
    border-radius:14px; border:1px solid var(--border); background:var(--card); color:inherit; text-decoration:none; font-weight:600; }
  .gbtn:hover { border-color:currentColor; }
  .auth .or { display:flex; align-items:center; gap:10px; margin:14px 0 4px; color:var(--muted, #888); font-size:12px; }
  .auth .or::before, .auth .or::after { content:""; flex:1; border-top:1px solid var(--border); }
  .coderow { display:flex; gap:8px; } .coderow input { flex:1; min-width:0; } .coderow button { white-space:nowrap; flex:none; }
  .auth .brand { text-align:center; margin-bottom:6px; }
  .auth .brand .logo { font-size:34px; }
  .auth h2 { text-align:center; margin-top:14px; }

  .cover .flag.mine { top:auto; bottom:10px; background:var(--grad); }
  .toolbar button.on { background:var(--grad); color:#fff; border-color:transparent; }
  .mine-item { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:var(--card); border:1px solid var(--border); margin-bottom:10px; cursor:pointer; transition:transform .15s, border-color .15s; }
  .mine-item:hover { transform:translateY(-2px); border-color:var(--accent2); }
  .mine-item .ico img { width:100%; height:100%; object-fit:cover; }
  .mine-item .ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:24px; flex:none; background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .mine-item .macts { display:flex; gap:6px; flex:none; } .mine-item .macts button { width:38px; height:38px; padding:0; border-radius:50%; font-size:16px; display:grid; place-items:center; }
  .mine-item b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mine-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mine-item small { display:block; color:var(--muted); font-size:12px; }
  /* ---------- 背景介绍 / 小说体 ---------- */
  .nar { color:var(--muted); font-style:italic; }
  .say { color:var(--fg); font-style:normal; }
  .msg.user .nar { color:rgba(255,255,255,.82); } .msg.user .say { color:#fff; }
  .intro-text { white-space:pre-wrap; line-height:1.8; font-size:14.5px; }
  .intro-text .ih { display:block; width:fit-content; margin:12px 0 4px; padding:1px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#fff; background:var(--grad); }
  .intro-text .ih:first-child { margin-top:0; }
  details.intro { align-self:stretch; flex:none; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--card2) 80%,transparent); padding:12px 18px; }
  details.intro summary { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; color:var(--accent); list-style:none; }
  details.intro summary::-webkit-details-marker { display:none; }
  details.intro summary::after { content:"▾"; margin-left:auto; color:var(--muted); transition:transform .2s; }
  details.intro:not([open]) summary::after { transform:rotate(-90deg); }
  details.intro summary small { flex:1; min-width:0; font-weight:500; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  details.intro[open] summary small { display:none; }
  details.intro[open] summary { margin-bottom:8px; }
  .pdlg { padding:0; overflow:hidden; max-width:560px; }
  .pdlg .pcover { height:120px; display:grid; place-items:center; font-size:56px; position:relative; background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  .pdlg .pcover span { filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
  .pdlg .pbody2 { padding:18px 22px 22px; max-height:56vh; overflow:auto; }
  .pdlg h3 { margin:0 0 6px; font-size:20px; }
  .pdlg .pact { display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--border); background:var(--card); }
  .cardlist { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .crow { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--border); }
  .crow .avatar { width:38px; height:38px; font-size:19px; }
  .crow p { margin:2px 0 0; font-size:13px; color:var(--muted); line-height:1.55; }
  .pdlg .cast { margin:12px 0 6px; flex-wrap:wrap; }
  .pdlg .cast .avatar { width:34px; height:34px; font-size:17px; }
  /* ---------- AI 创作向导 ---------- */
  .wiz { position:fixed; inset:0; z-index:90; display:flex; justify-content:center; background:radial-gradient(900px 520px at 12% -8%,var(--glow1),transparent 62%),radial-gradient(800px 520px at 92% -4%,var(--glow2),transparent 62%),var(--bg); }
  .wiz-in { width:100%; max-width:680px; display:flex; flex-direction:column; height:100dvh; }
  .wiz-top { display:flex; align-items:center; gap:10px; padding:14px 16px 6px; }
  .wiz-top .x { width:38px; height:38px; padding:0; border-radius:50%; font-size:18px; flex:none; }
  .dots { flex:1; display:flex; align-items:center; justify-content:center; gap:0; overflow:hidden; }
  .dot { flex:none; min-width:22px; height:22px; border-radius:999px; border:2px solid var(--border); display:grid; place-items:center; font-size:12px; color:var(--muted); }
  .dot.done { background:var(--card2); border-color:transparent; cursor:pointer; color:var(--fg); }
  .dot.cur { background:var(--grad); border-color:transparent; color:#fff; font-weight:700; padding:0 12px; height:28px; box-shadow:0 4px 14px rgba(139,92,246,.4); }
  .dl { flex:none; width:12px; height:2px; background:var(--border); }
  .wiz-body { flex:1; overflow-y:auto; padding:6px 18px 24px; }
  .wiz-foot { display:flex; gap:10px; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bar); backdrop-filter:blur(14px); }
  .wiz-foot button { flex:1; height:48px; border-radius:14px; font-weight:600; }
  .bubble { position:relative; width:fit-content; max-width:92%; margin:10px auto 14px; padding:12px 18px; border-radius:18px; background:var(--card2); border:1px solid var(--border); text-align:center; font-weight:600; font-size:16px; line-height:1.55; }
  .bubble::after { content:""; position:absolute; left:50%; bottom:-8px; width:14px; height:14px; margin-left:-7px; transform:rotate(45deg); background:var(--card2); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .blob { position:relative; width:74px; height:60px; margin:0 auto 18px; border-radius:50% 50% 46% 46%/62% 62% 38% 38%; background:radial-gradient(circle at 35% 28%,#c9f0ff 0 14%,#a98bff 46%,#7d4dff 100%); box-shadow:inset 0 -6px 12px rgba(80,30,200,.35),0 10px 24px rgba(125,77,255,.35); animation:wob 3.2s ease-in-out infinite; }
  .blob i { position:absolute; top:26px; width:6px; height:6px; border-radius:50%; background:#241a4d; } .blob i:nth-child(1) { left:23px; } .blob i:nth-child(2) { right:23px; }
  .blob b { position:absolute; left:50%; top:36px; width:12px; height:6px; margin-left:-6px; border-bottom:2px solid #241a4d; border-radius:0 0 10px 10px; }
  .blob.think { animation:wob .9s ease-in-out infinite; }
  @keyframes wob { 0%,100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-6px) scale(1.04,.96); } }
  .wlist { display:flex; flex-direction:column; gap:10px; }
  .wopt, .wcard { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:var(--card); border:1px solid var(--border); cursor:pointer; }
  .wopt small { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
  .wopt input { width:20px; height:20px; margin-top:2px; flex:none; }
  .wcard.sel { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 12%,var(--card)); }
  .wcard .radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--muted); flex:none; margin-top:2px; position:relative; }
  .wcard.sel .radio { border-color:var(--accent2); } .wcard.sel .radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent2); }
  .wc-main { flex:1; min-width:0; } .wc-main b { display:block; font-size:16px; } .wc-main p { margin:3px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
  .wc-main input, .wc-main textarea { margin-top:6px; font-size:14px; }
  .pen { width:34px; height:34px; padding:0; border-radius:10px; flex:none; background:none; border:0; color:var(--muted); font-size:16px; }
  .wadd { width:100%; padding:12px; border-radius:14px; background:var(--card2); border:1px solid var(--border); font-weight:600; }
  .wform { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:4px 16px 16px; margin-bottom:14px; }
  .wform h4 { margin:14px 0 0; font-size:15px; display:flex; align-items:center; gap:8px; }
  .wform h4 .del { margin-left:auto; padding:2px 8px; font-size:13px; }
  .wform label { font-size:12px; margin:12px 0 4px; }
  .wform textarea { font-size:14px; }
  .chipsel { display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; }
  .chipsel .sc { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:78px; padding:10px 6px; border-radius:16px; background:var(--card); border:2px solid var(--border); cursor:pointer; font-size:13px; }
  .chipsel .sc i { font-style:normal; font-size:26px; } .chipsel .sc.sel { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card)); font-weight:700; }
  .prow { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:16px; background:var(--card); border:1px solid var(--border); margin-bottom:10px; }
  .prow .th { width:84px; height:112px; border-radius:12px; background:var(--card2); display:grid; place-items:center; flex:none; overflow:hidden; font-size:30px; color:var(--muted); }
  .prow .th img { width:100%; height:100%; object-fit:cover; }
  .prow textarea { font-size:13px; } .prow .nm { font-weight:700; margin-bottom:4px; }
  .choose { display:grid; gap:12px; margin-top:6px; }
  .choose .cc { padding:18px; border-radius:20px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
  .choose .cc h3 { margin:0 0 4px; } .choose .cc p { margin:0 0 12px; color:var(--muted); font-size:14px; }
  /* ---------- 系统管理 ---------- */
  main.wide { max-width:1320px; }
  .admin { display:grid; grid-template-columns:330px minmax(0,1fr); gap:22px; align-items:start; }
  .acol { position:sticky; top:calc(var(--hh) + 16px); }
  .acol select { margin-bottom:4px; }
  .alist { display:flex; flex-direction:column; gap:6px; max-height:calc(100dvh - 330px); min-height:160px; overflow:auto; margin-top:12px; padding-right:4px; }
  .aitem { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--border); cursor:pointer; transition:border-color .15s, background .15s; }
  .aitem:hover { border-color:color-mix(in srgb,var(--accent2) 50%,transparent); }
  .aitem.sel { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card)); }
  .aitem .ico { font-size:24px; width:36px; height:36px; text-align:center; flex:none; overflow:hidden; border-radius:10px; display:grid; place-items:center; }
  .aitem .ico img { width:100%; height:100%; object-fit:cover; display:block; }
  .aitem b { display:block; font-size:14px; line-height:1.3; }
  .aitem small { display:block; color:var(--muted); font-size:12px; }
  #aed { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:22px 26px 28px; box-shadow:var(--shadow); min-width:0; }
  #aed h2 small { font-size:13px; font-weight:500; }
  #aed textarea { font-size:14px; line-height:1.6; }
  #aed .lock { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); margin-left:8px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .xcs { display:flex; flex-wrap:wrap; gap:8px 16px; }
  .xcs label { display:flex; gap:6px; align-items:center; margin:0; color:var(--fg); font-weight:500; }
  .xcs input { width:auto; }
  .newbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
  .profbtns { flex:1 0 100%; display:flex; gap:10px; margin-top:8px; } .profbtns button { flex:1; padding:11px; font-weight:600; }
  .actrows { display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; }
  .ptchip { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:999px; font-size:13px; font-weight:700; margin-right:6px; }
  .opswrap { max-width:1180px; margin:0 auto; } .opshead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .opsnav { display:flex; gap:6px; flex-wrap:wrap; }
  .opsnav button.active { background:var(--grad); color:#fff; border-color:transparent; } .tabs .cnt { margin-left:4px; font-size:12px; opacity:.7; }
  .optable { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card); border-radius:14px; overflow:hidden; } .optable th, .optable td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
  .optable th { font-size:12px; color:var(--muted); font-weight:600; } .optable button { padding:4px 10px; font-size:12.5px; }
  .batchbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; position:sticky; top:64px; background:var(--bg, #fff); padding:8px 0; z-index:5; }
  .brow { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:14px; margin-bottom:8px; background:var(--card); cursor:pointer; font-weight:400; }
  .brow .ico { width:40px; height:40px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; } .brow .ico img { width:100%; height:100%; object-fit:cover; }
  .tp .tg.gen { background:color-mix(in srgb, var(--accent) 18%, transparent); }
  .two3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:10px; }
  .kpi { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 14px; } .kpi small { color:var(--muted); display:block; } .kpi b { font-size:24px; }
  .acol .tabs { flex-wrap:wrap; }
  .opswrap .toolbar select { width:auto; flex:none; } .opswrap .toolbar { align-items:center; } .opswrap .toolbar label { font-weight:400; flex:none; }
  dialog .two > div, dialog .two3 > * { min-width:0; } dialog .two input, dialog .two select { width:100%; box-sizing:border-box; }
  .chip { padding:5px 11px; border-radius:999px; font-size:13px; } .chip.on { background:var(--grad); color:#fff; border-color:transparent; }
  .tp { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .tp .tg { display:inline-flex; align-items:center; gap:4px; padding:5px 6px 5px 11px; border-radius:999px; background:var(--chip, rgba(139,92,246,.12)); font-size:13px; }
  .tp .tg.cand { border:1px dashed var(--muted); } .tp .tg button { padding:0 6px; border:0; background:none; box-shadow:none; font-size:12px; }
  .tp .tpadd, .tp .tpai { padding:5px 12px; border-radius:999px; font-size:13px; } .tphint { color:#e5484d; display:block; margin-top:4px; }
  .tagdlg { width:min(560px, 94vw); } .tdbody { max-height:52vh; overflow:auto; margin-top:10px; } .tdgrp { margin-bottom:12px; } .tdgrp > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .stylebox { margin:14px 0; padding:10px 14px; border:1px solid var(--border); border-radius:14px; } .stylebox summary { cursor:pointer; font-weight:600; }
  .stylegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:4px 12px; margin-top:8px; }
  .sg-kw { display:flex; flex-wrap:wrap; gap:6px; } .sg-item.kw { width:auto; border-radius:999px; padding:7px 14px; }
  .grid.hrow { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
  .grid.hrow > * { scroll-snap-align:start; }
  @media (max-width: 720px) { .grid.hrow { grid-auto-columns:46%; } }
  .linkbtn { background:none; border:0; box-shadow:none; color:var(--accent); padding:2px 4px; font-weight:600; cursor:pointer; }
  .wallet { max-width:860px; margin:0 auto; }
  .wl-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow); }
  .wbal { font-size:40px; font-weight:800; line-height:1.1; }
  .wgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .wpack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border-radius:16px; text-align:left; }
  .wpack b { font-size:20px; } .wpack em { font-style:normal; font-size:12px; color:var(--accent); font-weight:700; }
  .wrow { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .wrow:last-child { border-bottom:0; } .wplus { color:#1f9d55; font-weight:700; } .wminus { font-weight:700; }
  .wtest { background:#fff4d6; color:#7a5b00; border-radius:12px; padding:8px 12px; font-size:13px; margin-bottom:12px; }
  .actrows button { display:flex; justify-content:space-between; align-items:center; text-align:left; padding:14px 16px; border-radius:14px; font-weight:600; }
  .mehead .cav img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .mehead .cav { overflow:hidden; } dialog .cav { width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:28px; font-weight:800; color:#fff; flex:none; background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); } dialog .cav img { width:100%; height:100%; object-fit:cover; }
  .mehead { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
  .mehead .cav { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:800; color:#fff; flex:none;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); }
  h2.sec small { font-size:14px; font-weight:500; }
  .rolebox { display:flex; gap:14px; padding:12px; margin:8px 0; border:1px solid var(--border); border-radius:16px; background:var(--card); }
  .rolebox .rb-av { display:flex; flex-direction:column; gap:6px; align-items:stretch; width:104px; flex:none; text-align:center; }
  .rolebox .rb-av .avatar { align-self:center; }
  .rolebox .rb-av button { padding:4px 6px; font-size:12px; } .rolebox .rb-av select { padding:4px 26px 4px 10px; font-size:12px; background-position:right 9px center; }
  .rolebox .rb-main { flex:1; min-width:0; }
  .coverbox { display:flex; gap:16px; align-items:flex-start; }
  .cvprev { width:120px; aspect-ratio:3/4; flex:none; border-radius:14px; overflow:hidden; display:grid; place-items:center; font-size:48px; color:#fff;
    background:linear-gradient(135deg,hsl(var(--h,200) 78% 55%),hsl(calc(var(--h,200) + 48) 72% 36%)); }
  .cvprev img { width:100%; height:100%; object-fit:cover; }
  select[title="画风"] { padding:6px 28px 6px 10px; font-size:13px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237d7d99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; }
  .cvact { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
  .cvact button, .cvact select { height:40px; box-sizing:border-box; padding:0 14px; font-size:14px; line-height:1; }
  .cvact select { width:auto; padding-right:34px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237d7d99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:12px; }
  .savebar { position:sticky; bottom:0; display:flex; gap:10px; align-items:center; margin:22px -26px -28px; padding:14px 26px; border-top:1px solid var(--border); background:var(--bar); backdrop-filter:blur(14px); border-radius:0 0 22px 22px; }
  @media (max-width:560px) { .rolebox { flex-direction:column; } .rolebox .rb-av { width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; } .coverbox { flex-direction:column; } }
  body.immersive header { display:none; }
  @media (max-width:700px) { body.imm-m header { display:none; } }      /* 手机上：子页面（有自己返回按钮的）不显示顶部栏 */
  .pp { max-width:1000px; margin:0 auto; padding-bottom:96px; }
  .pp-cover { position:relative; aspect-ratio:3/4; max-height:76vh; width:100%; overflow:hidden; display:grid; place-items:center; font-size:110px; color:#fff;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); border-radius:22px; }
  .pp-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pp-top { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; }
  .cr-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; position:relative; z-index:30; }      /* 菜单要盖在下面的资料卡上面 */
  .hbtn2 { width:40px; height:40px; padding:0; border:0; background:none; font-size:28px; line-height:1; border-radius:50%; }
  .cr-top .pp-menu { color:#eee; } .cr-top .pp-menu-wrap { height:40px; }
  .mhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; } .mhead .mnew { flex:none; padding:8px 16px; font-size:14px; }      /* 「我的创作」标题右边放新建按钮：列表很长时也一眼找到 */
  .cr-bar { display:flex; justify-content:space-between; align-items:center; margin:6px 0 14px; color:var(--muted); } .cr-bar select { width:auto; padding:6px 30px 6px 14px; font-size:13px; border-radius:999px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237d7d99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:12px; }      /* 自己画的下拉箭头，右边留出位置，文字不压箭头 */
  .pp-like { position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; border:0; border-radius:999px; color:#fff; font-size:15px; font-weight:600; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); }
  .pp-like .hrt { font-size:20px; line-height:1; } .pp-like.on .hrt { color:#ff3b4f; } .pp-like:hover { transform:none; }
  .bellbtn { position:relative; width:38px; height:38px; padding:0; border:0; background:none; font-size:20px; border-radius:50%; }
  .bellbtn i { position:absolute; top:1px; right:-1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#ff3b4f; color:#fff; font-size:11px; font-style:normal; font-weight:700; line-height:17px; text-align:center; } .bellbtn i[hidden] { display:none; }
  .nc { max-width:760px; margin:0 auto; padding-bottom:84px; }
  .nc-sec { color:var(--muted); font-size:14px; padding:18px 4px 8px; }
  .nc-item { display:flex; gap:14px; align-items:center; padding:14px 6px; border-bottom:1px solid var(--border); cursor:pointer; position:relative; }
  .nc-item.unread::before { content:""; position:absolute; left:-2px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#ff3b4f; }
  .nc-av { flex:none; } .nc-sys { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--card2); border:1px solid var(--border); font-size:20px; }
  .nc-body { flex:1; min-width:0; } .nc-top { display:flex; justify-content:space-between; gap:10px; font-size:13px; } .nc-text { margin-top:3px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; }
  .nc-x { flex:none; width:30px; height:30px; padding:0; border:0; background:none; color:var(--muted); border-radius:50%; }
  .nc-foot { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:10px; justify-content:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--bar); backdrop-filter:blur(16px); border-top:1px solid var(--border); } .nc-foot[hidden] { display:none; } .nc-foot button { flex:1; max-width:240px; height:44px; border-radius:12px; }
  .switchrow { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; padding:14px 4px; border-bottom:1px solid var(--border); font-size:15px; font-weight:500; color:var(--fg); text-align:left; } .switchrow input { width:44px; height:24px; flex:none; accent-color:var(--accent2); }
  .msg { -webkit-touch-callout:none; }
  dialog.sheet { width:100%; max-width:560px; margin:auto auto 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); border:0; border-radius:26px 26px 0 0; background:#222; color:#eee; box-shadow:0 -10px 40px rgba(0,0,0,.4); }
  dialog.sheet::backdrop { background:rgba(0,0,0,.5); } dialog.sheet:not([open]) { display:none; }
  .sh-grip { width:42px; height:5px; border-radius:3px; background:#555; margin:2px auto 14px; }
  .sg { background:#333; border-radius:16px; margin-bottom:12px; overflow:hidden; }
  .sg button { display:flex; align-items:center; gap:16px; width:100%; padding:17px 18px; border:0; border-radius:0; background:none; color:#eee; font-size:16.5px; text-align:left; border-bottom:1px solid rgba(255,255,255,.07); }
  .sg button:last-child { border-bottom:0; } .sg button i { font-style:normal; width:24px; text-align:center; font-size:19px; } .sg button.danger { color:#ff453a; } .sg button:hover { background:rgba(255,255,255,.06); transform:none; }
  dialog.capdlg { width:100%; max-width:640px; height:100dvh; max-height:100dvh; margin:0 auto; padding:0; border:0; border-radius:0; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); }
  dialog.capdlg:not([open]) { display:none; } dialog.capdlg::backdrop { background:#000; }
  .cap-top { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); } .cap-top b { font-size:17px; }
  .cap-top button { border:0; background:none; padding:6px 12px; font-size:24px; border-radius:10px; } .cap-top button.link { font-size:15px; color:var(--accent2); font-weight:600; } .cap-top span { display:flex; }
  .cap-list { flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
  .capitem { border:2px solid transparent; border-radius:18px; padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:8px; } .capitem.sel { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 8%,transparent); }
  .capitem .msg { max-width:100%; animation:none; } .capitem * { pointer-events:none; }
  .cap-foot { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); } .cap-foot button { width:100%; height:50px; border-radius:14px; font-size:16px; font-weight:600; }
  .capwrap { position:fixed; left:-10000px; top:0; padding:18px; background:var(--bg); display:flex; flex-direction:column; gap:12px; font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:var(--fg); }
  .capwrap * { animation:none !important; transition:none !important; } .capwrap .msg { max-width:92%; } .capwrap .cw-row { display:flex; flex-direction:column; gap:8px; }
  .cw-title { font-weight:700; font-size:17px; padding-bottom:4px; } .cw-mark { text-align:center; font-size:12px; color:var(--muted); letter-spacing:1px; padding-top:6px; }
  dialog.drawer { margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(86vw,390px); padding:0; border:0; border-radius:0; background:#222; color:#eee; animation:drIn .22s ease; }
  dialog.drawer::backdrop { background:rgba(0,0,0,.55); } dialog.drawer:not([open]) { display:none; } @keyframes drIn { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
  .dr-in { height:100%; display:flex; flex-direction:column; padding:22px 18px calc(10px + env(safe-area-inset-bottom)); }
  .dr-in > button { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; width:100%; padding:15px 6px; border:0; border-radius:12px; background:none; color:#eee; text-align:left; font-size:17px; }
  .dr-in > button b { font-weight:500; flex:1; } .dr-in > button small { flex:1 0 100%; color:#9a9aa5; font-size:13.5px; line-height:1.5; } .dr-in > button span { color:#9a9aa5; font-size:15px; } .dr-in > button i { font-style:normal; color:#9a9aa5; font-size:22px; }
  .dr-in > button:hover { background:rgba(255,255,255,.05); transform:none; } .dr-in hr { border:0; border-top:1px solid rgba(255,255,255,.1); margin:12px 0; }
  .dr-foot { margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:6px; } .dr-foot button { width:100%; padding:15px 6px; border:0; background:none; color:#aaa; font-size:17px; text-align:left; }
  .sh-title { color:#9a9aa5; font-size:15px; padding:0 4px 12px; } .sh-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; } .sh-col b { font-weight:600; font-size:16px; } .sh-col small { color:#9a9aa5; font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sh-empty { padding:22px 16px; color:#9a9aa5; text-align:center; font-size:14px; line-height:1.6; }
  .pf-add { width:46px; height:46px; border-radius:50%; background:#444; display:grid; place-items:center; font-size:22px; flex:none; }
  .pf-row.cur { cursor:default; }
  .pf-row, .bm-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; } .pf-row:last-child, .bm-row:last-child { border-bottom:0; }
  .pf-av { position:relative; width:48px; height:48px; border-radius:50%; background:#555; display:grid; place-items:center; font-size:22px; flex:none; } .pf-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .pf-ck { position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; background:var(--accent2); color:#fff; font-size:12px; font-style:normal; display:grid; place-items:center; }
  .pf-def { font-style:normal; font-size:11px; padding:1px 7px; border-radius:8px; background:#444; color:#bbb; margin-left:6px; } .pf-edit { width:34px; height:34px; padding:0; border:0; background:none; color:#aaa; font-size:17px; border-radius:50%; }
  .sg button.pf-edit { width:34px; flex:none; height:34px; padding:0; gap:0; display:grid; place-items:center; border-bottom:0; }      /* .sg button 的 width:100% 会把编辑按钮撑满整行，把名字挤成一列 */
  .bm-row i { font-style:normal; font-size:20px; }
  .pf-form { gap:6px; } .pf-head { display:flex; align-items:center; gap:16px; margin-bottom:10px; } .pf-nm { font-size:22px; } .pf-l { margin:14px 0 6px; font-size:16px; font-weight:600; color:var(--fg); }
  .pf-avbtn { position:relative; width:84px; height:84px; padding:0; border-radius:50%; border:0; background:var(--card2); font-size:36px; display:grid; place-items:center; } .pf-avbtn img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .pf-avbtn i { position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%; background:var(--accent2); color:#fff; font-style:normal; font-size:14px; display:grid; place-items:center; }
  .pf-cnt { color:var(--accent2); font-size:13px; } .pf-del { margin-top:16px; border:0; background:none; color:#e5484d; padding:10px; }
  .msg.bm { position:relative; } .msg.bm::after { content:""; position:absolute; right:-24px; bottom:8px; width:18px; height:18px; background:#8b8b96; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 11.6l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .6 1.4l9 9a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8zM7.5 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 11.6l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .6 1.4l9 9a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8zM7.5 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .bm-editbtn { border:0; background:none; color:var(--accent2); font-size:16px; min-width:40px; } .bm-list .bm-row { padding:16px 4px; } .bm-list .sh-col b { font-weight:500; font-size:17px; color:var(--fg); } .bm-list .sh-col small { white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; margin-top:6px; font-size:14px; line-height:1.5; }
  .msg.flash { animation:flash 1.6s ease; } @keyframes flash { 0%,60% { box-shadow:0 0 0 3px var(--accent2); } 100% { box-shadow:0 0 0 0 transparent; } }
  .cm-banner { display:flex; align-items:center; gap:8px; width:100%; margin:12px 0 4px; padding:14px 16px; border-radius:14px; border:1px solid var(--accent2); background:var(--card); text-align:left; }
  .cm-banner span { color:var(--accent2); font-weight:700; } .cm-banner b { flex:1; font-weight:600; } .cm-banner i { font-style:normal; color:var(--muted); font-size:20px; }
  .seeall { color:var(--accent2); font-weight:700; font-size:14px; cursor:pointer; }
  .cm-card { width:260px; padding:14px; border-radius:16px; background:var(--card); border:1px solid var(--border); cursor:pointer; }
  .cm-card-h { display:flex; align-items:center; gap:8px; } .cm-card-h b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; } .cm-card-h .muted { font-size:12px; }
  .cm-card p { margin:10px 0 8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .wav { width:32px; height:32px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:none; background:var(--card2); font-weight:700; font-size:14px; } .wav img { width:100%; height:100%; object-fit:cover; }
  .cm { max-width:760px; margin:0 auto; padding-bottom:110px; }
  .cm-head { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:10; padding:10px 0; background:var(--bg); } .cm-head b { flex:1; text-align:center; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cm-head #cmtotal { min-width:40px; padding-right:14px; text-align:right; }      /* 评论数别贴着右边缘 */
  .cm-tabs { display:flex; border-bottom:1px solid var(--border); } .cm-tabs button { flex:1; border:0; border-radius:0; background:none; padding:12px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; } .cm-tabs button.on { color:var(--fg); border-bottom-color:var(--fg); } .cm-tabs button:hover { transform:none; }
  .cm-item { display:flex; gap:12px; padding:16px 2px; } .cm-item.reply { padding:10px 0 4px; } .cm-item .wav.sm { width:34px; height:34px; cursor:pointer; } .cm-item.reply .wav.sm { width:28px; height:28px; }
  .cm-item.hid .cm-text { opacity:.55; } .cm-hidden { font-size:12px; color:var(--accent); margin:2px 0; }
  .cm-body { flex:1; min-width:0; } .cm-meta { display:flex; align-items:center; gap:10px; } .cm-meta b { font-size:14px; color:var(--muted); font-weight:600; cursor:pointer; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cm-meta .muted { font-size:12.5px; } .cm-more button { width:30px; height:30px; padding:0; border:0; background:none; font-size:20px; } .cm-more .pp-menu { top:32px; z-index:20; min-width:150px; } .cm-more { height:30px; }
  .cm-text { margin:4px 0 8px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
  .cm-acts button.on .hrt { color:#ff3b4f; }
  .cm-acts { display:flex; gap:18px; } .cm-acts button { padding:2px 0; border:0; background:none; color:var(--muted); font-size:14px; } .cm-acts button:hover { transform:none; color:var(--fg); } .cm-acts button.on { color:#ff3b4f; }
  .cm-show { border:0; background:none; color:var(--muted); font-weight:600; padding:6px 0; }
  .cm-replies { border-left:2px solid var(--border); margin-top:6px; padding-left:12px; } .cm-replies:empty { display:none; }
  .cm-more-btn { display:block; margin:10px auto; }
  .cm-input { position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--bar); backdrop-filter:blur(16px); border-top:1px solid var(--border); }
  .cm-input > * { max-width:760px; margin-left:auto; margin-right:auto; } .cm-row { display:flex; gap:10px; align-items:flex-end; } .cm-row textarea { flex:1; resize:none; max-height:120px; border-radius:22px; padding:11px 16px; } .cm-row button { width:44px; height:44px; padding:0; border-radius:50%; flex:none; }
  .cm-replyto { font-size:13px; color:var(--muted); margin-bottom:6px; } .cm-replyto[hidden] { display:none; } .cm-replyto button { border:0; background:none; padding:0 6px; }
  .msg.imgmsg { flex:none; position:relative; padding:0; background:none; border:0; box-shadow:none; overflow:hidden; border-radius:18px; max-width:min(420px,92%); }
  .msg.imgmsg > img { display:block; width:100%; max-width:none; border-radius:18px; cursor:zoom-in; }
  .msg.imgmsg.loading > img { opacity:.45; filter:blur(2px); }
  .imgact { position:absolute; left:10px; bottom:10px; display:flex; gap:8px; }
  .imgact button { width:38px; height:38px; padding:0; border:0; border-radius:50%; font-size:17px; display:grid; place-items:center; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); filter:grayscale(1) brightness(1.6); }
  .imgact button.on { filter:none; background:rgba(124,77,255,.75); } .imgact button:hover { transform:none; }
  .snap-skel { flex:none; align-self:flex-start; width:min(420px,92%); aspect-ratio:1/1; border-radius:20px; background:var(--card); border:1px solid var(--border); display:grid; place-items:center; align-content:center; gap:14px; text-align:center; padding:20px; }
  .snap-skel .spin { width:38px; height:38px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent2); animation:spin 1s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .snap-skel .sk-t b { display:block; font-size:17px; margin-top:6px; } .snap-skel .sk-t p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.6; } .snap-skel .sk-t p.sk-n { margin-top:10px; font-size:12.5px; color:var(--accent2); }
  dialog.snapdlg { width:100%; max-width:560px; height:100dvh; max-height:100dvh; margin:0 auto; padding:0; border:0; border-radius:0; display:flex; flex-direction:column; background:#111; color:#eee; }
  dialog.snapdlg:not([open]) { display:none; } dialog.snapdlg::backdrop { background:#000; }
  .snap-top { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; } .snap-top b { font-size:17px; } .snap-top span { display:flex; gap:6px; }
  .snap-top button { width:42px; height:42px; padding:0; border:0; background:none; color:#eee; font-size:22px; border-radius:50%; }
  .snap-img { flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; } .snap-img img { max-width:100%; max-height:100%; object-fit:contain; }
  .snap-acts { display:flex; justify-content:space-around; padding:12px 6px 6px; } .snap-acts button { border:0; background:none; color:#bbb; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px; padding:6px 14px; } .snap-acts button i { font-style:normal; font-size:22px; filter:grayscale(1) brightness(1.5); } .snap-acts button.on { color:#fff; } .snap-acts button.on i { filter:none; } .snap-acts button:hover { transform:none; }
  .snap-share { margin:6px 16px calc(16px + env(safe-area-inset-bottom)); height:50px; border-radius:12px; font-size:16px; font-weight:600; }
  dialog.lightbox { max-width:96vw; max-height:96vh; width:auto; padding:0; border:0; background:none; box-shadow:none; } dialog.lightbox img { display:block; max-width:96vw; max-height:92vh; border-radius:12px; }
  .cm-img { display:block; max-width:min(320px,100%); border-radius:12px; margin:4px 0 8px; cursor:zoom-in; } .cm-img.sm { max-height:140px; width:auto; margin:6px 0; }
  .pp-top { align-items:flex-start; } .pp-tr { display:flex; gap:10px; align-items:flex-start; } .pp-menu-wrap { position:relative; display:flex; height:42px; }
  .pp-menu { position:absolute; right:0; top:50px; min-width:190px; z-index:50; background:#222; color:#eee; border-radius:16px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.45); }
  .pp-menu[hidden] { display:none; }
  .pp-menu button { display:block; width:100%; width:100% !important; height:auto !important; text-align:left; padding:14px 18px !important; border-radius:0 !important; background:none !important; color:#eee !important; font-size:15px !important; border:0; border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:none !important; }
  .pp-menu button:last-child { border-bottom:0; } .pp-menu button:hover { background:rgba(255,255,255,.07) !important; transform:none; }
  dialog.cfm { max-width:400px; text-align:center; } dialog.cfm h3 { margin:4px 0 12px; font-size:19px; } dialog.cfm p { margin:0 0 12px; color:var(--muted); line-height:1.6; }
  .cfm-notes { font-size:12.5px; color:var(--muted); line-height:1.7; margin-bottom:18px; opacity:.85; }
  .cfm-btns { display:flex; gap:10px; margin-top:16px; } .cfm-btns button { flex:1; height:46px; border-radius:12px; font-weight:600; }
  dialog.cfm .opt { text-align:left; }
  .pp-top button { width:42px; height:42px; padding:0; border-radius:50%; border:0; font-size:22px; color:#fff; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); }
  .pp-main h1 { margin:0 0 6px; font-size:28px; line-height:1.25; }
  .pp-syn { margin:0 0 10px; font-size:16px; font-weight:600; }
  .pp-tags { color:var(--muted); margin-bottom:10px; }
  .pp-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .pp-chips span { font-size:12px; padding:3px 10px; border-radius:8px; background:var(--card2); color:var(--muted); }
  .pp-owner { display:flex; align-items:center; gap:10px; padding:12px 0; margin-bottom:6px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--muted); } .pp-owner[data-uid] { cursor:pointer; }
  .pp-owner .wav { width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--card2); font-weight:700; } .pp-owner .wav img { width:100%; height:100%; object-fit:cover; }
  .pp-h { margin:26px 0 10px; font-size:19px; }
  .pp-cast { display:grid; gap:10px; } .pp-char { display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:16px; background:var(--card); border:1px solid var(--border); }
  .ob { display:flex; flex-direction:column; gap:12px; }
  .ob-nar { font-style:italic; color:var(--muted); padding:0 4px; line-height:1.8; white-space:pre-wrap; }
  .ob-row { display:flex; gap:10px; align-items:flex-start; } .ob-av { width:42px !important; height:42px !important; font-size:20px !important; }
  .ob-who { font-size:12px; color:var(--muted); margin-bottom:3px; }
  .ob-msg { display:inline-block; padding:10px 14px; border-radius:6px 18px 18px 18px; background:var(--bubble); border:1px solid var(--border); white-space:pre-wrap; line-height:1.7; }
  .pp-bar { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--bar); backdrop-filter:blur(16px); border-top:1px solid var(--border); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .pp-bar-in { max-width:1000px; margin:0 auto; display:flex; gap:12px; } .pp-bar button { height:50px; border-radius:14px; font-size:16px; font-weight:600; }
  .pp-bar .favbtn { width:64px; flex:none; font-size:24px; padding:0; color:var(--accent2); } .pp-bar .primary { flex:1; }
  @media (min-width:900px) {
    .pp { display:grid; grid-template-columns:380px 1fr; gap:36px; align-items:start; }
    .pp-cover { position:sticky; top:24px; max-height:calc(100vh - 140px); }
    .pp-bar-in { padding-left:416px; }
  }
  @media (max-width:899px) { main.wide .pp { margin:-16px -14px 0; max-width:none; } .pp-cover { border-radius:0; } .pp-main { padding:18px 16px 0; } }
  .iconbtn { width:38px; height:38px; padding:0; border-radius:50%; font-size:16px; display:grid; place-items:center; flex:none; }
  .list-item b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .libhead { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 10px; } .libhead h3 { margin:0; font-size:18px; } .libhead a { color:var(--muted); cursor:pointer; font-size:14px; }
  .fav-row { gap:12px; padding-bottom:6px; }
  .ftile { width:88px; cursor:pointer; } .ftile .fcov { width:88px; height:118px; border-radius:12px; overflow:hidden; display:grid; place-items:center; font-size:38px; color:#fff;
    background:linear-gradient(135deg,hsl(var(--h) 78% 55%),hsl(calc(var(--h) + 48) 72% 36%)); box-shadow:var(--shadow); } .ftile img { width:100%; height:100%; object-fit:cover; }
  .ftile .ftt { margin-top:6px; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:100; padding:10px 20px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:pop .25s ease both; }
  .toast.bad { background:var(--accent); color:#fff; }
  @media (max-width:900px) { .admin { grid-template-columns:1fr; } .acol { position:static; } .alist { max-height:260px; } .two { grid-template-columns:1fr; } }

  /* ---------- mobile ---------- */
  @media (max-width:720px) {
    /* 手机上固定条的毛玻璃（backdrop-filter）滚动时每帧都要重新模糊，是卡顿的常见来源：换成不透明背景 */
    .pp-bar, .cm-input, .nc-foot, .inputbar, .chat-head, .cm-head, nav, .savebar, .wiz-foot { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:var(--bg) !important; }
    :root { --hh:56px; }
    /* header 上的 backdrop-filter 会让内部 fixed 元素以 header 为定位参照，手机端底部导航需要去掉它 */
    header { padding:0 16px; backdrop-filter:none; -webkit-backdrop-filter:none; background:color-mix(in srgb,var(--bg) 94%,transparent); }
    nav { position:fixed; left:0; right:0; bottom:0; margin:0; gap:0; height:calc(64px + env(safe-area-inset-bottom)); padding:6px 8px env(safe-area-inset-bottom);
      background:var(--bar); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px); border-top:1px solid var(--border); justify-content:space-around; z-index:50; }
    nav button { flex-direction:column; gap:0; padding:6px 2px; font-size:11px; border-radius:16px; flex:1; min-width:0; white-space:nowrap; }
    nav button i { font-size:20px; line-height:1.3; }
    header .langbox { margin-left:auto; padding:0; } header .userbox { display:none; } #nav-mine { display:flex; } .mine-item { padding:10px 12px; gap:10px; } .mine-item .ico { width:52px; height:52px; } #uilang { padding:6px 26px 6px 10px; font-size:13px; }
    main { padding:16px 14px calc(90px + env(safe-area-inset-bottom)); }
    .grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .card.plot .cover { font-size:64px; }
    .card.plot .pbody { padding:34px 10px 10px; } .card.plot .pbody h3 { font-size:15px; } .card.plot .syn { font-size:12.5px; }
    .card.char .info { padding:36px 10px 10px; } .card.char h3 { font-size:15px; } .card.char .emo { font-size:64px; }
    .msg { max-width:92%; font-size:15px; }
    .toolbar input { flex:1 1 100%; min-width:0; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }