:root {
    /* 天使禁猎区 · 浅色默认配色 */
    --c1: #ffffff; --c2: #e5e5df; --c3: #c7d9dd; --c4: #b9c8cb;
    --ink: #35424a; --ink-2: #7d8a91;
    --bg: #eef0ea; --pane-bg: #ffffff; --text: #35424a; --text-soft: #7d8a91;
    --border: #d9ddda; --accent: #5d8290; --accent-2: #8aa9b3; --accent-soft: #e4eaeb;
    --user-bubble: #e7edef; --hover: #eef1f0; --code-bg: #f1f3f0;
    --page-bg: #dfe3e0;
    --screen-bg: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #e7ebe8 45%, #c7d9dd 100%);
    --glass-bg: rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.7);
    --glass-shadow: 0 10px 30px rgba(53,66,74,.14);
    --dock-bg: rgba(255,255,255,.26); --dock-border: rgba(255,255,255,.55);
    --wall-veil: rgba(247,249,248,.70);
  }
  [data-theme="dark"] {
    --c1: #ffffff; --c2: #e5e5df; --c3: #c7d9dd; --c4: #b9c8cb;
    --bg: #161b20; --pane-bg: #1f262c; --text: #e6eaec; --text-soft: #8b97a0;
    --border: #313b42; --accent: #6f97a3; --accent-2: #9bc0c9; --accent-soft: #243036;
    --user-bubble: #2b333a; --hover: #2a3238; --code-bg: #1f262b;
    --ink: #e6eaec; --ink-2: #8b97a0;
    --page-bg: #0c0c10;
    --screen-bg: radial-gradient(120% 120% at 50% 0%, #2a3238 0%, #161b20 55%, #0e1215 100%);
    --glass-bg: rgba(40,48,55,.6); --glass-border: rgba(255,255,255,.12);
    --glass-shadow: 0 10px 30px rgba(0,0,0,.4);
    --dock-bg: rgba(58,70,80,.26); --dock-border: rgba(255,255,255,.14);
    --wall-veil: rgba(16,20,24,.72);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    touch-action: manipulation; /* 禁用双击缩放手势 */
    user-select: none; -webkit-user-select: none; /* 禁用长按文本选择/复制菜单 */
    -webkit-touch-callout: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--page-bg);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; overflow: hidden; line-height: 1.6;
    transition: background .25s;
  }
  .phone {
    width: 430px; max-width: 96vw; height: 900px; max-height: 95vh;
    background: #0a0a0c; border-radius: 50px; padding: 13px;
    box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 2px #2c2c33; flex-shrink: 0;
  }
  .screen {
    --kb: 0px;
    position: relative; width: 100%; height: 100%; background: var(--screen-bg);
    border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; transition: background .25s;
  }
  .statusbar { position: relative; z-index: 260; height: 44px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 6px; font-size: 13px; font-weight: 600; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.22); }

  /* Home */
  #homeView { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }
  .home-edit-bar { display: none; align-items: center; justify-content: space-between; padding: 8px 18px; flex-shrink: 0; }
  #homeView.editing .home-edit-bar { display: flex; }
  .home-edit-bar .add-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font-size: 22px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
  .home-edit-bar .done-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--accent); padding: 7px 18px; border-radius: 20px; font-size: 13px; cursor: pointer; flex-shrink: 0; }
  /* Paged home: each page is a fixed 4 x 6 grid */
  .home-pager { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-pager::-webkit-scrollbar { display: none; }
  .home-page { min-width: 100%; width: 100%; height: 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 6px 14px; box-sizing: border-box; }
  .home-dots { flex-shrink: 0; display: flex; gap: 6px; justify-content: center; align-items: center; padding: 4px 0 6px; min-height: 16px; }
  .home-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(53,66,74,.22); transition: all .2s; }
  .home-dots .dot.on { background: var(--accent); width: 16px; border-radius: 3px; }
  .home-dock { flex-shrink: 0; margin: 0 14px calc(16px + env(safe-area-inset-bottom)); min-height: 84px; border-radius: 28px; background: var(--dock-bg); border: 1px solid var(--dock-border); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 10px 34px rgba(53,66,74,.16), inset 0 1px 0 rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 5px 14px; transition: outline-color .15s, background .2s; }
  .home-dock.over { outline: 2px dashed var(--accent); outline-offset: -5px; }
  .home-dock .dock-empty { flex: 1; text-align: center; font-size: 11px; color: var(--text-soft); }
  .home-dock .dock-item { position: relative; width: 66px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: grab; touch-action: none; }
  .home-dock .dock-item:active { cursor: grabbing; }
  .home-dock .dock-item .app-tile { gap: 4px; }
  /* Dock 里的图标与桌面同尺寸（60×60），靠减小 dock 内边距保持栏体高度不变 */
  .home-dock .dock-item .app-tile .ic { width: 60px; height: 60px; border-radius: 16px; }
  .home-dock .dock-item .ic svg { width: 29px; height: 29px; }
  .home-dock .dock-item .app-tile .nm { display: block; font-size: 10px; max-width: 62px; }
  .home-dock .dock-item.dragging { opacity: .35; }
  .home-item { position: relative; border-radius: 20px; cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-width: 0; min-height: 0; }
  #homeView.editing .home-item { touch-action: none; }
  .home-item:active { cursor: grabbing; }
  .home-item.dragging { opacity: .35; }
  .home-item.s1 { grid-column: span 1; grid-row: span 1; }
  .home-item.s2 { grid-column: span 2; grid-row: span 2; padding: 7px; }
  /* 2x2 卡片四边各收 7px：卡片本身不再顶满两格（不再"傻大"），并排两张之间的空隙从 10px 变成 24px */
  .home-item.s2 > .widget { border-radius: 17px; }
  .home-item.s3 { grid-column: span 4; grid-row: span 2; }
  .home-item.s4 { grid-column: span 4; grid-row: span 4; }
  .home-item.s5 { grid-column: span 4; grid-row: span 1; }
  .home-item.s1c2 { grid-column: span 1; grid-row: span 2; }
  .home-item.s2c1 { grid-column: span 2; grid-row: span 1; }
  /* Size-adaptive widget internals (class carried on the widget so previews match) */
  .widget.sz-s1 { padding: 7px; justify-content: center; gap: 2px; }
  .widget.sz-s1 .w-label { font-size: 7px; letter-spacing: .1em; margin-bottom: 2px; }
  .widget.sz-s1 .w-weather .temp { font-size: 19px; }
  .widget.sz-s1 .w-weather .temp sup { font-size: 9px; }
  .widget.sz-s1 .w-weather .desc { font-size: 8px; margin-top: 1px; }
  .widget.sz-s1 .w-weather .icon { font-size: 17px; }
  .widget.sz-s1 .w-battery .ring { width: 40px; height: 40px; margin: 0 auto; }
  .widget.sz-s1 .w-battery .ring::before { inset: 5px; }
  .widget.sz-s1 .w-battery .ring i { font-size: 11px; }
  .widget.sz-s1 .w-steps .num { font-size: 14px; }
  .widget.sz-s1 .w-steps .num small { font-size: 8px; }
  .widget.sz-s1 .w-steps .trend { height: 16px; margin-top: 2px; }
  /* clock: full-centered in every size */
  .widget.w-clock { align-items: center; text-align: center; justify-content: center; }
  /* 8格(4x2)时钟：像拍立得一样去掉外框，只留本体 */
  .widget.sz-s3.w-clock { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .widget.sz-s3.w-clock .time { font-size: 58px; }
  .widget.sz-s3.w-clock .date { font-size: 14px; margin-top: 10px; }
  /* music 4x2 */
  /* ---------- 音乐（4 格）：唱片机俯视图（卡片为正方形，唱片四周留白相等） ---------- */
  .home-item:has(> .widget.w-music.sz-s2) { display: flex; align-items: center; }
  .widget.sz-s2.w-music {
    padding: 0 !important; display: block; position: relative; overflow: hidden;
    width: 100%; height: auto; aspect-ratio: 1;
    /* 半透明磨砂：沿用全局玻璃质感（bg / border / blur / shadow 均继承 .widget） */
  }
  .widget.sz-s2.w-music .rp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .widget.sz-s3.w-music .cover { width: 66px; height: 66px; border-radius: 18px; }
  .widget.sz-s3.w-music .cover svg { width: 28px; height: 28px; }
  .widget.sz-s3.w-music .tt { font-size: 16px; }
  .widget.sz-s3.w-music .ar { font-size: 11px; margin-top: 3px; }
  .widget.sz-s3.w-music .prog { margin-top: 16px; }
  .widget.sz-s3.w-music .ctrl { margin-top: 14px; }
  .widget.sz-s3.w-music .ctrl svg { width: 18px; height: 18px; }
  .widget.sz-s3.w-music .ctrl .mid svg { width: 21px; height: 21px; }

  /* ================= 参考图复刻：音乐类小组件 ================= */
  /* --- 音乐 4×2：iPhone 横版播放器（取代原 4 格音乐） --- */
  .widget.sz-s3.w-music {
    padding: 0 !important; position: relative; display: block; overflow: hidden;
    border-radius: 22px !important; color: #3b3a38;
    background: linear-gradient(158deg, #e7e8e9 0%, #d6d8da 52%, #c9cccf 100%) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 10px 26px rgba(53,66,74,.16), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
  .w-music .mp-cover { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 36%; aspect-ratio: 1; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
  .w-music .mp-info { position: absolute; left: 46%; right: 14px; top: 16px; bottom: 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .w-music .mp-src { font-size: 8px; color: rgba(0,0,0,.42); }
  .w-music .mp-tt { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-music .mp-ar { font-size: 8px; color: rgba(0,0,0,.44); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-music .mp-prog { margin-top: 7px; }
  .w-music .bar { display: block; height: 1.5px; border-radius: 2px; background: rgba(0,0,0,.22); position: relative; overflow: hidden; }
  .w-music .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: rgba(0,0,0,.62); }
  .w-music .mp-times { display: flex; justify-content: space-between; font-size: 6.5px; color: rgba(0,0,0,.42); margin-top: 3px; }
  .w-music .mp-times em { font-style: normal; }
  .w-music .mp-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 5px; color: #3b3a38; }
  .w-music .mp-ctrl svg { width: 13px; height: 13px; }
  .w-music .mp-vol { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: rgba(0,0,0,.5); }
  .w-music .mp-vol .bar { flex: 1; }
  .w-music .mp-vol .bar i { width: 66%; }
  .w-music .mp-vol svg { width: 9px; height: 9px; }
  .w-music .mp-home { position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; width: 34%; height: 2px; border-radius: 2px; background: rgba(0,0,0,.26); }

  /* --- 黑胶相框（2×2）：白相纸 + 右侧黑胶 --- */
  .widget.sz-s2.w-vinyl { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible; position: relative; }
  .w-vinyl .vl-stage { position: absolute; inset: 0; display: flex; align-items: center; }
  .w-vinyl .vl-paper { position: relative; flex: none; width: 72%; aspect-ratio: 1; margin-left: 1%; padding: 5%; background: #fff; border-radius: 3px; box-shadow: 0 8px 20px rgba(53,66,74,.16); z-index: 2; box-sizing: border-box; }
  .w-vinyl .vl-paper i { display: block; width: 100%; height: 100%; border-radius: 1px; background-size: cover; background-position: center; }
  /* 唱片中心对齐封面右边缘：左半被封面盖住，右半露出来，像从封套里抽出一半 */
  .w-vinyl .vl-disc { position: relative; flex: none; width: 76%; aspect-ratio: 1; margin-left: -38%; border-radius: 50%; z-index: 1;
    box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.24);
    background: radial-gradient(circle at 50% 50%, #f6f3f0 0 4.4%, #171717 5% 7.4%, #1d1d1d 7.4% 100%); }
  .w-vinyl .vl-disc::after { content: ""; position: absolute; inset: 7%; border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.085) 0 .55px, transparent .55px 2.3px); }

  /* --- 黑胶唱盘（4×2） --- */
  .widget.sz-s3.w-deck { padding: 0 !important; position: relative; overflow: hidden;
    background: linear-gradient(165deg, #f7f8f9 0%, #eaedef 100%) !important; border: 1px solid rgba(255,255,255,.6) !important; }
  .w-deck .dk-disc { position: absolute; left: 31%; top: 42%; transform: translate(-50%,-50%); height: 62%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 48% 42%, #2b2b2b 0 4%, #101010 12% 100%); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
  .w-deck .dk-disc::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); }
  .w-deck .dk-disc::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); }
  .w-deck .dk-disc .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #3a3a3a, #1a1a1a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
  .w-deck .dk-disc .hub.has-art { width: 34%; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.5); }
  .w-deck .dk-arm { position: absolute; left: 11%; top: 12%; width: 26%; height: 1.2px; background: rgba(38,38,38,.5); transform: rotate(30deg); transform-origin: left center; border-radius: 2px; }
  .w-deck .dk-arm::before { content: ""; position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(38,38,38,.5); background: transparent; }
  .w-deck .dk-arm::after { content: ""; position: absolute; right: -3px; top: -1.5px; width: 3px; height: 4px; border-radius: 1px; background: rgba(38,38,38,.6); }
  .w-deck .dk-arm::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: rgba(40,40,40,.6); }
  .w-deck .dk-foot { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 12px; color: rgba(40,40,40,.62); }
  .w-deck .dk-foot svg { width: 11px; height: 11px; flex: none; }
  .w-deck .dk-foot .bar { flex: 1; height: 1.5px; background: rgba(40,40,40,.18); border-radius: 2px; position: relative; }
  .w-deck .dk-foot .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: rgba(40,40,40,.5); border-radius: 2px; }
  .w-deck .dk-info { position: absolute; left: 52%; right: 16px; top: 20%; bottom: 27%; display: flex; flex-direction: column; overflow: hidden; color: rgba(30,30,30,.9); }
  .w-deck .dk-tt { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-deck .dk-ar { font-size: 8px; color: rgba(30,30,30,.48); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-deck .dk-ly { margin-top: 6px; font-size: 7px; line-height: 1.75; color: rgba(30,30,30,.6); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

  /* --- 竖版白色播放器（1×2） --- */
  .widget.sz-s1c2.w-pod { padding: 8px !important; background: var(--pane-bg) !important; border: 1px solid var(--border) !important;
    border-radius: 16px !important; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
  .w-pod .pd-cover { width: 100%; aspect-ratio: 1; border-radius: 9px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
  .w-pod .pd-head { display: flex; align-items: flex-start; gap: 3px; }
  .w-pod .pd-tt { display: block; font-size: 6.8px; font-weight: 600; line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-pod .pd-ar { display: block; font-size: 5.6px; line-height: 1.35; color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-pod .pd-txt { flex: 1; min-width: 0; }
  .w-pod .pd-acts { display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); flex: none; }
  .w-pod .pd-acts svg { width: 7px; height: 7px; }
  .w-pod .pd-ctrl { display: flex; align-items: center; justify-content: space-between; color: var(--ink); padding: 0 1px; margin-top: auto; }
  .w-pod .pd-ctrl svg { width: 10px; height: 10px; }
  .w-pod .pd-ctrl .pl { width: 30px; height: 30px; border-radius: 50%; background: var(--pane-bg); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
  .w-pod .pd-ctrl .pl svg { width: 13px; height: 13px; }
  .w-pod .pd-times { display: flex; justify-content: space-between; font-size: 5.5px; color: var(--ink-2); opacity: .7; margin-top: auto; }
  .w-pod .pd-times em { font-style: normal; }
  .w-pod .pd-foot { display: flex; justify-content: space-around; color: var(--ink-2); opacity: .75; margin-top: auto; padding-bottom: 1px; }
  .w-pod .pd-foot svg { width: 8px; height: 8px; }

  /* --- 银饰挂件（2×2） --- */
  .widget.sz-s2.w-charm { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible; }
  .w-charm .ch-svg { display: block; width: 100%; height: 100%; overflow: visible; }

  /* --- 极简播放条（4×1） --- */
  .widget.sz-s5.w-mini { padding: 11px 16px !important; background: var(--pane-bg) !important; border: 1px solid var(--border) !important;
    display: block; position: relative; color: #3d3d3b; }
  .w-mini .mn-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); }
  .w-mini .mn-top svg { width: 11px; height: 11px; }
  .w-mini .mn-prog { margin-top: 10px; }
  .w-mini .mn-prog .bar { display: block; height: 1.5px; border-radius: 2px; background: var(--border); position: relative; }
  .w-mini .mn-prog .bar i { position: absolute; left: 0; top: -2px; width: 3px; height: 5px; border-radius: 2px; background: var(--ink); }
  .w-mini .mn-times { display: flex; justify-content: space-between; font-size: 6px; color: var(--ink-2); margin-top: 3px; }
  .w-mini .mn-times em { font-style: normal; }
  .w-mini .mn-ctrl { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 7px; color: var(--ink); }
  .w-mini .mn-ctrl svg { width: 11px; height: 11px; }
  .w-mini .mn-ctrl .pl { width: 28px; height: 28px; border-radius: 50%; border: 1.2px solid var(--ink); opacity: .85; display: grid; place-items: center; }
  .w-mini .mn-ctrl .pl svg { width: 12px; height: 12px; }


  /* --- 黑卡播放器（2×2） --- */
  .widget.sz-s2.w-tile { padding: 0 !important; position: relative; overflow: hidden; border-radius: 22px !important;
    background: linear-gradient(180deg, #141414 0%, #171717 58%, #1e1e1e 100%) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #eae8e4; }
  .w-tile .tl-rail { position: absolute; left: 9%; top: 12%; display: flex; flex-direction: column; gap: 13px; color: rgba(255,255,255,.72); }
  .w-tile .tl-rail svg { width: 12px; height: 12px; }
  .w-tile .tl-cover { position: absolute; left: 22%; top: 7%; width: 66%; aspect-ratio: 1; border-radius: 16px; }
  .w-tile .tl-arrow { position: absolute; right: 3%; top: 31%; width: 26px; height: 26px; border-radius: 50%; background: #131313; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
  .w-tile .tl-arrow svg { width: 12px; height: 12px; }
  .w-tile .tl-lines { position: absolute; left: 24%; right: 7%; top: 75.5%; display: flex; flex-direction: column; gap: 5px; }
  .w-tile .tl-lines i { display: block; height: 1.5px; border-radius: 2px; background: rgba(255,255,255,.30); }
  .w-tile .tl-lines i:nth-child(2) { width: 76%; background: rgba(255,255,255,.22); }
  .w-tile .tl-lines i:nth-child(3) { width: 48%; background: rgba(255,255,255,.15); }
  /* letter 4x2 breathing room */
  .widget.sz-s3.w-letter .snippet { -webkit-line-clamp: 4; font-size: 12px; }
  /* calendar 4x1 with weekday strip */
  .widget.sz-s5.w-cal { justify-content: center; }
  .widget.sz-s5.w-cal .w-label { margin-bottom: 4px; }
  .widget.sz-s5.w-cal .calbar { display: flex; align-items: center; gap: 16px; width: 100%; }
  .widget.sz-s5.w-cal .calleft { flex: none; }
  .widget.sz-s5.w-cal .big { font-size: 26px; display: flex; align-items: baseline; gap: 7px; }
  .widget.sz-s5.w-cal .big em { display: inline; margin-top: 0; font-size: 11px; }
  .widget.sz-s5.w-cal .week { display: flex; gap: 6px; flex: 1; justify-content: flex-end; }
  .widget.sz-s5.w-cal .week .wd { flex: 1; max-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 9px; }
  .widget.sz-s5.w-cal .week .wd i { font-style: normal; font-size: 9px; color: var(--ink-2); }
  .widget.sz-s5.w-cal .week .wd b { font-size: 13px; font-weight: 500; color: var(--ink); }
  .widget.sz-s5.w-cal .week .wd.on { background: var(--accent); }
  .widget.sz-s5.w-cal .week .wd.on i, .widget.sz-s5.w-cal .week .wd.on b { color: #fff; }
  .home-item.drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; }
  .home-pager.no-snap { scroll-snap-type: none; }
  .home-item .del-badge { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #e0566a; color: #fff; border: 2px solid var(--pane-bg); font-size: 15px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 6; }
  #homeView.editing .home-item .del-badge { display: flex; }
  @keyframes tile-shake { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-1.4px,0) rotate(-1.2deg); } 40% { transform: translate(1.4px,0) rotate(1.2deg); } 60% { transform: translate(-1px,0) rotate(-.8deg); } 80% { transform: translate(1px,0) rotate(.8deg); } }
  #homeView.editing .home-item { animation: tile-shake .45s ease-in-out infinite; }
  .drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform; transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) scale(1.12); filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }

  /* App tile */
  .app-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
  .app-tile .ic { width: 60px; height: 60px; border-radius: 16px; font-size: 30px; display: grid; place-items: center; background: var(--glass-bg); border: 1.5px solid var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .12s; color: var(--ink); }
  .app-tile:active .ic { transform: scale(.92); }

  /* Widgets (glass) */
  .widget { width: 100%; height: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 20px; padding: 14px; box-shadow: var(--glass-shadow); overflow: hidden; display: flex; flex-direction: column; }
  .w-label { font-size: 9.5px; letter-spacing: .18em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 8px; flex-shrink: 0; }
  .w-empty { font-size: 11.5px; color: var(--ink-2); opacity: .8; margin: auto 0; }
  .w-clock .time { font-size: 34px; font-weight: 200; letter-spacing: .01em; color: var(--ink); line-height: 1; }
  .w-clock .date { font-size: 11px; color: var(--ink-2); margin-top: 6px; }
  .w-weather .row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .w-weather .temp { font-size: 34px; font-weight: 200; color: var(--ink); }
  .w-weather .temp sup { font-size: 14px; }
  .w-weather .desc { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
  .w-weather .icon { font-size: 30px; }
  .w-letter .env { font-size: 24px; }
  .w-letter .from { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 4px; }
  .w-letter .snippet { font-size: 11px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .w-letter .badge { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #e0566a; }
  .w-todo .todo-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); margin-bottom: 7px; }
  .w-todo .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; }
  .w-todo .todo-item.done .dot { background: var(--accent); }
  .w-todo .todo-item.done span { text-decoration: line-through; color: var(--ink-2); }
  .w-battery .ring { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) 76%, rgba(53,66,74,.15) 0); position: relative; margin: 2px auto 0; }
  .w-battery .ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--glass-bg); }
  .w-battery .ring i { position: relative; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink); }
  .w-cal .big { font-size: 30px; font-weight: 300; color: var(--ink); line-height: 1; }
  .w-cal .big em { display: block; font-size: 9px; font-style: normal; color: var(--ink-2); letter-spacing: .08em; margin-top: 2px; }
  .w-cal .mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 8px; color: var(--ink-2); margin-top: 8px; text-align: center; }
  .w-cal .mini b { color: var(--accent); }
  /* 资料卡 w-card：三种尺寸（小 2×2 / 中 4×2 / 宽 4×1） */
  .w-card { flex-direction: row; align-items: center; gap: 12px; justify-content: flex-start; cursor: pointer; }
  .w-card .q-media { flex: none; width: 46%; aspect-ratio: 1 / 1; max-height: 100%; border-radius: 12px; background: linear-gradient(135deg, var(--c3), var(--c4)); background-size: cover; background-position: center; }
  .w-card .q-txt { flex: 1; min-width: 0; }
  .w-card p { font-size: 12.5px; line-height: 1.6; color: var(--ink); }
  .w-card .by { font-size: 10px; color: var(--ink-2); margin-top: 6px; }
  /* 宽 4×1：左图右文横条 */
  .widget.sz-s5.w-card { gap: 10px; }
  .widget.sz-s5.w-card .q-media { width: 60px; height: 60px; aspect-ratio: auto; border-radius: 10px; }
  .widget.sz-s5.w-card .q-txt { display: flex; align-items: center; gap: 10px; }
  .widget.sz-s5.w-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .widget.sz-s5.w-card .by { margin-top: 0; flex: none; white-space: nowrap; }
  /* 小 2×2：头像卡（封面撑满 + 圆形头像叠边 + 天使翅 + 名字 + 药丸文案） */
  .widget.sz-s2.w-card { padding: 0 !important; background: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0; justify-content: flex-start; position: relative; }
  .widget.sz-s2.w-card .qc-cover { width: 100%; flex: 1; min-height: 40%; background: linear-gradient(135deg, var(--c3), var(--c4)); background-size: cover; background-position: center; }
  .widget.sz-s2.w-card .qc-fig { position: relative; margin-top: -38px; width: 76px; height: 76px; flex: none; }
  .widget.sz-s2.w-card .qc-ava { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, var(--c3), var(--c4)); background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(53,66,74,.18); }
  .widget.sz-s2.w-card .qc-wing { position: absolute; top: 27px; width: 32px; height: 22px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(53,66,74,.38)); }
  .widget.sz-s2.w-card .qc-wing:first-of-type { left: -27px; }
  .widget.sz-s2.w-card .qc-wing:last-of-type { right: -27px; transform: scaleX(-1); }
  .widget.sz-s2.w-card .qc-name { margin-top: 8px; font-size: 13px; font-weight: 600; color: #35424a; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .widget.sz-s2.w-card .qc-pill { margin: 7px 10px 13px; max-width: 88%; padding: 4px 12px; border: 1px solid rgba(53,66,74,.22); border-radius: 999px; font-size: 10px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-music .row { display: flex; align-items: center; gap: 10px; }
  .w-music .cover { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--c3), var(--c4)); display: grid; place-items: center; color: var(--ink); flex: none; }
  .w-music .cover svg { width: 20px; height: 20px; fill: currentColor; }
  .w-music .tt { font-size: 13px; font-weight: 600; color: var(--ink); }
  .w-music .ar { font-size: 10px; color: var(--ink-2); margin-top: 2px; }
  .w-music .prog { height: 3px; background: rgba(53,66,74,.15); border-radius: 2px; margin-top: 12px; position: relative; }
  .w-music .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--ink); border-radius: 2px; }
  .w-music .ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--ink); }
  .w-music .ctrl svg { width: 15px; height: 15px; fill: currentColor; }
  .w-music .ctrl .mid svg { width: 17px; height: 17px; }
  .w-steps .num { font-size: 26px; font-weight: 200; color: var(--ink); }
  .w-steps .num small { font-size: 11px; color: var(--ink-2); }
  .w-steps .trend { display: flex; align-items: flex-end; gap: 3px; height: 32px; margin-top: 8px; }
  .w-steps .trend i { flex: 1; background: var(--c4); border-radius: 2px 2px 0 0; }

  /* Polaroid widget（透明底，白色相纸，薄边框） */
  .w-pola { align-items: center; justify-content: center; background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; cursor: pointer; }
  .pola { background: #fff; padding: 4px 4px 9px; border-radius: 5px; box-shadow: 0 8px 18px rgba(53,66,74,.22); }
  .pola .ph { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 2px; background-size: cover; background-position: center; }
  .pola-single { width: 78%; height: 92%; display: grid; place-items: center; }
  .pola-single .pola { width: 100%; transform: rotate(-3deg); }
  .pola-row { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .pola-row .pola { width: 31%; }
  .pola-row .p0 { transform: rotate(-8deg) translateY(7px); z-index: 1; }
  .pola-row .p1 { width: 34%; transform: rotate(3deg) translateY(-4px); z-index: 3; }
  .pola-row .p2 { transform: rotate(6deg) translateY(5px); z-index: 2; }
  .pola-duo { position: relative; width: 100%; height: 100%; }
  .pola-duo .pola { position: absolute; width: 62%; left: 19%; top: 14%; }
  .pola-duo .p0 { transform: rotate(-7deg) translate(-15%, 7%); z-index: 1; }
  .pola-duo .p1 { transform: rotate(5deg) translate(15%, -6%); z-index: 2; }

  /* Photo widget */
  .w-photo { padding: 0 !important; overflow: hidden; cursor: pointer; }
  .w-photo .photo-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
  .w-photo .photo-empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-2); font-size: 11px; }
  .w-photo .photo-empty svg { width: 22px; height: 22px; }
  .widget.sz-s1.w-photo .photo-empty span, .widget.sz-s1c2.w-photo .photo-empty span, .widget.sz-s2c1.w-photo .photo-empty span { display: none; }
  .widget.sz-s1.w-photo .photo-empty svg, .widget.sz-s1c2.w-photo .photo-empty svg, .widget.sz-s2c1.w-photo .photo-empty svg { width: 18px; height: 18px; }

  /* Postcard widget */
  /* 资料卡 中 4×2：居中头像 + 光环 + 天使翅 + 名字 + 文案 */
  .widget.sz-s3.w-card { padding: 0 !important; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #eef0ea, #c7d9dd 55%, #b9c8cb); background-size: cover; background-position: center; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .w-card .pc-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
  /* 壁纸上的压暗遮罩（上浓下淡）：让白色天使摆件与壁纸拉开层次 */
  .w-card .pc-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(43,54,61,.42) 0%, rgba(43,54,61,.20) 52%, rgba(43,54,61,.04) 100%); }
  .w-card .pc-center { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
  .w-card .pc-ava { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, var(--c3), var(--c4)); background-size: cover; background-position: center; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(53,66,74,.25); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 26px; }
  .w-card .pc-halo { position: absolute; top: 1px; width: 32px; height: 10px; border: 2px solid rgba(255,255,255,.97); border-radius: 50%; box-shadow: 0 0 9px rgba(255,255,255,.8), 0 1px 3px rgba(30,40,46,.4); }
  /* 头顶天使翼（成对，坐在头像上） */
  .w-card .pc-headwing { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 60px; height: 21px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(30,40,46,.38)); }
  /* 头像左右的 ins 风便签 / 气泡（固定文案，不可编辑） */
  .w-card .pc-note { position: absolute; z-index: 1; pointer-events: none; font-size: 9.5px; line-height: 1.15; color: #35424a; background: rgba(255,255,255,.78); border-radius: 8px; padding: 5px 11px; max-width: 36%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(30,40,46,.14); }
  .w-card .pc-note.bub { border-radius: 999px; }
  .w-card .pc-note.n1 { left: 9%; top: 13%; transform: rotate(-2.5deg); }
  .w-card .pc-note.n4 { right: 10%; top: 15%; transform: rotate(2deg); }
  .w-card .pc-note.n2 { left: 10%; top: 45%; transform: rotate(-2deg); }
  .w-card .pc-note.n3 { right: 9%; top: 48%; transform: rotate(2deg); }
  /* 下面/对角两条：长方形便签条，左右边略带不平整（撕边感） */
  .w-card .pc-note.n2, .w-card .pc-note.n4 { background: rgba(255,255,255,.62); border-radius: 3px; box-shadow: none; filter: drop-shadow(0 2px 5px rgba(30,40,46,.16)); clip-path: polygon(0 0, 100% 0, 94% 15%, 100% 30%, 92% 46%, 100% 62%, 95% 82%, 99% 100%, 0 100%, 7% 82%, 0 66%, 8% 50%, 0 33%, 6% 16%); }
  .w-card .pc-name { position: relative; z-index: 1; text-align: center; font-size: 14px; font-weight: 600; color: #35424a; }
  .w-card .pc-sig { position: relative; z-index: 1; text-align: center; font-size: 11px; color: #35424a; opacity: .85; margin-top: 3px; padding: 0 16px 14px; }
  /* 中下部半透明圆角面板：位置/高度固定（不随文字变化；仅随卡片高度自适应以保证不与头像重叠） */
  .w-card .pc-center { position: absolute; left: 0; right: 0; top: 0; bottom: min(76px, calc(100% - 82px)); }
  .w-card .pc-panel { position: absolute; left: 0; right: 0; bottom: 0; height: min(76px, calc(100% - 82px)); box-sizing: border-box; z-index: 1; padding: 6px 14px; border-radius: 16px 16px 0 0; background: rgba(255,255,255,.34); display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .w-card .pc-panel .pc-name { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-card .pc-panel .pc-sig { margin: 3px 0 0; padding: 0; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* Add sheet */
  .as-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
  .as-name { font-size: 13px; color: var(--text); flex: none; width: 62px; line-height: 1.25; white-space: nowrap; letter-spacing: -.2px; }
  .as-cards { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; }
  .as-card { border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
  .as-card:active .as-frame { transform: scale(.94); }
  .as-card .ok { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.72); color: #2fa56a; font-size: 22px; font-weight: 700; border-radius: 9px; animation: okpop .6s ease forwards; }
  @keyframes okpop { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
  .as-frame { position: relative; overflow: hidden; border-radius: 9px; border: 1px solid var(--glass-border); background: var(--screen-bg); box-shadow: 0 2px 8px rgba(53,66,74,.12); transition: transform .12s; }
  .as-frame .widget { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
  .as-cap { font-size: 10px; color: var(--text-soft); white-space: nowrap; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .as-cap .t { color: var(--text); font-weight: 600; }
  .as-sizes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .as-size { border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 6px 13px; border-radius: 10px; font-size: 12.5px; cursor: pointer; }
  .as-size:hover { border-color: var(--accent); }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
  /* 通用输入/确认浮层：始终位于最上层，避免被短信页、文件选择等高层浮层挡住 */
  #askSheet, #cfmSheet { z-index: 400; }
  .overlay.show { display: flex; }
  .sheet { width: 100%; max-width: 400px; max-height: 82%; background: var(--pane-bg); border-radius: 18px; padding: 16px; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
  .sheet-bar { position: relative; display: flex; align-items: center; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
  .sheet-bar > span { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 112px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .sheet-bar > button { margin-left: auto; }
  .sheet-bar button { background: none; border: none; color: var(--accent, #5b8def); font-size: 14px; cursor: pointer; }
  /* Add sheet: keep header fixed, only the list scrolls */
  /* 添加组件：长列表依旧贴底，不完全居中 */
  #addSheet { align-items: flex-end; padding: 0; }
  /* 文件菜单：设置项即时生效，右上保留「完成」而不是叉 */
  .sheet-bar .fm-done { width: auto; height: auto; padding: 2px 2px; background: none; border-radius: 0; color: var(--accent); font-size: 14px; }
  #addSheet .sheet { max-width: 430px; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  #addSheet .sheet { display: flex; flex-direction: column; overflow: hidden; }
  #addSheet .sheet-bar { flex-shrink: 0; }
  #addSheetBody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .char-pick-list { display: flex; flex-direction: column; gap: 8px; }
  .char-pick-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: var(--hover); border: none; color: var(--text); padding: 13px 14px; border-radius: 12px; font-size: 15px; cursor: pointer; }
  .char-pick-item:active { background: var(--border); }
  .char-pick-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .char-pick-item .st { flex: none; font-size: 12px; color: var(--accent); }
  .char-pick-item.dashed { justify-content: center; background: transparent; border: 1px dashed var(--border); color: var(--text-soft); font-size: 13.5px; }
  .char-pick-item.dashed:active { background: var(--hover); border-color: var(--accent-2); color: var(--accent); }
  .char-pick-actions { display: flex; gap: 10px; margin-top: 12px; }
  .char-pick-actions button { flex: 1; background: var(--hover); border: none; color: var(--text); padding: 12px; border-radius: 12px; font-size: 14px; cursor: pointer; }
  .char-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 40vh; overflow-y: auto; }
  .char-row { display: flex; gap: 8px; align-items: center; }
  .char-row input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: 10px; font-size: 14px; }
  .char-row .x { width: 36px; height: 36px; flex-shrink: 0; border: none; background: var(--hover); color: #e06c75; border-radius: 10px; font-size: 18px; cursor: pointer; }
  .char-row .cav { position: relative; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text-soft); font-family: inherit; font-size: 14px; font-weight: 600; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
  .char-row .cav img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .char-row .cav .rm { position: absolute; right: 0; top: 0; width: 15px; height: 15px; border-radius: 0 0 0 8px; background: rgba(20,20,24,.62); color: #fff; font-size: 11px; line-height: 15px; text-align: center; font-weight: 400; }
  .msg .avatar .ava-t { font-size: 13px; font-weight: 600; color: #fff; line-height: 1; }
  .char-add { display: flex; gap: 8px; }
  .char-add input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: 10px; font-size: 14px; }
  .char-add button { flex-shrink: 0; background: var(--accent, #5b8def); border: none; color: #fff; padding: 0 18px; border-radius: 10px; font-size: 14px; cursor: pointer; }
  .char-grp { font-size: 11.5px; font-weight: 700; color: var(--text-soft); margin: 4px 2px 7px; }
  .char-hint { font-size: 11px; color: var(--text-soft); line-height: 1.6; margin: -2px 2px 10px; }
  .char-add { flex-direction: column; align-items: stretch; }
  #charKindSeg { margin-bottom: 10px; }
  #charKindSeg button { flex: 1; background: var(--bg); color: var(--text-soft); padding: 9px 6px; font-size: 13px; }
  #charKindSeg button.on { background: var(--accent); color: #fff; }
  .char-add-row { display: flex; gap: 8px; }
  .char-add-row input { flex: 1; }
  .sms-addbtn { border: none; background: rgba(120,120,128,.16); color: #0b84ff; font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
  .sms-pick-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14.5px; cursor: pointer; }
  .sms-pick-item .st { font-size: 12px; color: var(--accent); flex: none; }
  .sms-pick-item.dim { opacity: .62; }
  .sms-pick-item.dim .st { color: var(--text-soft); }
  #smsPick { z-index: 330; }
  #letterPane { flex: 1; overflow-y: auto; padding: 16px; }
  .letter-sec { margin-bottom: 22px; }
  .letter-sec-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 4px 0 12px; }
  .letter-sec-title { font-size: 15px; font-weight: 700; padding-left: 8px; border-left: 3px solid var(--accent, #5b8def); }
  .letter-sec-count { font-size: 11px; opacity: .55; font-weight: 400; }
  .letter-sec-fold { margin-left: auto; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--hover, rgba(127,127,127,.12)); font-size: 17px; line-height: 1; opacity: .9; transition: transform .2s; }
  .letter-sec.folded .letter-sec-fold { transform: rotate(-90deg); }
  .letter-sec.folded .letter-sec-body { display: none; }
  .letter-card { position: relative; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 36px 12px 14px; margin-bottom: 10px; cursor: pointer; }
  .letter-card:active { background: var(--hover); }
  .lc-from { font-size: 14px; font-weight: 600; }
  .lc-meta { font-size: 11px; opacity: .6; margin: 4px 0; }
  .lc-snippet { font-size: 13px; opacity: .85; line-height: 1.5; }
  .lc-del { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--sub-color, #888); font-size: 16px; line-height: 1; }
  .lc-del:active { background: var(--hover); }
  .msg-viz-btn { margin-top: 8px; background: var(--accent, #5b8def); border: none; color: #fff; padding: 7px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; }
  .msg-viz-btn.dead { background: var(--border, #333); color: var(--sub-color, #888); opacity: .7; cursor: not-allowed; }
  .app-tile .ic { width: 60px; height: 60px; border-radius: 16px; font-size: 30px; display: grid; place-items: center; background: var(--glass-bg); border: 1.5px solid var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .12s; color: var(--ink); }
  .app-tile:active .ic { transform: scale(.92); }
  /* 图片图标不要触发浏览器原生拖拽（否则会抢走长按拖动的 pointer 事件） */
  .app-tile img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
  .app-tile .ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; display: block; }
  /* 小熊助手：直接用原图，去掉图标底框后按原比例放进去 */
  .app-tile .ic img.ic-art { width: 42px; height: 42px; object-fit: contain; border-radius: 0; }
  .st-ic img.st-art { width: 100%; height: 100%; object-fit: contain; }
  .hp-ic img { width: 26px; height: 26px; object-fit: contain; }
  .mini-ic img { width: 22px; height: 22px; object-fit: contain; }
  [data-theme="dark"] .art-bear { filter: invert(1) grayscale(1) brightness(1.25); }
  .app-tile .ic svg { width: 29px; height: 29px; display: block; }
  .wall-row { display: flex; gap: 10px; align-items: center; }
  .wall-actions { display: flex; gap: 10px; margin-top: 16px; }
  .wall-actions .ghost-btn { flex: 1; }
  /* 三个按钮挤一行：缩小字号与内边距，保证 320px 宽也不折行 */
  .wall-actions.three { gap: 7px; }
  .wall-actions.three .ghost-btn { padding: 11px 4px; font-size: 12px; white-space: nowrap; letter-spacing: -.2px; }
  /* 预设磁贴网格（壁纸 / 图标预设）：小卡片，一排多个 */
  .preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px; margin-top: 12px; }
  .preset-tile { position: relative; border: 1px solid var(--border); background: var(--pane-bg); border-radius: 13px; padding: 7px 7px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
  .preset-tile:hover { background: var(--hover); }
  .preset-tile .thumb { width: 100%; aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--hover); overflow: hidden; display: block; }
  .preset-tile .nm { font-size: 10.5px; color: var(--text-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preset-tile.on { border-color: var(--accent); }
  .preset-tile.on .nm { color: var(--accent); }
  .preset-tile.on::after { content: "✓"; position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; line-height: 1; display: grid; place-items: center; }
  .preset-tile .x { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(30,36,42,.62); color: #fff; font-size: 13px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
  .preset-tile .x:hover { background: #ef4444; }
  .preset-tile.add { border-style: dashed; }
  .preset-tile.add .thumb { display: grid; place-items: center; font-size: 20px; color: var(--text-soft); background: transparent; }
  .preset-tile .thumb.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background-color: var(--hover); }
  .preset-tile .thumb.collage i { display: block; background-size: cover; background-position: center; background-color: var(--pane-bg); }
  .wall-preview { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--border); background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--pane-bg); }
  .icon-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
  .icon-row .nm { flex: 1; font-size: 13.5px; }
  .icon-row img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); }
  .icon-row .mini-ic { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--ink); }
  .icon-row .mini-ic svg { width: 20px; height: 20px; display: block; }
  .app-tile .nm { font-size: 11.5px; color: var(--text); max-width: 66px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* App view */
  #appView { flex: 1; display: none; flex-direction: column; min-height: 0; }
  .app-bar { position: relative; height: 50px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--pane-bg); }
  .app-bar .back { width: 40px; height: 40px; border: none; background: transparent; color: var(--text); font-size: 24px; cursor: pointer; border-radius: 10px; }
  .app-bar .back:hover { background: var(--hover); }
  .app-bar .title { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 112px); text-align: center; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .app-bar .plus { margin-left: auto; width: 40px; height: 40px; border: none; background: transparent; color: var(--text); font-size: 26px; cursor: pointer; border-radius: 10px; display: none; }
  .app-bar .plus:hover { background: var(--hover); }
  /* 顶栏直接可见的动作按钮（世界书「新建分类」/ 文件库「新建文件夹」） */
  .app-bar .bar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .app-bar .bar-actions:empty { display: none; }
  .app-bar .bar-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--text); border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
  .app-bar .bar-btn:hover { background: var(--hover); }
  .app-bar .bar-btn svg { width: 20px; height: 20px; }
  .app-bar:has(.bar-actions:not(:empty)) .title { max-width: calc(100% - 186px); }
  /* 列表底部「＋ 新建」虚线卡片：一步直达，不用先点右上角 */
  .add-tile { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 28px); margin: 12px 14px 18px; padding: 14px; border: 1.5px dashed var(--border); border-radius: 14px; background: transparent; color: var(--text-soft); font-size: 13.5px; font-family: inherit; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
  .add-tile:hover, .add-tile:active { background: var(--hover); color: var(--accent); border-color: var(--accent-2); }
  .add-tile svg { width: 17px; height: 17px; flex-shrink: 0; }

  .plus-menu { position: absolute; top: 54px; right: 12px; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4); z-index: 95; display: none; overflow: hidden; min-width: 150px; }
  .plus-menu.show { display: block; }
  .plus-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--text); padding: 12px 16px; font-size: 13.5px; cursor: pointer; }
  .plus-menu button:hover { background: var(--hover); }

  /* Settings */
  /* 应用市场（仿 App Store） */
  .store-pane { flex: 1; overflow-y: auto; padding: 0 0 calc(52px + env(safe-area-inset-bottom)); display: none; }
  .st-h1 { font-size: 27px; font-weight: 700; color: var(--text); letter-spacing: -.02em; padding: 18px 20px 14px; }
  .st-hero { margin: 0 20px; border-radius: 20px; padding: 18px; background: linear-gradient(135deg, var(--c3), var(--c4)); position: relative; overflow: hidden; }
  .st-hero::after { content: ""; position: absolute; right: -46px; top: -56px; width: 158px; height: 158px; border-radius: 50%; background: rgba(255,255,255,.3); }
  .st-hero .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #35424a; opacity: .72; }
  .st-hero .t { font-size: 24px; font-weight: 700; color: #35424a; margin-top: 7px; letter-spacing: -.01em; }
  .st-hero .d { font-size: 12.5px; color: #35424a; opacity: .8; margin-top: 6px; line-height: 1.5; max-width: 80%; }
  .st-hero .hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; position: relative; z-index: 1; }
  .st-hero .hero-ic { width: 62px; height: 62px; border-radius: 17px; background: rgba(255,255,255,.75); display: grid; place-items: center; color: #35424a; box-shadow: 0 6px 16px rgba(53,66,74,.18); }
  .st-hero .hero-ic svg { width: 32px; height: 32px; }
  .st-sec { font-size: 16px; font-weight: 700; color: var(--text); padding: 22px 20px 6px; }
  .st-row { display: flex; align-items: center; gap: 13px; padding: 13px 20px; }
  .st-row + .st-row { border-top: 1px solid var(--border); }
  .st-ic { width: 54px; height: 54px; border-radius: 14px; background: var(--bg); border: 1px solid var(--glass-border); display: grid; place-items: center; color: var(--text); flex: none; }
  .st-ic svg { width: 28px; height: 28px; }
  .st-meta { flex: 1; min-width: 0; }
  .st-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
  .st-desc { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-btn { flex: none; min-width: 62px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }
  .st-btn.get { background: var(--accent); color: #fff; }
  .st-btn.get:hover { filter: brightness(1.08); }
  .st-btn.open { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
  .st-btn.open:hover { background: var(--accent-soft); }
  .st-note { font-size: 11.5px; line-height: 1.7; color: var(--text-soft); padding: 22px 20px 0; }

  .settings-view { flex: 1; overflow-y: auto; padding: 20px 20px calc(52px + env(safe-area-inset-bottom)); display: none; }  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
  .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
  .field textarea { resize: vertical; line-height: 1.65; min-height: 108px; }

  /* 待办 App */
  #todoPane { padding: 14px 16px calc(52px + env(safe-area-inset-bottom)); }
  #todoPane .todo-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  #todoPane .todo-meta { font-size: 11.5px; color: var(--text-soft); }
  #todoPane .todo-add { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--pane-bg); color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; }
  #todoPane .todo-list { display: flex; flex-direction: column; gap: 8px; }
  .todo-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 12px; }
  .todo-row.done { opacity: .55; }
  .todo-chk { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; }
  .todo-chk.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .todo-chk svg { width: 13px; height: 13px; }
  .todo-inp { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 14px; font-family: inherit; outline: none; padding: 2px 0; }
  .todo-row.done .todo-inp { text-decoration: line-through; }
  .todo-del { flex: none; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-soft); font-size: 16px; line-height: 1; cursor: pointer; }

  /* 小熊助手 */
  .hp-search { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
  .hp-search-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hover); color: var(--text-soft); }
  .hp-search-ic svg { width: 16px; height: 16px; }
  #hpSearch { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; outline: none; }
  #hpSearch:focus { border-color: var(--accent); }
  #hpAskBtn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 11px; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
  #hpAskBtn svg { width: 18px; height: 18px; }
  .hp-back { display: none; align-items: center; gap: 2px; margin: 2px 0 6px; padding: 0; border: none; background: none; color: var(--accent); font-family: inherit; font-size: 14px; cursor: pointer; }
  .hp-back svg { width: 18px; height: 18px; }
  .hp-gh { font-size: 15px; font-weight: 700; color: var(--text); margin: 20px 2px 8px; }
  .hp-group:first-child .hp-gh { margin-top: 12px; }
  .hp-card { background: var(--pane-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .hp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
  .hp-card .hp-row:last-child { border-bottom: none; }
  .hp-row:active { background: var(--hover); }
  .hp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
  .hp-ic svg { width: 18px; height: 18px; }
  .tint-blue { color: #4a90d9; background: rgba(74,144,217,.13); }
  .tint-pink { color: #e26d8a; background: rgba(226,109,138,.13); }
  .tint-orange { color: #dd9a36; background: rgba(232,163,61,.15); }
  .tint-teal { color: #3f9a9a; background: rgba(74,163,163,.14); }
  .tint-purple { color: #7f74cf; background: rgba(138,127,214,.14); }
  .tint-green { color: #4f9d61; background: rgba(90,168,106,.14); }
  .tint-gray { color: #7d858c; background: rgba(138,143,152,.14); }
  .hp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hp-chev { flex: none; width: 7px; height: 7px; border-top: 1.4px solid var(--text-soft); border-right: 1.4px solid var(--text-soft); transform: rotate(45deg); opacity: .55; }
  .hp-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-soft); line-height: 1.8; }
  .hp-art-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
  .hp-art-head .hp-ic { width: 44px; height: 44px; border-radius: 12px; }
  .hp-art-head .hp-ic svg { width: 24px; height: 24px; }
  .hp-art-title { font-size: 19px; font-weight: 700; color: var(--text); }
  .hp-art-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
  .hp-sum { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; margin: 0 0 6px; }
  .hp-sec { margin-top: 18px; }
  .hp-sec h3 { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
  .hp-sec p { font-size: 13.5px; line-height: 1.8; color: var(--text); margin: 0; }
  .hp-steps { margin-top: 18px; padding: 4px 14px; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 14px; }
  .hp-step { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.7; }
  .hp-step:last-child { border-bottom: none; }
  .hp-step b { flex: none; display: grid; place-items: center; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 600; }
  .hp-askcard { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--pane-bg); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
  .hp-askcard:active { background: var(--hover); }
  .hp-askcard .hp-ic { width: 38px; height: 38px; border-radius: 11px; }
  .hp-askcard .hp-ic img { width: 30px; height: 30px; }
  .hp-asktxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .hp-asktxt b { font-size: 14.5px; font-weight: 600; }
  .hp-asktxt i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
  /* 和小熊聊：对话视图 */
  #helpAskPane { padding: 0; flex-direction: column; min-height: 0; overflow: hidden; }
  .hc-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 5px 16px 0; }
  .hc-count { font-size: 11px; color: var(--text-soft); }
  .hc-clear { flex: none; padding: 6px 2px; border: none; background: transparent; color: var(--text-soft); font-family: inherit; font-size: 12px; cursor: pointer; }
  .hc-clear:active { color: var(--text); }
  .hc-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 10px; }
  .hc-row { display: flex; align-items: flex-start; gap: 8px; }
  .hc-row.me { justify-content: flex-end; }
  .hc-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
  .hc-bubble { max-width: 78%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.68; white-space: pre-wrap; word-break: break-word; }
  .hc-row.ai .hc-bubble { background: var(--pane-bg); border: 1px solid var(--border); color: var(--text); border-top-left-radius: 6px; }
  .hc-row.me .hc-bubble { background: var(--accent); color: #fff; border-top-right-radius: 6px; }
  .hc-bar { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--pane-bg); }
  #hcInput { flex: 1; min-width: 0; max-height: 96px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.5; resize: none; outline: none; }
  #hcInput:focus { border-color: var(--accent); }
  .hc-send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
  .hc-send svg { width: 18px; height: 18px; }
  .hc-wait { display: flex; align-items: center; gap: 4px; }
  .hc-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-soft); animation: hc-blink 1.1s infinite; }
  .hc-wait i:nth-child(2) { animation-delay: .18s; }
  .hc-wait i:nth-child(3) { animation-delay: .36s; }
  @keyframes hc-blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
  /* 约会 100 件事 */
  .dt-chars { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
  .dt-chars::-webkit-scrollbar { display: none; }
  .dt-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; }
  .dt-chip em { font-style: normal; font-size: 10.5px; color: var(--text-soft); }
  .dt-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  .dt-chip.on em { color: var(--accent); }
  .dt-top { margin-bottom: 10px; }
  .dt-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .dt-name { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-count { flex: none; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
  .dt-bar { height: 4px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; margin: 8px 0 8px; }
  .dt-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s; }
  .dt-auto { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 4px; font-size: 12.5px; color: var(--text-soft); }
  .dt-list { display: flex; flex-direction: column; }
  .dt-item { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
  .dt-item:last-child { border-bottom: none; }
  .dt-no { flex: none; width: 24px; font-size: 10.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
  .dt-txt { flex: 1; min-width: 0; line-height: 1.45; }
  .dt-day { flex: none; font-size: 10.5px; color: var(--accent); }
  .dt-item.done .dt-no { color: var(--accent); }
  .dt-item.done .dt-txt { color: var(--text-soft); text-decoration: line-through; }
  .dt-hint { font-size: 10.5px; color: var(--text-soft); opacity: .8; margin: -2px 0 6px; }
  .dt-note-dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); }
  /* 约会记录：居中弹窗 */
  #dtNote { z-index: 430; }
  #dtNote .sheet { max-width: 360px; border-radius: 20px; padding: 18px 18px 16px; }
  #dtNote .sheet-bar { margin-bottom: 14px; }
  /* 右上角统一用叉号关闭 */
  .sheet-bar .sheet-x, .viz-edit-bar .sheet-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: var(--hover); color: var(--text-soft); font-size: 19px; line-height: 1; cursor: pointer; -webkit-appearance: none; }
  .sheet-bar .sheet-x:active, .viz-edit-bar .sheet-x:active { background: var(--border); color: var(--text); }
  .viz-edit-bar .sheet-x { margin-left: auto; width: 26px; height: 26px; font-size: 18px; }
  .dn-sub:empty { display: none; }
  #dtNote .dn-body { padding-top: 0; }
  .dn-ai { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .dn-ai-ic { display: inline-flex; }
  .dn-ai-ic svg { width: 15px; height: 15px; }
  .dn-body { padding: 2px 2px 6px; }
  .dn-sub { font-size: 11.5px; color: var(--text-soft); margin-bottom: 10px; }
  #dnText { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.6; padding: 10px 12px; resize: none; outline: none; }
  #dnText:focus { border-color: var(--accent); }
  .dn-actions { display: flex; gap: 10px; margin-top: 12px; }
  .dn-actions .ghost-btn, .dn-actions .save-btn { flex: 1; }

  /* 待办：行内可见性标签 + 选择浮层 */
  .we-vis { flex: none; max-width: 78px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); color: var(--ink-2); font-size: 9.5px; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .we-vis:active { background: var(--border); }
  #todoVis { z-index: 420; }
  #todoVis .char-pick-list { padding: 4px 0 14px; }
  .tv-sep { font-size: 11px; color: var(--text-soft); padding: 12px 2px 6px; }
  #todoVis .char-pick-item.dim { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
  #todoVis .char-pick-item.dim .nm { color: var(--accent); }
  #todoVis .char-pick-item.dim .st { color: var(--accent); }
  .field .link { font-size: 11px; color: var(--accent-2); margin-top: 5px; }
  .api-actions { display: flex; gap: 10px; margin-bottom: 16px; }
  .ghost-btn { flex: 1; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 13.5px; cursor: pointer; }
  .ghost-btn:hover { border-color: var(--accent); }
  .ghost-btn:disabled { opacity: .6; cursor: default; }

  /* 组件编辑面板（待办 / 资料卡） */
  .we-todos { margin-bottom: 12px; }
  .we-todo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .we-todo input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; }
  .we-todo input:focus { border-color: var(--accent); }
  .we-chk { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.6px solid var(--accent); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .we-chk svg { width: 15px; height: 15px; }
  .we-chk.on { background: var(--accent); color: #fff; }
  .we-del { width: 28px; height: 28px; flex: none; border: none; background: transparent; color: var(--text-soft); font-size: 20px; line-height: 1; cursor: pointer; }
  .we-empty { font-size: 12.5px; color: var(--text-soft); padding: 4px 2px 12px; }
  .we-add { width: 100%; margin-top: 2px; }

  /* 图片裁剪 */
  #cropSheet { z-index: 260; }
  .crop-stage { display: flex; justify-content: center; margin-bottom: 14px; }
  .crop-box { position: relative; overflow: hidden; border-radius: 14px; background: #0f1417; touch-action: none; cursor: grab; }
  .crop-box:active { cursor: grabbing; }
  .crop-box img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; max-height: none; pointer-events: none; -webkit-user-drag: none; }
  .crop-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-soft); }
  .crop-ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
  .crop-ic svg { width: 18px; height: 18px; }
  .crop-zoom input[type="range"] { flex: 1; accent-color: var(--accent); }
  .crop-tip { font-size: 11.5px; color: var(--text-soft); margin-bottom: 14px; }
  .usage-box { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 16px; }
  .usage-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--text); }
  .usage-row span { color: var(--text-soft); }
  .usage-row.sum { border-top: 1px dashed var(--border); margin-top: 5px; padding-top: 8px; font-weight: 600; }
  .usage-row em { font-style: normal; font-size: 10.5px; color: var(--text-soft); opacity: .8; margin-left: 6px; }
  .usage-row b { font-weight: 600; font-size: 12px; }
  /* 占用可视化：每条数据下面一条占比条 */
  .usage-bar { height: 6px; border-radius: 6px; background: var(--accent-soft); overflow: hidden; margin: 2px 0 7px; }
  .usage-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }
  .usage-bar.big { height: 10px; }
  .usage-total { margin-bottom: 16px; }
  .ut-meta { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; margin-top: 2px; }

  /* 清理：分类折叠 + 子菜单 */
  .cl-group { border-radius: 12px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 8px; overflow: hidden; }
  .cl-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 13px; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; cursor: pointer; }
  .cl-head .cl-name { flex: 1; text-align: left; }
  .cl-head .cl-meta { font-size: 11px; color: var(--text-soft); }
  .cl-chev { flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 1.4px solid var(--text-soft); border-bottom: 1.4px solid var(--text-soft); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s; }
  .cl-group.open > .cl-head .cl-chev { transform: rotate(-135deg) translate(-2px, -2px); }
  .cl-body { display: none; padding: 0 7px 7px; }
  .cl-group.open > .cl-body { display: block; }
  .cl-row { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 11px 10px; border: none; border-radius: 9px; background: var(--hover); color: var(--text); font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
  .cl-row:active { background: var(--border); }
  .cl-row .cl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-row .cl-meta { flex: none; font-size: 10.5px; color: var(--text-soft); }
  .cl-row.danger .cl-label { color: #d9695f; }
  .cl-row.off { opacity: .4; cursor: default; }
  .cl-subwrap.open > .cl-row .cl-chev { transform: rotate(-135deg) translate(-2px, -2px); }
  .cl-sub { display: none; margin: 4px 0 2px 12px; padding-left: 9px; border-left: 1px solid var(--border); }
  .cl-subwrap.open > .cl-sub { display: block; }
  .cl-item { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 12.5px; color: var(--text); }
  .cl-item .cl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-item .cl-meta { flex: none; font-size: 10.5px; color: var(--text-soft); }
  .cl-del { flex: none; padding: 3px 7px; border: none; border-radius: 7px; background: transparent; color: #d9695f; font-family: inherit; font-size: 11.5px; cursor: pointer; }
  .cl-del:active { background: var(--hover); }

  /* IndexedDB 不可用 → 启动拦截页 */
  #storeBlock { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--page-bg); }
  #storeBlock .sb-card { width: 100%; max-width: 380px; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; box-shadow: var(--glass-shadow); }
  #storeBlock .sb-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  #storeBlock .sb-body { font-size: 12.5px; color: var(--text-soft); line-height: 1.85; margin-bottom: 9px; }
  #storeBlock button { width: 100%; margin-top: 10px; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14px; font-family: inherit; cursor: pointer; }

  /* 启动遮罩（数据从 IndexedDB 读出前盖住，避免空桌面闪一下） */
  #bootVeil { position: fixed; inset: 0; z-index: 850; display: flex; align-items: center; justify-content: center; background: var(--screen-bg); transition: opacity .25s; }
  #bootVeil.hide { opacity: 0; pointer-events: none; }
  #bootVeil .bv-ring { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: bvspin .9s linear infinite; }
  @keyframes bvspin { to { transform: rotate(360deg); } }

  .build-tag { margin-top: 18px; text-align: center; font-size: 11px; color: var(--text-soft); opacity: .8; }
  .build-tag:empty { display: none; }
  /* 仅在这些地方允许选择/编辑文本 */
  input, textarea, select, .msg .content, #fpViewArea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
  .theme-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 16px; }
  .theme-row .lab { font-size: 13px; }
  .seg { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
  .seg button { border: none; background: var(--bg); color: var(--text-soft); padding: 6px 14px; font-size: 12.5px; cursor: pointer; }
  .seg button.on { background: var(--accent); color: #fff; }
  .save-btn { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; }
  .save-btn:hover { filter: brightness(1.08); }
  .chev { color: var(--text-soft); font-size: 22px; }

  /* Story select */
  #storySelect { flex: 1; overflow-y: auto; padding: 14px 16px 30px; display: none; }
  .ss-hint { text-align: center; color: var(--text-soft); font-size: 13px; padding: 80px 24px; line-height: 1.9; }
  .ss-item { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--pane-bg); margin-bottom: 9px; cursor: pointer; }
  .ss-item:hover { background: var(--hover); }
  .ss-item .meta { flex: 1; min-width: 0; }
  .ss-item .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ss-item .sub { font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
  .ss-item .del { opacity: 0; color: var(--text-soft); font-size: 15px; padding: 3px 7px; border-radius: 8px; }
  .ss-item:hover .del { opacity: 1; }
  .ss-item .del:hover { background: rgba(255,80,80,.18); color: #ef4444; }
  .ss-item.danger { border: 1px solid rgba(224,86,106,.6); }
  .ss-item .ss-rename { opacity: 1; color: var(--text-soft); font-size: 18px; padding: 6px 9px; border-radius: 8px; border: none; background: transparent; cursor: pointer; flex: none; }
  .ss-item .ss-rename:hover { background: rgba(127,127,127,.16); color: var(--text); }
  .ss-item.delmode .ss-rename, .ss-item.danger .ss-rename { display: none; }
  .ss-item.danger .name { color: #e0566a; }
  .ss-action { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; border: 1px dashed var(--border); margin-top: 12px; cursor: pointer; color: var(--accent); font-size: 13.5px; }
  .ss-action:hover { background: var(--hover); }

  /* Chat */
  #chatPane { flex: 1; display: none; flex-direction: column; min-height: 0; position: relative; }
  /* 聊天壁纸层（页面设置 → 壁纸主题） */
  .chat-wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
  .chat-wall::after { content: ""; position: absolute; inset: 0; background: var(--wall-veil); opacity: 0; transition: opacity .25s; }
  .chat-wall.on::after { opacity: 1; }
  .chat { flex: 1; overflow-y: auto; padding: 18px 0; scroll-behavior: auto; position: relative; z-index: 1; background: transparent; }
  .msg { display: flex; gap: 10px; margin-bottom: 18px; padding: 0 16px; }
  .msg.no-av { padding-left: 16px; }
  .msg .avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; overflow: hidden; }
  .msg .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .msg.user { flex-direction: row-reverse; }
  .msg.user .avatar { background: linear-gradient(135deg, #10a37f, #1abc9c); }
  .msg.assistant .avatar { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .msg .body { min-width: 0; max-width: 82%; display: flex; flex-direction: column; align-items: flex-start; }
  .msg.user .body { align-items: flex-end; }
  .bubble { font-size: 14.5px; max-width: 100%; }
  /* 文字排版（页面设置） */
  .chat.fs-sm .bubble { font-size: 13px; }
  .chat.fs-lg .bubble { font-size: 16px; }
  .chat.has-wall .msg.assistant .bubble { background: var(--pane-bg); padding: 10px 13px; border-radius: 14px; }
  .chat.plain .msg .body { max-width: 94%; }
  .chat.plain .msg.user .bubble { background: transparent; padding: 2px 2px; border-radius: 0; }
  .msg.user .bubble { background: var(--user-bubble); padding: 10px 13px; border-radius: 14px; border-top-right-radius: 4px; }
  .msg.assistant .bubble { padding: 2px 2px; }
  .msg .name { font-size: 11px; color: var(--text-soft); margin: 0 0 4px; padding: 0 2px; line-height: 1.4; }
  .msg .msg-time { font-size: 10px; color: var(--text-soft); opacity: .75; margin-left: 6px; }
  .msg-actions { display: flex; gap: 8px; margin-top: 7px; opacity: .75; align-items: center; }
  .msg-tokens { font-size: 10.5px; color: var(--text-soft); opacity: .85; }
  .msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  .msg-img { max-width: 200px; max-height: 200px; border-radius: 12px; display: block; object-fit: cover; }
  .msg-actions button { border: 1px solid var(--border); background: transparent; color: var(--text-soft); font-size: 11.5px; padding: 3px 9px; border-radius: 8px; cursor: pointer; }
  .msg-actions button:hover { color: var(--accent); border-color: var(--accent); }
  .msg.user .name { text-align: right; }
  .bubble p { margin: 0 0 9px; } .bubble p:last-child { margin-bottom: 0; }
  .bubble pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; overflow-x: auto; margin: 9px 0; font-size: 13px; }
  .bubble code { font-family: Consolas, Menlo, monospace; background: var(--code-bg); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
  .bubble pre code { background: none; padding: 0; }
  .bubble ul, .bubble ol { padding-left: 20px; margin: 7px 0; } .bubble li { margin: 2px 0; }
  .bubble blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--text-soft); margin: 7px 0; }
  .bubble a { color: var(--accent-2); }
  .cursor { display: inline-block; width: 6px; height: 14px; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
  .thinking { color: var(--text-soft); font-style: italic; }
  .retry-btn { margin-top: 8px; background: var(--accent); border: none; color: #fff; padding: 6px 16px; border-radius: 9px; font-size: 13px; cursor: pointer; }
  /* 无障碍：尊重系统"减少动态效果" */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    #homeView.editing .home-item { animation: none !important; }
  }
  .welcome { text-align: center; padding: 16vh 24px; color: var(--text-soft); }
  .welcome .ic { font-size: 46px; margin-bottom: 12px; }
  /* Line-icon sizing for icon containers */
  .attach-menu .ic-tile svg { width: 26px; height: 26px; display: block; }
  .send-btn svg { width: 17px; height: 17px; display: block; }
  .w-weather .icon svg { width: 30px; height: 30px; display: block; }
  .widget.sz-s1 .w-weather .icon svg { width: 17px; height: 17px; }
  .w-letter .env svg { width: 24px; height: 24px; display: block; }
  .welcome .ic svg { width: 46px; height: 46px; }
  .msg .avatar svg { width: 18px; height: 18px; display: block; }
  .fp-item .fi svg { width: 20px; height: 20px; display: block; }
  .msg-viz-btn svg { width: 13px; height: 13px; vertical-align: -2px; }
  .thinking svg { width: 13px; height: 13px; vertical-align: -2px; }
  .welcome .nm { font-size: 16px; color: var(--text); }

  .input-area { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px calc(22px + var(--kb, 0px)); background: var(--pane-bg); position: relative; z-index: 2; }
  .input-box { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); padding: 8px 8px 8px 16px; }
  .input-box:focus-within { border-color: var(--accent); }
  textarea#input { flex: 1; border: none; outline: none; resize: none; background: transparent; color: var(--text); font-size: 14.5px; font-family: inherit; max-height: 120px; line-height: 1.55; padding: 6px 0; }
  .send-btn { width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0; background: var(--accent); color: #fff; cursor: pointer; font-size: 16px; display: grid; place-items: center; }
  .send-btn:hover { filter: brightness(1.1); }
  .send-btn:disabled { opacity: .55; cursor: not-allowed; }
  .send-group { position: relative; display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; }
  .attach-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; flex-shrink: 0; }
  .attach-btn:hover { border-color: var(--accent); }
  .attach-menu { display: none; padding: 16px 6px 4px; background: var(--pane-bg); border-top: 1px solid var(--border); }
  .attach-menu.show { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
  .attach-menu button { display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; padding: 0; }
  .attach-menu .ic-tile { width: 54px; height: 54px; border-radius: 13px; border: 1px solid var(--border); background: var(--bg); display: grid; place-items: center; font-size: 26px; transition: transform .1s; }
  .attach-menu button:active .ic-tile { transform: scale(.9); }
  .attach-menu .ic-label { opacity: .85; }
  /* QQ 式功能底栏（输入框下方） */
  .tool-bar { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 0 6px; }
  .tool-bar > .tool-item:first-child { margin-left: auto; }
  .tool-bar > .tool-item:last-child { margin-right: auto; }
  .tool-bar::-webkit-scrollbar { height: 0; }
  .tool-item { display: grid; place-items: center; border: none; background: transparent; color: var(--text-soft); cursor: pointer; padding: 8px 12px; border-radius: 12px; flex: none; }
  .tool-item:hover, .tool-item:active, .tool-item.on { color: var(--accent); background: var(--hover); }
  .tool-item .ti { display: grid; place-items: center; }
  .tool-item .ti svg { width: 28px; height: 28px; display: block; }
  .tool-sub { display: none; gap: 8px; }
  .tool-sub.show { display: flex; }
  .tool-sub-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg); color: var(--text); padding: 12px 6px; font-size: 11.5px; cursor: pointer; }
  .tool-sub-item:hover { border-color: var(--accent); color: var(--accent); }
  .tool-sub-item .ti svg { width: 26px; height: 26px; display: block; }
  .img-preview { display: none; gap: 8px; flex-wrap: wrap; }
  .ip-thumb { position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
  .ip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ip-thumb .ip-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }

  .toast { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%) translateY(16px); background: #000; color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 13px; opacity: 0; transition: .25s; z-index: 99; pointer-events: none; max-width: 80%; }
  .toast.show { opacity: .95; transform: translateX(-50%) translateY(0); }
  .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .viz-overlay { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 120; display: none; flex-direction: column; }
  .viz-overlay.show { display: flex; }
  .viz-bar { position: relative; height: 50px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex: none; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--pane-bg); }
  .viz-bar .viz-x { border: none; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
  .viz-bar .viz-x:hover { background: var(--hover); }
  .viz-title { position: static; left: auto; transform: none; flex: 1 1 auto; min-width: 0; text-align: center; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .viz-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
  .viz-actions button { border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12.5px; padding: 7px 12px; border-radius: 9px; cursor: pointer; }
  .viz-actions button:hover { border-color: var(--accent); }
  .viz-actions button:disabled { opacity: .6; }
  .viz-frame { flex: 1; border: none; width: 100%; background: #fff; }
  .viz-edit { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; background: var(--pane-bg); z-index: 130; display: none; flex-direction: column; padding: 14px; }
  .viz-edit.show { display: flex; }

  /* Generation progress overlay */
  .viz-progress { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 240; display: none; align-items: center; justify-content: center; padding: 20px; }
  .viz-progress.show { display: flex; }
  .vp-card { width: 100%; max-width: 300px; background: var(--pane-bg); border: 1px solid var(--border); border-radius: 18px; padding: 24px 22px; box-shadow: 0 14px 44px rgba(0,0,0,.28); text-align: center; }
  .vp-title { font-size: 15px; font-weight: 600; margin-bottom: 18px; line-height: 1.4; }
  .vp-bar { height: 9px; border-radius: 6px; background: rgba(127,127,127,.18); overflow: hidden; }
  .vp-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #ff8fb0); transition: width .28s ease; }
  .vp-pct { font-size: 27px; font-weight: 700; margin-top: 14px; letter-spacing: .5px; }
  .vp-sub { font-size: 12px; color: var(--text-soft); margin-top: 7px; min-height: 16px; }
  .vp-cancel { margin-top: 18px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); padding: 8px 24px; border-radius: 12px; font-size: 13px; cursor: pointer; }
  .vp-cancel:hover { border-color: var(--accent); color: var(--accent); }

  .viz-edit-bar { position: relative; display: flex; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
  /* 只有标题居中；右侧的按钮组必须排除在外，否则会和标题叠在一起 */
  .viz-edit-bar > span:not(.viz-bar-actions) { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 168px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .viz-edit-bar > button:not(.ps-back) { margin-left: auto; }
  .viz-edit-bar button { border: none; background: transparent; color: var(--accent); font-size: 14px; cursor: pointer; }
  .viz-bar-actions { display: flex; gap: 14px; align-items: center; margin-left: auto; flex: none; }
  .fp-hint { font-size: 11px; color: var(--text-soft); margin-bottom: 8px; }
  /* 文件库：更扁更紧凑的行（只留标题） */
  .ss-item.slim { padding: 9px 14px; border-radius: 11px; margin-bottom: 6px; }
  .ss-item.slim .name { font-size: 14px; font-weight: 500; }
  .ss-item.slim .del { font-size: 14px; padding: 2px 6px; }
  /* 文件行右侧的编辑（笔）按钮 */
  .ss-item .pen { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 9px; background: transparent; color: var(--text-soft); opacity: .8; cursor: pointer; }
  .ss-item .pen svg { width: 16px; height: 16px; }
  .ss-item .pen:hover, .ss-item .pen:active { background: var(--hover); color: var(--accent); opacity: 1; }
  .fl-files .ss-item .pen { opacity: .85; }
  /* 文件操作面板（点笔） */
  .fm-legend { font-size: 11.5px; color: var(--text-soft); margin: 14px 4px 7px; }
  .fm-legend:first-child { margin-top: 0; }
  .fm-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 12px 14px; border: none; border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit; cursor: pointer; }
  .fm-btn:hover, .fm-btn:active { background: var(--hover); }
  .fm-btn .nm { flex: 1; min-width: 0; }
  .fm-btn .cur { flex-shrink: 0; max-width: 45%; font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 6px; border: none; border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit; cursor: pointer; }
  .fm-opt:hover, .fm-opt:active { background: var(--hover); }
  .fm-opt .tick { flex-shrink: 0; width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
  .fm-opt .tick svg { width: 15px; height: 15px; }
  .fm-opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-opt .tag { flex-shrink: 0; font-size: 11px; color: var(--text-soft); }
  .fm-opt.on { color: var(--accent); font-weight: 600; }
  .fm-opt.on .tag { color: var(--accent); opacity: .7; }
  .fm-hint { font-size: 11.5px; color: var(--text-soft); margin: 2px 4px 0; line-height: 1.6; }

  /* ---------- 页面设置面板 ---------- */
  #pageSet { z-index: 135; }
  /* 与主界面顶栏返回键保持同样大小（提高特异性，避免被 .viz-edit-bar button 的 14px 覆盖） */
  .viz-edit-bar .ps-back { flex: none; width: 40px; height: 40px; margin-left: -8px; border: none; background: transparent; color: var(--text); font-size: 24px; line-height: 1; border-radius: 10px; cursor: pointer; }
  .viz-edit-bar .ps-back:hover { background: var(--hover); }
  .ps-body { flex: 1; overflow-y: auto; padding: 16px 0 26px; }
  .ps-gt { font-size: 11.5px; color: var(--text-soft); margin: 16px 4px 7px; }
  .ps-gt:first-child { margin-top: 2px; }
  .ps-group { border-radius: 14px; overflow: hidden; background: var(--bg); }
  .ps-item { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .ps-group .ps-item:last-child { border-bottom: none; }
  .ps-item:hover { background: var(--hover); }
  .ps-item.col { flex-direction: column; align-items: stretch; gap: 8px; }
  .ps-item .meta { flex: 1; min-width: 0; }
  .ps-item .nm { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-item .sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-item .chev { color: var(--text-soft); font-size: 19px; line-height: 1; }
  .ps-btn { flex-shrink: 0; border: 1px solid var(--border); background: var(--pane-bg); color: var(--accent); font-size: 12.5px; font-family: inherit; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
  .ps-btn:hover { border-color: var(--accent); }
  .ps-btn.ghost { color: var(--text-soft); }
  .ps-primary { width: 100%; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600; font-family: inherit; padding: 13px; cursor: pointer; margin-bottom: 12px; }
  .ps-sw { flex-shrink: 0; width: 44px; height: 26px; border-radius: 99px; background: var(--border); position: relative; transition: background .2s; }
  .ps-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
  .ps-sw.on { background: var(--accent); }
  .ps-sw.on i { transform: translateX(18px); }
  .ps-thumb { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft) center/cover no-repeat; border: 1px solid var(--border); }
  .ps-seg { flex: 1; }
  .ps-seg button { flex: 1; padding: 8px 0; font-size: 13px; }
  .ps-walls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ps-wall { position: relative; aspect-ratio: 1 / 1; border-radius: 13px; background: var(--pane-bg) center/cover no-repeat; border: 1px solid var(--border); overflow: hidden; cursor: pointer; display: grid; place-items: center; color: var(--text-soft); }
  .ps-wall.empty { background-image: none; border-style: dashed; }
  .ps-wall.empty svg { width: 22px; height: 22px; opacity: .45; }
  .ps-wall .add { position: absolute; bottom: 8px; font-size: 11px; color: var(--text-soft); }
  .ps-wall .idx { position: absolute; top: 6px; left: 8px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); opacity: .9; }
  .ps-wall.empty .idx { color: var(--text-soft); text-shadow: none; }
  .ps-wall .x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
  .ps-wall .using { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 99px; }
  .ps-wall.on { border-color: var(--accent); border-width: 2px; }
  .ps-tip { font-size: 11.5px; color: var(--text-soft); line-height: 1.7; margin: 12px 4px 0; }
  #vizEditArea, #panelEditArea, #panelExportArea { flex: 1; min-height: 200px; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-family: Consolas, Menlo, monospace; font-size: 13px; padding: 12px; resize: none; outline: none; line-height: 1.65; -webkit-overflow-scrolling: touch; }
  #vizEditArea:focus, #panelEditArea:focus, #panelExportArea:focus { border-color: var(--accent); }
  #panelExport { z-index: 350; }
  .viz-edit-actions { margin-top: 10px; }
  .viz-edit-actions button { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; }
  .viz-edit-hint { font-size: 11.5px; color: var(--text-soft); margin-top: 10px; line-height: 1.6; white-space: pre-wrap; max-height: 30%; overflow-y: auto; }

  /* File library */
  #fileLibPane { flex: 1; overflow-y: auto; padding: 16px 16px 30px; display: none; }
  .fl-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
  .fl-toolbar button { flex: 1; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 13.5px; cursor: pointer; }
  .fl-toolbar button:hover { border-color: var(--accent); }
  .fl-folders { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px; }
  .fl-folders::-webkit-scrollbar { height: 0; }
  .fl-chip { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--pane-bg); color: var(--text); font-size: 12.5px; cursor: pointer; }
  .fl-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .fl-chip .x { opacity: .65; }
  .fl-chip .x:hover { color: #ef4444; opacity: 1; }
  .fl-files .ss-item.slim { gap: 2px; }
  .fl-files .ss-item .del { opacity: .5; }
  .fl-files .ss-item:hover .del { opacity: 1; }

  /* World book */
  #worldPane { display: none; flex: 1; overflow-y: auto; padding: 16px 16px 30px; }
  /* 世界书 / 条目：右上角的小胶囊按钮（沿用列表 chip 的样式，用来新建） */
  .wb-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
  .wb-actions:empty { display: none; }
  .wb-actions .fl-chip { font-family: inherit; }
  .wb-entry.off { opacity: .55; }
  .wb-tag { display: inline-block; padding: 1px 7px; margin-right: 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; }
  .ss-item .name.has-tag { display: flex; align-items: center; gap: 6px; }
  .ss-item .name.has-tag .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wb-tag.builtin { flex: none; margin-right: 0; padding: 1px 6px; font-size: 10px; }
  .wb-keys { color: var(--text-soft); }
  .wb-sw { position: relative; flex: none; width: 40px; height: 23px; padding: 0; border: none; border-radius: 99px; background: var(--border); cursor: pointer; transition: background .18s; }
  .wb-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s; }
  .wb-sw.on { background: var(--accent); }
  .wb-sw.on::after { left: 19px; }
  .sheet-body { display: flex; flex-direction: column; gap: 12px; }
  .wb-fld { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
  .wb-fld input, .wb-fld textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; outline: none; resize: vertical; font-family: inherit; }
  .wb-fld input:focus, .wb-fld textarea:focus { border-color: var(--accent); }
  .wb-hint { font-size: 11px; color: var(--text-soft); }
  .wb-content-wrap { position: relative; }
  #weContent { padding-right: 96px; }
  .wb-import { position: absolute; top: 7px; right: 7px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--pane-bg); color: var(--accent); font-size: 11.5px; cursor: pointer; }
  .wb-import:hover { border-color: var(--accent); }
  .wb-convlist { display: flex; flex-direction: column; gap: 7px; max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
  .wb-conv { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
  .wb-conv input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
  .api-presets { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
  .ap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .ap-title { font-size: 13px; font-weight: 700; color: var(--text); }
  .ap-head .ghost-btn { flex: none; padding: 7px 14px; }
  .ap-list { display: flex; flex-direction: column; gap: 9px; }
  .ap-empty { font-size: 12.5px; color: var(--text-soft); line-height: 1.7; }
  .ap-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--pane-bg); cursor: pointer; }
  .ap-item:hover { background: var(--hover); }
  .ap-item.on { border-color: var(--accent); }
  .ap-meta { flex: 1; min-width: 0; }
  .ap-name { font-size: 13.5px; font-weight: 600; }
  .ap-item.on .ap-name::after { content: " · 当前"; color: var(--accent); font-weight: 500; font-size: 11.5px; }
  .ap-sub { font-size: 11px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-item .del { opacity: .5; color: var(--text-soft); font-size: 15px; padding: 3px 7px; border-radius: 8px; }
  .ap-item:hover .del { opacity: 1; }
  .ap-item .del:hover { background: rgba(255,80,80,.18); color: #ef4444; }

  /* Memory */
  #memoryPane { display: none; flex: 1; overflow-y: auto; padding: 16px 16px 30px; }
  .mem-set { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
  .mem-th { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
  .mem-th input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; outline: none; }
  .mem-th input:focus { border-color: var(--accent); }
  .mem-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text); }
  .mem-sec { margin-bottom: 20px; }
  .mem-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .mem-add { border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--accent); font-size: 12px; padding: 5px 12px; cursor: pointer; }
  .mem-add:hover { border-color: var(--accent); }
  .mem-list { display: flex; flex-direction: column; gap: 9px; }
  .mem-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: var(--pane-bg); }
  .mem-item:hover { background: var(--hover); }
  .mem-item .mem-meta { flex: 1; min-width: 0; cursor: pointer; }
  .mem-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .mem-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .mem-tag { background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; }
  .mem-bind { color: var(--text-soft); font-size: 10.5px; }
  .mem-cat { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; margin-right: 7px; vertical-align: middle; }
  .mem-item .pen { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 9px; background: transparent; color: var(--text-soft); opacity: .8; cursor: pointer; }
  .mem-item .pen svg { width: 16px; height: 16px; }
  .mem-item .pen:hover, .mem-item .pen:active { background: var(--hover); color: var(--accent); opacity: 1; }
  .mem-item .del { opacity: .5; color: var(--text-soft); font-size: 15px; padding: 3px 7px; border-radius: 8px; }
  .mem-item:hover .del { opacity: 1; }
  .mem-item .del:hover { background: rgba(255,80,80,.18); color: #ef4444; }
  .mem-view-body { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
  .mem-block { font-size: 13.5px; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
  .mem-h2 { font-size: 12.5px; font-weight: 700; color: var(--text-soft); margin: 18px 0 10px; }
  .mem-empty { font-size: 12.5px; color: var(--text-soft); }
  .mem-bind-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
  .mem-bind-item:hover { background: var(--hover); }
  .mem-msg { padding: 10px 12px; border-radius: 12px; margin-bottom: 9px; font-size: 13px; line-height: 1.7; }
  .mem-msg.u { background: var(--user-bubble); }
  .mem-msg.a { background: var(--pane-bg); }
  .mem-msg b { display: block; font-size: 11px; color: var(--text-soft); margin-bottom: 3px; font-weight: 600; }
  .ask-sheet { display: flex; flex-direction: column; }
  .ask-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 15px; outline: none; }
  .ask-input:focus { border-color: var(--accent); }
  .ask-hint { font-size: 11.5px; color: var(--text-soft); margin-top: 9px; line-height: 1.6; }
  .ask-sheet .save-btn { margin-top: 14px; }
  .cfm-body { font-size: 13.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
  .cfm-check-row { margin-top: 14px; }
  .cfm-check-row label { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--sub-color, #888); cursor: pointer; line-height: 1.5; }
  .cfm-check-row input { margin-top: 2px; }
  .sheet-btns .primary.danger { background: #d9534f; }
  .ps-range { width: 100%; margin-top: 14px; accent-color: var(--accent); }
  .ps-row-head { display: flex; align-items: center; justify-content: space-between; }
  .ps-val { font-size: 12.5px; font-weight: 600; color: var(--accent); }
  .ps-num { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px; outline: none; }
  .ps-num:focus { border-color: var(--accent); }
  /* ---------- 属性面板（剧情状态） ---------- */
  /* ---------- 属性面板（悬浮窗 · 主题 token 化，可跟随剧情风格） ---------- */
  #panelApp {
    position: absolute; top: 92px; right: 12px; left: auto; bottom: auto;
    width: min(340px, calc(100% - 24px)); max-height: 66%;
    z-index: 310; display: none; flex-direction: column; overflow: hidden;
    border-radius: 18px; border: 1px solid var(--pn-border-c);
    background: var(--pn-card-bg); color: var(--pn-text);
    box-shadow: 0 18px 46px rgba(0,0,0,.34), var(--pn-glow);
    transition: box-shadow .2s, border-color .2s, background .2s;
    /* 默认：跟随 App 主题 */
    --pn-acc: var(--accent); --pn-acc2: var(--accent-2);
    --pn-card-bg: var(--bg); --pn-cell-bg: var(--pane-bg); --pn-border-c: var(--border);
    --pn-text: var(--text); --pn-sub: var(--text-soft); --pn-radius: 12px; --pn-glow: none;
  }
  #panelApp.show { display: flex; }
  #panelApp.full { top: 44px; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; border-left: none; border-right: none; }
  #panelApp.dragging { transition: none; }
  .pn-head { position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pn-border-c); background: var(--pn-cell-bg); cursor: grab; touch-action: none; user-select: none; }
  #panelApp.full .pn-head { cursor: default; }
  .pn-head:active { cursor: grabbing; }
  .pn-grip { flex: none; width: 26px; height: 16px; display: grid; place-items: center; color: var(--pn-sub); opacity: .7; }
  .pn-grip svg { width: 16px; height: 16px; }
  .pn-head .t { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 150px); font-size: 14.5px; font-weight: 700; color: var(--pn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .pn-head .h-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
  .pn-icon { width: 28px; height: 28px; border: none; background: transparent; color: var(--pn-sub); border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 14px; padding: 0; }
  .pn-icon:hover { background: var(--pn-cell-bg); color: var(--pn-acc); }
  .pn-icon svg { width: 15px; height: 15px; }
  .pn-tools { flex: none; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--pn-border-c); }
  .pn-tools::-webkit-scrollbar { height: 0; }
  .pn-chip { flex: none; border: 1px solid var(--pn-border-c); background: transparent; color: var(--pn-text); font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
  .pn-chip:hover { border-color: var(--pn-acc); color: var(--pn-acc); }
  #panelEdit { z-index: 340; }
  #panelStyleSheet { z-index: 345; }
  .panel-body { flex: 1; overflow-y: auto; padding: 12px 12px 20px; -webkit-overflow-scrolling: touch; }
  .panel-src { font-size: 11px; color: var(--pn-sub); margin: 0 2px 12px; line-height: 1.6; }
  .panel-grp-title { font-size: 11.5px; font-weight: 700; color: var(--pn-sub); margin: 10px 2px 8px; }
  .panel-grid { display: grid; gap: 9px; margin-bottom: 12px; }
  .panel-cell { background: var(--pn-cell-bg); border: 1px solid var(--pn-border-c); border-radius: var(--pn-radius); padding: 9px 11px; min-width: 0; }
  .panel-cell.list { grid-column: 1 / -1; }
  .panel-cell .lbl { font-size: 11.5px; color: var(--pn-sub); }
  .panel-cell .val { font-size: 16.5px; font-weight: 700; margin-top: 3px; word-break: break-word; white-space: pre-line; color: var(--pn-text); }
  .panel-cell .val .unit { font-size: 11px; font-weight: 500; color: var(--pn-sub); margin-left: 4px; }
  .panel-bar { height: 6px; border-radius: 4px; background: var(--pn-border-c); margin-top: 8px; overflow: hidden; }
  .panel-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pn-acc), var(--pn-acc2)); box-shadow: var(--pn-glow); transition: width .3s; }
  .panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .panel-tag { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--pn-cell-bg); border: 1px solid var(--pn-border-c); color: var(--pn-acc); }
  .panel-list { margin: 6px 0 0; padding-left: 17px; font-size: 12.5px; line-height: 1.7; color: var(--pn-text); }
  .panel-empty { text-align: center; color: var(--pn-sub); font-size: 13px; padding: 40px 20px; line-height: 1.9; }
  .panel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--pn-cell-bg); border: 1px solid var(--pn-border-c); border-radius: var(--pn-radius); padding: 9px 11px; margin-bottom: 12px; }
  .panel-row .pl { font-size: 12.5px; font-weight: 600; color: var(--pn-text); }
  .panel-row .pl em { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--pn-sub); margin-top: 3px; line-height: 1.5; }
  .panel-btn { flex: none; border: none; background: var(--pn-cell-bg); border: 1px solid var(--pn-border-c); color: var(--pn-acc); font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
  .panel-sw { flex: none; border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--pn-cell-bg, var(--hover)); border: 1px solid var(--pn-border-c, var(--border)); color: var(--pn-sub, var(--text-soft)); cursor: pointer; }
  .panel-sw.on { background: var(--pn-acc, var(--accent)); border-color: var(--pn-acc, var(--accent)); color: #fff; }
  /* 风格选择 */
  .pn-styles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .pn-style-item { border: 1px solid var(--border); background: var(--bg); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 7px; }
  .pn-style-item.on { border-color: var(--accent); color: var(--accent); }
  .pn-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(127,127,127,.35); }
  .pn-stylerow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); margin-bottom: 12px; }
  .pn-stylerow input[type=color] { width: 42px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
  .pn-hint { font-size: 11px; color: var(--text-soft); line-height: 1.6; margin-top: 10px; }
  /* 可视化自动触发设置 */
  .viz-trig-item { border: 1px solid var(--border); background: var(--bg); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; }
  .viz-trig-item .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
  .viz-trig-item .row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); margin-top: 9px; }
  .viz-trig-item .row > span:first-child { flex: none; }
  .viz-trig-item input[type=text] { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 7px 10px; font-size: 12px; font-family: inherit; }
  .viz-trig-item input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
  .viz-trig-item .pct { flex: none; width: 40px; text-align: right; color: var(--text); font-weight: 600; font-size: 12px; }
  /* ---------- 手机消息（仿 iMessage，可与剧情人物收发） ---------- */
  /* 短信：悬浮窗，四周留缝，能看见背后的剧情 */
  #smsApp { position: absolute; left: 10px; right: 10px; top: calc(44px + 50px + 8px); height: 42%; z-index: 300; background: #fff; color: #000; display: none; flex-direction: column; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.05); transition: height .22s cubic-bezier(.2,.8,.2,1); }
  #smsApp.show { display: flex; }
  #smsApp.big { height: 64%; }
  #smsApp.dragging { transition: none; }
  /* 右下角尺寸把手：按住上下拖，拉长/收短信浮窗 */
  #smsApp .sms-grip { position: absolute; right: 9px; bottom: 9px; z-index: 6; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.06); background: rgba(120,120,128,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #6c6c72; display: grid; place-items: center; cursor: ns-resize; touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, transform .15s; }
  #smsApp .sms-grip svg { width: 15px; height: 15px; }
  #smsApp .sms-grip:active, #smsApp .sms-grip.act { background: rgba(120,120,128,.28); color: #3c3c43; transform: scale(.94); }
  #smsApp.chatmode .sms-grip { bottom: var(--grip-b, 84px); }
  @keyframes smsGripNudge { 0%, 100% { transform: translateY(0); } 28% { transform: translateY(5px); } 58% { transform: translateY(-4px); } 82% { transform: translateY(2px); } }
  #smsApp .sms-grip.hint { animation: smsGripNudge 1.15s ease 2; }
  .sms-when.is-state { max-width: 216px; color: #6b7280; font-size: 10.5px; line-height: 1.35; white-space: normal; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sms-away { align-self: center; margin: 8px 0 2px; padding: 4px 12px; border-radius: 999px; background: rgba(120,120,128,.10); color: #8e8e93; font-size: 11.5px; text-align: center; }
  /* 浮窗里把头部收紧，把高度让给聊天内容 */
  #smsApp .sms-head { padding-top: 14px; }
  #smsApp .sms-top { padding: 10px 10px 6px; }
  #smsApp .sms-who { margin-top: 0; gap: 3px; }
  #smsApp .sms-who .sms-ava { width: 38px; height: 38px; font-size: 17px; }
  #smsApp .sms-pill { font-size: 11px; padding: 1px 7px; }
  #smsApp .sms-top .row { height: 28px; }
  .sms-view { flex: 1; display: none; flex-direction: column; min-height: 0; }
  .sms-view.on { display: flex; }
  .sms-head { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(249,249,249,.96); border-bottom: .5px solid rgba(0,0,0,.12); }
  .sms-head .t { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 700; pointer-events: none; }
  .sms-head .h-actions { display: flex; align-items: center; gap: 6px; }
  .sms-delbtn { border: none; background: rgba(120,120,128,.16); color: #e0566a; font-size: 13px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
  .sms-pick-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-soft); margin: 2px 2px 10px; }
  .sms-back { display: inline-flex; align-items: center; gap: 3px; background: rgba(120,120,128,.16); color: #0b84ff; border: none; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 15px; cursor: pointer; }
  .sms-back svg { width: 15px; height: 15px; }
  .sms-badge { background: #0b84ff; color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 7px; }
  .sms-threads { flex: 1; overflow-y: auto; padding: 6px 0 20px; }
  #smsApp .sms-threads { padding-bottom: 46px; }
  .sms-th { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; }
  .sms-th:hover { background: #f2f2f7; }
  .sms-th .meta { flex: 1; min-width: 0; }
  .sms-th .nm { font-size: 16px; font-weight: 600; }
  .sms-th .pv { font-size: 13px; color: #8e8e93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
  .sms-th .rt { font-size: 12px; color: #8e8e93; flex: none; }
  .sms-dot { width: 9px; height: 9px; border-radius: 50%; background: #0b84ff; flex: none; }
  .sms-ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 600; background: #8fa6c8; flex: none; }
  .sms-top { flex: none; position: relative; padding: 6px 10px 9px; background: rgba(249,249,249,.96); border-bottom: .5px solid rgba(0,0,0,.12); }
  .sms-top .row { height: 32px; display: flex; align-items: center; }
  .sms-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -4px; pointer-events: none; }
  .sms-who .sms-ava { width: 46px; height: 46px; font-size: 21px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
  .sms-pill { display: inline-flex; align-items: center; gap: 2px; background: rgba(120,120,128,.14); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: #3c3c43; max-width: 220px; }
  .sms-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sms-pill svg { width: 11px; height: 11px; flex: none; }
  .sms-when { font-size: 11px; color: #8e8e93; }
  .sms-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 12px 12px 10px; background: #fff; }
  #smsApp .sms-chat { padding-bottom: 46px; }
  .sms-day { text-align: center; font-size: 11px; color: #8e8e93; margin: 4px 0 12px; }
  .sms-msg { max-width: 76%; margin: 2px 0; padding: 8px 13px; font-size: 16px; line-height: 1.32; border-radius: 19px; word-break: break-word; white-space: pre-wrap; }
  .sms-msg.in { align-self: flex-start; background: #e9e9eb; }
  .sms-msg.out { align-self: flex-end; background: #0b84ff; color: #fff; }
  .sms-msg.tail { position: relative; }
  .sms-msg.in.tail { border-bottom-left-radius: 6px; }
  .sms-msg.out.tail { border-bottom-right-radius: 6px; }
  .sms-msg.in.tail::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 13px; height: 13px; background: #e9e9eb; border-bottom-right-radius: 100%; }
  .sms-msg.out.tail::after { content: ""; position: absolute; right: -4px; bottom: 0; width: 13px; height: 13px; background: #0b84ff; border-bottom-left-radius: 100%; }
  .sms-typing { align-self: flex-start; background: #e9e9eb; border-radius: 19px; padding: 11px 15px; display: flex; gap: 4px; margin-top: 2px; }
  .sms-typing i { width: 8px; height: 8px; border-radius: 50%; background: #b0b0b5; display: block; animation: bl 1.2s infinite; }
  .sms-typing i:nth-child(2) { animation-delay: .2s; }
  .sms-typing i:nth-child(3) { animation-delay: .4s; }
  .sms-bar { position: relative; flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 12px max(24px, env(safe-area-inset-bottom)); background: #f7f7f7; border-top: .5px solid rgba(0,0,0,.1); }
  /* ＋ 号弹出的附件菜单：发送图片 / 转账 */
  .sms-attach { position: absolute; left: 12px; bottom: calc(100% + 12px); display: none; flex-direction: column; gap: 2px; min-width: 150px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.12); z-index: 45; }
  .sms-attach.show { display: flex; animation: smsPop .16s ease-out; }
  @keyframes smsPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
  .sms-attach button { display: flex; align-items: center; gap: 10px; border: none; background: transparent; color: #000; font-size: 15px; font-family: inherit; padding: 9px 16px 9px 9px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
  .sms-attach button:active { background: #f0f0f3; }
  .sms-attach .ai { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0b84ff; color: #fff; display: grid; place-items: center; }
  .sms-attach .ai svg { width: 16px; height: 16px; }
  .sms-plus.on { background: rgba(11,132,255,.16); color: #0b84ff; }
  /* 消息里的图片 */
  .sms-msg.has-img { padding: 4px; background: none; }
  .sms-msg.out.has-img, .sms-msg.in.has-img { background: none; }
  .sms-img { display: block; max-width: 190px; max-height: 250px; border-radius: 15px; }
  /* 转账卡片：我方=蓝色底（付款），对方=白底蓝字（收款） */
  .sms-msg.tx-msg { padding: 0; background: none; max-width: 82%; }
  .sms-msg.tx-msg.tail::after { display: none; }
  .tx-card { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 11px 13px; border-radius: 16px; }
  .sms-msg.out .tx-card { background: linear-gradient(135deg, #0a84ff, #0b6fe0); color: #fff; }
  .sms-msg.in .tx-card { background: #fff; color: #0a84ff; border: 1px solid rgba(10,132,255,.34); }
  .tx-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
  .sms-msg.out .tx-ico { background: rgba(255,255,255,.22); color: #fff; }
  .sms-msg.in .tx-ico { background: rgba(10,132,255,.12); color: #0a84ff; }
  .tx-ico svg { width: 17px; height: 17px; }
  .tx-main { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
  .tx-amt { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
  .tx-note { font-style: normal; font-size: 11.5px; opacity: .88; }
  .tx-st { font-style: normal; font-size: 11px; opacity: .82; }
  .tx-btn { margin-left: auto; flex: none; border: none; background: #0a84ff; color: #fff; font-size: 12.5px; font-family: inherit; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
  .tx-btn:active { opacity: .85; }
  /* 转账面板 */
  #smsPay { z-index: 400; }   /* 必须高于手机消息页(300)，否则被输入栏挡住 */
  .pay-sheet .sheet-btns .primary { background: #0b84ff; }
  .pay-to { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 13px; }
  .pay-to .pay-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #0b84ff; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
  .pay-amount { display: flex; align-items: baseline; gap: 7px; padding: 4px 2px 12px; border-bottom: 1.5px solid var(--border); }
  .pay-amount .cur { font-size: 26px; font-weight: 700; color: var(--text); }
  .pay-amount input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 34px; font-weight: 700; color: var(--text); font-family: inherit; padding: 0; }
  .sms-plus { width: 32px; height: 32px; flex: none; border-radius: 50%; border: none; background: rgba(120,120,128,.16); color: #3c3c43; font-size: 19px; cursor: pointer; }
  .sms-input { flex: 1; height: 36px; border: 1px solid rgba(0,0,0,.14); border-radius: 18px; background: #fff; padding: 0 14px; font-size: 16px; outline: none; color: #000; font-family: inherit; }
  .sms-send { width: 32px; height: 32px; flex: none; border-radius: 50%; border: none; background: #0b84ff; color: #fff; display: grid; place-items: center; cursor: pointer; }
  .sms-send svg { width: 17px; height: 17px; }
  .sms-send:disabled { opacity: .4; }
  /* 剧情对话里的未读通知卡 */
  .sms-notice { margin: 6px 16px 12px; border: 1px solid var(--border); background: var(--pane-bg); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; cursor: pointer; }
  .sms-notice:hover { border-color: var(--accent); }
  .sms-notice .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
  .sms-notice .ic svg { width: 19px; height: 19px; }
  .sms-notice .nm { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .sms-notice .sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
  /* 拉黑 / 马甲 */
  .sms-top .row { justify-content: space-between; }
  .sms-block { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #8e8e93; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .sms-block svg { width: 20px; height: 20px; }
  .sms-block:hover { background: rgba(120,120,128,.14); }
  .sms-block.on { color: #e0566a; background: rgba(224,86,106,.12); }
  .sms-th.blocked .nm { color: #8e8e93; }
  .sms-tag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: #e0566a; background: rgba(224,86,106,.12); padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
  .sms-outwrap { align-self: flex-end; max-width: 76%; display: flex; flex-direction: column; align-items: flex-end; }
  .sms-outwrap .sms-msg { max-width: 100%; }
  .sms-by { font-size: 11px; color: #8e8e93; margin: 3px 6px 0; }
  .sms-blocked-line { align-self: center; text-align: center; font-size: 12px; color: #8e8e93; margin: 6px 14px 10px; line-height: 1.5; }
  .sms-maskbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: #f7f7f7; border-top: .5px solid rgba(0,0,0,.1); }
  .sms-bar.has-mask { border-top: none; }
  .sms-maskbar .lb { font-size: 11.5px; color: #8e8e93; }
  .sms-mask { display: inline-flex; align-items: center; gap: 2px; border: none; background: rgba(120,120,128,.14); color: #3c3c43; border-radius: 999px; padding: 3px 9px 3px 11px; font-size: 12.5px; cursor: pointer; }
  .sms-mask svg { width: 12px; height: 12px; }
  .sheet-btns { display: flex; gap: 10px; margin-top: 16px; }
  .sheet-btns .ghost { flex: 1; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 13.5px; cursor: pointer; }
  .sheet-btns .primary { flex: 1; padding: 11px; border: none; border-radius: 11px; background: var(--accent); color: #fff; font-size: 13.5px; cursor: pointer; }

  /* File picker (select from library) */
  #filePicker { z-index: 320; }
  .fp-list { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
  .fp-item { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--pane-bg); margin-bottom: 9px; cursor: pointer; }
  .fp-item:hover { background: var(--hover); }
  .fp-item.dim { opacity: .62; }
  .fp-item.dim:hover { opacity: 1; }
  .fp-item .fi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--accent-soft); flex-shrink: 0; }
  .fp-item .meta { flex: 1; min-width: 0; }
  .fp-item .fn { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fp-item .fs { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
  .fp-empty { text-align: center; color: var(--text-soft); font-size: 13px; padding: 80px 24px; line-height: 1.9; }

  @media (max-width: 460px) {
    /* 真机：填满视口且不居中，键盘弹出时随视口平滑收缩，避免整块跳动/留白 */
    body { background: var(--page-bg); min-height: 0; height: 100%; align-items: stretch; overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; width: 100%; }
    .phone { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; padding: 0; box-shadow: none; flex-shrink: 1; }
    .screen { border-radius: 0; }
    /* 输入控件字号 >= 16px，避免 iOS 聚焦时自动放大页面 */
    input, textarea, select, textarea#input { font-size: 16px !important; }
  }

  /* ===== 世界漫游（梦幻浅色 · 取自色卡） ===== */
  .screen.rm-mode { background: #f8f5fc; }
  .screen.rm-mode .statusbar { color: #55527a; text-shadow: none; }
  .screen.rm-mode .toast { background: rgba(74,66,110,.94); }
  #roamPane { --rm-ink: #45426e; --rm-ink-2: #7d7aa6; --rm-line: rgba(113,129,200,.16); --rm-card: rgba(255,255,255,.72);
    padding: 0; position: relative; overflow: hidden; color: var(--rm-ink);
    background: radial-gradient(95% 55% at 12% 0%, #f1cfed 0%, rgba(241,207,237,0) 58%),
      radial-gradient(85% 50% at 92% 4%, #b7d3f4 0%, rgba(183,211,244,0) 62%),
      radial-gradient(90% 45% at 50% 100%, #f1e5f6 0%, rgba(241,229,246,0) 60%),
      linear-gradient(180deg, #faf7fd 0%, #f4f1fb 55%, #fdf9fe 100%); }
  #roamPane::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: radial-gradient(1.3px 1.3px at 18% 22%, rgba(113,129,200,.30), transparent 60%),
      radial-gradient(1px 1px at 72% 14%, rgba(241,207,237,.9), transparent 60%),
      radial-gradient(1.5px 1.5px at 84% 62%, rgba(183,211,244,.85), transparent 60%),
      radial-gradient(1px 1px at 32% 74%, rgba(171,171,220,.35), transparent 60%),
      radial-gradient(1.1px 1.1px at 56% 42%, rgba(241,229,246,.95), transparent 60%); }
  .rm-home { position: relative; z-index: 1; height: 100%; overflow-y: auto; padding: 58px 20px calc(40px + env(safe-area-inset-bottom)); }
  .rm-home::-webkit-scrollbar { display: none; }
  .rm-hero { margin: 0 0 20px; }
  .rm-exit { position: absolute; z-index: 4; top: 14px; left: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.68); color: #5c5a8e; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(113,129,200,.16); }
  .rm-exit:active { background: #fff; }
  .rm-hero-en { font-size: 9.5px; letter-spacing: .34em; color: rgba(113,129,200,.6); margin-bottom: 8px; }
  .rm-hero-t { font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; font-size: 38px; font-weight: 700; letter-spacing: .06em; line-height: 1.1;
    background: linear-gradient(100deg, #5b5892 0%, #7f74bb 46%, #6f9fd0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .rm-hero-s { margin-top: 8px; font-size: 12.5px; color: var(--rm-ink-2); letter-spacing: .04em; }
  .rm-sec { font-size: 10.5px; letter-spacing: .22em; color: rgba(125,122,166,.75); margin: 18px 0 10px; }
  .rm-party { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .rm-party::-webkit-scrollbar { display: none; }
  .rm-friend { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; position: relative; }
  .rm-friend-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #6a67a0; background: rgba(255,255,255,.8); border: 1.5px solid #fff; box-shadow: 0 6px 16px rgba(113,129,200,.18); transition: all .2s; }
  .rm-friend.on .rm-friend-ava { color: #fff; background: linear-gradient(140deg, #7181c8, #ababdc); box-shadow: 0 0 0 3px rgba(183,211,244,.6), 0 10px 22px rgba(113,129,200,.34); }
  .rm-friend-nm { font-size: 11px; color: var(--rm-ink-2); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-friend.on .rm-friend-nm { color: #45426e; }
  .rm-friend-pt { position: absolute; top: -2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: linear-gradient(135deg, #7181c8, #b7d3f4); color: #fff; font-size: 9.5px; line-height: 16px; text-align: center; box-shadow: 0 3px 8px rgba(113,129,200,.35); }
  .rm-pmeta { margin-top: 8px; font-size: 11px; color: rgba(125,122,166,.8); letter-spacing: .02em; }
  .rm-empty { font-size: 12px; line-height: 1.7; color: var(--rm-ink-2); padding: 8px 2px; }
  .rm-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rm-card { position: relative; display: flex; flex-direction: column; gap: 3px; height: 148px; padding: 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 22px; text-align: left; color: #fff; font-family: inherit; cursor: pointer; overflow: hidden;
    background: linear-gradient(152deg, var(--c1), var(--c2)); box-shadow: 0 12px 26px rgba(113,129,200,.24), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .16s, box-shadow .16s; }
  .rm-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -34px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 68%); }
  .rm-card:active { transform: scale(.97); }
  .rm-card-no { font-size: 10px; letter-spacing: .18em; opacity: .72; }
  .rm-card-name { margin-top: auto; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 19px; font-weight: 700; letter-spacing: .03em; }
  .rm-card-sub { font-size: 10.5px; line-height: 1.5; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rm-card-foot { margin-top: 6px; font-size: 9.5px; letter-spacing: .04em; opacity: .72; }
  .rm-card.done { opacity: .8; }

  .rm-stage { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; color: var(--rm-ink);
    background: linear-gradient(180deg, #fbf8fe 0%, #f5f1fb 100%); }
  .rm-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(100% 50% at 18% 0%, rgba(113,129,200,.28) 0%, rgba(113,129,200,0) 62%),
      radial-gradient(90% 45% at 88% 4%, rgba(183,211,244,.5) 0%, rgba(183,211,244,0) 64%),
      radial-gradient(70% 40% at 70% 100%, rgba(241,207,237,.45) 0%, rgba(241,207,237,0) 62%); }
  .rm-stage-top { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
  .rm-back { flex: none; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.95); border-radius: 50%; background: rgba(255,255,255,.72); color: #5c5a8e; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(113,129,200,.16); }
  .rm-stage-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rm-stage-title span:first-child { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 16px; font-weight: 700; letter-spacing: .05em; color: #3f3d63; }
  .rm-stage-title span:last-child { font-size: 10.5px; color: var(--rm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-next { flex: none; padding: 7px 12px; border: 1px solid rgba(113,129,200,.28); border-radius: 999px; background: rgba(255,255,255,.75); color: #5c5a8e; font-family: inherit; font-size: 11.5px; cursor: pointer; box-shadow: 0 5px 14px rgba(113,129,200,.14); }
  .rm-next:active { background: #fff; }
  .rm-msgs { position: relative; z-index: 2; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 14px 14px; }
  .rm-scene { margin: 10px 4px 4px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 10px 24px rgba(113,129,200,.14); text-align: center; }
  .rm-scene-t { display: block; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 14px; letter-spacing: .08em; color: #4d4a7a; }
  .rm-scene-d { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: #7d7aa6; }
  .rm-msg { display: flex; align-items: flex-start; gap: 8px; }
  .rm-msg.me { justify-content: flex-end; }
  .rm-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(140deg, #8f96d8, #ababdc); box-shadow: 0 4px 10px rgba(113,129,200,.25); }
  .rm-bubble { max-width: 80%; padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
  .rm-msg.ai .rm-bubble { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95); border-top-left-radius: 5px; color: #3f3d63; box-shadow: 0 8px 20px rgba(113,129,200,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .rm-msg.me .rm-bubble { background: linear-gradient(140deg, #6474c2, #8289cf); border: 1px solid rgba(255,255,255,.35); border-top-right-radius: 5px; color: #fff; box-shadow: 0 8px 20px rgba(113,129,200,.26); }
  .rm-wait .rm-bubble { display: flex; gap: 4px; align-items: center; }
  .rm-wait i { width: 5px; height: 5px; border-radius: 50%; background: #9d9ad0; animation: hc-blink 1.1s infinite; }
  .rm-wait i:nth-child(2) { animation-delay: .18s; }
  .rm-wait i:nth-child(3) { animation-delay: .36s; }
  .rm-bar { position: relative; z-index: 2; flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #rmInput { flex: 1; min-width: 0; max-height: 96px; padding: 10px 13px; border: 1px solid rgba(113,129,200,.2); border-radius: 14px; background: rgba(255,255,255,.9); color: #3f3d63; font-family: inherit; font-size: 14px; line-height: 1.5; resize: none; outline: none; }
  #rmInput::placeholder { color: #a7a4c4; }
  #rmInput:focus { border-color: rgba(113,129,200,.55); }
  .rm-send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, #7181c8, #b7d3f4); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(113,129,200,.3); }
  .rm-send svg { width: 18px; height: 18px; }

  /* 世界漫游：剧情点列表与消息菜单 */
  .rm-world { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; }
  .rm-world-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
  .rm-world-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(40px + env(safe-area-inset-bottom)); }
  .rm-world-body::-webkit-scrollbar { display: none; }
  .rm-world-view { margin: 2px 2px 14px; font-size: 11.5px; line-height: 1.8; color: #7d7aa6; }
  .rm-point { position: relative; margin-bottom: 10px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 8px 20px rgba(113,129,200,.12); overflow: hidden; }
  .rm-point.started { background: rgba(255,255,255,.86); }
  .rm-point-main { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 13px 14px 11px; border: none; background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
  .rm-point-main:active { background: rgba(113,129,200,.06); }
  .rm-point-no { flex: none; width: 18px; padding-top: 2px; font-size: 10px; letter-spacing: .06em; color: #a3a0c4; }
  .rm-point.started .rm-point-no { color: #7181c8; }
  .rm-point-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .rm-point-t { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 15px; font-weight: 700; color: #3f3d63; letter-spacing: .02em; }
  .rm-point-d { font-size: 11px; line-height: 1.6; color: #7d7aa6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rm-point-st { flex: none; padding-top: 2px; font-size: 9.5px; color: #a3a0c4; }
  .rm-point-act { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 10px; }
  .rm-point-act button { padding: 5px 12px; border: 1px solid rgba(113,129,200,.24); border-radius: 999px; background: rgba(255,255,255,.8); color: #5c5a8e; font-family: inherit; font-size: 11px; cursor: pointer; }
  .rm-point-act button:active { background: #fff; border-color: rgba(113,129,200,.5); }
  .rm-readonly { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.66); color: #7d7aa6; font-size: 11px; }
  .rm-readonly button { flex: none; padding: 6px 12px; border: 1px solid rgba(113,129,200,.26); border-radius: 999px; background: rgba(255,255,255,.85); color: #5c5a8e; font-family: inherit; font-size: 11px; cursor: pointer; }
  .rm-msg { position: relative; }
  .rm-msg .rm-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .rm-msg.sel .rm-bubble { box-shadow: 0 0 0 1.5px rgba(113,129,200,.5), 0 8px 20px rgba(113,129,200,.2); }
  /* 长按菜单：贴着消息弹出的小条，像微信那样 */
  #rmMenuPop { position: absolute; left: 0; top: 0; z-index: 320; display: none; padding: 3px; border-radius: 11px;
    background: #3f3f46; box-shadow: 0 10px 26px rgba(35,37,58,.34), 0 0 0 .5px rgba(255,255,255,.06) inset;
    opacity: 0; transform: scale(.94); transition: opacity .12s ease, transform .12s cubic-bezier(.2,.9,.2,1); }
  #rmMenuPop.show { display: block; }
  #rmMenuPop.in { opacity: 1; transform: scale(1); }
  .rm-pop-row { display: flex; align-items: stretch; }
  #rmMenuPop .rm-menu-item { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #fff;
    font-family: inherit; font-size: 13px; line-height: 1; padding: 10px 12px; border-radius: 8px; cursor: pointer;
    white-space: nowrap; display: flex; align-items: center; }
  #rmMenuPop .rm-menu-item + .rm-menu-item { position: relative; }
  #rmMenuPop .rm-menu-item + .rm-menu-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 14px; background: rgba(255,255,255,.18); }
  #rmMenuPop .rm-menu-item:active { background: rgba(255,255,255,.17); }
  #rmMenuPop .rm-menu-item.danger { color: #ff9d94; }
  .rm-pop-arrow { position: absolute; width: 9px; height: 9px; background: #3f3f46; transform: rotate(45deg); border-radius: 2px;
    left: var(--ax, 50%); margin-left: -4.5px; }
  #rmMenuPop:not(.below) .rm-pop-arrow { bottom: -3px; }
  #rmMenuPop.below .rm-pop-arrow { top: -3px; }
  #rmEditArea { width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.7; resize: none; outline: none; }
  #rmEditArea:focus { border-color: var(--accent); }

  .rm-end { margin: 14px 6px 6px; padding: 13px 16px; border-radius: 16px; border: 1px dashed rgba(113,129,200,.32); background: rgba(255,255,255,.55); text-align: center; }
  .rm-end-t { display: block; font-family: "Songti SC", "Noto Serif SC", serif; font-size: 12.5px; letter-spacing: .08em; color: #5c5a8e; }
  .rm-end-d { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: #7d7aa6; }
  .rm-end-h { display: block; margin-top: 6px; font-size: 10px; color: #a7a4c4; }
  .rm-point-act button.go { background: linear-gradient(135deg, #7181c8, #9198d6); border-color: transparent; color: #fff; }
  .rm-point.done { background: rgba(241,229,246,.55); }
  .rm-point.done .rm-point-st { color: #7181c8; font-weight: 600; }

  /* ---------- 首次进入：使用须知 ---------- */
  .gate { position: absolute; inset: 0; z-index: 980; display: none; align-items: center; justify-content: center;
    padding: 16px; padding-bottom: calc(16px + var(--kb, 0px));
    background: rgba(18,20,24,.52); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
  .gate.show { display: flex; }
  .gate-card { width: 100%; max-width: 380px; max-height: 100%; display: flex; flex-direction: column;
    background: var(--pane-bg); color: var(--text); border-radius: 22px; overflow: hidden; box-shadow: 0 26px 70px rgba(10,12,20,.42); }
  .gate-top { flex: none; padding: 20px 20px 10px; }
  .gate-en { font-size: 9px; letter-spacing: .3em; color: var(--accent); opacity: .78; }
  .gate-t { margin: 6px 0 4px; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
  .gate-sub { font-size: 11.5px; color: var(--text-soft); }
  .gate-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 22px; scroll-padding-bottom: 22px; }
  .gate-list { margin: 6px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 10px; }
  .gate-list li { font-size: 12px; line-height: 1.7; color: var(--text-soft); }
  .gate-list li b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 1px; }
  .gate-list li strong { color: var(--accent); font-weight: 600; }
  .gate-sign { margin: 14px 0 2px; padding: 8px 11px; line-height: 1.6;
    border-radius: 10px; background: var(--hover); font-size: 11px; color: var(--text-soft); }
  .gate-sign b { font-weight: 600; color: var(--accent); }
  .gate-type { margin-top: 14px; }
  .gt-label { font-size: 11px; color: var(--text-soft); margin-bottom: 6px; }
  .gt-phrase { padding: 9px 11px; border-radius: 10px; background: var(--hover); color: var(--text); font-size: 12.5px; line-height: 1.6; border-left: 3px solid var(--accent); }
  .gt-input { width: 100%; box-sizing: border-box; margin-top: 8px; scroll-margin-bottom: 46px; padding: 9px 11px; border-radius: 11px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.65;
    min-height: 62px; max-height: 90px; resize: none; outline: none; overflow-y: auto; }
  .gt-input:focus { border-color: var(--accent); }
  .gt-hint { margin-top: 6px; font-size: 11px; color: var(--text-soft); min-height: 15px; }
  .gt-hint.ok { color: var(--accent); font-weight: 600; }
  .gate-foot { flex: none; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--pane-bg); }
  .gate-ok { width: 100%; padding: 13px; border: none; border-radius: 13px; background: var(--hover); color: var(--text-soft);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: not-allowed; transition: background .18s, color .18s, box-shadow .18s; }
  .gate-ok.on { background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.16); }

  /* ---------- 新手教程 ---------- */
  .tut { position: absolute; inset: 0; z-index: 985; display: none; overflow: hidden; }
  .tut.show { display: block; }
  .tut-dim { position: absolute; inset: 0; pointer-events: none; }
  .tut-dim i { position: absolute; display: block; background: rgba(10,12,16,.40); }
  .tut-hole { position: absolute; display: none; border-radius: 14px; border: 2px solid var(--accent); pointer-events: none;
    transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease; }
  .tut-card { position: absolute; width: min(300px, calc(100% - 24px)); padding: 14px 16px 12px; border-radius: 16px;
    background: var(--pane-bg);
    background: color-mix(in srgb, var(--pane-bg) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.26); color: var(--text); box-shadow: 0 18px 46px rgba(8,10,16,.26); }
  .tut-card.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -46%); }
  .tut-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .tut-step { font-size: 10.5px; letter-spacing: .08em; color: var(--text-soft); }
  .tut-skip { border: none; background: transparent; color: var(--text-soft); font-family: inherit; font-size: 11.5px; padding: 2px 4px; cursor: pointer; }
  .tut-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
  .tut-text { font-size: 12.5px; line-height: 1.75; color: var(--text-soft); white-space: pre-line; }
  .tut-foot { display: flex; gap: 8px; margin-top: 12px; }
  .tut-prev, .tut-next { flex: 1; padding: 9px; border-radius: 10px; border: none; font-family: inherit; font-size: 13px; cursor: pointer; }
  .tut-prev { flex: 0 0 auto; padding: 9px 14px; background: var(--hover); color: var(--text-soft); }
  .tut-next { background: var(--accent); color: #fff; font-weight: 600; }

  /* 教程卡片里的小示意图 */
  .tut-art { margin: 2px 0 10px; }
  .tut-art:empty { display: none; }
  .tut-shot { border-radius: 12px; background: rgba(120,120,128,.10); padding: 9px 10px; }
  .ts-line { height: 6px; border-radius: 4px; background: rgba(120,120,128,.26); margin: 0 36% 6px 0; }
  .ts-line.short { width: 48%; margin-right: 0; margin-bottom: 0; }
  .ts-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 9px; padding: 6px 8px;
    border-radius: 999px; background: var(--pane-bg); border: 1px solid var(--border); }
  .ts-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--text-soft);
    background: rgba(120,120,128,.12); flex: none; }
  .ts-ic svg { width: 13px; height: 13px; display: block; }
  .ts-ic.on { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(120,120,128,.18); }
  .ts-menu { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--pane-bg); border: 1px solid var(--border); }
  .ts-menu span { padding: 7px 10px; font-size: 11.5px; color: var(--text-soft); border-bottom: 1px solid var(--border); }
  .ts-menu span:last-child { border-bottom: none; }
  .ts-menu span.on { color: var(--accent); font-weight: 600; background: rgba(120,120,128,.10); }
  .ts-tip { margin-top: 6px; font-size: 10.5px; color: var(--text-soft); text-align: center; }
  .tut-card { max-height: calc(100% - 24px); overflow-y: auto; }

  .hp-tourcard { margin-top: 8px; }
  .hp-tourcard .hp-ic svg { width: 21px; height: 21px; }

  /* 教程示意图：可视化顶栏 */
  .ts-vbar { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px;
    background: var(--pane-bg); border: 1px solid var(--border); }
  .ts-back { font-size: 10.5px; color: var(--text-soft); flex: none; }
  .ts-vtitle { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ts-acts { display: flex; gap: 5px; flex: none; }
  .ts-act { padding: 5px 8px; border-radius: 8px; font-size: 10px; color: var(--text-soft); background: rgba(120,120,128,.12); border: 1px solid var(--border); white-space: nowrap; }
  .ts-act.on { color: #fff; background: var(--accent); border-color: transparent; }

  /* 教程示意图：条目设置弹窗 */
  .ts-dlg { border-radius: 10px; background: var(--pane-bg); border: 1px solid var(--border); padding: 8px 10px; }
  .ts-dlg-title { text-align: center; font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
  .ts-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
  .ts-row:first-of-type { border-top: none; }
  .ts-row span { font-size: 10.5px; color: var(--text-soft); flex: none; }
  .ts-row i { font-style: normal; font-size: 10px; color: var(--text); background: rgba(120,120,128,.12); border-radius: 6px; padding: 2px 6px; text-align: right; }

  /* API Key 里的小眼睛 */
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 42px; }
  .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
    display: grid; place-items: center; border: none; background: transparent; color: var(--text-soft); cursor: pointer; border-radius: 8px; }
  .pw-eye:active { background: var(--hover); }
  .pw-eye svg { width: 18px; height: 18px; display: block; }
  .pw-eye.on { color: var(--accent); }

  /* 长对话：只渲染最近一段，向上加载更多 */
  .chat-more { display: block; margin: 2px auto 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--glass-bg); color: var(--text-soft); font-family: inherit; font-size: 11.5px; cursor: pointer; }
  .chat-more:active { background: var(--hover); }

  /* 上下文裁剪说明 */
  .ctx-note { text-align: center; font-size: 10.5px; color: var(--text-soft); margin: 4px 0 14px; letter-spacing: .01em; }

  /* 对话设置：本次注入预估 */
  .ps-stat { margin: 10px 0 2px; padding: 11px 13px; border-radius: 12px; background: var(--hover); }
  .ps-stat-h { font-size: 11px; color: var(--text-soft); letter-spacing: .04em; margin-bottom: 6px; }
  .ps-stat-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-soft); padding: 3px 0; }
  .ps-stat-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* 列表「显示更多」 */
  .list-more { display: block; width: 100%; margin: 10px 0 4px; padding: 11px; border-radius: 12px;
    border: 1px dashed var(--border); background: transparent; color: var(--text-soft);
    font-family: inherit; font-size: 12.5px; cursor: pointer; }
  .list-more:active { background: var(--hover); }

  /* 发送预算 */
  .budget-seg { display: flex; gap: 8px; }
  .budget-seg button { flex: 1; padding: 10px 6px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-soft); font-family: inherit; font-size: 13px; cursor: pointer; }
  .budget-seg button.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
  .bg-tip { margin-top: 8px; font-size: 11.5px; line-height: 1.7; color: var(--text-soft); }
  .bg-group { margin-top: 14px; }
  .bg-group h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: .04em; }
  .bg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .bg-row:last-child { border-bottom: none; }
  .bg-row .lb { font-size: 13px; color: var(--text); }
  .bg-row .lb em { display: block; font-style: normal; font-size: 11px; color: var(--text-soft); margin-top: 2px; }
  .bg-row .in { display: flex; align-items: center; gap: 5px; flex: none; }
  .bg-row input { width: 78px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; text-align: right; outline: none; }
  .bg-row input:focus { border-color: var(--accent); }
  .bg-row .u { font-size: 11.5px; color: var(--text-soft); }
  .mem-tag.ghost { opacity: .55; font-style: normal; }

  /* 记忆：核心开关 */
  .mem-core { flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-soft);
    font-family: inherit; font-size: 10.5px; padding: 3px 7px; border-radius: 7px; cursor: pointer; margin-right: 4px; }
  .mem-core.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }

  /* 剧情状态卡 */
  .mem-state { padding: 12px 14px; border-radius: 12px; background: var(--hover); font-size: 13px; line-height: 1.8; color: var(--text); }
  .mem-state.empty { color: var(--text-soft); font-size: 12.5px; }
  .mem-state .st-at { display: block; margin-top: 6px; font-size: 10.5px; color: var(--text-soft); }

  /* 记忆编辑浮层 */
  .me-cats { display: flex; flex-wrap: wrap; gap: 6px; }
  .me-cat { border: 1px solid var(--border); background: var(--bg); color: var(--text-soft); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
  .me-cat:hover { border-color: var(--accent); color: var(--text); }
  .me-cat.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
  .me-fld { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
  .me-fld input, .me-fld textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; outline: none; resize: vertical; font-family: inherit; }
  .me-fld input:focus, .me-fld textarea:focus { border-color: var(--accent); }
  .me-fld textarea { line-height: 1.6; min-height: 96px; }
  .me-core-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-soft); }

  /* 记忆：按对话隔离（列表 → 详情） */
  .mem-tip { padding: 14px 16px 4px; font-size: 12.5px; line-height: 1.75; color: var(--text-soft); }
  .mem-dhead { padding: 8px 12px 0; }
  .mem-back { background: none; border: none; color: var(--accent); font-size: 13.5px; padding: 8px 6px; cursor: pointer; font-family: inherit; }
  .mem-conv-list { padding: 6px 14px 24px; }
  .mem-conv-item .chev { flex: none; color: var(--text-soft); font-size: 18px; line-height: 1; }
  .mem-conv-item .sub .dot { color: var(--text-soft); }

  /* 生成参数：预算档位 */
  .ps-seg { display: flex; gap: 8px; padding: 4px 2px 2px; }
  .ps-seg button { flex: 1; padding: 11px 0; border-radius: 11px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
  .ps-seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* 文件预览顶栏：标题左对齐可收缩，按钮组靠右，避免挤在一起 */
  #filePreview .viz-edit-bar > span:not(.viz-bar-actions) {
    position: static; left: auto; transform: none; pointer-events: auto;
    flex: 1; min-width: 0; margin-right: 10px; text-align: left;
  }
  #filePreview .viz-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
  #filePreview .viz-bar-actions > button { font-size: 12.5px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; cursor: pointer; white-space: nowrap; }
  #filePreview .viz-bar-actions > button:active { background: var(--hover); }
  #filePreview .viz-bar-actions > button:disabled { opacity: .5; }

  /* 文件选择：把 input 平铺在触发按钮上（安卓 PWA 下唯一可靠的上传路径） */
  .picker-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto !important;
    -webkit-appearance: none;
    appearance: none;
  }