/* ============ 字体 ============ */
/* 主字体：思源黑体 CN VF 子集（本地文件 public/fonts/SourceHanSansCN-VF.woff2，1.81 MB）。
   它是**可变字体**：只有一根 wght 轴，范围 250 ~ 900，
   所以这里声明 font-weight: 250 900 —— 浏览器会拿元素实际的 font-weight
   到变体轴上取真实字重：400 是标准体、700 是真加粗，全站笔画粗细既统一又有层次
   （手写体只有一档，粗体全靠浏览器硬撑，一对比就很明显）。
   覆盖：GB2312 6763 个汉字 + 拉丁 / 标点 / 常用符号；GB2312 以外的生僻字
   交给系统黑体兜底（安卓 Noto Sans CJK、iOS 苹方，同为黑体，几乎看不出差别）。
   2026-10-31 由完整字库（OTF 17.9MB / woff2 10.3MB）子集化而来，首次访问少下 8.5MB。
   全站只有这一份自托管字体。 */
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('/fonts/SourceHanSansCN-VF.woff2') format('woff2');
  font-weight: 250 900;
  font-display: swap;
}
:root {
  /* ===== 素雅 · 石板中性主题：冷灰白底 + 低饱和灰蓝强调（液态玻璃层见后） ===== */
  --ink: #886070;            /* 正文：暖墨棕，不用纯黑 */
  --ink-soft: #a98a97;
  --bg: #f7f4f1;             /* 页面底色：冷灰白（功能页）；首页日间见 body.home-on */
  --bg-2: #efeae5;
  --paper: #ffffff;          /* 卡片纸面：纯白 */
  --pink: #a69084;           /* 主色：中灰蓝（变量名沿用，避免全站改名） */
  --pink-deep: #7d675b;      /* 强调色：深石板蓝，按钮 / 重点文字 */
  --pink-pale: #e9ded4;
  --pink-faint: #faf5f0;
  --gray: #e6dfd8;
  --gray-deep: #a1958c;
  --lav: #cbbbad;            /* 灰蓝紫（仅功能点缀） */
  --sage: #9fc0ad;
  --gold: #d8bd8a;
  /* 全站字体：思源黑体 CN VF 优先（本地，见文件顶部「字体」说明）。
     简体中文、数字、字母它都全覆盖，正常情况不会走到后面的兜底；
     万一有它没有的字，就交给 霞鹜文楷 → 系统中文。
     这里故意不放手写体：手写体只在缺字时才用到，却会让浏览器白下 3 MB 字体文件。
     末端的 'Segoe UI Symbol' 是给 ✦ ✧ ♪ ♡ 这类装饰字符兜底的 ——
     思源黑体没有它们（Dingbats 区），浏览器会顺着这条链找到有字形的符号字体。 */
  --font-en: 'SourceHanSansCN', Consolas, 'Segoe UI Symbol', monospace;
  --font-body: 'SourceHanSansCN', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI Symbol', sans-serif;
    /* 控件/卡片底色 */
  --field-bg: #ffffff;
  --card-bg: #ffffff;
  --panel-soft: #f6f2ed;
  --hint-bg: #fdfaf8;
  --lp-sel-bg: #f3ece6;
  /* 表面色（外观工坊「逐项调色」可按白天/夜间分别覆盖，默认冷白） */
  --bg-grad-a: #faf7f4;
  --bg-grad-b: #f1ebe4;
  --bg-glow-1: 225 210 197;
  --bg-glow-2: 232 222 212;
  --top-grad-a: #f2ece6;
  --top-grad-b: #e8e0d8;

  /* 波点（页面底纹 / 信纸） */
  /* 信纸横线（许愿池输入区） */
  /* 玻璃拟态噪点 */
  /* 像素爱心（列表 bullet / 分割线） */
  /* 简约指针：细描边箭头（原像素爱心指针已弃用） */
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.6v11.8l3-2.8 2 4.6 2.4-1-2-4.5 4.2-.3z' fill='%23ffffff' stroke='%233d3330' stroke-width='.85' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
  /* 简约指针：可点击元素（石板蓝细环 + 中心点，代替原像素手型） */
  --cursor-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23ffffff' stroke-width='3.4' opacity='.92'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%237d675b' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%237d675b'/%3E%3C/svg%3E") 12 12, pointer;
}

/* ============ 夜间模式：雾灰中性调，不偏冷不偏暖 ============ */
:root.dark {
  --ink: #e8d6dd;
  --ink-soft: #b39aa4;
  --bg: #2e3034;
  --bg-2: #26282c;
  --paper: #2a2c30;
  --pink: #aab0bd;
  --pink-deep: #c5cad4;
  --pink-pale: #3a3d42;
  --pink-faint: #303237;
  --gray: #3a3d42;
  --gray-deep: #a0a3aa;
  --lav: #b6bbc6;
  --sage: #9bb8a8;
  --gold: #cfb487;
  /* 控件/卡片深色底 */
  --field-bg: #27292d;
  --card-bg: #25272b;
  --panel-soft: #2e3034;
  --hint-bg: #24262a;
  --lp-sel-bg: #2c2e32;
  --danger-bg: #3a2c2c;
  /* 表面色（夜间：雾灰中性） */
  --bg-grad-a: #2e3034;
  --bg-grad-b: #232528;
  --bg-glow-1: 182 187 198;
  --bg-glow-2: 160 163 170;
  --top-grad-a: #323438;
  --top-grad-b: #25272b;
}
/* 夜间大背景、顶栏、登录页等表面色已由上方 :root.dark 变量接管，无需重复写 */
:root.dark #bg-pattern { background-image: radial-gradient(rgba(161, 165, 171, .22) 1px, transparent 1px); }
/* 夜间下过暗的装饰色提亮 */
:root.dark .sparkle.sp-dark,
:root.dark .st-heart,
:root.dark .home-clock .hc-heart { color: var(--gray-deep); }
/* 修复：fixed 定位在 WebView 中因 body 滚动容器而失效（装饰贴纸会跟着滚） */
html { overflow-x: hidden; }

/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  /* 泡泡体只有一档字重：禁止浏览器合成粗体，避免同一行里「糊粗」和「正常」两种粗细并存 */
  font-synthesis-weight: none;
  color: var(--ink);
  background: var(--bg);  /* 第七轮：与首页严格一致 —— 单色，去掉 5 层渐变背景 */
  background-attachment: fixed;


  overflow-x: clip;
  /* 应用外壳：顶栏 / 导航 / 中间内容三段固定，整窗不滚动，
     只有功能页的 #view 中间容器内部滚动（见 #view 规则）。
     首页 body.home-on 会重新放开纵向滚动（桌面首页保留沉浸式长页）。 */
  overflow-y: hidden;
  }
::selection { background: var(--pink); color: var(--paper); }
/* 移动端点按功能区标题：禁止文本选中（避免整行长条实色选中块遮挡）+ 已在上文关闭点按高亮闪 */
.view-title, .panel-head, .panel-head b, .set-card h3, .work-col-title, .modal-head, .modal-head b, .lp-head, .lp-head b, .chat-head, .chat-side-head, .cal-head, .goal-card .gc-name, .focus-card .fc-title, .lg-panel-head, .ref-head, .lm-head, .ws-num{
  -webkit-user-select: none;
  user-select: none;
}
button { font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg-2); border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb {
  border: 2px solid var(--ink);
  
}
::-webkit-scrollbar-thumb:hover { background: var(--pink-pale); }
::-webkit-scrollbar-corner { background: var(--bg-2); }

/* 光标 */
body { cursor: auto; }
button, .btn, .top-btn, .icon-btn, input[type=range], label { cursor: pointer; }
a { color: var(--pink-deep); }

/* ============ 背景层 ============ */
#bg-pattern {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(125, 127, 129, .14) 1px, transparent 1px);
  background-size: 16px 16px;
}
#bg-image {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .4s;
}
#bg-texture {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s;
}

/* ---- 页面四角像素花边（弹窗角）---- 已删除：
   .deco-corner / .dc-tl|tr|bl|br 及其 ::before/::after 在 JS 与 HTML 中零引用，
   属于早期装饰，运行时从未产生过对应 DOM。 */



/* ============ 通用面板 .px-panel ============ */
.px-panel {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  position: relative;
}
.px-panel::before { content: none; }
.px-panel::after { content: none; }
.px-panel > * { position: relative; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  font-size: 13px;
  user-select: none;
  transition: transform .06s, box-shadow .06s, background .15s;
  text-decoration: none;
}
.btn:hover { background: var(--pink-faint); }
.btn:active { transform: translateY(3px); box-shadow: var(--press-in); }
.btn-primary { background: var(--pink); color: var(--paper); text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.btn-primary:hover { background: var(--accent-ui); }
.btn-ghost { background: transparent; border-style: dashed; box-shadow: none; }
.btn-danger { background: var(--btn-danger-bg, #bb736b); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* 图标键：全站统一「无框无底」，只留图标本身。
   按钮框仍占着 30×30（撑住点击区域和居中），只是不再画出来；
   悬停 / 按下只变颜色，原来那套凸起像素钮的粉底、下沉、内凹阴影全部去掉。 */
.icon-btn {
  width: 30px; height: 30px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ink);
  font-size: 13px; line-height: 1;
  transition: color .12s, background .12s, opacity .12s;
}
.icon-btn:hover { background: transparent; color: var(--accent-ico); }
.icon-btn:active { transform: none; box-shadow: none; color: var(--accent-ico); }
/* 「正在生效」的键（画质模式 / 历史面板这类开关）：原来是粉底白字方块，
   去框后白字会看不见，改成粉图标 + 底下一条小横线 */
.icon-btn.on {
  background: transparent; color: var(--accent-ico); box-shadow: none;
}
.icon-btn.on::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 10px; height: 2px; border-radius: var(--rnd-sm);
  transform: translateX(-50%);
  background: var(--accent-ico);
}
.icon-btn.big { width: 44px; height: 44px; font-size: 15px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  font-size: 12px;
  user-select: none;
}
.chip.active { background: var(--pink); color: var(--paper); }

/* ============ 输入框 ============ */
.px-input, .px-textarea, .px-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--field-bg);
  border: 2px solid var(--ink);
  
  border-radius: 0;
  font-size: 13px;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.px-input:focus, .px-textarea:focus, .px-select:focus {
  border-color: var(--accent-ui);
  
}
.px-textarea { min-height: 90px; resize: vertical; line-height: 1.7; }
.px-select { appearance: none; background: var(--field-bg); }
.f-label { display: block; font-size: 12px; margin: 10px 0 4px; color: var(--ink-soft); }
.f-label::before { content: ""; color: var(--pink-deep); }

input[type=range] { -webkit-appearance: none; appearance: none; height: 12px; background: var(--bg-2); border: 2px solid var(--ink);  }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border: 2px solid var(--ink);
}

#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 60;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(180deg, var(--top-grad-a), var(--top-grad-b));
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
  
}
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); }
.logo-halo { color: var(--pink-deep); font-size: 17px; animation: floaty 3s ease-in-out infinite; display: inline-block; }
.logo-name { font-size: 15px; letter-spacing: 2px; color: var(--ink); }
.logo-en { font-family: var(--font-en); font-size: 9px; color: var(--pink-deep); letter-spacing: 2px; margin-top: 3px; }
.top-date { flex: 1; text-align: center; font-size: 12px; color: var(--gray-deep); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
 color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font-size: 15px;
  transition: transform .06s, background .15s;
}
.top-btn:hover { background: var(--pink-pale); }
.top-btn:active { transform: translateY(2px); box-shadow: var(--press-in); }
.top-now {
  display: flex; align-items: center; gap: 6px;
  max-width: 190px; height: 34px;
  padding: 0 10px;
 color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 12px; cursor: pointer;
  transition: background .15s;
}
.top-now:hover { background: var(--pink-pale); }
.top-now .tn-ico { color: var(--accent-ico); flex-shrink: 0; }
.top-now.playing .tn-ico { color: #88929f; animation: beat 1.2s ease-in-out infinite; }
.tn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.user-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
 border: 2px solid var(--ink);
  font-size: 12px; color: var(--ink);
}
.user-ico { color: var(--accent-ico); }

/* ============ 融合风全局叠加特效：聚光 / 上下渐隐 / 壁纸遮罩 ============ */
.wscrim{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;background:rgba(255, 255, 255, .30);}
body.wall .wscrim{display:none;}
/* 中间滚动容器的上下渐隐：内容滚进顶栏 / 底栏边界前柔和淡出。
   mask 钉在 #view 盒子边缘（不随内容滚），只给功能页；首页是沉浸式长页，不遮。
   手机端在媒体查询里改用更窄的 18px 渐隐。 */
body:not(.home-on) #view{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000000 26px,#000000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000000 26px,#000000 calc(100% - 26px),transparent 100%);}
#spotlight{position:fixed;inset:0;z-index:58;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--sx,-9999px) var(--sy,-9999px),color-mix(in srgb,var(--glow) 16%,transparent),transparent 60%);}
#spotlight.on{opacity:1;}

/* ============ 小径导航：融合风弧形滚轮 ============ */
:root { --serif: Georgia, 'Songti SC', 'Noto Serif SC', serif; }
#nav-avatar { position: fixed; left: 52px; top: 52px; z-index: 58; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#nav-avatar .na-frame { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 6px 16px rgba(55, 56, 58, .18); background: transparent; }
#nav-avatar .na-frame img, #nav-avatar .na-frame svg { width: 100%; height: 100%; display: block; object-fit: cover; }
#nav-avatar .na-meta { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
#nav-avatar #na-name { font-size: 11px; letter-spacing: 2px; color: var(--ink); }
#nav-avatar #na-sign { font-size: 9px; letter-spacing: 1px; color: var(--ink-soft); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav { position: fixed; left: 60px; top: calc(50% + 40px); transform: translateY(-50%); width: 200px; height: 380px; overflow: hidden; z-index: 57; pointer-events: none; perspective: 1000px; }
.witem { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; touch-action: none;
  font-family: var(--serif); font-size: 14px; letter-spacing: 1.5px; color: var(--ink-soft); cursor: pointer;
  pointer-events: auto; user-select: none; -webkit-user-select: none; transform-origin: left center; will-change: transform;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s, filter .35s, color .35s; }
#nav.dragging .witem { transition: none; }
.witem.active { color: var(--ink); }
.witem.active::after { content: ''; }
.nav-track { position: fixed; left: 0; top: 320px; width: 280px; bottom: 0; z-index: 56; cursor: grab; touch-action: none; }
.nav-track:active { cursor: grabbing; }

/* ============ 主视图（中间滚动容器） ============ */
/* 顶栏 60px、左侧弧形导航区 280px：#view 钉死在中间区域内，
   只有它自己纵向滚动；内容永远不会钻到顶栏下面或溢出屏幕。 */
#view {
  position: fixed; z-index: 10;
  top: 72px; left: 280px; right: 16px; bottom: 16px;
  margin: 0;
  /* 上内边距 ≥ mask 渐隐高度(26px)：首屏内容落在全实区域，只有滚动时才渐隐 */
  padding: 28px 22px 20px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  transition: background-color .3s;
}

/* ============ 登录界面 ============ */
#auth-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  /* 与首页共享全局背景层（body 纯色 + 壁纸 + 纹理），自身不再盖独立渐变，
     这样未登录的登录页与已登录首页外观严格一致；暗色 / 壁纸由 JS 在 showAuth 里套用 */
  background: transparent;
  padding: 16px;
  overflow: hidden;
}
#auth-card {
  width: min(400px, 92vw);
  padding: 28px 26px 22px;
  animation: popin .45s cubic-bezier(.2, 1.6, .4, 1);
  position: relative;
}
.auth-title { text-align: center; margin-bottom: 14px; }
.auth-halo { font-size: 17px; color: var(--ink); animation: floaty 2.6s ease-in-out infinite; }
.auth-title h1 { font-family: var(--font-body); font-size: 17px; letter-spacing: 8px; margin: 6px 0 2px; }
.auth-sub { font-family: var(--font-en); font-size: 9px; color: var(--gray-deep); letter-spacing: 4px; }
#auth-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.auth-tab {
  flex: 1; padding: 8px;
  border: 2px solid var(--ink);
  font-size: 13px;
}
.auth-tab:active { box-shadow: var(--press-in); transform: translateY(1px); }
.auth-tab.active { color: var(--ink); }
.auth-msg { min-height: 20px; margin-top: 6px; font-size: 12px; color: var(--danger); }
.auth-foot { text-align: center; margin-top: 14px; font-size: 11px; color: var(--gray-deep); }

/* ============ 弹窗 ============ */
/* P38：z 230 高于登录层(200)，注册后的救急暗号弹窗才点得到；仍低于 toast(240)/裁剪浮层(300) */
#modal-root { position: fixed; inset: 0; z-index: 230; pointer-events: none; }
.modal-mask {
  position: absolute; inset: 0;
  /* iOS 风格磨砂遮罩：背后内容整体模糊 + 半透压白，文字不可读但仍有环境色，
     玻璃弹窗浮在这层之上做边缘折射；深色模式见 :root.dark 覆盖。 */
  background: rgba(246, 248, 250, .55);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: auto;
  animation: fadein .18s ease;
}
:root.dark .modal-mask,
.dark .modal-mask {
  background: rgba(14, 16, 20, .62);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
.modal-card {
  width: min(560px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: var(--rnd-md);
  animation: popin .35s cubic-bezier(.2, 1.5, .4, 1);
  position: relative;
}
.modal-card.modal-lg { width: min(820px, 96vw); }
.modal-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: transparent;
  flex: none;
  cursor: move;
}
.modal-head b { font-size: 15px; flex: 1; }
.modal-body { padding: 16px; flex: 1; overflow-y: auto; min-height: 0; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px;
  background: transparent;
  flex: none;
}

/* ============ 液态玻璃（由 React + liquid-glass-react 渲染） ============ */
/* 玻璃本身（磨砂 + 折射 + 色散 + 高光）全部由 public/js/glass.bundle.js 里的
   liquid-glass-react 组件渲染：它在每个目标内部插入一个 z-index:-1 的玻璃层，
   折射背后真实页面。这里只负责「面板透明」，让库的玻璃能透出页面。 */
.modal-card, .px-panel, #music-panel, #lyric-panel, #ref-panel, #lm-panel{
  background: transparent !important;
}
/* 供玻璃层锚定的定位上下文（库脚本也会按需补 position/z-index） */
.modal-card, .px-panel { position: relative; }
/* 玻璃宿主：按外观工坊圆角裁切 —— 鼠标实时折射时外扩的玻璃层不能探出卡片圆角。
   边缘高光 / 1px 亮边 / 悬浮投影也挂在宿主上（固定不动），
   内部折射层实时跟随鼠标但不会把亮边带走。 */
.lg-glass-host {
  border-radius: var(--glass-radius, 26px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 -6px 14px rgba(255, 255, 255, .06),
    0 12px 40px rgba(38, 50, 68, .18);
}
:root.dark .lg-glass-host,
.dark .lg-glass-host {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 14px 44px rgba(0, 0, 0, .5);
}
/* 移动的折射层自身不带边/影：它比卡片外扩 40px，自带边框会被裁到卡片外 */
.lg-glass-host .glass { box-shadow: none !important; }

/* 弹窗内的输入框：干净实色，清晰可读（不再叠磨砂玻璃，避免糊成一层模糊） */
.modal-card input, .modal-card textarea, .modal-card select, #music-panel input, #music-panel textarea, #music-panel select, #lyric-panel input, #lyric-panel textarea, #lyric-panel select, #ref-panel input, #ref-panel textarea, #ref-panel select, #lm-panel input, #lm-panel textarea, #lm-panel select, .px-panel input, .px-panel textarea, .px-panel select, .auth-card input, .auth-card textarea, .auth-card select{
  background: color-mix(in srgb, var(--field-bg) 24%, transparent) !important;
  border: 1px solid var(--line-soft) !important;
  color: var(--ink) !important;
  outline: none;
}
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus, #music-panel input:focus, #music-panel textarea:focus, #music-panel select:focus, #lyric-panel input:focus, #lyric-panel textarea:focus, #lyric-panel select:focus, #ref-panel input:focus, #ref-panel textarea:focus, #ref-panel select:focus, #lm-panel input:focus, #lm-panel textarea:focus, #lm-panel select:focus, .px-panel input:focus, .px-panel textarea:focus, .px-panel select:focus{
  border-color: var(--accent-ui) !important;
}

/* ============ 右键菜单 ============ */
#ctx-root { position: fixed; inset: 0; z-index: 220; pointer-events: none; }
#ctx-menu {
  position: absolute; min-width: 150px;
  background: transparent;
  border: 1px solid var(--line-soft);
  padding: 5px;
  animation: popin .12s ease;
  pointer-events: auto;
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.ctx-item:hover { background: var(--pink-faint); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: var(--danger-bg); }
.ctx-sep { height: 2px; background: var(--bg-2); margin: 4px 2px; }

/* ============ Toast ============ */
#toast-root {
  position: fixed; right: 14px; bottom: 14px; z-index: 240;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line-soft);
  font-size: 13px;
  animation: slidein .3s ease;
  max-width: 320px;
}
.toast.ok { border-color: var(--sage);  }
.toast.err { border-color: var(--danger); box-shadow: var(--danger); }
.toast.bye { animation: slideout .3s ease forwards; }

.view-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
  background: transparent;
  border: 1px solid var(--line-soft);
  padding: 8px 12px;
  position: relative;
}
.view-head::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px;
  pointer-events: none;
}
.view-head > * { position: relative; z-index: 1; }
.view-title { font-size: 17px; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.view-title .sub { font-family: var(--font-en); font-size: 8px; color: var(--ink-soft); letter-spacing: 3px; margin-top: 4px; }
.view-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-grid { display: grid; gap: 14px; }

/* 首页（小窝）融合风样式见文末「首页融合风」块，作用域锁定 body.home-on，不影响其它视图 */

.home-hello {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  position: relative;
}
.home-hello .hi { font-size: 24px; letter-spacing: 2px; }
.home-hello .hi-sub { margin-top: 6px; color: var(--ink); font-size: 13px; }
.home-clock {
  font-family: var(--font-en);
  font-size: 17px;
  color: var(--ink);
  margin-top: 10px;
  display: inline-block;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  letter-spacing: 2px;
  line-height: 1.7;
}
.home-clock .hc-date { color: var(--ink-soft); font-size: 11px; letter-spacing: 1px; }
.home-clock .hc-time { color: var(--pink-deep); }
.home-clock .hc-heart { color: var(--ink-soft); animation: beat 1.2s ease-in-out infinite; display: inline-block; }
.home-clock::before { content: ''; }
.home-clock::after { content: ''; }
.home-quick { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }

.focus-card { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 14px; position: relative; overflow: hidden; }
.focus-card .fc-title { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.focus-card .fc-num { font-family: var(--font-en); font-size: 26px; margin: 8px 0 4px; color: var(--ink); }
.focus-card .fc-sub { font-size: 12px; color: var(--gray-deep); }
.focus-card .fc-ico { position: absolute; right: 10px; bottom: 8px; opacity: .18; }
.fc-tag { font-family: var(--font-en); font-size: 7px; color: var(--gray-deep); letter-spacing: 1px; margin-left: 2px; }
/* 今天要紧事：逾期 / 今天 / 明天到期的稿与待办，一列看完，点一行就去处理 */
.tight-card { margin: 0 0 14px; }
.tight-card .tg-n {
  font-family: var(--font-en); font-size: 11px; color: var(--pink-deep);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 7px; margin-left: 2px;
}
.tight-card .tg-list { margin-top: 8px; display: flex; flex-direction: column; }
.tight-card .tg-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 6px; border-radius: var(--rnd-sm); cursor: pointer;
  border-bottom: 1px dashed var(--line-soft); font-size: 13px; color: var(--ink);
  transition: background .15s;
}
.tight-card .tg-row:last-child { border-bottom: none; }
.tight-card .tg-row:hover { background: var(--bg-2); }
.tight-card .tg-kind {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--line-soft); color: var(--gray-deep);
  font-size: 10px; line-height: 18px; text-align: center;
}
.tight-card .tg-main { flex: 0 1 auto; min-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tight-card .tg-flag { flex: 0 0 auto; font-size: 11px; color: var(--pink-deep); }
.tight-card .tg-flag.over { color: var(--danger); }
.tight-card .tg-flag.next { color: var(--sage); }
/* 名字 / 逾期天数 / 金额日期排成一读到底的一行：卡片很宽，右对齐会把中间拉成一大段空白 */
.tight-card .tg-tail { flex: 0 0 auto; font-size: 11px; color: var(--gray-deep); }
.tight-card .tg-rest { margin-top: 6px; font-size: 11px; color: var(--gray-deep); }
/* 窄屏（手机端首页用的就是这个宽度）：名字独占一行，「逾期几天 + 金额日期」并到第二行，
   并缩进到名字底下；不换行的话非收缩的尾栏会被卡片 overflow:hidden 裁掉半截 */
@media (max-width: 900px) {
  .tight-card .tg-row { gap: 5px 8px; }
  .tight-card .tg-main { flex: 1 1 calc(100% - 30px); }
  .tight-card .tg-flag { margin-left: 24px; }
}
.tight-card.is-calm .tg-calm { margin-top: 6px; font-size: 12.5px; line-height: 1.8; color: var(--gray-deep); }
/* 从首页点进待办后，命中的那条闪一下 */
.todo-item.tg-hit { animation: haloTgHit 1.6s ease-out 1; }
@keyframes haloTgHit {
  0% { background: rgba(187, 115, 107, .22); }
  100% { background: transparent; }
}
/* 今日台词签 */
.quote-card { display: flex; flex-direction: column; }
.quote-box {
  margin: 10px 0 6px;
  padding: 12px 12px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  cursor: pointer;
  transition: background .15s;
  flex: 1;
}
.quote-box:hover { background: var(--bg-2); }
.quote-text { font-size: 14px; line-height: 1.9; color: var(--ink); }
.quote-from { margin-top: 8px; font-size: 11px; color: var(--pink-deep); text-align: right; }
.quote-tip { font-size: 10px; }
.search-box {
  display: flex; gap: 8px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--pink-faint) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent);
  border-radius: var(--rnd-md);
  padding: 8px 12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.search-box:focus-within {
  border-color: var(--pink-deep);
  background: color-mix(in srgb, var(--pink-faint) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-faint) 70%, transparent);
}
.search-box input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; padding: 4px 6px; color: var(--ink); }
.search-box input::placeholder { color: var(--gray-deep); }
.search-box button { border: none; background: none; font-size: 17px; color: var(--pink-deep); filter: none; }
.search-box button:hover { opacity: .75; }
.search-results { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--rnd-md); margin-bottom: 16px; max-height: 46vh; overflow-y: auto; display: none; }
.search-results.show { display: block; animation: popin .2s ease; }
.sr-group { padding: 10px 14px; border-bottom: 2px dashed var(--bg-2); }
.sr-group:last-child { border-bottom: none; }
.sr-group h4 { font-size: 12px; color: var(--gray-deep); margin-bottom: 6px; }
.sr-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border: 2px solid transparent; }
.sr-item:hover { background: var(--pink-faint); border-color: var(--pink); }
.sr-item .sr-tag { font-size: 10px; background: var(--pink-faint); border: 2px solid var(--ink); padding: 1px 5px; color: var(--ink-soft); }
.recent-list { display: flex; flex-direction: column; }
.recent-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 2px dashed var(--bg-2); font-size: 13px; }
.recent-item:last-child { border-bottom: none; }
.recent-item .r-time { font-family: var(--font-en); font-size: 9px; color: var(--gray-deep); white-space: nowrap; }
.recent-item .r-dot { width: 10px; height: 10px; background: var(--pink); border: 2px solid var(--ink); flex-shrink: 0; }
/* 顶栏「最近记录」点击后高亮 */
.recent-flash { animation: recentFlash 1.2s ease; border-radius: 8px; }
@keyframes recentFlash {
  0%, 100% { background: transparent; box-shadow: none; }
  25%, 65% { background: rgba(136, 152, 174, .16); box-shadow: 0 0 0 2px rgba(136, 152, 174, .55); }
}

/* ============ 对话 ============ */
.chat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 14px; height: calc(100vh - 170px); min-height: 420px; }
.chat-side { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); display: flex; flex-direction: column; overflow: hidden; }
.chat-side-head { padding: 10px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 6px; }
.chat-side-head input { flex: 1; border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); padding: 5px 8px; font-size: 12px; outline: none; background: var(--field-bg); }
.chat-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 2px dashed var(--bg-2); }
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-item {
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line-soft);
  background: var(--pink-faint);
  cursor: pointer;
  position: relative;
  transition: opacity .12s, transform .12s;
}
.chat-item:hover { transform: translateX(2px); }
.chat-item.active { background: var(--pink); color: var(--paper); }
.chat-item .ci-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .ci-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 10px; color: var(--ink-soft); }
.chat-item.active .ci-meta { color: #eceef1; }
.chat-item .ci-pin { position: absolute; right: 6px; top: 5px; color: var(--gold); font-size: 11px; }
.chat-main { display: flex; flex-direction: column; background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); overflow: hidden; }
.chat-head { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: transparent; display: flex; align-items: center; gap: 8px; }
.chat-head b { flex: 1; font-size: 14px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.msg { display: flex; gap: 8px; max-width: 82%; }
.msg .m-bubble { padding: 10px 12px; border: 1px solid var(--line-soft); font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; cursor: text; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .m-bubble { background: var(--bg-2); color: var(--ink); }
.msg.ai { align-self: flex-start; }
.msg.ai .m-bubble { background: transparent;  }
.msg .m-ico { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); border-radius: 50%; background: transparent; font-size: 13px; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line-soft); background: transparent; }
.ci-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.chat-input textarea { flex: 1; min-height: 44px; max-height: 120px; }
.chat-input .btn { align-self: flex-end; }
/* 图片工具 */
.ci-tools { display: flex; align-items: center; gap: 6px; }
.ci-tool { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-soft); background: transparent; color: var(--gray-deep); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.ci-tool:hover { color: var(--pink-deep); border-color: var(--pink); background: var(--pink-pale); }
/* 待发送图片预览 */
.ci-imgs { display: none; flex-wrap: wrap; gap: 6px; padding: 4px; }
.ci-img { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-img-rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ci-img-rm:hover { background: rgba(200,60,60,.9); }
/* 待发送文档 */
.ci-docs { display: none; flex-wrap: wrap; gap: 6px; }
.ci-doc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--paper); font-size: 12px; max-width: 200px; }
.ci-doc .cd-ico { color: var(--pink-deep); display: inline-flex; }
.ci-doc .cd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.ci-doc .cd-ext { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--pink-pale); color: var(--pink-deep); font-weight: 600; }
.ci-doc-rm { border: none; background: transparent; color: var(--gray-deep); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.ci-doc-rm:hover { color: #c83c3c; }
/* 消息内文档 */
.m-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.m-doc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--paper); text-decoration: none; color: inherit; transition: all .15s; }
.m-doc:hover { border-color: var(--pink); background: var(--pink-pale); }
.m-doc .md-ico { color: var(--pink-deep); display: inline-flex; }
.m-doc .md-name { font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-doc .md-ext { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--pink-pale); color: var(--pink-deep); font-weight: 600; }
/* 消息内图片 */
.m-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.m-imgs img { max-width: 180px; max-height: 180px; border-radius: 8px; cursor: zoom-in; object-fit: cover; border: 1px solid var(--line-soft); }
/* 图片选择弹窗 */
.pic-pick { display: flex; flex-direction: column; gap: 8px; }
.pic-pick-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-soft); cursor: pointer; transition: all .15s; }
.pic-pick-item:hover { background: var(--pink-pale); border-color: var(--pink); }
.pic-pick-item .pp-hint { margin-left: auto; font-size: 10px; color: var(--gray-deep); opacity: .7; }
.pic-pick-item span { font-size: 13px; }
/* 站内素材选择网格 */
.lib-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 50vh; overflow-y: auto; }
.lib-pick-item { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); cursor: pointer; transition: all .15s; }
.lib-pick-item:hover { border-color: var(--pink); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.lib-pick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.lib-pick-item span { display: block; padding: 6px 8px; font-size: 11px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-doc-ico { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--pink-pale); color: var(--pink-deep); }
.lib-pick-item .ld-ext { display: block; padding: 2px 8px 6px; font-size: 9px; color: var(--gray-deep); text-align: center; font-weight: 600; }
.chat-deep {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--pink-deep); cursor: pointer;
  user-select: none; width: fit-content;
}
.chat-deep input { accent-color: var(--accent-ui); width: 14px; height: 14px; cursor: pointer; }
.chat-deep .cd-tag {
  font-family: var(--font-en); font-size: 7px; letter-spacing: 1px;
  border: 2px solid var(--accent-ui); color: var(--accent-ui);
  padding: 1px 4px;
}
/* 思考过程气泡 */
.m-thinking {
  margin-top: 8px; padding: 8px 10px;
  background: transparent;
  border: 2px dashed var(--gray-mid);
  font-size: 11px; color: var(--gray-deep);
  line-height: 1.7; display: flex; gap: 8px; align-items: flex-start;
}
.mt-ico { flex-shrink: 0; }
.mt-body { flex: 1; white-space: pre-wrap; word-break: break-word; }
.typing .dot { display: inline-block; width: 6px; height: 6px; background: var(--ink); margin-right: 3px; animation: blink 1s infinite; }
.typing .dot:nth-child(2) { animation-delay: .2s; }
.typing .dot:nth-child(3) { animation-delay: .4s; }
/* ============ 工作台 ============ */
.work-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.work-columns.lo-1 { grid-template-columns: 1fr; }
.work-columns.lo-2 { grid-template-columns: 1fr 1fr; }
.work-col { background: transparent; border: 1px solid var(--line-soft);  padding: 12px; }
.work-col-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.work-col-title .n { font-family: var(--font-en); font-size: 9px; background: var(--pink); color: var(--paper); padding: 2px 6px; border: 2px solid var(--ink); }
.order-card { border: 1px solid var(--line-soft); background: transparent; border-radius: var(--rnd-md); padding: 10px 12px; margin-bottom: 10px; position: relative; }
.order-card.done { opacity: .72; }
.order-card .oc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-card .oc-client { font-size: 14px; font-weight: 400; }
.order-card .oc-type { font-size: 11px; background: var(--pink-faint); border: 2px solid var(--ink); padding: 1px 6px; }
.order-card .oc-days { font-family: var(--font-en); font-size: 9px; }
.order-card .oc-deadline { margin-left: auto; font-size: 12px; }
.order-card .oc-detail { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 10px; font-size: 12px; color: var(--ink-soft); }
.order-card .oc-detail b { color: var(--ink); }
.order-card .oc-note { margin-top: 8px; font-size: 12px; border-top: 2px dashed var(--bg-2); padding-top: 6px; color: var(--ink-soft); }
.order-card .oc-actions { position: absolute; right: 8px; bottom: 8px; display: none; gap: 4px; }
.order-card:hover .oc-actions { display: flex; }
.order-card .oc-actions .icon-btn { width: 24px; height: 24px; font-size: 10px; }
/* 触屏设备：操作按钮始终可见 */
@media (hover: none) {
  .order-card .oc-actions { display: flex; }
}
.overdue { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ============ 素材库 ============ */
.lib-upload {
  border: 3px dashed var(--gray);
  background: var(--pink-faint);
  padding: 26px 14px;
  text-align: center;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lib-upload:hover, .lib-upload.drag { background: var(--pink-pale); border-color: var(--accent-ui); }
.lib-upload .lu-ico { font-size: 26px; color: var(--accent-ico); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
/* 笔记附件 */
.n-att-list { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; }
.n-att-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--pink-faint); border: 2px solid var(--ink);
  padding: 5px 8px; font-size: 12px;
}
.n-att-row .na-ico { flex-shrink: 0; }
.n-att-row .na-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-att-row .na-x { cursor: pointer; color: var(--pink-deep); font-weight: 600; padding: 0 4px; }
.n-att-row .na-x:hover { color: var(--danger); }
.lc-att { font-size: 11px; color: var(--pink-deep); margin-top: 2px; }
.lib-card { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); overflow: hidden; position: relative; }
.lib-card:hover { transform: translateY(-3px); }
.lib-card .lc-img { width: 100%; height: 130px; object-fit: cover; display: block; border-bottom: 3px solid var(--ink); }
.lib-card .lc-img.ph { display: flex; align-items: center; justify-content: center; background: var(--pink-faint); font-size: 17px; color: var(--pink-deep); }
.lib-card .lc-body { padding: 8px 10px; }
.lib-card .lc-title { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-card .lc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lib-card .lc-tag { font-size: 10px; background: var(--bg-2); border: 2px solid var(--ink); padding: 1px 5px; }
.lib-card .lc-note { font-size: 11px; color: var(--ink-soft); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
.lib-card .lc-del { position: absolute; top: 6px; right: 6px; display: none; }
.lib-card:hover .lc-del { display: flex; }
.lightbox { position: fixed; inset: 0; z-index: 160; background: rgba(41, 42, 44, .8); display: flex; align-items: center; justify-content: center; padding: 30px; }
.lightbox img { max-width: 90vw; max-height: 86vh; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); }
.lightbox .lb-close { position: absolute; top: 20px; right: 26px; }

/* ============ 待办 ============ */
.todo-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.focus-box { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 16px; text-align: center; height: fit-content; }
.focus-clock {
  font-family: var(--font-en);
  font-size: 17px;
  letter-spacing: 3px;
  padding: 14px 0;
  color: var(--pink-deep);
  border: 1px solid var(--line-soft);
  background: var(--pink-faint);
  margin: 12px 0;
}
.focus-clock.running { animation: pulseGlow 1.2s ease-in-out infinite; }
.focus-modes { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.focus-modes .chip { font-size: 11px; }
.focus-ctl { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.todo-panel { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 12px; }
.todo-filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.todo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line-soft);
  background: var(--card-bg);
}
.todo-item:hover { background: var(--pink-faint); }
.todo-item.done .ti-title { text-decoration: line-through; color: var(--gray-deep); }
.todo-item .ti-check { width: 20px; height: 20px; border: 1px solid var(--line-soft); background: var(--card-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; }
.todo-item.done .ti-check { background: var(--sage); color: var(--paper); }
.todo-item .ti-title { flex: 1; font-size: 13px; }
.todo-item .ti-date { font-size: 11px; color: var(--gray-deep); font-family: var(--font-en); }
.todo-item .ti-note { font-size: 11px; color: var(--ink-soft); width: 100%; }
.todo-day { font-size: 12px; color: var(--ink-soft); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; }
.todo-day::after { content: ''; flex: 1; border-bottom: 2px dashed var(--bg-2); }

/* ============ 目标 ============ */
.goal-card {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  padding: 14px;
  position: relative;
}
.goal-card .gc-name { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.goal-card .gc-cat { font-size: 11px; background: var(--pink-faint); border: 2px solid var(--ink); padding: 1px 6px; }
.goal-card .gc-note { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.goal-card .gc-stats { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.goal-card .gc-stats b { font-family: var(--font-en); font-size: 13px; color: var(--ink); }
.goal-vis { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.progress-ring { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.progress-ring .pr-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 12px; }
.goal-heat { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.heat-cell { width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--bg-2); }
.heat-cell.on { background: var(--pink); }
.heat-cell.today { box-shadow: 0 0 0 2px var(--gold); }
.goal-btn { margin-top: 12px; }

/* ============ 日历 ============ */
.cal-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.cal-panel { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 14px; }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.cal-title { font-size: 17px; letter-spacing: 2px; min-width: 150px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--gray-deep); padding: 4px 0; font-family: var(--font-en); }
.cal-cell {
  aspect-ratio: 1; min-height: 46px;
  border: 1px solid var(--line-soft);
  background: var(--card-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  transition: opacity .12s, transform .12s;
  font-size: 13px;
}
.cal-cell:hover { background: var(--pink-faint); transform: translateY(-2px); }
.cal-cell.other { background: var(--bg-2); color: var(--gray-deep); }
.cal-cell.today { background: var(--pink); color: var(--paper); animation: pulseGlow 2s ease-in-out infinite; }
.cal-cell.selected { outline: 3px solid var(--gold); outline-offset: -3px; }
.cal-cell .cc-dots { position: absolute; bottom: 4px; display: flex; gap: 3px; }
.cal-cell .cc-dots i { width: 5px; height: 5px; background: var(--pink-deep); border: 1px solid var(--ink); }
.cal-cell .cc-dots i.ord { background: var(--gold); }
.cal-cell.today .cc-dots i { background: #ffffff; border-color: var(--ink); }
.cal-cell.today .cc-dots i.ord { background: var(--gold); border-color: var(--ink); }

/* ---- 日历里的订单条目（工作台同步） ---- */
.cal-day-panel .co-head { font-size: 11px; color: var(--ink-soft); margin: 2px 0 6px; display: flex; align-items: center; gap: 4px; }
.cal-ord {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink); 
  background: var(--card-bg); border-radius: var(--rnd-sm, 8px);
  padding: 7px 9px; margin-bottom: 6px; cursor: pointer;
  transition: opacity .12s, transform .12s, background .12s;
}
.cal-ord:hover { background: var(--pink-faint); transform: translateY(-1px); }
.cal-ord .co-dot { width: 8px; height: 8px; background: var(--gold); border: 2px solid var(--ink); border-radius: 50%; flex: none; }
.cal-ord b { font-size: 12px; display: block; line-height: 1.3; }
.cal-ord .co-sub { font-size: 10px; color: var(--ink-soft); display: block; line-height: 1.3; }
.cal-ord .co-amount { font-size: 11px; font-weight: 600; flex: none; }
.cal-ord .co-flag { font-size: 10px; margin-left: 4px; flex: none; color: var(--ink-soft); }
.cal-ord.done { opacity: .55; }
.cal-ord.done .co-dot { background: var(--sage); }
.cal-ord.overdue .co-dot { background: var(--danger); }
.cal-ord.overdue .co-flag { color: var(--danger); font-weight: 600; }
.cal-side { display: flex; flex-direction: column; gap: 14px; }
.cal-day-panel { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 14px; }
.cal-day-title { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

/* ============ 设置 ============ */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.set-card { background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 16px; }
.set-card h3 { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.set-row .px-input { flex: 1; min-width: 140px; }
.texture-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.texture-item { width: 44px; height: 44px; border: 1px solid var(--line-soft); background: transparent; }
.texture-item.active { outline: 1px solid var(--ink); outline-offset: 1px; }
/* 外观工坊纹理：真实瓦片小预览（方块直接铺该纹理的 SVG） */
.tex-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tex-item {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-soft); background-color: var(--bg-2);
  background-repeat: repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tex-item:hover { border-color: var(--pink); transform: translateY(-1px); }
.tex-item.active { border-color: var(--pink-deep); box-shadow: 0 0 0 2px var(--pink-faint); }
.tex-name { font-size: 10px; color: var(--gray-deep); }
.bg-prev { width: 100%; height: 90px; border: 1px solid var(--line-soft); background: var(--bg); background-size: cover; background-position: center; margin-bottom: 8px; }
/* 外观工坊：白天 / 夜间壁纸双槽 */
.lk-bg-slots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.lk-bg-slot { border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 6px 8px; background: transparent; }
.lk-bg-slot.cur { border-color: var(--ink); }
.lkb-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; }
.lkb-head b { font-size: 12px; }
.lkb-cur { display: none; font-style: normal; font-size: 9px; color: var(--ink-soft); background: transparent; padding: 2px 6px; }
.lk-bg-slot.cur .lkb-cur { display: inline-block; }
.lkb-prev { width: 100%; height: 56px; border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); background: var(--bg); background-size: cover; background-position: center; margin-bottom: 6px; }
.lk-bg-slot .set-row { margin: 0; }

/* ============ 音乐浮窗 ============ */
#music-panel {
  position: fixed; top: 72px; right: 12px; width: 340px; max-height: calc(100vh - 96px);
  z-index: 90; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  animation: slideinL .25s ease;
}
.panel-head { display: flex; align-items: center; }
.panel-head b { flex: 1; font-size: 14px; }
.music-now { display: flex; gap: 10px; align-items: center; }
.music-cover {
  width: 56px; height: 56px; flex-shrink: 0;
  border: 1px solid var(--line-soft);
  background: var(--pink-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--accent-ico);
  overflow: hidden;
}
.music-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-artist { font-size: 11px; color: var(--gray-deep); margin-top: 3px; }
.music-bar { height: 10px; border: 2px solid var(--ink); background: var(--bg-2); cursor: pointer; touch-action: none; }
#music-fill { height: 100%; width: 0; background: var(--pink); }
.music-time { display: flex; justify-content: space-between; font-family: var(--font-en); font-size: 9px; color: var(--gray-deep); margin-top: 3px; }
.music-ctl { display: flex; justify-content: center; align-items: center; gap: 10px; }
/* 播放控制三个按钮：和歌词浮窗底部那排同一种做法 —— 去掉立体外框和底色，只留图标；
   按钮框还留着（撑住点击区域和居中），只是看不见了；播放键比两侧略大、用粉色作主控 */
.music-ctl .icon-btn {
  width: 34px; height: 34px;
  background: transparent; border: none; box-shadow: none;
  color: var(--gray-deep);
}
.music-ctl .icon-btn:hover { background: transparent; color: var(--accent-ico); }
.music-ctl .icon-btn:active { transform: none; box-shadow: none; color: var(--accent-ico); }
.music-ctl .m-ctl-main { width: 38px; height: 38px; color: var(--accent-ico); }
.music-vol { display: flex; align-items: center; gap: 8px; }
.music-vol input { flex: 1; }
.music-url { display: flex; gap: 6px; }
.music-url .px-input { font-size: 11px; }
.music-pl-head { display: flex; align-items: center; gap: 8px; }
.music-pl-head select { flex: 1; border: 1px solid var(--line-soft); background: var(--field-bg); padding: 5px 6px; font-size: 12px; }
.music-search { display: flex; gap: 6px; }
.music-search input { flex: 1; font-size: 12px; }
.music-list { max-height: 180px; overflow-y: auto; border: 2px dashed var(--bg-2); padding: 4px; }
.music-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; border: 2px solid transparent; }
.music-row:hover { background: var(--pink-faint); border-color: var(--ink); }
.music-row.playing { background: var(--pink-pale); }
.music-row .mr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-row .mr-artist { color: var(--gray-deep); font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-row .mr-add { flex-shrink: 0; }

/* ---- 播放模式 / 歌词按钮行 ---- */
.music-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.music-sub .icon-btn {
  width: 32px; height: 32px; padding: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; box-shadow: none;
}
.music-sub .icon-btn svg { width: 100%; height: 100%; display: block; }
.music-sub .icon-btn:hover { background: transparent; border: none; box-shadow: none; }
.music-sub .icon-btn:hover svg { opacity: .72; }

/* ---- 歌单拖拽排序 ---- */
.music-row[draggable="true"] { cursor: grab; }
.music-row.dragging { opacity: .45; }
.music-row.drag-over { border-color: var(--pink); background: var(--pink-faint) !important; }

/* ============ 随记 ============ */
.nt-count { font-size: 12px; color: var(--gray-deep); }
.nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.nt-card {
  position: relative;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  padding: 12px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 132px;
  transition: background .12s;
}
.nt-card:hover { background: var(--bg-2); }
.nt-card::before { content: none; }
.nt-card > * { position: relative; }
.ntc-top { display: flex; align-items: center; gap: 6px; }
.ntc-title {
  flex: 1; font-size: 14px; font-weight: 400; color: var(--pink-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntc-del { width: 24px; height: 24px; font-size: 11px; opacity: 0; flex-shrink: 0; }
.nt-card:hover .ntc-del { opacity: 1; }
.ntc-content {
  flex: 1; font-size: 12px; color: var(--ink-soft); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ntc-content.is-empty { color: var(--gray-deep); font-style: italic; }
.ntc-meta { font-size: 10px; color: var(--gray-deep); border-top: 2px dotted var(--pink-pale); padding-top: 6px; }

/* ============ 歌词浮窗 ============ */
#lyric-panel {
  position: fixed; right: 24px; bottom: 24px; width: 360px; max-height: 46vh;
  z-index: 120;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: popin .2s ease;
}
.lp-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  cursor: move; user-select: none;
}
.lp-head b { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-head .icon-btn { width: 24px; height: 24px; font-size: 12px; flex-shrink: 0; }
#lp-save.has-sel { outline: 3px solid var(--gold); outline-offset: -2px; }
#lp-body {
  overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
}
#lp-body.mini { padding: 10px; justify-content: center; }
.lp-empty { color: var(--gray-deep); font-size: 13px; text-align: center; padding: 34px 10px; line-height: 1.9; }
.lp-line {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 8px;
  padding: 5px 6px; border: 2px solid transparent;
  cursor: pointer; border-radius: 4px;
  font-size: 12px; line-height: 1.55;
}
.lp-line:hover { background: var(--pink-faint); }
.lp-line.lp-cur { background: var(--pink-pale); border-color: var(--pink); }
.lp-line.lp-sel { background: var(--lp-sel-bg); border-color: var(--gold); }
.lp-line .lp-check { margin-top: 2px; accent-color: var(--accent-ui); cursor: pointer; flex-shrink: 0; }
.lp-line .lp-text { flex: 1; min-width: 0; color: var(--ink); }
.lp-line .lp-trans { display: block; flex-basis: 100%; color: var(--gray-deep); font-size: 11px; }
.lp-line.lp-cur .lp-text { color: var(--pink-deep); font-weight: 600; }
.lp-mini-row {
  font-size: 15px; padding: 6px 10px; line-height: 1.7;
  color: var(--gray-deep); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-mini-row.lp-cur { color: var(--pink-deep); font-weight: 600; }


/* ============ 动画 ============ */
@keyframes pulseGlow {
  0%,100% { box-shadow: 3px 3px 0 0 var(--ink), 0 0 0 0 rgba(179, 190, 206, .5); }
  50% { box-shadow: 3px 3px 0 0 var(--ink), 0 0 0 6px rgba(179, 190, 206, .0); }
}
@keyframes blink {
  0%,100% { opacity: .25; }
  50% { opacity: .55; }
}
@keyframes beat {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
.sparkle {
  position: fixed; font-size: 12px;
  color: var(--gray-deep); /* 灰色系，不再用金色 */
  pointer-events: none; z-index: 5;
  animation: sparkle 5s ease-in-out infinite;
  text-shadow: none;
  user-select: none;
}
.sparkle.sp-dark { color: #37383a; }
.sparkle.sp-pink { color: var(--pink-deep); }

/* ---- 像素装饰贴纸 ---- */
.sticker {
  position: fixed; z-index: 6; pointer-events: none;
  font-size: 15px; line-height: 1; user-select: none;
  opacity: .8;
}
.sticker .emo { display: block; }
.sticker:hover { animation: sway .5s ease-in-out; }
.st-kitten { left: 34px; bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.st-heart { right: 30px; top: 96px; color: var(--ink-soft); animation: beat 2.2s ease-in-out infinite; }
.st-bow { right: 60px; bottom: 20px; font-size: 17px; color: var(--pink-deep); }
.st-kaomoji { left: 44%; bottom: 12px; font-size: 12px; color: var(--ink-soft); opacity: .55; }
.st-flowertop { left: 26px; top: 84px; color: var(--pink-deep); }

/* ============ 空间装饰层 ============ */
#deco-layer {
  position: fixed; inset: 0; z-index: 12;
  pointer-events: none; overflow: hidden;
}
.deco-item {
  position: absolute; transform-origin: center;
  user-select: none; -webkit-user-drag: none;
  cursor: grab; touch-action: none;
  line-height: 0;
  z-index: 20; /* 吸附进模块后仍盖住模块内容，但不越过左侧导航(40)/顶栏(60) */
  pointer-events: none; /* 非装扮状态下不挡内容点击（吸附进模块后尤其重要） */
}
.deco-item img {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
/* 装扮模式：整层可交互、盖在内容上方 */
#deco-layer.editing { z-index: 55; pointer-events: auto; }
#deco-layer.editing .deco-item { cursor: move; pointer-events: auto; }
#deco-layer.editing .deco-item.selected {
  outline: 2px dashed var(--accent-ui);
  outline-offset: 4px;
  background: rgba(178, 189, 205, .12);
}
/* 顶层装饰（置顶）在非编辑时也浮在内容上 */
.deco-item.deco-top { z-index: 30; }
/* 已吸附贴纸的标记（编辑时可见）：右下角小钉子 */
#deco-layer.editing .deco-item[data-anchored]::after {
  content: '⌖'; position: absolute; right: -9px; bottom: -9px;
  width: 20px; height: 20px; line-height: 17px; text-align: center;
  font-size: 13px; color: var(--pink-deep);
  background: var(--card-bg); border: 2px solid var(--ink); border-radius: 50%;
  pointer-events: none;
}

/* 装扮工具栏 */
.deco-tools {
  position: fixed; left: 8px; right: 8px; top: 68px;
  z-index: 58; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px 12px; background: transparent;
  border: 1px solid var(--line-soft); border-radius: 0;
  font-size: 12px; color: var(--ink);
}
.deco-tools b { color: var(--pink-deep); }
.deco-tools .dt-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deco-tools .dt-btn {
  min-width: 28px; height: 28px; padding: 0 8px;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--card-bg);
  font-size: 12px; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.deco-tools .dt-btn:hover { background: var(--pink-faint); }
.deco-tools .dt-btn.danger { background: var(--danger-bg); color: var(--danger); }
.deco-tools .dt-btn.primary { background: var(--accent-ui); color: var(--paper); border-color: #4e5662; }
.deco-tools .dt-anchor {
  font-size: 11px; color: var(--gray-deep); background: var(--pink-faint);
  border: 2px solid var(--ink); border-radius: 8px; padding: 3px 8px;
  white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.deco-tools .dt-anchor.on { color: var(--accent-ui); border-color: var(--accent-ui); }
.deco-tools input[type="range"] { width: 74px; accent-color: var(--accent-ui); }
.deco-tools input[type="color"] { width: 26px; height: 26px; padding: 0; border: 2px solid var(--ink); border-radius: var(--rnd-md); background: var(--card-bg); cursor: pointer; }
.deco-tools label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.deco-tools .dt-sep { width: 1px; height: 18px; background: var(--pink-pale); }

/* 装扮空态提示 */
.deco-hint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 57; padding: 14px 22px; background: var(--hint-bg);
  border: 3px dashed var(--accent-ui); border-radius: 14px;
  color: var(--accent-ui); font-size: 13px; text-align: center;
}
.deco-hint button { margin-top: 8px; }

/* 装饰素材缩略图 */
.deco-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border: 2px solid var(--ink); border-radius: 10px;
  cursor: pointer; background: var(--card-bg);
  transition: transform .12s;
}
.deco-thumb:hover { transform: scale(1.08) rotate(-3deg); }
.deco-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.deco-thumbs .dt-item { position: relative; }
.deco-thumbs .dt-name {
  font-size: 10px; color: var(--gray-deep); text-align: center;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ===== 工作台：收入统计 ===== */
.work-stats { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.work-stats .ws-main { flex: 1 1 200px; background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 14px; }
.work-stats .ws-label { font-size: 12px; color: var(--ink-soft); }
.work-stats .ws-num { font-family: var(--font-en); font-size: 26px; margin: 6px 0 2px; color: var(--pink-deep); }
.work-stats .ws-sub { font-size: 12px; color: var(--gray-deep); }
.work-stats .ws-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; background: transparent; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 14px; }
.work-stats .ws-month { display: flex; align-items: center; gap: 8px; }
.work-stats .ws-month .f-label { margin: 0; }
.work-stats .ws-month input { max-width: 160px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-chips .chip b { font-family: var(--font-en); }
/* 订单卡：金额 / 步骤进度 */
.order-card .oc-amount { font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--pink-deep); }
.order-card .oc-step-n { font-family: var(--font-en); font-size: 9px; background: var(--pink-faint); border: 2px solid var(--ink); padding: 0 5px; }
.oc-steps { margin-top: 8px; }
.oc-steps .os-bar { height: 6px; background: var(--bg-2); border: 2px solid var(--ink); overflow: hidden; }
.oc-steps .os-bar i { display: block; height: 100%; background: var(--pink); transition: width .3s; }
.oc-steps .os-list { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.oc-steps .os-item { font-size: 11px; cursor: pointer; padding: 1px 4px; border: 2px dashed var(--bg-2); color: var(--ink-soft); user-select: none; }
.oc-steps .os-item:hover { border-color: var(--pink); }
.oc-steps .os-item.done { text-decoration: line-through; color: var(--gray-deep); border-style: solid; }
/* 订单表单：步骤编辑器 */
#f-steps { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.f-step { display: flex; gap: 6px; align-items: center; }
.f-step .px-input { flex: 1; }
.f-step .f-step-done { display: none; color: var(--sage); font-weight: 600; }
.f-step.done .px-input { text-decoration: line-through; color: var(--gray-deep); }
.f-step.done .f-step-done { display: inline; }
/* 待办：订单来源标记 */
.todo-src { display: inline-block; margin-right: 4px; font-size: 11px; }

/* ================================================================
   ================================================================ */

/* 1) 各模块面板容器 → 统一窗口边框 + 像素投影
   background 可用 --module-bg 覆盖（外观工坊「功能模块透明度」） */
.focus-card, .work-col, .chat-side, .chat-main, .todo-panel, .focus-box, .cal-panel, .cal-day-panel, .home-hello, .goal-card, .lib-card, .nt-card, .search-box, .search-results, .work-stats .ws-main, .work-stats .ws-side, #lyric-panel, #music-panel{
  background: var(--module-bg, var(--paper));
  border: 1px solid var(--line-soft);
}
/* 音乐 / 歌词浮窗保持实心纸色，不随「功能模块透明度」变化 */
#music-panel, #lyric-panel {
  background: transparent;
  border: 1px solid var(--line-soft);
}
/* 弹窗 / 设置卡片保持实心纸色，不参与模块透明度 */
.modal-card, .set-card {
  background: transparent;
  border: 1px solid var(--line-soft);
}
.nt-card, .lib-card, .search-box {  }

.focus-card::before, .set-card::before, .work-col::before, .chat-side::before,
.chat-main::before, .todo-panel::before, .cal-panel::before, .cal-day-panel::before,
.home-hello::before, .goal-card::before, .search-box::before, .search-results::before,
.lib-card::before, .nt-card::before, .focus-box::before, .work-stats .ws-main::before,
.work-stats .ws-side::before {
  content: ''; position: absolute; inset: 3px;
  
  pointer-events: none;
}
.focus-card::after, .set-card::after, .work-col::after, .chat-side::after,
.chat-main::after, .todo-panel::after, .cal-panel::after, .cal-day-panel::after,
.home-hello::after, .goal-card::after, .lib-card::after, .focus-box::after,
.work-stats .ws-main::after, .work-stats .ws-side::after {
  content: ""; position: absolute; top: -12px; right: 10px;
  font-size: 13px; color: var(--pink);
  background: transparent; padding: 0 4px;
  pointer-events: none;
}

/* 3) 卡片内标题 → 窗口标题栏（负边距铺满顶部） */
.focus-card .fc-title, .set-card h3, .work-col-title, .goal-card .gc-name, .cal-head {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-weight: 400;
}
.focus-card .fc-title { margin: -14px -14px 12px; padding: 8px 12px; font-size: 14px; }
.set-card h3 { margin: -16px -16px 12px; padding: 10px 14px; font-size: 15px; }
.work-col-title { margin: -12px -12px 12px; padding: 8px 12px; }
.goal-card .gc-name { margin: -14px -14px 12px; padding: 8px 12px; }
.cal-head { margin: -14px -14px 12px; padding: 10px 12px; }
/* 标题栏右侧的 ▁ □ × 装饰字符已删 */

/* 4) 浮窗 / 弹窗标题栏 */
.chat-head, .chat-side-head, .panel-head, .lp-head, .modal-head{
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
.chat-side-head { padding: 10px; display: flex; gap: 6px; }
.panel-head { margin: -14px -14px 0; padding: 10px 14px; display: flex; align-items: center; }
.chat-head { padding: 10px 14px; }
.modal-head { padding: 12px 16px; }

/* 5) 窗口控制按钮 .win-btns —— 已删：JS 注入已停，CSS 也清（5500 行兜底 `display:none` 仍生效） */

.order-card { border: 1px solid var(--line-soft); }
.todo-item { border: 1px solid var(--line-soft); }
.cal-cell { border: 1px solid var(--line-soft); }
.quote-box { border: 1px solid var(--line-soft); box-shadow: none; }
.focus-clock { border: 1px solid var(--line-soft); box-shadow: none; }

/* 7) 弹窗遮罩 / 右键菜单 / Toast 统一 */
.modal-mask { background: transparent; }
#ctx-menu, .toast {
  background: transparent;
  border: 1px solid var(--line-soft);
}

/* 8) 粒子装饰：闪烁 + 缓慢漂浮；随机贴纸浮动 */
.sparkle { animation: sparkle 5s ease-in-out infinite, floaty 7s ease-in-out infinite; }
.st-disk, .st-cd, .st-star, .st-mush, .st-ribbon, .st-spark, .st-cat {
  font-size: 15px; opacity: .75; animation: floaty 4s ease-in-out infinite;
  color: var(--ink-soft); /* 纯色，不再用彩色 emoji */
}
.st-disk { animation-delay: .4s; }
.st-cd { animation-delay: 1s; }
.st-star { animation-delay: 1.6s; }
.st-mush { animation-delay: 2.2s; }
.st-ribbon { animation-delay: .8s; }
.st-spark { animation-delay: 1.2s; }
.st-cat { animation-delay: 2.8s; }

/* ============ 外观工坊：设置中心入口预览 + 整体色彩调节 ============ */
.look-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.lm-box {
  aspect-ratio: 1; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink-soft); 
  overflow: hidden;
}
.lm-bg { background: linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b)); }
.lm-tex { background-image: radial-gradient(circle at 32% 32%, var(--pink-deep) 2px, transparent 2.5px); background-size: 13px 13px; }
.lm-deco { font-size: 17px; }
.lm-tune { font-size: 17px; background: conic-gradient(from 0deg, #cad3e0, #c2c8d6, #b8d8c0, #f2dfa8, #cad3e0); }
.look-sub { font-size: 11px; color: var(--gray-deep); margin-bottom: 10px; line-height: 1.8; }

.tune-prev {
  width: 100%; height: 64px; border: 1px solid var(--line-soft); margin-bottom: 10px;
  background:
    radial-gradient(circle at 25% 30%, rgb(var(--bg-glow-1) / .5), transparent 55%),
    radial-gradient(circle at 78% 70%, rgb(var(--bg-glow-2) / .35), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
}

/* ---- 外观工坊：逐项调色（极简） ---- */
.pal-box { margin: 10px 0 2px; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); background: transparent; }
.pal-box summary {
  cursor: pointer; padding: 6px 8px; font-size: 12px; color: var(--ink);
  background: transparent; user-select: none; list-style: none;
  border-radius: var(--rnd-sm);
}
.pal-box summary::-webkit-details-marker { display: none; }
.pal-box[open] summary { border-bottom: 1px solid var(--line-soft); }
.pal-box .look-sub { padding: 8px 8px 2px; margin: 0; }
.pal-mode-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); padding: 6px 8px 2px; flex-wrap: wrap; }
.pal-mode-txt { color: var(--ink); }
.pal-demo { margin: 6px 8px 4px; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); }
.pal-demo .pd-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; font-size: 11px; color: var(--ink);
  background: transparent;
}
.pal-demo .pd-top i { font-style: normal; color: var(--ink-soft); letter-spacing: 2px; font-size: 9px; }
.pal-demo .pd-title {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px; font-size: 10px; color: var(--ink);
  background: transparent;
  border-top: 1px solid var(--line-soft);
}
.pal-demo .pd-title i { font-style: normal; font-size: 7px; opacity: .55; letter-spacing: 1px; }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 5px; padding: 6px 8px 8px; }
.pal-item {
  display: flex; align-items: center; gap: 5px; padding: 3px 6px;
  border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); background: transparent;
}
.pal-item .pal-name { flex: 1; font-size: 10px; color: var(--ink); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pal-color {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--rnd-sm);
  background: none; cursor: pointer; flex-shrink: 0;
}
.pal-color::-webkit-color-swatch-wrapper { padding: 0; }
.pal-color::-webkit-color-swatch { border: none; }
.pal-mini {
  width: 18px; height: 18px; line-height: 1; font-size: 9px; padding: 0;
  border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); background: transparent;
   cursor: pointer; color: var(--ink); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pal-mini:hover { background: var(--bg-2); }
.pal-mini.black { background: #1a1a1a; color: var(--paper); }
.pal-mini.white { background: #ffffff; color: var(--ink); }
.pal-foot { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; flex-wrap: wrap; }
.pal-tip { font-size: 10px; color: var(--gray-deep); }

.tune-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--ink-soft); }
.tune-row b { width: 34px; flex-shrink: 0; }
.tune-row input[type=range] { flex: 1; }
.tune-row span { width: 46px; text-align: right; font-family: var(--font-en); font-size: 10px; color: var(--ink); }
.tune-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.tune-chip {
  border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); background: transparent;
  padding: 3px 8px; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
   font-family: var(--font-body);
}
.tune-chip:hover { background: var(--bg-2); }
.tune-chip.active { outline: 1px solid var(--ink); outline-offset: 0; }
.tune-chip i { width: 13px; height: 13px; border: 1px solid var(--line-soft); display: inline-block; }
.tune-chip.mine { border-style: dashed; border-color: var(--line-soft); }
.tune-chip .tc-x { margin-left: 3px; font-size: 9px; opacity: .55; }
.tune-chip .tc-x:hover { opacity: 1; color: #7089ab; }
.deco-scroll { max-height: 172px; overflow-y: auto; padding-right: 4px; margin-bottom: 4px; }

/* 全局搜索命中随记的高亮 */
.nt-hit { outline: 3px solid var(--gold); outline-offset: 2px; animation: popin .25s ease; }

/* ============ 夜间 / 白天显示模式切换 ============ */
.md-chip {
  border: 1px solid var(--line-soft); border-radius: var(--rnd-sm); background: transparent; color: var(--ink);
  padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s;
}
.md-chip:hover { background: var(--bg-2); }
.md-chip:active { transform: none; box-shadow: none; }
.md-chip.active { outline: 1px solid var(--ink); outline-offset: 0; }

/* ============ 参考画布（主页「参考」入口的浮窗） ============ */
:root { --ref-grid: #dce0e6; }
:root.dark { --ref-grid: #3c3e40; }
#ref-panel {
  position: fixed; left: 18%; top: 8vh; width: 680px; height: 460px;
  z-index: 119;
  background: transparent;
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: popin .2s ease;
}
.ref-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  cursor: move; user-select: none; flex-shrink: 0;
}
.ref-head b { font-size: 13px; }
.ref-en { font-size: 9px; color: var(--ink-soft); letter-spacing: .6px; font-family: var(--font-en); }
.ref-count {
  font-size: 11px; color: var(--ink); border: 2px solid var(--ink);
  padding: 1px 7px; white-space: nowrap;
}
.ref-head .icon-btn { width: 25px; height: 25px; font-size: 12px; flex-shrink: 0; }
.ref-tip {
  font-size: 11px; color: var(--ink-soft);
  padding: 6px 10px; border-bottom: 2px dashed var(--gray);
  flex-shrink: 0; line-height: 1.6;
}
.ref-board {
  position: relative; flex: 1; min-height: 0;
  overflow: auto;
  background-color: var(--paper);
  background-image: radial-gradient(var(--ref-grid) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}
.ref-board.drag-on { outline: 3px dashed var(--accent-ui); outline-offset: -6px; }
.ref-pad { position: relative; }
.ref-empty {
  position: absolute; left: 0; right: 0; top: 34%;
  text-align: center; color: var(--gray-deep);
  font-size: 14px; line-height: 2.1; pointer-events: none;
  white-space: nowrap;
}
.ref-empty span { font-size: 11px; }
.ref-item { position: absolute; cursor: grab; touch-action: none; user-select: none; }
.ref-item:active { cursor: grabbing; }
.ref-item img {
  width: 100%; height: auto; display: block;
  pointer-events: none; user-select: none;
  
}
.ref-item:hover img {  }
.ref-item.selected img { box-shadow: 0 0 0 3px var(--accent-ui), 5px 6px 0 0 var(--ink); }
.ref-handle {
  position: absolute; right: -6px; bottom: -6px;
  width: 15px; height: 15px;
  background: var(--accent-ui);
  border: 2px solid var(--ink);
  cursor: nwse-resize;
  display: none; z-index: 2;
}
.ref-item.selected .ref-handle { display: block; }
.ref-item.ref-lost img { visibility: hidden; }
.ref-item.ref-lost::before {
  content: '图已经找不到了\n右键可移除';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 11px; color: var(--gray-deep); white-space: pre;
  text-align: center; width: 140px;
}
.ref-resize {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px;
  cursor: nwse-resize; z-index: 8;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 2px 4px;
  font-size: 12px; line-height: 1; color: var(--gray-deep);
  user-select: none; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--paper) 50%);
}
.ref-resize::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 10px; height: 10px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  opacity: .55;
}

/* ============ 记账「小金库 LEDGER」 ============ */
.lg-brand { font-family: var(--font-en); font-size: 9px; color: var(--gold); letter-spacing: 2px; margin-left: 4px; border-left: 2px solid var(--pink-pale); padding-left: 8px; }
.lg-tabs { display: flex; gap: 8px; margin: 12px 0 14px; flex-wrap: wrap; }
.lg-tab { cursor: pointer; padding: 5px 14px; border: 2px solid var(--ink); background: transparent; font-size: 13px; letter-spacing: 1px;  transition: all .15s; }
.lg-tab:hover { background: var(--pink-faint); transform: translateX(1px); }
.lg-tab.active { background: var(--accent-ui); color: var(--paper); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.lg-filters { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.lg-book-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.lg-kind-chips { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.lg-hint { font-size: 11px; color: var(--gray-deep); }
.lg-sum3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; }
.lg-sum-card { border: 2px solid var(--ink); padding: 10px 14px; background: transparent;  position: relative; overflow: hidden; }
.lg-sum-card.in { border-top: 4px solid var(--sage); }
.lg-sum-card.out { border-top: 4px solid var(--pink-deep); }
.lg-sum-card.bal { border-top: 4px solid var(--gold); }
.lsc-t { font-size: 11px; color: var(--gray-deep); letter-spacing: 2px; }
.lsc-v { font-size: 17px; font-weight: 400; font-family: var(--font-en); margin-top: 2px; color: var(--ink); }
.lsc-v.neg { color: var(--danger); }
.lsc-sub { font-size: 10px; color: var(--gray-deep); margin-top: 3px; }
.lg-flow .lg-day { margin-bottom: 12px; }
.lg-day { border: 2px solid var(--ink); background: transparent;  overflow: hidden; }
.lg-day-d, .lg-day-w { font-size: 12px; }
.lg-day-d { font-weight: 400; letter-spacing: 1px; }
.lg-day-w { color: var(--gray-deep); font-size: 11px; }
.lg-day-net { font-family: var(--font-en); font-size: 12px; color: var(--gray-deep); }
.lg-entry { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px dashed var(--pink-pale); cursor: context-menu; transition: background .15s; }
.lg-entry:hover { background: var(--pink-faint); }
.lg-entry.from-order { background: linear-gradient(90deg, rgba(201, 168, 118, .12) 0, transparent 120px); }
.lge-ico { font-size: 17px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: transparent;  flex-shrink: 0; }
.lge-main { flex: 1; min-width: 0; }
.lge-cat { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.lge-tag { font-size: 9px; color: var(--gold); border: 1px solid var(--gold); padding: 0 3px; border-radius: var(--rnd-sm); white-space: nowrap; }
.lge-note { font-size: 11px; color: var(--gray-deep); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lge-note-inline { color: var(--gray-deep); font-size: 11px; }
.lge-acc { font-size: 10px; color: var(--lav); border: 1px dashed var(--lav); padding: 1px 4px; border-radius: var(--rnd-sm); flex-shrink: 0; }
.lge-amt { font-family: var(--font-en); font-weight: 600; font-size: 14px; flex-shrink: 0; white-space: nowrap; }
.lge-amt.income { color: var(--sage); }
.lge-amt.expense { color: var(--danger); }
.lg-form { user-select: none; }
.lg-form-kind { display: flex; gap: 6px; margin-bottom: 10px; }
.lg-form-kind .chip { font-size: 13px; padding: 5px 16px; }
.lg-form-amt { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: transparent; padding: 4px 12px;  }
.lgfa-sym { font-size: 17px; font-weight: 600; color: var(--gold); }
.lg-cat-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 150px; overflow-y: auto; padding: 2px; }
.lg-cat-item { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border: 2px solid var(--ink); background: transparent; cursor: pointer;  font-size: 12px; transition: all .12s; }
.lg-cat-item:hover { background: var(--pink-faint); }
.lg-cat-item.active { background: var(--pink); color: var(--paper); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.lg-cat-item .lgi { font-size: 15px; }
.lg-cat-del { margin-left: 4px; border: 0; background: transparent; cursor: pointer; color: var(--gray-deep); font-size: 10px; padding: 0 2px; }
.lg-cat-del:hover { color: var(--danger); }
.lg-cat-group { margin-bottom: 12px; }
.lmg-t { font-size: 12px; color: var(--pink-deep); letter-spacing: 2px; margin-bottom: 6px; font-weight: 600; }
.lmg-add { display: flex; gap: 6px; margin-top: 8px; }
.lg-form-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.emoji-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-height: 120px; overflow-y: auto; }
.emoji-pick { font-size: 17px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: transparent; cursor: pointer;  }
.emoji-pick:hover { background: var(--pink-faint); }
.emoji-pick.active { background: var(--pink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.lg-books-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.lg-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.bk-card { border: 2px solid var(--ink); background: transparent; padding: 12px;  cursor: context-menu; transition: all .15s; position: relative; }
.bk-card:hover { transform: translateY(-2px);  }
.bk-card.system { border-color: var(--gold); }
.bk-cover { font-size: 40px; text-align: center; padding: 8px 0; text-shadow: 2px 2px 0 var(--pink-pale); }
.bk-name { font-size: 14px; font-weight: 400; text-align: center; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bk-tag { font-size: 9px; color: var(--paper); background: var(--gold); padding: 1px 5px; border-radius: var(--rnd-sm); }
.bk-stats { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--gray-deep); }
.bk-st b { font-family: var(--font-en); }
.bk-st.in b { color: var(--sage); }
.bk-st.out b { color: var(--danger); }
.bk-bal { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--pink-pale); font-size: 13px; font-weight: 600; font-family: var(--font-en); text-align: right; }
.bk-bal.pos { color: var(--sage); }
.bk-bal.neg { color: var(--danger); }
.lg-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-stats-grid > * { min-width: 0; }
.lg-cat-panel { padding: 12px; background: transparent !important; overflow: hidden; }
.lg-stat-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; min-width: 0; }
.lg-sr-name { width: 72px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.lg-bar { flex: 1; height: 12px; min-width: 0; border: 2px solid var(--ink); background: transparent; overflow: hidden; }
.lg-bar-in { height: 100%; transition: width .3s; }
.lg-sr-v { width: 96px; text-align: right; font-family: var(--font-en); font-size: 12px; flex-shrink: 0; white-space: nowrap; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.lg-sr-v em { font-style: normal; color: var(--gray-deep); font-size: 10px; }
.lg-daily-bar { width: 100%; min-width: 2px; background: var(--accent-ui); border: 1px solid var(--ink); box-sizing: border-box; }
.lg-daily-d { font-size: 9px; color: var(--gray-deep); }
/* 统计页每日趋势面板：无底色 */
.lg-trend-panel { background: transparent !important; }
.lg-st-meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.lg-st-meta b { color: var(--ink); font-family: var(--font-en); }
.lmg-t { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: 1px; }
.lg-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.lg-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.lg-acc-row, .lg-debt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px dashed var(--pink-pale); cursor: context-menu; }
.lg-acc-row:hover, .lg-debt-row:hover { background: var(--pink-faint); }
.lg-mini-chip { cursor: pointer; font-size: 11px; flex-shrink: 0; }
.lg-mini-chip.ok { border-color: var(--sage); color: var(--sage); }
.lg-mini-chip.ok:hover { background: var(--sage); color: var(--paper); }
.lg-dr-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px dashed var(--pink-pale); }
.lg-dr-kind { font-size: 11px; padding: 1px 8px; border: 2px solid var(--ink); flex-shrink: 0; }
.lg-dr-kind.borrow { background: var(--pink-faint); }
.lg-dr-kind.repay { background: var(--pink-pale); }

/* 记账：像素化图标细节（pix: 像素图标 / img: 自定义上传图） */
.pix-ico { vertical-align: middle; display: inline-block; }
.pix-img { display: inline-block; object-fit: contain; vertical-align: middle; }
.pix-txt { display: inline-block; vertical-align: middle; }
.chip-ico { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.chip .pix-ico { vertical-align: -2px; }
.lge-ico { display: flex; align-items: center; justify-content: center; }
.lge-ico .pix-ico, .lge-ico .pix-img { display: block; }
.lg-cat-item .lgi { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.lg-cat-item .lgi .pix-img { border: 1px dashed var(--ink); padding: 1px; box-sizing: border-box; }
.lg-cat-item.active .lgi rect { fill: var(--paper); }
.lg-sr-name .pix-ico { vertical-align: -2px; margin-right: 3px; }
/* 像素图标点选网格 */
.lmg-pix { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; padding: 6px; border: 2px dashed var(--pink-pale); background: var(--pink-faint); align-items: center; max-height: 112px; overflow-y: auto; }
.lmg-pix .pix-pick { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: transparent; cursor: pointer;  flex: 0 0 auto; }
.lmg-pix .pix-pick:hover { background: var(--pink-pale); transform: translateY(-1px); }
.lmg-pix .pix-pick.on { background: var(--pink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.lmg-pix .pix-pick.on rect { fill: var(--paper); }
.lmg-upload-bar { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.lmg-prev { display: none; width: 46px; height: 46px; border: 2px solid var(--ink); background: #ffffff;  align-items: center; justify-content: center; flex-shrink: 0; }
.lmg-prev.show { display: inline-flex; }
.lmg-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lmg-add { flex-wrap: wrap; }
.lmg-add .px-input { flex: 1 1 150px; }
.lmg-add .btn { flex-shrink: 0; }
/* 账本卡封面（支持自定义上传图） */
.bk-cover { display: flex; align-items: center; justify-content: center; min-height: 54px; }
.bk-cover .pix-img, .bk-cover img { width: 54px; height: 54px; object-fit: contain; }
/* 账本详情页（点账本看每一笔） */
.bk-card { cursor: pointer; }
.lg-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.lg-detail-head .lgd-title { font-weight: 400; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.lg-detail-head .lgd-cover { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--pink-pale); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #ffffff, 1px 1px 0 var(--pink-pale); }
.lg-detail-head .lgd-cover .pix-ico { display: block; }
.lg-detail-head .bk-tag { position: static; vertical-align: middle; }
#lgd-kind .px-input { width: 132px !important; }

/* 订单阶段标签（需求转订单后默认「待确认」） */
.oc-stage { background: var(--lav); border-color: var(--ink); }

/* ============================================================
   —— 纯外观覆盖：不新增/不修改任何功能与交互
   ============================================================ */

/* ---------- 1. 鼠标指针：像素爱心 / 像素手 ---------- */
body { cursor: var(--cursor-arrow); }
a, button, .btn, .icon-btn, .top-btn, .chip, .auth-tab, .ctx-item, summary, .order-card, .lib-card, .nt-card, .goal-card, .os-item, .texture-item, select, input[type=checkbox], input[type=range], label, .user-chip{ cursor: var(--cursor-ring); }
input.px-input, textarea.px-textarea, .px-textarea{ cursor: text; }

/* ---------- 2. 字体排版：标题沿用原来的像素字体，不做衬线 ---------- */
.view-title, .auth-title h1, .home-hello .hi, .panel-head b, .modal-head b, .lp-head b, #view h3, .set-card h3, .work-col-title, .ws-num{
  font-family: var(--font-body);
  letter-spacing: 1.5px;
}
.view-title, .set-card h3, .work-col-title{
  text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 rgba(213, 218, 225, .45);
}
:root.dark .view-title, :root.dark .set-card h3, :root.dark .work-col-title{ text-shadow: 1px 1px 0 rgba(0, 0, 0, .45); }

/* ---------- 3. 花边边框 —— 整块删除（21 行）----------
     border / background / box-shadow → 3982-399x 的「全清」清单（带 !important）
     border-image                     → 2470-2481 第 22 层的 border-image:none，
     border-radius: 0                 → 2477 的 var(--rnd-lg)
     .px-panel 那一行                  → 2485-2490
     ❀ 角花 ::before                   → 4012-4021 的 content:none !important

/* ---------- 4. 装饰分割线：心形装饰 + 虚线（替代 <hr> 实线） ----------
   ..rule / .rule-dashed 已删（JS/HTML 零引用），只保留 hr。 */
hr {
  border: 0 !important;
  height: 12px;
  margin: 14px 0;
  opacity: .9;
}

/* 各分区的标题行下沿：♥ ★ ❀ 组成的虚线 */
.work-col-title::after, .set-card h3::after{
  content: "";
  display: block;
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 3px;
  color: transparent;
  font-family: var(--font-body);
  opacity: .9;
}

/* ---------- 5. 列表 bullet：像素爱心 ---------- */
#view ul li, .modal-body ul li, .set-card ul li, .home-hello ul li {
  list-style: none;
  position: relative;
  padding-left: 16px;
}
#view ul li::before, .modal-body ul li::before,
.set-card ul li::before, .home-hello ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 10px;
}

.nt-card, .goal-card, .set-card, .todo-panel, .cal-panel, .cal-day-panel, .focus-box, .search-results, .lib-card{ position: relative; }

/* ---------- 7. 背景：波点纸纹 ---------- */
#bg-pattern {
  background-size: 18px 18px;
  opacity: .15;
}

#topbar { border-bottom: 3px solid transparent; box-shadow: 0 4px 0 0 rgba(136, 152, 174, .22); }
#topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  opacity: .75; pointer-events: none;
}
.logo-name { font-family: var(--font-body); letter-spacing: 3px; }

.btn, .icon-btn, .chip, .top-btn, .top-now { border-color: var(--line-soft); }
.btn { background: transparent; }
.btn:hover { background: var(--bg-2); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: none;
}
.btn-primary:hover { background: var(--ink-soft); }
.btn-ghost { border-color: var(--line-soft); border-style: dashed; background: transparent; }
.px-input, .px-textarea, .px-select { border-color: var(--line-soft); }
.px-input:focus, .px-textarea:focus, .px-select:focus {
  border-color: var(--ink);
  box-shadow: none;
}
.f-label::before { content: ''; }

/* ---------- 10. 弹窗：玻璃拟态 + 噪点纹理 —— 已删（26 行）----------
   .modal-mask 的双层径向渐变 + blur(7px)、.modal-card 的半透粉底 + 噪点 + blur(14px)、
   以及给 5 个浮窗 / #ctx-menu / .toast / #auth-card 叠的同款噪点 + blur(10px)，
   全部被第十七轮（5429-5471，带 !important：background:transparent / background-image:none
   / backdrop-filter:none / box-shadow:none）覆盖 —— 整节从未生效。
   注：backdrop-filter 早在 3851 的 *{backdrop-filter:none!important} 就已被全局关掉。 */

/* ---------- 11. 侧边栏：RPG 菜单框 + 像素头像框 ---------- */
/* ---------- 11. 侧边栏：RPG 菜单框 + 像素头像框 —— 已删（14 行）----------
   #nav::before 的「✦ 小 径 · T R A I L ✦」标题，全部被后面的
   4301-4314（design-system v1 的 #nav 全清，带 !important：
   background:none / border:0 / border-radius:0 / box-shadow:none）
   和 4314（#nav::before{content:none!important;display:none!important}）覆盖，
   标题的 text-shadow 另被 4831 清掉 —— 整节从未生效。 */

/* 像素头像框（带相框花边） */
.nav-avatar {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 8px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #fefefe, var(--pink-faint));
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px #fefefe, 3px 3px 0 0 rgba(136, 152, 174, .22);
  position: relative;
}
.nav-avatar::after {
  content: '';
  position: absolute; right: 5px; top: 3px;
  font-size: 10px; color: var(--pink);
  animation: sparkle 4s ease-in-out infinite;
}
.na-frame {
  position: relative;
  flex: 0 0 42px; width: 42px; height: 42px;
  aspect-ratio: 1 / 1; align-self: center;
  background: radial-gradient(circle at 50% 30%, #ffffff, var(--pink-pale) 78%);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px #fefefe, 2px 2px 0 0 rgba(136, 152, 174, .3);
}
.na-frame::before, .na-frame::after {
  position: absolute; font-size: 10px; color: var(--pink); line-height: 1;
}
.na-frame::before { content: ""; top: -7px; left: -5px; }
.na-frame::after { content: ""; bottom: -7px; right: -5px; }
.na-pic { width: 28px; height: 28px; }
.na-meta { min-width: 0; }
.na-meta b {
  display: block;
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: 1px;
  color: var(--pink-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 92px;
}
.na-meta i {
  display: block;
  font-style: normal; font-size: 10px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 92px;
}

/* 菜单项：选中闪烁爱心光标（已废 — nav 用 .witem 渲染，.nav-item 死代码已清） */

/* ---------- 12. 滚动条：樱花粉滑轨 —— 已删（8 行）----------
   全部被 5175-5176 的 ::-webkit-scrollbar-track/_thumb（background:transparent !important;
   border:none !important; 
  background-color: var(--paper);
  background-image: radial-gradient(rgba(213, 218, 225, .35) 1.4px, transparent 1.5px);
  background-size: 10px 10px;
  border: 6px solid transparent;
     这条等价于 border-image:none，留着只是噪音（border 的宽度占位不受影响）。 */

/* 投递口：把信投进去 */

/* 信纸：横线纹理 + 左侧红线 */
.chat-input textarea{
  background-color: #fefefe;
  background-attachment: local;
  border: 2px solid transparent;
  border-left: 4px solid #bec9d9;
  line-height: 26px;
  padding: 6px 12px 10px 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  font-family: var(--font-body);
}
.chat-input textarea:focus{
  outline: none; border-color: var(--accent-ui);
  box-shadow: inset 0 0 0 1px #fefefe, 0 0 0 3px rgba(213, 218, 225, .38);
}


/* 拍立得相纸缩略图 */


/* ---------- 16. AI 整理结果：拍立得 / 塔罗牌卡片 ---------- */

/* 价格：粉色高亮标签 */

/* 步骤：小贴纸 */


/* ---------- 19. AI 对话：信件投递口 + 信纸 + 印章发送 ---------- */
.chat-input {
  position: relative;
  border-top: 3px solid transparent;
  background-image: radial-gradient(rgba(213, 218, 225, .28) 1.4px, transparent 1.5px);
  background-size: 10px 10px;
  padding: 18px 10px 10px;
}
.chat-input::before {              /* 投递口 */
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 9px;
  background: linear-gradient(180deg, #eef0f3, #cdd6e2);
  border-bottom: 2px solid transparent;
  box-shadow: inset 0 3px 5px rgba(97, 99, 104, .3), 0 1px 0 #fefefe;
  pointer-events: none;
}
#chat-send {
  font-family: var(--font-body); letter-spacing: 3px;
  color: var(--accent-ui);
  background: rgba(254, 254, 254, .94);
  border: 3px solid var(--accent-ui);
  box-shadow: 0 0 0 2px #fefefe, 0 0 0 4px var(--accent-ui), 3px 4px 0 rgba(136, 152, 174, .32);
  padding: 8px 16px;
  transform: rotate(-1.2deg);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
#chat-send:hover { filter: brightness(1.04); }
#chat-send:active {
  transform: rotate(-1.2deg) translateY(2px);
  box-shadow: 0 0 0 2px #fefefe, 0 0 0 4px var(--accent-ui);
}
.chat-deep .cd-tag { border-width: 2px; }

/* ---------- 20. 夜间模式：深色下换暗粉，避免浅色花边发光 ---------- */
:root.dark .chat-input{ background-image: radial-gradient(rgba(184, 197, 214, .18) 1.4px, transparent 1.5px); }
:root.dark .chat-input textarea{ background-color: #27292d; border-left-color: #4a4d52; }
:root.dark .chat-input::before{ background: linear-gradient(180deg, #323438, #2a2c30); }
:root.dark #chat-send { background: rgba(39, 41, 45, .94); box-shadow: 0 0 0 2px #27292d, 0 0 0 4px var(--accent-ui), 3px 4px 0 rgba(0, 0, 0, .3); }
/* 20. 夜间模式下 .view-head::after 的 text-shadow —— 已删：
   ::after 已被 .view-head::before/::after{content:none!important} 干掉，且 4793 也清了 text-shadow。 */


/* ============================================================
   22. 圆角层：把直角卡片换成圆角（纯外观，不碰任何布局 / 定位 / 尺寸）
      所以这里把花边换成同色实线边框，再用 box-shadow 补回描边层次
   —— #nav / #topbar 贴边，保持直角不动
   ============================================================ */
:root {
  --rnd-lg: 20px;  /* 大卡片 / 面板 */
  --rnd-md: 14px;  /* 内嵌卡片 / 列表项 */
  --rnd-sm: 8px;   /* 标签 / 小控件 */
}

.home-hello, .focus-card, .focus-box, .search-results, .chat-side, .chat-main, .work-col, .work-stats .ws-main, .work-stats .ws-side, .order-card, .lib-card, .nt-card, .goal-card, .todo-panel, .cal-panel, .cal-day-panel, .set-card, .modal-card, .auth-card, .modal-card{
  border: 9px solid var(--paper);
  border-image: none;
  border-radius: var(--rnd-lg);
  
}
/* 拍立得卡片自带内阴影，只补圆角 */

/* 2) 内嵌卡片 / 列表项 / 气泡 */
.order-card, .todo-item, .chat-item, .set-card, .cal-day-panel, .focus-box, .search-box, .search-results{ border-radius: var(--rnd-md); }
.cal-cell { border-radius: 10px; }
.msg .m-bubble { border-radius: 16px; }
.msg.user .m-bubble { border-radius: 16px 16px 4px 16px; }
.msg.ai .m-bubble { border-radius: 16px 16px 16px 4px; }
.deco-tools, .coach-hint, .deco-thumb { border-radius: var(--rnd-md); }
.todo-item .ti-check { border-radius: var(--rnd-md); }
.cal-cell .cc-dots i { border-radius: 50%; }

/* 3) 小元素：标签 / 按钮 / 输入控件 */
.chip, .btn, .icon-btn, .top-btn, .auth-tab, .ctx-item, .oc-type, .oc-stage, .lge-tag, .bk-tag, .dt-btn, .dt-anchor, .user-chip{ border-radius: var(--rnd-sm); }
input, textarea, select, .px-input, .px-textarea { border-radius: var(--rnd-sm); }
input[type="checkbox"] { border-radius: 4px; }
.sticker { border-radius: 8px; }

/* ============================================================
   23. 素雅基础配色层（Slate）
   冷灰白纸面 ＋ 低饱和灰蓝强调；只重定义颜色变量，布局/结构/交互不碰。
   ============================================================ */
:root {
  /* 文字：暖墨棕（日间，取自指定配色） */
  --ink: #886070;
  --ink-soft: #a98a97;

  /* 纸面：纯白 + 冷灰白 */
  --bg: #f7f4f1;
  --bg-2: #efeae5;
  --paper: #ffffff;
  --card-bg: #ffffff;
  --field-bg: #ffffff;
  --panel-soft: #f6f2ed;
  --hint-bg: #fdfaf8;
  --lp-sel-bg: #f3ece6;

  /* 主色：低饱和灰蓝 */
  --pink: #a69084;
  --pink-deep: #7d675b;
  /* 「重点色」拆成三支，默认值一样，所以拆开前后长得一模一样；从此各调各的：
       · --accent-ico → 图标（导航 / 卡片标题 / 按钮图标）
       · --pink-deep  → 文字 / 链接 / 装饰符号
       · --accent-ui  → 控件外观：按钮与输入框描边、滑块、进度条、滚动条
     对应设置中心「逐项调色 · 主色」里的同名三项 */
  --accent-ico: #7d675b;
  --accent-ui: #7d675b;
  /* 鼠标跟随光晕（#spotlight）的唯一取色口。
     跟着「重点色·图标」走，所以外观工坊改主色时光晕会一起变；
     任何页面都不得再单独覆写它，否则首页与其它页光晕颜色会不一致。 */
  --glow: #e98aa6;            /* 鼠标光晕：浅暖拿铁，刻意不跟随深色强调色（用户：不要深、不要冷） */
  --pink-pale: #e9ded4;
  --pink-faint: #faf5f0;

  /* 中性 / 点缀：灰、灰蓝紫与薄荷；金只用于少量功能点缀 */
  --gray: #e6dfd8;
  --gray-deep: #a1958c;
  --lav: #cbbbad;
  --sage: #9fc0ad;
  --gold: #d8bd8a;

  --btn-main-a: #a69084;    /* 主按钮渐变·上沿 */
  --btn-main-b: #7d675b;    /* 主按钮悬停/按下时的深色端点 */
  --btn-press: #3d3330;     /* 主按钮按下时压上去的那层暗影 */
  --btn-danger-bg: #bb736b; /* 危险按钮：退出登录 / 清空全部（语义砖红） */
  --btn-face-hi: #ffffff;   /* 普通按钮面上沿那道高光 */
  /* 普通按钮按下：单独一套，默认值与弹窗那套相同 —— 只调按下不会牵动弹窗与凹框描边。 */
  --press-lo: #ddd0c4;
  --press-hi: #ffffff;
  --press-in: inset 2px 2px 0 var(--press-lo), inset -2px -2px 0 var(--press-hi);



  /* 表面：冷白渐变 + 冷色光晕 */
  --bg-grad-a: #faf7f4;
  --bg-grad-b: #f1ebe4;
  --bg-glow-1: 225 210 197; /* 冷蓝光晕（左上） */
  --bg-glow-2: 232 222 212; /* 浅灰蓝光晕（右下） */
  /* --bg-glow-a / --bg-glow-b 已删：全文零引用 */
  --top-grad-a: #f2ece6;
  --top-grad-b: #e8e0d8;
  /* --view-tint 已删：全文零引用 */
  --ref-grid: #e6dfd8;
}

/* 玻璃金底上的白字会糊 → 白天改用深墨色（夜间维持原样） */
:root:not(.dark) .cal-cell.today { color: var(--ink); }
:root:not(.dark) .bk-tag { color: var(--ink); }

/* 夜间：雾灰中性调 */
:root.dark {
  --pink: #aab0bd;
  --pink-deep: #c5cad4;
  --accent-ico: #c5cad4;
  --accent-ui: #c5cad4;
  --glow: #ffb7c5;             /* 夜间光晕用雾灰蓝 */
  --gold: #cfb487;
  --sage: #9bb8a8;
  --lav: #b6bbc6;
  --bg-grad-b: #232528;
  --top-grad-b: #25272b;
  --lp-sel-bg: #2c2e32;
  /* 按钮：夜间主按钮用雾灰蓝 */
  --btn-main-a: #aab0bd;
  --btn-main-b: #8c92a0;
  /* 按钮按下：夜间凹边用雾灰 */
  --press-lo: #55585f;
  --press-hi: #3a3d42;
  --btn-face-hi: #3a3d42;   /* 夜间按钮的上沿高光：雾灰 */
}

/* ============================================================
   24. 液态玻璃层（Liquid Glass）
   —— 把「重」的容器变「通透」：
      · 深色实线描边 + 像素硬投影 → 1px 白色半透明玻璃边 + 淡粉弥散阴影
      · 卡片圆角放大到 24px（内嵌条目 16px），更像现代 APP
      · 左侧导航从「贴边面板」变成悬浮在页面上的白色 Dock
   —— 纯外观层：只改 颜色 / 边框 / 圆角 / 阴影，不碰布局结构与交互
   ============================================================ */
:root {
  --glass-r: 24px;              /* 大卡片圆角 */
  --glass-r-sm: 16px;           /* 内嵌条目圆角 */
  --glass-blur: blur(13px) saturate(1.85);
  --glass-blur-sm: blur(9px) saturate(1.55);

  /* 玻璃面：底色压到很低，靠 blur 撑起「玻璃」而不是靠白度 */
  --glass-bg: rgba(255, 255, 255, .34);
  --glass-bg-strong: rgba(255, 255, 255, .5);
  --glass-inner: rgba(255, 255, 255, .2);

  /* 玻璃边：1px 白色半透明（比底色亮，边界才立得起来） */
  --glass-line: rgba(255, 255, 255, .45);
  --glass-line-soft: rgba(255, 255, 255, .32);
  --glass-hi: rgba(255, 255, 255, .6);    /* 顶边内高光 */

  /* 淡粉弥散阴影（取代原来的像素硬投影）：同步收淡，避免「厚」回来 */
  --glass-shadow:
    0 18px 40px -20px rgba(136, 152, 174, .38),
    0 6px 16px -10px rgba(136, 152, 174, .22),
    inset 0 1px 0 var(--line-soft);
  --glass-shadow-sm:
    0 10px 22px -14px rgba(136, 152, 174, .3),
    inset 0 1px 0 var(--line-soft);
}
/* 夜间：白玻璃换成「深灰粉玻璃」，白边压低亮度，避免夜里刺眼 */
:root.dark {
  --glass-bg: rgba(44, 50, 60, .34);
  --glass-bg-strong: rgba(44, 50, 60, .5);
  --glass-inner: rgba(255, 255, 255, .05);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-line-soft: rgba(255, 255, 255, .08);
  --glass-hi: rgba(255, 255, 255, .1);
  --glass-shadow:
    0 18px 40px -22px rgba(0, 0, 0, .62),
    0 6px 16px -10px rgba(0, 0, 0, .42),
    inset 0 1px 0 var(--line-soft);
  --glass-shadow-sm:
    0 10px 22px -14px rgba(0, 0, 0, .46),
    inset 0 1px 0 var(--line-soft);
}
/* 不支持毛玻璃的浏览器：玻璃退化成「磨砂实心」，保证文字可读 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root { --glass-bg: rgba(255, 255, 255, .92); --glass-bg-strong: rgba(255, 255, 255, .96); --glass-inner: rgba(255, 255, 255, .80); }
  :root.dark { --glass-bg: rgba(44, 50, 60, .94); --glass-bg-strong: rgba(44, 50, 60, .97); --glass-inner: rgba(255, 255, 255, .10); }
}

/* ---------- 1. 主卡片：工作台 / 待办 / 日历 / 目标 / 图书馆 / 设置 … ---------- */
/* 功能模块容器：仍尊重外观工坊的「功能模块透明度」（--module-bg），没设就用玻璃白 */
.focus-card, .focus-box, .work-col, .chat-side, .chat-main, .todo-panel,
.cal-panel, .cal-day-panel, .home-hello, .goal-card, .lib-card, .nt-card,
.search-box, .search-results, .work-stats .ws-main, .work-stats .ws-side,
.order-card {
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  background-color: var(--module-bg, var(--line-soft));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
/* 窗口类 / 弹窗 / 浮窗 / 小面板：不跟随模块透明度，统一玻璃白 */
.set-card, .modal-card, .auth-card, .px-panel{
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
/* 拍立得卡片：去掉相纸底色与点阵，只留顶部胶带 */
/* 浮窗 / 弹窗：玻璃面再叠一层噪点，磨砂质感更真实（保留原有噪点层） */
#music-panel, #lyric-panel, #ref-panel, #ctx-menu, .toast, #auth-card, .modal-card{
  background-size: 140px 140px;
  background-blend-mode: soft-light;
}

.focus-card::before, .set-card::before, .work-col::before, .chat-side::before, .chat-main::before, .todo-panel::before, .cal-panel::before, .cal-day-panel::before, .home-hello::before, .goal-card::before, .search-box::before, .search-results::before, .lib-card::before, .nt-card::before, .focus-box::before, .work-stats .ws-main::before, .work-stats .ws-side::before, .order-card::before, .px-panel::before{ content: none; }
/* ❀ ♡ / ✦ ♡ 小装饰保留，底色改成透明（原来是纸白补丁） */
.focus-card::after, .set-card::after, .work-col::after, .chat-side::after,
.chat-main::after, .todo-panel::after, .cal-panel::after, .cal-day-panel::after,
.home-hello::after, .goal-card::after, .lib-card::after, .focus-box::after,
.work-stats .ws-main::after, .work-stats .ws-side::after, .px-panel::after { background: transparent; }

/* 卡片内标题栏 —— 极简细线 */
.focus-card .fc-title, .set-card h3, .work-col-title, .goal-card .gc-name,
.cal-head, .chat-head, .chat-side-head, .panel-head, .modal-head {
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- 2. 卡片内的条目 / 小卡：极简 ---------- */
.todo-item, .cal-cell, .chat-item, .sr-item, .recent-item,
.texture-item, .bg-prev, .lkb-prev, .music-cover, .music-bar,
.home-clock, .quote-box, .focus-clock {
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-sm);
  background: transparent;
}
.todo-item .ti-check {
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-sm);
  background: transparent;
}
.lib-card .lc-img { border-bottom: 1px solid var(--line-soft); }
/* 悬停 */
.todo-item:hover, .nt-card:hover, .cal-cell:hover,
.quote-box:hover, .music-row:hover { background: var(--bg-2); }
.chat-side-head, .chat-head { border-bottom: 1px solid var(--line-soft); }
.msg .m-bubble { border: 1px solid var(--line-soft); }
.order-card .oc-actions .icon-btn { box-shadow: none; }

/* ---------- 3. 左侧导航：极简 ------ */
#nav {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Dock 头部：胶囊小标签 */
#nav::before {
  margin: 0 0 8px;
  padding: 7px 0;
  border-bottom: 0;
  border-radius: 14px;
}
.nav-avatar {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
}
.na-frame {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}
/* Dock 离开左边缘浮起来（窄屏仍走顶部横向导航，结构与断点不变） */
@media (min-width: 901px) {
  #nav { left: 22px; width: 172px; top: 76px; bottom: 20px; padding: 10px 10px 12px; }
  #view { top: 76px; left: 214px; right: 20px; bottom: 20px; margin: 0; }
}

/* ---------- 4. 顶栏：下沿换成一条玻璃细线，去掉硬投影 ---------- */
#topbar {
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
}

/* ============================================================
   26. 自定义头像（用户上传的图片 → 全站头像位统一裁方填充）
   —— 存值：settings.avatar = 'img:/uploads/1/avatar-xxx.png'
   —— 没设置时不动各处原本的默认样子（顶栏 ☾ / 侧边栏像素小兔）
   —— 出现的位子：顶栏胶囊、侧边栏相框、AI 对话里自己的气泡、
      设置中心「我的账户」的预览框
   ============================================================ */
.uav { display: inline-block; object-fit: cover; vertical-align: middle; background: transparent; }
.uav-fill { width: 100%; height: 100%; }
/* 头像本体：描边一律用点线（实线框在圆头像上会显得很硬） */
.user-chip .uav { width: 18px; height: 18px; border: 2px dotted var(--ink); box-sizing: border-box; }
/* 相框里的头像图：绝对定位撑满相框 + cover 裁方。
   item 不 stretch 时百分比高度解析不出来 → 图片按原图纵横比显示，
   上传的图不是正方形就会变成椭圆。 */
.na-frame .uav {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 2px dotted var(--ink); box-sizing: border-box;
}
.m-ico .uav { border: 0; }

/* ============================================================
   27. 线条图标占位（data-ico）
   —— HTML 里写 <i data-ico="trash" data-size="14" data-color="var(--pink-deep)"></i>，
      ui.js 载入时自动填成和侧边导航同一套的线条图标
   —— 为什么要这层：这些位置以前直接写 ▶ ⏮ ⏸ ⛶ ▣ ⚙ ✕ 这类字符，
      字体（比如思源黑体）里没这些字形就会变成空白，图标不该依赖字体
   ============================================================ */
[data-ico] {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; vertical-align: -3px; flex-shrink: 0;
}
[data-ico] > svg { display: block; }
/* 浮窗标题里的图标：跟标题文字排一起，不参与标题的 flex:1 撑开 */
.ref-head b [data-ico], .panel-head b [data-ico], .lp-head b [data-ico]{ margin-right: 5px; }
/* 音乐面板：旧的内联像素图标是撑满按钮的，线条图标按自己声明的尺寸显示 */
.music-sub .icon-btn svg, .music-ctl .icon-btn svg { width: auto; height: auto; }
/* 封面没图时那个音符居中 */
.music-cover { display: flex; align-items: center; justify-content: center; }
/* 歌词浮窗保存按钮上的行数角标 */
.lp-save-n { font-size: 9px; margin-left: 1px; line-height: 1; vertical-align: 1px; }
/* 那些「固定小尺寸 + 行高定位」的小叉按钮（原来靠字体字符居中），换成 SVG 后手动居中 */
.lg-cat-del, .na-x, .tc-x{
  display: inline-flex; align-items: center; justify-content: center;
}

/* 设置中心：头像那一行 */
.av-row { align-items: center; gap: 10px; flex-wrap: wrap; }
.av-prev {
  width: 48px; height: 48px; flex: 0 0 48px;
  border: 2px dashed var(--pink); background: var(--pink-faint);
  cursor: var(--cursor-ring); overflow: hidden;
}
.av-tip { font-size: 10px; line-height: 1.6; color: var(--ink-soft); margin: -4px 0 8px; }

/* 线框图标：这些「选中的深底」原本只给像素 rect 上了白色，补 stroke 一样变白 */
.lg-cat-item.active .lgi .pix-ico { stroke: var(--paper); }
.lmg-pix .pix-pick.on .pix-ico { stroke: var(--paper); }
.ico-line { flex-shrink: 0; }

/* ============================================================
   28. 功能页标题栏圆角化 + 头像圆形
   ============================================================ */

/* ---------- 1. 功能页标题栏：从「深色实线方框」改成圆角磨砂玻璃条 ----------
   第 24 节的玻璃改造收录了各功能卡片，但漏了 .view-head，
   所以除了「小窝」以外的页面，顶上那条主标题还是老样子：
   直角 + 3px solid var(--ink)（就是那条很深的实线）。
   这里补齐，让它和卡片走同一套：1px 玻璃边 + 24px 圆角 + 弥散阴影。

   底色这里是关键：原来只加了 backdrop-filter，底色却仍是第 619 行那条
   「不透明的」粉渐变，磨砂自然看不出来（背景图透不上来，还是个实心色块）。
   现在渐变两端点按 --vh-a1 / --vh-a2 压透明，底下背景图透得出来才是真磨砂；
   两个 alpha 由设置中心「外观工坊 → 主标题透明度」那条滑杆单独控制
   逐项调色改过「窗口标题」色，这条标题栏也会跟着变。 */
.view-head {
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
  padding: 10px 16px;
}
/* 不支持 color-mix 的老浏览器：退回第 619 行那条实心渐变，标题至少完整可读 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .view-head { background: transparent; }
}
/* 这圈 1px 内描边是给方框配的，圆角下多余 */
.view-head::before { content: none; }

/* ---------- 2. 头像一律圆形 ----------
   图片本体（.uav）、侧边栏相框、聊天气泡头像、设置里的预览框一起圆，
   这样上传的头像不会被相框的直角裁成方的。 */
.uav { border-radius: 50%; }
.na-frame { border-radius: 50%; }
.m-ico { border-radius: 50%; overflow: hidden; }
.av-prev { border-radius: 50%; }

/* ---------- 3. 快速换肤的颜色块：补上圆角 ----------
   第 22 节的圆角清单里有 .chip，但漏了 .tune-chip，它还是直角。 */
.tune-chip { border-radius: var(--rnd-sm); }

/* ============================================================
   28. 顶栏改成「圆角悬浮磨砂玻璃条」 + 光标回归系统原生
   —— 本节在文件最末尾，专门用来覆盖前面的旧规则（贴边顶栏 / 自定义光标），
      所以不用去动上面任何一行，改这里就够了
   ============================================================ */

/* ---------- 1. 光标：像素方块 / 粉色圆环 → 系统原生箭头与手型 ----------
   前面的 body 与「可点击元素」都写成 cursor: var(--cursor-arrow / --cursor-ring)，
   这里把两个变量本身改成系统关键字，旧规则一行不用改就全部生效。 */
:root {
  --cursor-arrow: auto;
  --cursor-ring: pointer;
}

/* ---------- 2. 顶栏：四周留边 + 圆角 + 磨砂玻璃 ----------
   渐变两端点的 alpha 由 --topbar-a1/a2 控制（设置中心「外观工坊 → 顶栏透明度」）。
   颜色仍然取主题的 --top-grad-a/b，逐项调色改过顶栏色也会跟着变。 */
#topbar {
  top: 10px; left: 16px; right: 16px; height: 56px;
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--top-grad-a) var(--topbar-a1, 96%), transparent),
    color-mix(in srgb, var(--top-grad-b) var(--topbar-a2, 84%), transparent));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
#topbar::after { display: none; }
/* 不支持 color-mix 的老浏览器：退回原来那套实心渐变，顶栏至少是完整可读的 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #topbar { background: linear-gradient(180deg, var(--top-grad-a), var(--top-grad-b)); }
}

/* ---------- 3. 下面的内容给悬浮顶栏让位（顶栏底边落在 66px） ---------- */
#nav { top: 78px; }
#view { margin-top: 78px; }
#ref-panel { top: calc(8vh + 16px); }

/* ---------- 4. 音乐小屋 / 歌词浮窗：实心纸色 → 磨砂玻璃 ----------
   这两块此前被强制成实心（第 15 节那条「保持不变」），现在单独给一组透明度：
   由设置里两条滑杆分别写进 --music-a / --lyric-a，两边互不影响。 */
#music-panel, #lyric-panel {
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
#music-panel { background-color: color-mix(in srgb, var(--paper) var(--music-a, 73%), transparent); }
#lyric-panel { background-color: color-mix(in srgb, var(--paper) var(--lyric-a, 73%), transparent); }
/* 歌词浮窗的标题条原本是实心粉底 + 3px 深色下划线，跟着玻璃面一起收细 */
.lp-head {
  background: color-mix(in srgb, var(--pink-faint) var(--lyric-a, 73%), transparent);
  border-bottom: 1px solid var(--line-soft);
}
/* 不支持 color-mix 的老浏览器：退回实心纸色，只是不能调透明，不会漏字 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #music-panel, #lyric-panel { background-color: var(--paper); }
}

/* 歌词浮窗底部控制条：上一首 / 播放暂停 / 下一首 */
.lp-ctl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 6px;
  flex-shrink: 0;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--pink-faint) var(--lyric-a, 73%), transparent);
}
/* 三个键做成「无框无底」的纯图标，和音乐小屋那排按钮同一种做法：
   去掉 立体边框，配色只用图标本身的颜色 */
.lp-ctl .icon-btn {
  width: 22px; height: 22px;
  background: transparent; border: none; box-shadow: none;
  color: var(--gray-deep);
}
.lp-ctl .icon-btn:hover { background: transparent; color: var(--accent-ico); }
.lp-ctl .icon-btn:active { transform: none; box-shadow: none; color: var(--accent-ico); }
.lp-ctl .lp-ctl-main { width: 26px; height: 26px; color: var(--ink-soft); }
.lp-ctl .lp-ctl-main.playing { color: var(--accent-ico); }

/* ---------- 5. B站小屋 / 参考画布：图标键同样「无框无底」----------
   覆盖这两块浮窗里的图标键 —— 标题栏那排（B站：画质 / 重新登录 / 历史 / 放大 / 关闭；
   参考画布：添加 / 清空 / 放大 / 关闭），以及 B站播放条上的 .bili-ctl-btn（播放 / 清晰度 / 全屏）。
   按钮框仍然留着（撑住点击区域和居中），只是不再画出来。 */
.ref-head .icon-btn{
  position: relative;
  background: transparent; border: none; box-shadow: none;
  color: var(--ink);
}
.ref-head .icon-btn:hover{
  background: transparent; color: var(--accent-ico);
}
.ref-head .icon-btn:active{
  transform: none; box-shadow: none; color: var(--accent-ico);
}
/* 「正在生效」的键（画质模式开着 / 历史面板展开）：原来是粉底白字的方块，
   去框后白字会看不见，改成粉色图标 + 底下一条小横线，状态照样一眼看得出 */
.ref-head .icon-btn.on{
  background: transparent; border: none; box-shadow: none;
  color: var(--accent-ico);
}
.ref-head .icon-btn.on::after{
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 10px; height: 2px; border-radius: var(--rnd-sm);
  transform: translateX(-50%);
  background: var(--accent-ico);
}
/* 播放条本身是深色底，图标自带白色，只需去掉那圈白描边 */

/* ---------- 6. 其余图标键一并统一 ----------
   第 6 节之前那条已经把 .icon-btn 本身改成无框无底（全站二十多处引用一起生效）；
   这里补齐几个不属于 .icon-btn 的图标键，以及少数需要换配色的位置
   —— 深底 / 图片上的键如果还用深墨色会看不见。 */

/* 顶栏那排图标键（夜间 / 音乐小屋 / 设置 / 离开）：同样只留图标，悬停变粉 */
.top-btn {
  background: transparent; border: none; box-shadow: none; color: var(--ink);
}
.top-btn:hover { background: transparent; color: var(--accent-ico); }
.top-btn:active { transform: none; box-shadow: none; color: var(--accent-ico); }

/* 顶栏「未在播放 / 正在播放」那块：原来也是凸起像素小方块，跟着去框去底，
   只留「音符 + 歌名」一行字；悬停整行转粉（不再铺粉底），播放中那个跳动音符保持不动 */
.top-now {
  padding: 0 4px;
  background: transparent; border: none; box-shadow: none;
  color: var(--ink);
}
.top-now:hover { background: transparent; color: var(--accent-ico); }

/* 顶栏「头像 + 用户名」那块：跟着脱掉像素外壳 —— 底色、描边、投影全去掉，
   连头像上那圈点线边框也一并摘掉（它本来是跟着胶囊一起长的，胶囊没了就孤零零），
   最后只剩头像图和用户名两样东西；悬停用户名转粉，点击进设置中心换头像的行为不变 */
.user-chip {
  padding: 0 4px;
  background: transparent; border: none; box-shadow: none;
  color: var(--ink);
}
.user-chip:hover { color: var(--accent-ico); }
.user-chip .uav { border: none; }


/* 素材库大图（暗色遮罩）上的关闭键：深墨色压暗底看不见，换成纸白 */
.lightbox .lb-close { color: var(--paper); }
.lightbox .lb-close:hover { color: var(--pink); }

/* 素材卡图片右上角的删除键压在图上，图是深是浅说不准：
   保持深墨图标，但给一圈白色柔光，压在任何颜色上都看得清 */
.lib-card .lc-del {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(255, 255, 255, .9));
}

/* 页面标题栏右上角那三个仿窗口装饰钮（.win-btns）已整体删除：JS 注入已停，无 DOM 节点 */


/* 台词签的「✦ 换一句」：和全站图标键一个做法，把立体外壳脱掉 ——
   2px 描边、渐变底、像素投影、按下下沉全都去掉，只留「✦ 换一句」几个字；
   悬停转成文字重点色，点一下换一句的行为不变。 */
#quote-refresh {
  padding: 2px 4px;
  background: transparent; border: none; box-shadow: none;
  color: var(--ink);
  font-size: 12px;
}
#quote-refresh:hover { background: transparent; color: var(--pink-deep); }
#quote-refresh:active { transform: none; box-shadow: none; color: var(--pink-deep); }

/* ============================================================
   29. B站小屋 / 参考画布：弹出时也是磨砂玻璃
   ============================================================ */

/* ---------- 1. 两块浮窗：实心纸色 → 半透明玻璃面 ----------
   第 15 节那条「统一实心纸色」把它俩和音乐 / 歌词浮窗一起钉成了不透明纸面，
   于是只剩一层 backdrop-filter 白搭 —— 底下的背景图透不上来，磨砂自然看不出来。
   这里跟音乐小屋同款做法：玻璃面 + 细玻璃描边 + 圆角 + 一层外投影。 */
#ref-panel{
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  background-color: color-mix(in srgb, var(--paper) 30%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
/* 视频区 / 播放条本来就是深色实心，保持不动（玻璃透出视频只会发花） */

/* ---------- 2. 内部标题条 / 工具条 / 列表面板：一起降成半透明 ----------
   不然面板透了、里面还是一块块实心粉纸，看着像打了补丁。 */
/* 清晰度菜单：极简 */
/* 参考画布：标题条渐变降透明、提示条换细线、画布留纸色但透出背景 */
.ref-head {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
.ref-tip { border-bottom: 1px dashed var(--line-soft); }
.ref-board { background-color: color-mix(in srgb, var(--paper) 21%, transparent); }
.ref-resize { background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--paper) 21%, transparent) 50%); }
/* 不支持 color-mix 的老浏览器：退回实心纸色，只是不透，不会漏字 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #ref-panel{ background-color: var(--paper); }
  .ref-board { background-color: var(--paper); }
}

/* ---------- 3. 我的主题：壁纸 + 配色 打包成一张卡片 ---------- */
.theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.theme-card {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-soft); border-radius: var(--rnd-sm);
  background: transparent;
  padding: 5px 6px; cursor: pointer; text-align: left;
  font-family: var(--font-body); color: var(--ink);
}
.theme-card:hover { background: var(--bg-2); }
.theme-card.active { border-color: var(--accent-ui); }
.th-bg {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--ink); border-radius: var(--rnd-md);
  background: linear-gradient(135deg, var(--pink), var(--pink-faint));
  background-size: cover; background-position: center;
}
.th-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 名字 + 「保存于白天/夜间」的小徽标：名字占满宽度，徽标固定在右端不参与省略 */
.th-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.th-meta b { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-top .th-mode { flex-shrink: 0; font-style: normal; font-size: 10px; line-height: 1; opacity: .85; }
.th-dots { display: flex; gap: 3px; }
.th-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-soft); }
.th-acts { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.th-acts button {
  border: none; background: transparent; cursor: pointer;
  color: var(--gray-deep); font-size: 11px; line-height: 1.3; padding: 1px 2px;
}
.th-acts button:hover { color: var(--accent-ico); }
.th-acts button.del:hover { color: #7089ab; }
.theme-empty { grid-column: 1/-1; font-size: 10px; color: var(--gray-deep); line-height: 1.8; }

/* ============================================================
   30. AI 对话：气泡 / 输入区 / 列表项也是磨砂玻璃
   —— 第 24 节只把 .chat-side / .chat-main 两块「面板」换成了玻璃，
      里面还压着几层实心：消息流底色 --bg、气泡纸白 / 主粉、输入区纸白 + 投递口。
      面板透了、内容不透，看着就是「外壳是玻璃、卡片还是纸」。
      这里把里面这几层一起降成半透明 + 一层 blur，让背景图从头透到尾。
   ============================================================ */

/* ---------- 1. 消息流：实心页面底色 → 透明 ---------- */
.chat-msgs { background: transparent; }

/* ---------- 2. 消息气泡：玻璃层已废，用极简 1px 细线 ---------- */
.msg .m-bubble {
  border: 1px solid var(--line-soft);
  background-image: none;
  background-size: auto;
  background-blend-mode: normal;
  box-shadow: none;
}
/* AI 气泡 / 打字中的「…」气泡：纸白压到 56%，透出背景但还压得住字 */
.msg.ai .m-bubble,
.msg .m-bubble.typing { background-color: color-mix(in srgb, var(--paper) 22%, transparent); }
/* 用户气泡：主粉压到 80% —— 再透白字就压不住背景图了 */
.msg.user .m-bubble { background-color: color-mix(in srgb, var(--pink) 80%, transparent); }
/* 深度思考那一块：实心纸白 + 虚线框 → 更薄的一层玻璃，虚线框留着 */
.m-thinking {
  background-color: color-mix(in srgb, var(--paper) 17%, transparent);
  border-color: var(--line-soft);
}
/* 头像小圆框：实心淡粉 → 更薄的玻璃（圆角交给前面的 50%，这里不要盖掉） */
.msg .m-ico {
  border: 1px solid var(--line-soft);
  background: transparent;
  
}

/* ---------- 3. 输入区：纸白底 + 信纸纹 → 半透明；投递口保留，只跟着降透明 ---------- */
.chat-input {
  background-color: color-mix(in srgb, var(--paper) 26%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chat-input::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, #eef0f3 72%, transparent),
    color-mix(in srgb, #cdd6e2 72%, transparent));
  box-shadow: inset 0 3px 5px rgba(97, 99, 104, .16);
}
/* 信纸输入框：横线纹理还在，只是能透出背景 */
.chat-input textarea { background-color: color-mix(in srgb, #fefefe 74%, transparent); }
/* 发送键（印章）：纸白底 → 半透明，粉描边 / 倾斜角度都保留 */
#chat-send { background: color-mix(in srgb, #fefefe 78%, transparent); }
:root.dark .chat-input textarea { background-color: color-mix(in srgb, #27292d 74%, transparent); }
:root.dark .chat-input::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, #323438 72%, transparent),
    color-mix(in srgb, #2a2c30 72%, transparent));
}
:root.dark #chat-send { background: color-mix(in srgb, #27292d 78%, transparent); }

/* ---------- 4. 左侧对话列表：选中 / 悬停也换玻璃，别在玻璃里留一块实心粉 ---------- */
.chat-item.active {
  background-color: color-mix(in srgb, var(--pink) 84%, transparent);
  border-color: var(--line-soft);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
/* 选中的那块要保住自己的粉，所以悬停高亮只给没选中的条目 */
.chat-item:not(.active):hover { background: transparent; }
/* 条目右上角的删除钮：平时隐形，悬停 / 触屏常显；右侧给按钮留出内边距，
   标题的省略号不会钻到按钮下面。边框走 currentColor，悬停变红时一起变。 */
.chat-item { padding-right: 30px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chat-item .ci-pin { right: 30px; }
.chat-item .ci-del {
  position: absolute; right: 6px; top: 5px;
  width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--rnd-md);
  background: transparent;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  transition: opacity .15s, color .15s;
}
.chat-item:hover .ci-del, .chat-item .ci-del:focus-visible { opacity: 1; }
.chat-item .ci-del:hover { color: var(--danger); }
.chat-item.active .ci-del:hover { color: #f1f2f4; }
/* 触屏设备没有 hover：删除入口直接常显，不然手机上根本找不到 */
@media (hover: none) {
  .chat-item .ci-del { opacity: .85; }
}
/* 左侧搜索框：实心输入底 → 半透明 */
.chat-side-head input { background-color: color-mix(in srgb, var(--field-bg) 74%, transparent); }

/* ---------- 5. 不支持 color-mix 的老浏览器：退回实心，只是不透，不会漏字 ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .chat-msgs { background: var(--bg); }
  .chat-head, .chat-side-head { background: transparent; }
  .chat-input { background-color: var(--paper); }
  .chat-input textarea { background-color: #fefefe; }
  .chat-item.active { background-color: var(--pink); }
  .chat-side-head input { background-color: var(--field-bg); }
}

/* ============================================================
   31. 本地音乐盒 LOCAL MUSIC：弹窗 + 播放器 + 自建歌单
   —— 上传的音频和歌单全存在本机浏览器（IndexedDB），不占服务器空间；网页仍需联网打开。
      弹窗本体跟 B站小屋 / 参考画布同款玻璃浮窗（可拖动 / 缩放 / 放大），
      播放器控件复用音乐小屋的 .music-* 一整套。
   ============================================================ */

/* ---------- 1. 浮窗本体 ---------- */
#lm-panel {
  position: fixed; left: 14%; top: 10vh;
  width: 720px; height: 500px;
  max-width: 94vw; max-height: 88vh;
  z-index: 120;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: popin .2s ease;
  border: 1px solid var(--line-soft);
  border-image: none;
  border-radius: var(--rnd-md);
  background-color: color-mix(in srgb, var(--paper) 30%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #lm-panel { background-color: var(--paper); }
}
/* 标题条：可拖动；极简透明 */
.lm-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; flex-shrink: 0;
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  cursor: move; user-select: none;
}
.lm-head b { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.lm-head .icon-btn {
  position: relative;
  width: 25px; height: 25px;
  background: transparent; border: none; box-shadow: none;
  color: var(--ink);
}
.lm-head .icon-btn:hover { background: transparent; color: var(--accent-ico); }
.lm-head .icon-btn:active { transform: none; box-shadow: none; color: var(--accent-ico); }
.lm-en {
  font-family: var(--font-en); font-size: 9px; letter-spacing: 1px;
  color: var(--ink-soft); white-space: nowrap;
}
.lm-count {
  font-family: var(--font-en); font-size: 11px; color: var(--ink);
  padding: 1px 8px; white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: transparent;
}
/* 用量提示条 */
.lm-tip {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 12px; flex-shrink: 0;
  font-size: 11px; line-height: 1.6; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line-soft);
}
.lm-tip .lm-usage { font-family: var(--font-en); font-size: 10px; color: var(--gray-deep); white-space: nowrap; }

/* ---------- 2. 主体：左边歌单栏 + 右边播放器/歌曲列表 ---------- */
.lm-main { flex: 1; min-height: 0; display: flex; }
.lm-side {
  width: 150px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel-soft) 62%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .lm-side { background: var(--panel-soft); }
}
.lm-side-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 6px; flex-shrink: 0;
}
.lm-side-head b { flex: 1; font-size: 12px; letter-spacing: 2px; }
.lm-side-head .btn { padding: 2px 8px; }
.lm-pl-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.lm-pl {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; font-size: 12px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--rnd-sm);
}
.lm-pl:hover { background: transparent; }
.lm-pl.active {
  background: var(--pink-pale);
  border-color: var(--line-soft);
  
}
.lm-pl .lm-pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-pl .lm-pl-n { font-family: var(--font-en); font-size: 10px; color: var(--gray-deep); flex-shrink: 0; }

.lm-right {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 10px;
  overflow: hidden;
}
/* 进度条填充（复用 .music-bar 的槽，填充色自己画） */
#lm-fill { height: 100%; width: 0; background: var(--pink); transition: width .15s linear; }
/* 歌曲列表：撑满剩余高度，内部滚动 */
#lm-list { flex: 1; min-height: 0; max-height: none; }
.lm-list-head { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.lm-list-head b { font-size: 12px; }
.lm-list-count { font-family: var(--font-en); font-size: 10px; color: var(--gray-deep); }
.lm-empty {
  padding: 26px 10px; text-align: center;
  font-size: 12px; line-height: 2; color: var(--gray-deep);
}
/* 歌曲行：序号 / 时长 / 行内小叉，其余复用 .music-row */
.lm-row .lm-no {
  width: 22px; flex-shrink: 0; text-align: center;
  font-family: var(--font-en); font-size: 11px;
}
.lm-row .lm-dur { font-family: var(--font-en); font-size: 10px; color: var(--gray-deep); flex-shrink: 0; }
.lm-row .lm-x {
  width: 18px; height: 18px; flex-shrink: 0;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--rnd-md);
  background: transparent; color: var(--gray-deep);
  cursor: pointer;
}
.lm-row .lm-x:hover { color: #7089ab; border-color: #7089ab; }
.lm-row:hover .lm-x { display: inline-flex; }
/* 拖拽排序 */
.lm-row.dragging { opacity: .4; }
.lm-row.drag-over { border-top: 2px solid var(--accent-ui); }

/* ---------- 3. 拖文件进窗口时的整层提示 ---------- */
.lm-drop {
  position: absolute; inset: 0; z-index: 9;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
  font-size: 15px; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 31%, transparent);
  outline: 4px dashed var(--accent-ui); outline-offset: -16px;
  border-radius: var(--rnd-md);
}
#lm-panel.drag-on .lm-drop { display: flex; }


/* ================================================================
   全面屏手机适配（iQOO Neo9 等 20:9 挖孔屏 · 竖屏全屏模式）
   viewport-fit=cover 时页面会延伸到状态栏和手势条下面，
   用 env(safe-area-inset-*) 让顶栏避开挖孔、内容避开手势条。
   普通浏览器里 env() 为 0，这些规则等于不存在，零副作用。
   ================================================================ */


/* 横屏使用（不锁死方向时也能看）：回到横向导航布局，顶栏避开刘海 */
@media (max-height: 500px) and (orientation: landscape) {
  #topbar { top: calc(6px + env(safe-area-inset-top, 0px)); }
  #view { margin-top: calc(132px + env(safe-area-inset-top, 0px)); }
}

/* ================================================================
   27. 手机端四项体验修正（2026-09-20）
   ① AI 对话输入框吸底：手机上页面整体滚动时，输入框 sticky 在
      视口底部，不用先把整页拉到最底才能打字；
   ② 音乐小屋歌单不再被压扁：面板是纵向 flex + 限高滚动，
      列表作为 flex 子项会被压缩到只剩一行，这里禁止收缩，
      手机上还给更高的可视高度；
   ④ 日历周六列被顶出屏幕：表头那排（年份/标题/月份选择）总
      宽度超过手机屏宽，把整个面板撑出横向溢出，最右一列被
      html 的 overflow-x:hidden 裁掉 —— 换行 + 收窄解决。
   ================================================================ */
/* 音乐列表的基础高度（原先是写在 HTML 里的内联样式，挪到这里方便断点覆盖） */
#music-search-results { max-height: 130px; }
#music-list { max-height: 150px; }


/* ================================================================
   28. 壁纸裁剪浮层（手机/电脑上传壁纸时先把图裁成屏幕比例）
   ================================================================ */
.crop-ov {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px;
  background: rgba(35, 36, 37, .78);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: fadein .2s ease;
}
.crop-ov .crop-title {
  color: var(--paper); font-size: 14px; letter-spacing: 2px;
  display: flex; align-items: center; gap: 8px;
}
.crop-ov .crop-hint { color: rgba(255, 255, 255, .8); font-size: 11px; text-align: center; }
.crop-stage {
  position: relative; overflow: hidden; touch-action: none;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px var(--ink), 0 18px 50px rgba(0, 0, 0, .5);
  background: #252628;
  cursor: grab;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }
.crop-ov .crop-bar { display: flex; align-items: center; gap: 10px; width: min(92vw, 420px); }
.crop-ov .crop-bar input[type=range] { flex: 1; }
.crop-reset { padding: 4px 12px !important; font-size: 11px !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.crop-reset:hover { border-color: #fff !important; }
.crop-ov .crop-foot { display: flex; gap: 10px; }
.crop-ov .crop-foot .btn { min-width: 88px; }
/* 圆形头像预览指示器：仅提示，实际输出仍为正方形 */
.crop-round {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  border: 2px dashed rgba(255,255,255,.7);
}



/* ================================================================
   29. 目标 2.0：统计总览条 / 连胜徽章 / 热力日历 / 心情打卡 / 补卡月历
   ================================================================ */

/* 登录页「记住我」 */
.auth-remember {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-soft);
  margin: 10px 0 2px; user-select: none; cursor: pointer;
}
.auth-remember input { width: 15px; height: 15px; accent-color: var(--pink); cursor: pointer; }

/* 顶部统计总览条 */
.gs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.gs-item {
  position: relative; text-align: center; padding: 12px 6px 10px;
  background: var(--module-bg, var(--paper));
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-md);
  overflow: hidden;
}
.gs-item b {
  display: block; font-family: var(--font-en); font-size: 17px;
  color: var(--ink); line-height: 1.15;
}
.gs-item b i { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.gs-item span { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; letter-spacing: 1px; }
.gs-bar { height: 5px; margin: 8px 12px 0; background: var(--bg-2); border-radius: var(--rnd-sm); overflow: hidden; }
.gs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: var(--rnd-sm); transition: width .4s ease; }

/* 目标卡片 2.0 */
.goal-card .gc-main { display: flex; gap: 14px; margin-top: 12px; align-items: center; }
.gc-heat {
  display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column;
  grid-auto-columns: 13px; gap: 3px; flex-shrink: 0;
}
.gh-cell { width: 13px; height: 13px; border-radius: var(--rnd-sm); background: var(--bg-2); transition: transform .12s ease; }
.gh-cell:hover { transform: scale(1.35); }
.gh-cell.on { background: var(--pink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.gh-cell.today { box-shadow: 0 0 0 2px var(--gold); }
.gh-cell.future { opacity: .3; }
.gc-side { flex: 1; min-width: 0; text-align: center; }
.gc-streak em {
  display: block; font-style: normal; font-family: var(--font-en);
  font-size: 17px; line-height: 1; color: var(--ink);
}
.gc-streak span { font-size: 11px; color: var(--ink-soft); letter-spacing: 1px; }
.gc-streak.hot em { color: var(--pink-deep); text-shadow: 0 0 10px rgba(136, 152, 174, .55); }
.gc-mini { margin-top: 8px; font-size: 11px; color: var(--ink-soft); line-height: 1.8; }
.gc-mini b { font-family: var(--font-en); color: var(--ink); font-size: 12px; }

/* 徽章条 */
.gc-badges { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.gb {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: 50%;
  background: var(--bg-2); opacity: .38; filter: grayscale(1);
  transition: transform .2s, opacity .2s ease;
}
.gb.on { opacity: 1; filter: none; background: var(--pink-faint, #f2f4f6); box-shadow: 0 0 0 2px var(--pink-pale, #dadfe5); }
.gc-next { font-size: 10px; color: var(--gray-deep); margin-left: auto; }

/* 最近一次打卡 */
.gc-last {
  margin-top: 10px; font-size: 12px; color: var(--ink-soft);
  background: var(--pink-faint, rgba(237, 239, 242, .5));
  border-radius: 10px; padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-last i { font-style: normal; font-family: var(--font-en); font-size: 11px; }
.goal-card .gc-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 心情选择 */
.mood-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mood-btn {
  width: 64px; padding: 9px 0 6px; text-align: center;
  background: transparent; border: 2px solid var(--line-soft);
  border-radius: var(--rnd-md); cursor: pointer;
  transition: all .15s ease;
}
.mood-btn .me { display: block; font-size: 17px; line-height: 1.2; }
.mood-btn > span:last-child { font-size: 10px; color: var(--ink-soft); }
.mood-btn:hover { border-color: var(--pink-pale, #dadfe5); }
.mood-btn.active {
  border-color: var(--pink); background: var(--pink-faint, #f2f4f6);
  transform: translateY(-3px); box-shadow: 0 4px 10px rgba(136, 152, 174, .35);
}

/* 打卡月历 */
.gcal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.gcal-head b { font-size: 15px; letter-spacing: 2px; min-width: 110px; text-align: center; }
.gcal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.gcal-week i { text-align: center; font-style: normal; font-size: 11px; color: var(--gray-deep); }
.gcal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gcal-cell {
  height: 46px; border-radius: 10px; background: var(--bg-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s ease;
}
.gcal-cell:hover { transform: scale(1.06); }
.gcal-cell.on { background: var(--pink-faint, #f2f4f6); box-shadow: inset 0 0 0 2px var(--pink-pale, #dadfe5); }
.gcal-cell.other { opacity: .25; }
.gcal-cell.future { opacity: .35; cursor: not-allowed; }
.gcal-cell.today { box-shadow: inset 0 0 0 2px var(--gold); }
.gcal-cell .cm { font-size: 15px; line-height: 1.2; font-family: var(--font-en); }
.gcal-cell.on .cm { font-size: 17px; }
.gcal-cell .ct { font-size: 9px; color: var(--ink-soft); margin-top: 2px; }

/* 自定义打卡周期：卡片上的进度块 */
.gc-period { margin-top: 12px; }
.gcp-txt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-soft); flex-wrap: wrap; }
.gcp-txt b { font-family: var(--font-en); color: var(--ink); }
.gcp-state { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 8px; background: var(--pink-faint, #faf5f0); color: var(--pink-deep, #7d675b); }
.gcp-state.wait { background: var(--bg-2); color: var(--gray-deep); }
.gcp-state.done { background: var(--pink-faint, #faf5f0); color: var(--gold); }
.gcp-bar { height: 6px; margin-top: 6px; background: var(--bg-2); border-radius: var(--rnd-sm); overflow: hidden; }
.gcp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: var(--rnd-sm); transition: width .4s ease; }
.gh-cell.blank { background: transparent; }
.goal-card .btn[disabled] { opacity: .55; pointer-events: none; }

/* 定时关闭按钮：计时中点亮成金色 */
.icon-btn.timing { color: var(--gold); }
.icon-btn.timing svg { filter: drop-shadow(0 0 3px var(--gold)); }

/* 新建 / 编辑目标弹窗里的周期设置 */
.gform-period { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gform-pchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }


/* ================================================================
   首页 = 严格复刻 rb-fused.html（融合 · 素雅编辑风）
   变量 / 顶栏 / 弧形滚轮 / 背景 都只在首页生效。
   ================================================================ */
/* 全站禁用 backdrop-filter（保留原意）；但豁免：
   1) .frosted —— B 档乳霜毛玻璃（弹窗 / 浮窗 / 右键 / 登录卡 / toast，见文件末尾第 26 节）；
   2) .modal-mask —— 弹窗背后的 iOS 磨砂遮罩要靠它把背后文字糊成不可读的环境色。 */
*:not(.glass__warp):not(.modal-mask):not(.frosted){backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}

body.home-on{
  --bg:#fbfaf8; --ink:#886070; --ink-soft:#a98a97;
  --pink:#a69084; --pink-deep:#7d675b; --gray-deep:#a1958c;
  --rose:#a69084; --sage:#9fc0ad; --lav:#cbbbad; --peach:#d9cbbf;
  --serif:Georgia,'Songti SC','SimSun',serif;
  --mono:Consolas,'Courier New',monospace;
  background:var(--bg); color:var(--ink); font-family:var(--serif);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* 桌面首页是沉浸式长页，恢复整窗滚动（功能页 body 纵向锁定，见基础区） */
  overflow-y:visible;
}
body.has-wallpaper { background: transparent !important; }
body.has-wallpaper.home-on { background: transparent !important; }
body.has-wallpaper #bg-pattern { opacity: 0 !important; }
body.has-wallpaper { filter: none !important; }

/* 浅色壁纸（深色字）—— 只给顶栏图标加双层光晕，保证复杂背景下图标仍清晰。
   文字的描边与模糊投影已按要求移除：此处不再有任何 -webkit-text-stroke / text-shadow。 */
body.wall-light #topbar .top-btn svg,
body.wall-light #topbar .top-now svg,
body.wall-light #topbar .user-chip svg,
body.wall-light #topbar .logo svg,
body.wall-light #topbar .logo-halo svg {
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, .8)) drop-shadow(0 0 2px rgba(255, 255, 255, .85)) !important;
}

/* 深色壁纸（浅色字）—— 同上：只保留图标光晕，文字一律不加描边与投影。 */
/* 兜底：有些旧存档只打了 has-wallpaper，没有 light/dark 标记 —— 给一层极淡的中性边，
   比完全没有好，比三层纯黑轻得多。 */
body.has-wallpaper:not(.wall-light):not(.wall-dark) #topbar .top-btn svg,
body.has-wallpaper:not(.wall-light):not(.wall-dark) #topbar .top-now svg,
body.has-wallpaper:not(.wall-light):not(.wall-dark) #topbar .user-chip svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .32)) drop-shadow(0 0 2px rgba(255, 255, 255, .5)) !important;
}
body.wall-dark #topbar .top-btn svg,
body.wall-dark #topbar .top-now svg,
body.wall-dark #topbar .user-chip svg,
body.wall-dark #topbar .logo svg,
body.wall-dark #topbar .logo-halo svg {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 2px rgba(0, 0, 0, .42)) !important;
}


/* ================================================================
   壁纸文字「微发光」+ 局部承托光斑（仅桌面 ≥901px；手机端走 --tsh 体系）
   痛点：深灰字落在花丛/夜景这类复杂壁纸像素上会发飘、被背景吞掉。
   做法克制：1) 文字按壁纸明暗加一层极淡的同色合型光晕（柔光，不是描边）；
        2) 问候/左栏/右侧统计/顶部各垫一层柔化光斑承托字形，
           光斑只出现在文字区，不整块压暗壁纸。
   ================================================================ */
@media (min-width: 901px) {
  body.has-wallpaper.wall-light {
    /* 深字 + 白色微阴影：与手机端 --tsh 完全同款（1px 贴边 + 8px 极淡柔光）*/
    --wp-halo: 0 1px 8px rgba(255, 255, 255, .55), 0 0 2px rgba(255, 255, 255, .6);
    --wp-halo-soft: 0 1px 6px rgba(255, 255, 255, .45);
    --wp-wash: rgba(247, 249, 252, .78);
    --wp-wash-edge: rgba(247, 249, 252, .66);
    --wp-wash-top: rgba(247, 249, 252, .62);
    /* 整图统一浅色蒙层：保证绿叶/花丛这类高细节壁纸下深字仍清晰，不被像素吞没 */
    --wp-veil: rgba(255, 255, 255, .38);
  }
  body.has-wallpaper.wall-dark {
    /* 浅字：与手机端深色 --tsh 同款，深影把字形从暗背景轻轻分出来。
       2026-10-12：承托光斑几乎全部撤掉（.5/.44/.3 → .08/.06/.04），
       不再整块压暗壁纸；字形改由文字阴影 + 磨砂面板固定字色承托。 */
    --wp-halo: 0 1px 10px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .45);
    --wp-halo-soft: 0 1px 7px rgba(0, 0, 0, .42);
    --wp-wash: rgba(10, 14, 22, .42);
    --wp-wash-edge: rgba(10, 14, 22, .36);
    --wp-wash-top: rgba(10, 14, 22, .34);
    /* 整图统一深色蒙层：夜景/暗调壁纸下浅字可读性兜底 */
    --wp-veil: rgba(0, 0, 0, .38);
  }
  /* 承托光斑层：挂在 #bg-image 上（它自己 pointer-events:none），
     盖在壁纸像素之上、#app(z-index:1) 之下，且不会被壁纸本身压住 */
  body.has-wallpaper #bg-image::after {
    content: ''; position: absolute; inset: 0;
    background:
      /* 整图统一蒙层：所有区域都有基础对比度，不再只靠局部光斑 */
      linear-gradient(var(--wp-veil), var(--wp-veil)),
      /* 顶部加强：顶栏 + 问候语区，从顶部往下 26% 渐隐 */
      linear-gradient(180deg, var(--wp-wash-top) 0%, transparent 26%),
      /* 左侧问候 / 统计区 */
      radial-gradient(52% 34% at 12% 14%, var(--wp-wash) 0%, transparent 72%),
      linear-gradient(90deg, var(--wp-wash-edge) 0%, transparent 27%),
      /* 右侧统计 / 时钟区 */
      radial-gradient(30% 58% at 99% 56%, var(--wp-wash-edge) 0%, transparent 70%);
  }
  /* 顶栏：壁纸态下加磨砂模糊 + 适度不透明，确保按钮/图标在任何壁纸上都清晰 */
  body.has-wallpaper #topbar {
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
  body.has-wallpaper.wall-light #topbar {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--top-grad-a) 82%, transparent),
      color-mix(in srgb, var(--top-grad-b) 70%, transparent));
  }
  body.has-wallpaper.wall-dark #topbar {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--top-grad-a) 82%, transparent),
      color-mix(in srgb, var(--top-grad-b) 70%, transparent));
  }
  /* 首页文字微发光。
     注意：#view 内存留历史「核清零」#app #view *{text-shadow:none!important}，
     必须用同前缀 + 更高特异性 + !important，壁纸态下光晕才能生效。 */
  body.has-wallpaper.home-on #app #view * { text-shadow: var(--wp-halo-soft) !important; }
  body.has-wallpaper.home-on #nav,
  body.has-wallpaper.home-on #nav * { text-shadow: var(--wp-halo-soft); }
  body.has-wallpaper.home-on #topbar .logo-name,
  body.has-wallpaper.home-on #topbar .logo-en,
  body.has-wallpaper.home-on #topbar .top-date,
  body.has-wallpaper.home-on #topbar .top-now span,
  body.has-wallpaper.home-on #topbar .user-chip { text-shadow: var(--wp-halo-soft) !important; }
  /* 大字 / 标题 / 时间 / 数字用加强一档的光晕（特异性高于上面的通配柔光） */
  body.has-wallpaper.home-on #app #view .home-hello .hi,
  body.has-wallpaper.home-on #app #view #home-clock,
  body.has-wallpaper.home-on #app #view .h-clock .t,
  body.has-wallpaper.home-on #app #view .stat .num,
  body.has-wallpaper.home-on #app #view .quote .tx,
  body.has-wallpaper.home-on #app #view .focus .clk,
  body.has-wallpaper.home-on #app #view .goal .g-side .n,
  body.has-wallpaper.home-on #app #view .sh-bar h2,
  body.has-wallpaper.home-on #app #view .vhead h1,
  body.has-wallpaper.home-on #app #view .tw,
  body.has-wallpaper.home-on #topbar .logo-name { text-shadow: var(--wp-halo) !important; }
}

/* 让所有页面的 --bg 颜色与首页严格一致（第七轮：去掉渐变后，非首页的 --bg 也与 home 同步）
   注意：这两条原先被错误地写在 body.home-on{ } 内部（3865 才闭合），
   会被解析成 body.home-on body:not(.home-on) —— <body> 不可能嵌套在 <body> 里，永不匹配，
   所以「非首页 --bg 与首页同步」此前从未生效（切页跳色的直接原因）。现已移出到块外。 */
body:not(.home-on){ --bg:#f9f9fa; }
.dark body:not(.home-on){ --bg:#2e3034; --ink:#e8d6dd; }
.dark body.home-on{ --bg:#2e3034; --ink:#e8d6dd; --ink-soft:#b39aa4; --pink-deep:#c5cad4; --pink:#aab0bd; --rose:#aab0bd; --lav:#b6bbc6; --peach:#c2ccd9; --gray-deep:#a0a3aa; background:var(--bg); color:var(--ink); }

/* 隐藏像素背景、侧栏头像、漂浮颜文字
   注意：这里三条的作用域并不一致，别按「都是首页专属」去改：
     - #bg-pattern / .sparkle 带 body.home-on 前缀，只在首页隐藏
       （.sparkle 另有 4348 行的全局兜底，所以实际全站都不显示）
     - #nav-avatar **故意不加前缀**：素雅风要求全站都不显示侧栏像素头像框，
       若给它补上 body.home-on，9 个功能页会重新冒出头像框，与「全站统一」诉求相反。 */
/* 与首页严格一致：点纹底纹全站都不画。
   原先只在首页隐藏，其它 9 个功能页仍在画点纹 → 切页背景看起来不是一个色。 */
#bg-pattern{display:none !important;}
#nav-avatar{display:none !important;}
body.home-on .sparkle{display:none !important;}

/* 首页专属 aurora 极光背景已删除：
   四个 48vmax 的 --rose / --peach / --lav / --sage 模糊光斑只在 body.home-on 下绘制，
   手机上比屏幕还宽、整片发粉，既挡视线又让「主页和其它页背景不是一个色」。
   全站背景现在只剩 body 的 var(--bg) 一种来源。 */

/* 顶栏（极简，右上） */
body.home-on #topbar{position:fixed;top:16px;right:26px;display:flex;align-items:center;gap:6px;z-index:60;background:none;border:none;box-shadow:none;}
/* 顶栏功能图标右对齐
   注意：这条**故意不加** body.home-on 前缀。首页顶栏是右上角悬浮小条（3892），
   非首页顶栏是左侧 logo/日期 + 右侧按钮的全宽条——两种布局都需要按钮区靠右，
   所以必须全局生效；加了前缀反而会让非首页的功能按钮挤到左边。 */
#topbar .top-actions{ margin-left:auto; }
body.home-on .top-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:none;padding:0;opacity:.5;cursor:pointer;color:var(--ink);transition:opacity .22s,transform .22s,background .22s,color .22s;}
body.home-on .top-btn:hover{opacity:.95;transform:scale(1.06);background:color-mix(in srgb,var(--ink) 6%,transparent);}
body.home-on .top-btn.on,body.home-on .top-btn.active{opacity:1;color:var(--pink-deep);}
body.home-on .top-btn svg{width:19px;height:19px;display:block;}

/* 弧形滚轮导航（全局统一，所有页面位置/动画一致，切页不跳） */
#nav{position:fixed;left:56px;top:calc(50% + 36px);transform:translateY(-50%);width:190px;height:360px;overflow:hidden;z-index:58;pointer-events:none;perspective:1000px;background:transparent;}
.witem{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;touch-action:none;font-family:var(--serif);font-size:14px;letter-spacing:1.5px;color:var(--ink-soft);cursor:pointer;pointer-events:auto;user-select:none;-webkit-user-select:none;transform-origin:left center;will-change:transform;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s,filter .35s,color .35s;}
#nav.dragging .witem{transition:none;}
.witem.active{color:var(--ink);}
.nav-track{position:fixed;left:0;top:340px;width:260px;bottom:0;z-index:57;cursor:grab;touch-action:none;}
.nav-track:active{cursor:grabbing;}

/* 主区：桌面首页保留沉浸式长页（body 滚动），清零功能页固定盒的 inset/overflow */
body.home-on #view{position:relative;z-index:2;top:auto;left:auto;right:auto;bottom:auto;margin:96px 56px 80px 56px;padding:0;min-height:0;overflow:visible;-webkit-mask-image:none;mask-image:none;}
/* 欢迎区 + 搜索区 固定，不随页面滑动 */
body.home-on .home-head{position:fixed;top:96px;left:56px;right:56px;z-index:5;background:var(--bg);padding:8px 0;}
body.home-on .home-editorial{padding-top:var(--head-h,220px);}

/* 问候 */
body.home-on .home-hello{background:transparent;border:none;box-shadow:none;padding:0;margin:0;text-align:left;max-width:66%;}
body.home-on .home-hello .hi{font-family:var(--serif);font-size:clamp(34px,4.2vw,56px);font-weight:200;letter-spacing:7px;line-height:1.18;color:var(--ink);}
body.home-on .hi-sub{font-size:13px;letter-spacing:2.5px;margin-top:16px;color:var(--ink);line-height:1.9;}
body.home-on .home-clock{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;color:var(--gray-deep);margin-top:18px;padding:0;border:none;background:none;display:inline-block;}
body.home-on .hc-heart{color:var(--pink-deep);}

/* 顶栏：隐藏 halo 光环与中间时间日期（仅首页） */
body.home-on .logo-halo{display:none !important;}
body.home-on #top-date{display:none !important;}

/* 星光（围绕问候语漂浮的细星） */
body.home-on .spark-host{position:relative;display:inline-block;}
body.home-on .spk{position:absolute;color:var(--pink-deep);font-size:calc(11px*var(--s,1));opacity:0;display:block;animation:tw 3s ease-in-out infinite;transform:translate(-50%,-50%);pointer-events:none;}

/* 行内聚光（鼠标跟随）：首页这一层已删除。
   原先首页在 body.home-on 下单独画了一层「墨色」聚光，压在全局「粉色」聚光之上，
   所以鼠标光晕一进首页就变灰、离开首页又变粉。
   现在全站共用 index.html 里那一个 #spotlight，颜色统一取 --glow。 */

/* 光标拖尾 */
body.home-on .splash{position:fixed;width:7px;height:7px;border-radius:50%;background:var(--pink-deep);pointer-events:none;z-index:15;transform:translate(-50%,-50%);animation:pop .6s ease-out forwards;}

/* 固定头部（问候 + 搜索）：载入时模糊上浮一次。
   下方功能模块的「渐隐渐显」不走这个动画，交给 IntersectionObserver 驱动（见 .rv）。 */
@keyframes blurUp{from{opacity:0;filter:blur(10px);transform:translateY(14px);}to{opacity:1;filter:blur(0);transform:none;}}
body.home-on .home-hello,body.home-on .search-box{animation:blurUp .9s ease both;}

/* 功能模块随滚动渐隐渐显：
   .rv 由 home.js 挂载 —— 进入视口中部显示带加 .rv-in 浮现，滚出显示带后复位（可重复播放）。
   只动 transform / opacity，GPU 合成；失败时 JS 会直接加 .rv-in，内容不会卡在透明态。 */
/* 注意：下方旧规则「#app #view *{transform:none!important}」是 ID+!important 的通配清零，
   普通选择器压不过它，这里沿用本文件自己的覆盖模式，带 #app #view + !important 把上浮还回来。 */
body.home-on #app #view .rv{
  opacity:0;
  transform:translateY(18px) !important;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
body.home-on #app #view .rv.rv-in{opacity:1;transform:none !important;}
@media (prefers-reduced-motion:reduce){
  body.home-on .home-hello,body.home-on .search-box{animation:none;}
  body.home-on #app #view .rv{opacity:1;transform:none !important;transition:none;}
}

/* 搜索 */
/* 搜索：淡粉胶囊 + 粉色描边，聚焦加深；深色壁纸下转成半透明白，保证任意壁纸上都看得清 */
body.home-on .search-box{display:flex;align-items:center;gap:8px;background:transparent;border:none;border-radius:0;box-shadow:none;padding:7px 2px;margin:28px 0 0;width:280px;max-width:82vw;position:relative;}
body.home-on .search-box:focus-within{border-color:transparent;box-shadow:none;}
/* 首页搜索按用户要求无边框无底色：深浅壁纸都保持透明，只留文字与搜索图标 */
body.has-wallpaper.wall-dark.home-on .search-box,
body.has-wallpaper.wall-light.home-on .search-box{background:transparent;border-color:transparent;}
body.has-wallpaper.wall-dark.home-on .search-box:focus-within,
body.has-wallpaper.wall-light.home-on .search-box:focus-within{border-color:transparent;box-shadow:none;}
body.home-on #home-search{flex:1;background:transparent;border:none;outline:none;font-size:13px;letter-spacing:1px;color:var(--ink);font-family:var(--serif);}
body.home-on #home-search::placeholder{color:var(--ink-soft);opacity:.85;}
body.home-on #home-search-go{background:transparent;border:none;cursor:pointer;font-size:14px;color:var(--pink-deep);opacity:.8;}
body.home-on #home-search-go svg{color:var(--pink-deep);}
body.home-on .search-results{position:absolute;top:100%;left:0;z-index:80;margin-top:8px;background:var(--paper);border:none;box-shadow:0 12px 40px color-mix(in srgb,var(--ink) 14%,transparent);border-radius:10px;padding:8px;min-width:320px;max-height:60vh;overflow:auto;}
body.home-on .sr-group h4{color:var(--ink-soft);font-family:var(--serif);font-size:11px;letter-spacing:2px;margin:10px 6px 4px;}
body.home-on .sr-item{border:none;padding:8px 10px;border-radius: var(--rnd-md);color:var(--ink);cursor:pointer;font-size:13px;}
body.home-on .sr-item:hover{background:rgba(166, 144, 132, .1);}



/* 模块：无框编辑风 · 右对齐（严格复刻 rb-fused.html） */
body.home-on .home-grid{display:block;margin:64px 0 0;}
body.home-on .home-grid > .focus-card{position:relative;display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding:48px 0 48px 210px;border:none;background:transparent;box-shadow:none;overflow:visible;}
body.home-on .home-grid > .focus-card::before{position:absolute;right:0;top:0;left:auto;width:160px;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:2.5px;color:var(--pink-deep);opacity:.55;}
body.home-on .home-grid > .focus-card:nth-child(1)::before{content:'01 — WORK';}
body.home-on .home-grid > .focus-card:nth-child(2)::before{content:'02 — TODO';}
body.home-on .home-grid > .focus-card:nth-child(3)::before{content:'';}
body.home-on .fc-title{font-family:var(--serif);font-size:11px;letter-spacing:3px;color:var(--ink-soft);margin:0 0 8px;text-align:right;justify-content:flex-end;width:100%;}
body.home-on .fc-num{font-family:var(--serif);font-weight:200;font-size:50px;line-height:1.05;color:var(--ink);margin:0;text-align:right;}
body.home-on .fc-sub{margin:6px 0 0;text-align:right;max-width:60%;line-height:1.9;color:var(--ink-soft);font-size:12px;}
body.home-on .quote-box{border:none;box-shadow:none;background:none;padding:0;margin:0;max-width:60%;text-align:right;}
body.home-on .quote-text{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.95;color:#414345;}
body.home-on .quote-from{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--gray-deep);margin-top:8px;}

/* 最近记录 04 */
body.home-on .home-grid + .focus-card{position:relative;padding:48px 0 0 210px;border:none;background:transparent;box-shadow:none;text-align:right;}
body.home-on .home-grid + .focus-card::before{content:'04 — RECENT';position:absolute;right:0;top:0;left:auto;width:160px;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:2.5px;color:var(--pink-deep);opacity:.55;}
body.home-on .home-grid + .focus-card .fc-title{display:none;}
body.home-on .recent-list{display:flex;flex-direction:column;}
body.home-on .recent-item{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:none;font-size:13px;color:#515355;justify-content:flex-end;text-align:right;}
body.home-on .recent-item > span:not(.r-time):not(.r-dot){text-align:right;}
body.home-on .recent-item:last-child{border-bottom:none;}
body.home-on .recent-item .r-time{font-family:var(--mono);font-size:9px;color:var(--gray-deep);margin-left:auto;letter-spacing:1px;}
body.home-on .recent-item .r-dot{width:6px;height:6px;border-radius:50%;background:var(--pink-deep);opacity:.55;flex-shrink:0;}

/* 换一句（极简按钮） */
body.home-on .btn-quote{margin-top:14px;background:none;border:none;font-family:var(--serif);font-size:12px;letter-spacing:2px;color:var(--pink-deep);cursor:pointer;padding:4px 0;position:relative;transition:transform .2s;opacity:.8;}
body.home-on .btn-quote:hover{opacity:1;}
body.home-on .btn-quote::after{content:'→';margin-left:6px;}
body.home-on .btn-quote::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--pink-deep);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
body.home-on .btn-quote:hover::before{transform:scaleX(1);}

/* ===== 首页残留彻底清除：玻璃底色 / 粉色点状方框 / 「❀ ♡」装饰字符 / 时钟两侧❀ / 散落贴纸 ===== */
body.home-on{
  --glass-bg:transparent; --glass-bg-strong:transparent; --glass-inner:transparent;
  --glass-blur:none; --glass-line:transparent; --glass-line-soft:transparent;
  --glass-hi:transparent; --glass-shadow:none; --glass-shadow-sm:none;
}
/* 卡片 / 问候 / 搜索 的像素点状方框（::before 边框） */
body.home-on .focus-card::before,
body.home-on .home-hello::before,
body.home-on .search-box::before,
body.home-on .search-results::before,
body.home-on .home-grid + .focus-card::before{ border:none !important; }
/* 「❀ ♡」装饰字符（::after） */
body.home-on .focus-card::after,
body.home-on .home-hello::after,
body.home-on .home-grid + .focus-card::after{ content:none !important; }
/* 时钟两侧的「❀」装饰 */
body.home-on .home-clock::before,
body.home-on .home-clock::after{ content:none !important; }
/* ============ 全局无框设计语言（继承主页极简风格） ============ */
/* 装饰元素全站隐藏：贴纸 / 星光 / 时钟爱心 / 光标拖尾 / 导航标题 / 顶栏花边 / 选中爱心 */
.sticker, .spk, .hc-heart, .splash,
#nav::before, #topbar::after,
.witem.active::after{ display:none !important; }

.home-head, .home-hello, .focus-card, .focus-box, .work-col, .chat-side, .chat-main, .todo-panel, .cal-panel, .cal-day-panel, .goal-card, .lib-card, .nt-card, .set-card, .search-box, .search-results, .order-card, .lg-sum-card, .modal-card, /* 补两个漏掉的：macaron 第 3 节给 .ws-main/.ws-side 刷了 var(--paper) 功能区底色，
   而这条「全清」清单原先没列它们，导致这两块一直是唯一逃过清理的功能区底色。 */
.work-stats .ws-main, .work-stats .ws-side{
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* 标题栏：去掉粉色渐变背景、底边线、窗口控制按钮（全局） */
.focus-card .fc-title, .set-card h3,
.work-col-title, .goal-card .gc-name, .cal-head{
  background: none !important;
  background-image: none !important;
  border-bottom: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.focus-card .fc-title::after, .set-card h3::after,
.work-col-title::after, .goal-card .gc-name::after, .cal-head::after{
  content: none !important;
}

.focus-card::before, .set-card::before, .work-col::before, .chat-side::before, .chat-main::before, .todo-panel::before, .cal-panel::before, .cal-day-panel::before, .home-hello::before, .goal-card::before, .search-box::before, .search-results::before, .lib-card::before, .nt-card::before, .focus-box::before, .order-card::before, .lg-sum-card::before, .modal-card::before, .home-hello::after, .focus-card::after, .set-card::after, .work-col::after, .chat-side::after, .chat-main::after, .todo-panel::after, .cal-panel::after, .cal-day-panel::after, .goal-card::after, .lib-card::after, .nt-card::after, .focus-box::after, .order-card::after, .lg-sum-card::after, .modal-card::after{ content: none !important; display: none !important; }

/* ============ 全局去色：去掉毛玻璃 / 边框 / 色块 / 实色标签 ============ */

/* 顶栏：去掉毛玻璃、渐变背景、边框、阴影 */
#topbar{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 浮窗 / 通知 / 弹窗：去掉毛玻璃和边框 */
#music-panel, #lyric-panel, #ref-panel, #ctx-menu, .toast, #auth-card{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 顶栏胶囊 / 标签 / 徽章 / 装饰按钮：去掉色块和边框 */
.user-chip, .top-now, .fc-tag, .badge, .tag, .chip,
.btn-quote{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============ 第二轮全站去色：标题栏渐变 / 粉色边框 / 功能区底色 ============ */

/* 标题栏：去掉渐变背景、边框、内描边、装饰字符、窗口按钮 */
.view-head, .chat-head, .chat-side-head, .panel-head, .lp-head, .modal-head, .lm-head{
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.view-head::before, .view-head::after, .chat-head::before, .chat-head::after, .chat-side-head::before, .chat-side-head::after, .panel-head::before, .panel-head::after, .modal-head::before, .modal-head::after, .lm-head::before, .lm-head::after{ content: none !important; display: none !important; }

/* 全局功能区底色：全部去掉 */
.chat-msgs, .chat-input, .quote-box, .music-row,
.cal-cell, .todo-item, .m-bubble, .chat-item,
.auth-card, .lm-list, .nt-list,
input, textarea, select{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 剩余粉色/彩色边框（聊天气泡 / 对话项 / 标签 / 输入控件） */
.m-bubble, .chat-item, input, textarea, select{
  border: none !important;
}

/* ============ 第三轮去色：粉色阴影 / 白色框 / 功能区底图 ============ */

/* 粉色阴影 + 白色内描边 + 噪点底图（账本 / 引用 / 参考画布等页面元素） */
.lg-tab, .lg-sum-card, .lg-day, .lg-cat-item, .emoji-pick, .bk-card, .lmg-pix, .pix-pick, .lgd-cover, .m-bubble, .ref-item img, .ref-item.selected img, .chat-input, .quote-box, .music-row, .todo-item, .cal-cell, .nt-card{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border: none !important;
  box-shadow: none !important;
}

/* 功能区底图（噪点纹理 --noise）彻底清除 */
.modal-card, #music-panel, #lyric-panel, #ref-panel, #ctx-menu, .toast, #auth-card, .m-bubble, .chat-input, .chat-msgs{
  background-image: none !important;
  background-blend-mode: normal !important;
}
/* 右侧粉色滚动条 */
body.home-on ::-webkit-scrollbar-track{ background:transparent !important; border-left:none !important; }
body.home-on ::-webkit-scrollbar-thumb{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* 星光 / 时钟爱心 / 光标拖尾：首页隐藏（鼠标光晕保留） */
body.home-on .spk,
body.home-on .splash,
body.home-on .hc-heart{ display:none !important; }
body.home-on .witem.active::after{ content:none !important; }


/* ============================================================
   26. 去像素化（统一覆盖层）
   —— 放在文件末尾，靠层叠顺序覆盖前面所有规则
   —— 移除：图片像素化 / 像素爱心 / 四角像素花边 / 背景装饰贴纸
   ============================================================ */

/* ---------- 1. 图片取消像素化，恢复平滑 ---------- */
body,
.lib-card .lc-img,
.lightbox img,
.na-pic { image-rendering: auto !important; }

/* ---------- 2. 移除像素小装饰 ---------- */
/* 页面四角像素花边（.deco-corner）—— 已随定义块一并删除，JS/HTML 零引用 */
/* 自动生成的背景装饰贴纸（颜文字 / 爱心 / 星星等） */
.sticker { display: none !important; }
#topbar::after { display: none !important; }

hr {
  height: 0 !important;
  margin: 18px 0 !important;
  background: none !important;
  border-top: 1px solid rgba(136, 152, 174, .38) !important;
  opacity: 1 !important;
}
/* 列表 bullet：像素爱心 → 简约圆点 */
#view ul li::before, .modal-body ul li::before,
.set-card ul li::before, .home-hello ul li::before {
  background: var(--pink-deep) !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50%;
  top: .62em !important;
  opacity: .5;
}

/* ---------- 4. 粗实线描边 → 1px 柔和边 ---------- */
:root { --line-soft: rgba(97, 99, 104, .22); }
:root.dark { --line-soft: rgba(255, 255, 255, .16); }
.order-card, .todo-item, .cal-cell, .quote-box, .focus-clock,
.pal-box, .pal-demo, .pal-item, .pal-mini, .tune-chip, .md-chip {
  border: none !important;
}

/* ================================================================
   移动端完整适配 v2（2026-10-09）
   只做布局适配：顶栏功能按钮一个不丢、导航可达、视图不横向溢出；
   视觉延续上方「去像素化」后的柔和粉调设计语言（软阴影 / 1px 描边）。
   ================================================================ */








/* ====================================================================
   全站 UI 标准化与状态层（design-system v1 · 2026-10-09）
   ----------------------------------------------------------------
   视觉母版 = 首页（小窝 · body.home-on）。
   本层只做布局 / 状态 / 响应式规范化，所有颜色 / 圆角 / 阴影
   一律来自 :root 变量，不新增任何设计值。
   ==================================================================== */

/* ===== 全站统一：顶栏/小径在所有视图下都与 home 一致 =====
   旧规则里：
     - #nav line 2820 给了「粉色玻璃背景 + 1px 描边 + backdrop-filter + 阴影」
   这些只在 home-on 时被 line 4054 那条去掉色块盖掉，body 一离开 home 立刻露出来。
   这里在 design-system v1 顶部一次性把全站都设成"无玻璃、无圆角胶囊、无心形装饰花边"，与首页严格一致。*/
#topbar,
#topbar::before,
#topbar::after {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#topbar::after { content: none !important; display: none !important; }

#nav,
#nav::before,
#nav::after {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#nav::before,
#nav::after { content: none !important; display: none !important; }

/* 全站统一隐藏「漂浮颜文字 / 贴纸」装饰：
   main.js:418 启动时无条件创建 26 个 .sparkle 颜文字 (｡•ᴗ•｡)/(◕ᴗ◕✿)/…，
   旧规则只在 body.home-on 下隐藏（line 3873），其他页面就让它全屏飘。
   视觉母版 = 首页，首页不要的全站都不要。 */
.sparkle { display: none !important; }

/* ===== 全站统一：功能区底色与功能区模块直接删 =====
   旧规则（line 4004-4140）虽然枚举了 30+ 类名把背景/border/shadow 全清掉，
   但 line 2093/2150/2820/3055 这些「视图与顶栏」层又把它们重新堆上：
     - 视图区主背景 var(--bg-1) / var(--bg-2) 噪点
     - 卡片背景 var(--paper) / var(--pink-faint) / var(--line-soft)
     - 标题栏渐变 / 粉色下边线 / 窗控按钮
   这里用 #app #view 后代一锅端兜底：所有 view 子元素都不再画底色、不再画模块底图。
   「删除功能区底色 + 删除功能区模块」= 与首页纯文字风格严格一致。
   ——仅清底色和装饰层（背景 / 边框 / 阴影 / 渐变 / 噪点 / 玻璃），不碰布局和文字。*/
/* 全清（卡片/模块/装饰层） */
#app #view, #app #view .view-page, #app #view .view-page > *, #app #view .view-head, #app #view .view-tools, #app #view [class$="-card"], #app #view [class$="-panel"], #app #view [class$="-col"], #app #view [class$="-box"], #app #view [class$="-list"], #app #view [class$="-row"], #app #view [class$="-item"], #app #view [class$="-cell"], #app #view [class$="-tab"], #app #view [class$="-head"], #app #view [class$="-title"], #app #view [class$="-name"], #app #view [class$="-cover"], #app #view [class$="-thumb"], #app #view [class$="-sum"], #app #view [class$="-demo"], #app #view [class$="-min"], #app #view [class$="-chip"], #app #view [class$="-bubble"], #app #view [class$="-cat"], #app #view [class$="-day"], #app #view [class$="-time"], #app #view [class$="-count"], #app #view [class$="-ico"], #app #view [class$="-bar"], #app #view [class$="-bar-wrap"], #app #view [class^="lg-"], #app #view [class^="rq-"], #app #view [class^="nt-"], #app #view [class^="os-"], #app #view [class^="lt-"], #app #view [class^="pal-"], #app #view [class^="tune-"], #app #view [class^="md-"], #app #view [class^="ref-"], #app #view [class^="lm-"], #app #view [class^="emoji-"], #app #view [class^="pix-"], #app #view [class^="lmg-"], #app #view [class^="lgd-"], #app #view [class^="bk-"], #app #view [class^="texture-"], #app #view [class^="fc-"], #app #view [class^="g-"], #app #view [class^="dp-"], #app #view [class^="ac-"], #app #view [class^="al-"], #app #view [class^="as-"], #app #view [class^="win-"], #app #view .empty-state, #app #view .loading-state, #app #view .error-state, #app #view .recent, #app #view .recent *, #app #view .search, #app #view .goal-card, #app #view .order-card, #app #view .modal-card, #app #view .focus-card, #app #view .focus-box, #app #view .set-card, #app #view .auth-card, #app #view .work-col, #app #view .chat-side, #app #view .chat-main, #app #view .todo-panel, #app #view .cal-panel, #app #view .cal-day-panel, #app #view .lib-card, #app #view .nt-card, #app #view .lg-sum-card, #app #view .lg-day, #app #view .lg-cat-item, #app #view .lg-tab, #app #view .chat-msgs, #app #view .chat-input, #app #view .quote-box, #app #view .music-row, #app #view .cal-cell, #app #view .todo-item, #app #view .m-bubble, #app #view .chat-item, #app #view .lm-list, #app #view .nt-list, #app #view .auth-card, #app #view .emoji-pick, #app #view .bk-card, #app #view .lmg-pix, #app #view .pix-pick, #app #view .lgd-cover, #app #view .ref-item, #app #view .ref-item img, #app #view .ref-item.selected img, #app #view .texture-item, #app #view .home-head, #app #view .home-hello, #app #view .search-box, #app #view .search-results, #app #view .work-col-title, #app #view .cal-head, #app #view .panel-head, #app #view .chat-head, #app #view .chat-side-head, #app #view .view-head, #app #view .lm-head, #app #view .modal-head, #app #view .focus-card .fc-title, #app #view .set-card h3, #app #view .goal-card .gc-name, #app #view .goal-card::before, #app #view .goal-card::after, #app #view .lib-card::before, #app #view .lib-card::after, #app #view .nt-card::before, #app #view .nt-card::after, #app #view .order-card::before, #app #view .order-card::after, #app #view .lg-sum-card::before, #app #view .lg-sum-card::after, #app #view .focus-card::before, #app #view .focus-card::after, #app #view .focus-box::before, #app #view .focus-box::after, #app #view .set-card::before, #app #view .set-card::after, #app #view .work-col::before, #app #view .work-col::after, #app #view .chat-side::before, #app #view .chat-side::after, #app #view .chat-main::before, #app #view .chat-main::after, #app #view .todo-panel::before, #app #view .todo-panel::after, #app #view .cal-panel::before, #app #view .cal-panel::after, #app #view .cal-day-panel::before, #app #view .cal-day-panel::after, #app #view .home-hello::before, #app #view .home-hello::after, #app #view .search-box::before, #app #view .search-box::after, #app #view .search-results::before, #app #view .search-results::after, #app #view .modal-card::before, #app #view .modal-card::after{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 但空/加载/错误状态需要虚线边框：单独恢复 */
#app #view .empty-state,
#app #view .loading-state,
#app #view .error-state {
  border: 2px dashed var(--bg-2) !important;
  border-color: var(--bg-2) !important;
  border-radius: var(--rnd-md) !important;
}

/* 输入控件必须有可见边框/底色（用户要看见输入框和光标） */
#app #view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]), #app #view textarea, #app #view select, #app #view .px-input, #app #view .px-textarea{
  background-color: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* checkbox/radio 不画背景，但留自身控件 */
#app #view input[type=checkbox],
#app #view input[type=radio] {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 关键文字元素保留：按钮、标签、徽章、链接、表单元数据等需要自身颜色 */
/* 主按钮（.btn .btn-primary 等）保持原 design-system v1 样式，由前面章节负责 */
/* 列表分割线保留最低限可见 */
#app #view hr,
#app #view .divider,
#app #view .vsep,
#app #view [role="separator"] {
  border: 0 !important;
  border-top: 1px solid var(--line-soft) !important;
  background: transparent !important;
  background-image: none !important;
}



/* ===== 第八轮：AI 对话视图专项清理 =====
   旧规则（macaron 段 line 710-740 / 1547-1551 / 2427-2455）虽然被前面的「全清」
   段覆盖了 background，但 border / box-shadow / transform 旋转 / 投递口粉长条
   （.chat-input::before） 全部还在：
     - .chat-side / .chat-main 还有 3px 黑边 + 阴影
     - .chat-input 顶部 3px 黑边 + 粉噪点底图
     - .chat-input::before 9px 高的「投递口粉长条」linear-gradient(180deg, #eef0f3, #cdd6e2)
     - #chat-send 3px 边框 + 3 层投影 + transform: rotate(-1.2deg) 旋转
     - .chat-head / .chat-side-head 粉渐变 + 3px 黑底边
   这里单独点名清掉，与首页「纯文字 + 极简」风格严格一致。 */
#app #view .chat-layout,
#app #view .chat-side,
#app #view .chat-side::before,
#app #view .chat-side::after,
#app #view .chat-side-head,
#app #view .chat-side-head::before,
#app #view .chat-side-head::after,
#app #view .chat-side-head input,
#app #view .chat-tags,
#app #view .chat-tags::before,
#app #view .chat-tags::after,
#app #view .chat-list,
#app #view .chat-item,
#app #view .chat-item::before,
#app #view .chat-item::after,
#app #view .chat-main,
#app #view .chat-main::before,
#app #view .chat-main::after,
#app #view .chat-head,
#app #view .chat-head::before,
#app #view .chat-head::after,
#app #view .chat-msgs,
#app #view .chat-msgs::before,
#app #view .chat-msgs::after,
#app #view .chat-input,
#app #view .chat-input::before,
#app #view .chat-input::after,
#app #view .chat-input textarea,
#app #view #chat-send,
#app #view #chat-send::before,
#app #view #chat-send::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  outline: none !important;
}
/* 隐藏「投递口」粉长条（.chat-input::before 伪元素）—— 核心：用户说的「粉色长条」就是它 */
#app #view .chat-input::before { content: none !important; display: none !important; }
/* 第八轮给 #chat-send / .chat-item.active / .msg.user .m-bubble 恢复的「粉底白字」—— 整块删除（15 行）：
   紧接着的第九轮（4642-4698）行号更靠后、同为 !important，把这三项逐一改成
   background:transparent + color:var(--ink)，padding/letter-spacing 也在那边重写了一遍。
   所以这 15 行从未生效过；最终生效的是 4649-4698。
   注意上面 4616-4617 那条「隐藏 .chat-input::before 粉长条」仍在生效，不要一起删。 */
/* 聊天输入 textarea —— 1px 极细边 + 极淡底色 */
#app #view .chat-input textarea {
  background-color: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
}


/* ===== 第九轮：AI 对话实色清理 =====
   上一轮 chat 清理只清掉了 .chat-side / .chat-main / .chat-input 等「容器」
   的边框和投影，但「强调态」元素（发送键 / 对话项选中 / 用户消息气泡 / 
   深度思考 DEEP 标签 / 深度思考气泡）保留了 var(--pink) 粉底 + var(--paper) 
   白字 —— 这些「实色」是 design-system v1 早期强调策略，现在用户要全部清掉，
   让 AI 对话页与首页「纯文字 + 极简」严格一致。 */
/* 发送键（#chat-send）—— 去掉实色粉底，保留深色文字 */
#app #view #chat-send {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 8px 16px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
/* 发送键 hover —— 给个极淡粉色提示（不画实色块） */
#app #view #chat-send:hover {
  background-color: var(--pink-faint) !important;
  color: var(--ink) !important;
}

/* 对话项选中态（.chat-item.active）—— 去掉粉底，保留深色文字 */
#app #view .chat-item.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
}
/* 对话项选中 —— 文字左侧加一个 2px 深粉小条作选中指示（不画底色） */
#app #view .chat-item.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 2px !important; height: auto !important;
  background-color: var(--pink-deep) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 用户消息气泡（.msg.user .m-bubble）—— 去掉粉底 */
#app #view .msg.user .m-bubble {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 深度思考气泡（.m-thinking）—— 去掉 paper 实色 */
#app #view .m-thinking {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--gray-deep) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 深度思考 DEEP 标签（.cd-tag）—— 去掉 2px 边框 */
#app #view .cd-tag {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--gray-deep) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  letter-spacing: 1px !important;
}

/* AI 消息气泡（.msg.ai .m-bubble）—— 之前可能也有 paper 底 */
#app #view .msg.ai .m-bubble {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 新对话按钮（#chat-new）—— 已在按钮段清掉，这里再保底一次 */
#app #view #chat-new,
#app #view .chat-side-head button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 对话框（侧栏 + 主区）—— 上一轮已清，这里再保底一次，确保无 paper 实色 */
#app #view .chat-side,
#app #view .chat-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 头像小圆框（.msg .m-ico）—— 去掉玻璃实色 */
#app #view .msg .m-ico {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* ===== 第十轮：对话输入框 / 勾选框 / 搜索框 —— 完全去色 =====
   上一轮第八轮我给 .chat-side-head input / .chat-input textarea 加了
   「恢复段」（var(--bg) 底色 + 1px 极细边），但用户反馈这些仍是「实色框」。
   这一轮直接改为「完全透明 + 无边框」，与首页「纯文字 + 无背景」严格一致。
   同时把 .chat-deep input[type=checkbox] 的 accent-color 从 --accent-ui（深粉）
   改为 currentColor（深色），勾选框不再有粉色。 */
/* 对话输入 textarea —— 完全去色（上一轮的恢复段作废）*/
#app #view .chat-input textarea {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 8px !important;
}
/* 搜索对话输入框（.chat-side-head input）—— 完全去色 */
#app #view .chat-side-head input {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 5px 8px !important;
}
/* 深度思考勾选框 —— accent-color 改深色（不要粉色）*/
#app #view .chat-deep input[type=checkbox] {
  accent-color: var(--ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
}
/* 深度思考容器文字 —— 改深色（不要深粉）*/
#app #view .chat-deep {
  color: var(--ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
/* 兜底：所有 chat 视图内的 input/textarea/select —— 完全去色 */
#app #view .chat-layout input,
#app #view .chat-layout textarea,
#app #view .chat-layout select {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ===== 第十一轮：白色 text-shadow 全面清理 + 搜索框终极去色 =====
   之前几轮没清掉的：
     - .logo-name 顶栏「光环 HALO」字白投影 text-shadow: 0 2px 0 高光色
     - .view-title / .set-card h3 / .work-col-title / .rq-card-title 双层白投影
     - .view-head::after 视图头分割线装饰文字白投影
     - .rq-well-title 许愿池标题白投影
     - .msg .m-bubble 3px 黑边 + 外投影 粉投影（用户说的「白色投影」）
     - .chat-side-head input 旧「实色」段（line 4661）cascade 残留
   全部清掉。 */
/* 顶栏 logo（光环 HALO）—— 去白色投影 */
.logo-name { text-shadow: none !important; }
/* 所有视图标题、工作台列标题、需求卡标题 —— 去白色/粉色双投影 */
.view-title, .set-card h3, .work-col-title, .view-head::after{ text-shadow: none !important; }
/* 小径 nav 标题（#nav::before）—— 之前已设 content:none，text-shadow 兜底 */
#nav::before { text-shadow: none !important; }
#app #view .msg .m-bubble,
#app #view .msg.user .m-bubble,
#app #view .msg.ai .m-bubble,
#app #view .msg .m-bubble.typing {
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* 终极兜底：搜索框 .chat-side-head input —— 再次确保完全去色（覆盖 line 4661 残留）*/
#app #view .chat-side-head input,
#app #view .chat-side input,
#app #view .chat-side-head input[type="text"],
#app #view .chat-side-head input[type="search"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 5px 8px !important;
}


/* ===== 第十二轮：搜索对话粉色底色终极清理 =====
   之前虽然写了 #app #view .chat-side-head { background: transparent !important; }，
   但 macaron 段 line 3431-3434 还有 .chat-head, .chat-side-head 的 var(--pink-faint) 62% 
   半透粉底。直接删掉 macaron 那条 + 在末尾再追加一个终极兜底（针对所有可能的「搜索框容器」）。
   这里是 macaron 段 .chat-side-head 粉色底的源（已删）。
/* 终极兜底：所有可能的「侧栏头部 / 搜索框容器」—— 6 种选择器一起 + 强制 white-space */
#app #view .chat-side-head,
#app #view .chat-head,
#app #view .chat-side > .chat-side-head,
#app #view .chat-side-head > *,
#app #view .chat-side-head > input,
#app #view .chat-side-head > div,
#app #view .chat-side-head form {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ===== 第十三轮：全站搜索框终极清理 =====
   之前几轮没清掉：
     - .search-box（home 全局搜索容器）line 679 background: var(--paper) + 3px 黑边 + 投影
     - .px-input（library / notes / 等搜索框）macaron 段 line 2200+ 自带边框+底色
     - #home-search / #chat-search / #lib-search / #nt-search 各 view 搜索框
     - view-tools 内嵌的 input（type=text / search）
   全部清掉。 */
/* .search-box 容器本身边框 + 底色 + 投影全清 */
#app #view .search-box,
#app #view .search-box::before,
#app #view .search-box::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}
/* .px-input（library / notes 搜索框 / 通用输入）—— 之前第四轮给了 1px 极细边 + 极淡底色，
   现在用户反馈这是「实色」，彻底清掉 */
#app #view .px-input, #app #view .px-textarea, #app #view .px-select{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* 各 view 搜索框 ID —— 9 种一起全清 */
#app #view #home-search, #app #view #home-search-go, #app #view #chat-search, #app #view #lib-search, #app #view #nt-search, #app #view #goal-search, #app #view #ledger-search, #app #view #calendar-search, #app #view #work-search{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* view-tools 内嵌 input / select（任何 view 的「顶部工具条」搜索/筛选）—— 终极兜底 */
#app #view .view-tools input,
#app #view .view-tools select,
#app #view .view-tools textarea,
#app #view .view-tools button,
#app #view .tools-row input,
#app #view .tools-row select,
#app #view .view-tools .chip {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ===== 第十四轮：view 内所有元素底色 + 边框 + 阴影全清零 =====
   按用户要求，严格执行：所有 view 内的元素都要和搜索框一样，
   底色 / 边框 / 阴影 / 玻璃态 / 噪点 / 渐变 全部透明。
   第一步：通配 * 把所有元素的 background / border / box-shadow / backdrop-filter 清零。
   第二步：单独恢复「必要元素」（input / textarea / button / .btn / .chip / .icon-btn 等）。
   第三步：单独恢复「强调态白字元素」（work-col-title .n / cal-cell.today / rq-thumb-x 等）。
   这样三层覆盖，保证 view 内没有一处残留。 */
/* 第一步：view 内所有元素 —— 通配清零（最强兜底）*/
#app #view *,
#app #view *::before,
#app #view *::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  outline: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
}
/* 第二步：恢复必要元素的最小可见性（input 边框 + 按钮主色）*/
/* input / textarea / select —— 1px 极细边 + 极淡底色，让用户看见可输入 */
#app #view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #app #view textarea, #app #view select, #app #view .px-input, #app #view .px-textarea, #app #view .px-select{
  background-color: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}
/* checkbox / radio —— 保持透明（原生控件）*/
#app #view input[type=checkbox],
#app #view input[type=radio] {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}
/* 按钮（.btn / .btn-primary / .icon-btn / .chip / .top-btn / .top-now / .user-chip）—— 保持极简可见 */
#app #view .btn, #app #view .btn-sm, #app #view .btn-block, #app #view .btn-quote, #app #view .icon-btn, #app #view .chip, #app #view .top-btn, #app #view .top-now, #app #view .user-chip, #app #view .auth-tab, #app #view .ctx-item{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  transform: none !important;
  font-weight: 500 !important;
}
/* 主按钮（.btn-primary）/ .chip.active —— 整块删除（14 行）：
   这里给主按钮恢复「粉底白字」，但第十五轮（现已移到 5130-5155）行号更靠后、
   同为 !important，把 background-color 改成 transparent、color 改成 var(--pink-deep)，
   并且 border/text-shadow/transform 在那边也各写了一遍 —— 所以这 14 行从未生效过。
   最终生效的是 5130-5155 + 5181-5182 那一组。 */
/* 空 / 加载 / 错误状态 —— 虚线边框保留 */
#app #view .empty-state,
#app #view .loading-state,
#app #view .error-state {
  border: 2px dashed var(--bg-2) !important;
  border-color: var(--bg-2) !important;
  border-radius: var(--rnd-md) !important;
  text-shadow: none !important;
}
/* 分割线 —— 极细 1px */
#app #view hr,
#app #view .divider,
#app #view .vsep,
#app #view [role="separator"] {
  border: 0 !important;
  border-top: 1px solid var(--line-soft) !important;
  background: transparent !important;
  background-image: none !important;
}
/* 第三步（整块删除，33 行）：
   这里原本给 14 类「强调态」恢复「白字 + 彩底」，但后面的第十五轮
   （现已移到 5183-5206：同批选择器 + background:transparent + color:var(--ink) + text-shadow:none）
   行号更靠后、且同为 !important，会把这里的 color 与 background-color 全部覆盖 ——
   也就是说这 33 行从写下的那一刻起就从未生效过，留着只会误导后来人。
   最终生效的是下面 5183-5215 那一组；.rq-step-chip 的浅粉底例外仍保留（见下）。 */
/* 例外：浅粉底 + 深色字（避免冲突）*/
#app #view .ws-chip{
  background-color: var(--pink-faint) !important;
  background-image: none !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}


/* 2) .btn-primary 强调态改为「粉字 + 透明底」—— 无色块 */
#app #view .btn-primary,
#app #view .btn-primary:hover,
#app #view .btn-primary:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--pink-deep) !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  font-weight: 400 !important;
}
/* 3) .chip.active 选中态改为「粉字 + 透明底」 */
#app #view .chip.active,
#app #view .chip.active:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--pink-deep) !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}
/* 4) 之前「第六轮」恢复的 14 类白字强调态 —— 改为「深色字 + 透明底」 */
#app #view .work-col-title .n, #app #view .work-stat .n, #app #view .ws-chip, #app #view .todo-item.done .ti-check, #app #view .cal-cell.today, #app #view .lg-tab.active, #app #view .lg-cat-item.active, #app #view .bk-tag, #app #view .chat-item.active, #app #view .msg.user .m-bubble, #app #view .auth-tab.active, #app #view .lg-mini-chip.ok{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* 主按钮 + chip.active + 选中态用「色字」提示（不加底色） */
#app #view .btn-primary { color: var(--pink-deep) !important; }
#app #view .chip.active { color: var(--pink-deep) !important; }
#app #view .work-col-title .n { color: var(--pink-deep) !important; }
#app #view .work-stat .n { color: var(--pink-deep) !important; }
#app #view .ws-chip { color: var(--pink-deep) !important; }
#app #view .bk-tag { color: var(--ink-soft) !important; }
#app #view .lg-mini-chip.ok { color: var(--ink) !important; }
#app #view *, #app #view *::before, #app #view *::after {
  box-shadow: none !important;
}
#app #view .view-head {
  border-bottom: 1px solid var(--line-soft) !important;
}
::-webkit-scrollbar-track { background: transparent !important; border-left: none !important; }
::-webkit-scrollbar-thumb { background: transparent !important; border: none !important; }


/* ===== 第十六轮：顶栏功能全清（脱离 #view 作用域） =====
   之前所有 * 通配都限定在 #app #view 内，但 #topbar 是 #app 子元素而非 #view 子元素，
   所以 #topbar 内的 .top-btn / .top-now / .user-chip / .logo 等顶栏功能完全没被清理，
   这一轮把顶栏所有功能按钮也按第十五轮方案全清零。 */
/* 顶栏 #topbar 整体 —— 无背景 / 无边 / 无阴影 / 无投影（玻璃态早清过）*/
#topbar,
#topbar::before,
#topbar::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
/* 顶栏 logo 文字 + 图标 —— 无投影 */
#topbar .logo,
#topbar .logo-halo,
#topbar .logo-name,
#topbar .logo-en,
#topbar .top-date {
  background: transparent !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#topbar .top-btn,
#topbar .top-btn:hover,
#topbar .top-btn:active,
#topbar .top-btn:focus,
#topbar .top-btn.on,
#topbar .top-btn.active,
#topbar .top-now,
#topbar .top-now:hover,
#topbar .top-now.playing,
#topbar .top-now .tn-ico,
#topbar .top-now .tn-name,
#topbar .user-chip,
#topbar .user-chip:hover,
#topbar .user-ico,
#topbar .uav,
#topbar #btn-theme,
#topbar #btn-music,
#topbar #btn-lm,
#topbar #btn-recent,
#topbar #btn-bili,
#topbar #btn-ref,
#topbar #btn-settings,
#topbar #btn-logout {
  border-color: transparent !important;
  border-image: none !important;
  border-image-source: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  letter-spacing: 0 !important;
  animation: none !important;
}
/* 用户头像内框 2px dotted var(--ink) —— 去掉 */
#topbar .user-chip .uav { border: none !important; box-sizing: border-box !important; }
/* 当前播放图标跳动动画 beat —— 保留（视觉提示在播）*/
#topbar .top-now.playing .tn-ico { animation: beat 1.2s ease-in-out infinite !important; }
/* 顶栏按钮内 svg/i —— 跟随按钮自身颜色（不强制覆盖）*/
#topbar button svg, #topbar button i, #topbar .top-btn i, #topbar .top-btn svg,
#topbar .top-now svg, #topbar .top-now i, #topbar .user-chip svg, #topbar .user-chip i {
  fill: currentColor !important;
  stroke-width: 1.3 !important;
}

/* ① 视图页通用容器与三段式（标题 / 筛选 / 内容） */
.view-page { display: flex; flex-direction: column; gap: 14px; }
.view-page > .view-page-filters { margin-bottom: 0; }

/* ② 统一三态：空 / 加载 / 错误（替换各视图的 inline 灰色虚线块） */
.empty-state,
.loading-state,
.error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  border: 2px dashed var(--bg-2);
  border-radius: var(--rnd-md);
  background: transparent;
  text-align: center;
  font-size: 13px; line-height: 1.8;
  color: var(--gray-deep);
  min-height: 120px;
}
.empty-state .es-ico,
.loading-state .ls-ico,
.error-state .er-ico {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pink-faint);
  color: var(--pink-deep);
  font-size: 17px;
  margin-bottom: 4px;
}
.empty-state .es-msg { color: var(--gray-deep); }
.empty-state .es-cta { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.loading-state { color: var(--ink-soft); }
.loading-state .ls-bar {
  width: 140px; height: 4px;
  background: var(--bg-2);
  border-radius: var(--rnd-sm);
  overflow: hidden;
  position: relative;
}
.loading-state .ls-bar::after {
  content: ''; display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--pink), var(--gold));
  border-radius: var(--rnd-sm);
  animation: ds-shine 1.4s ease-in-out infinite;
}
@keyframes ds-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.error-state { color: var(--danger, #bb736b); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.error-state .er-ico { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger, #bb736b); }
.error-state .er-msg { color: var(--danger, #bb736b); }
.error-state .er-cta { margin-top: 12px; }

/* ③ 卡片网格：与首页 .home-grid 一致 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* ④ 两栏 / 三栏布局：参考工作台 work-columns / 需求 rq-lists */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ⑤ 工具行（搜索框 + 筛选 chip + 操作） */
.tools-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.tools-row .tools-grow { flex: 1; min-width: 160px; }
.tools-row .tools-right { display: flex; gap: 6px; flex-wrap: wrap; }

/* ⑥ 视图头：去除早期硬边框与渐变底，保留柔底 + 留白 */
.view-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 0;
}
.view-head .view-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; color: var(--ink-soft); letter-spacing: 1px;
}
.view-head .view-title .sub {
  font-size: 9px; color: var(--gray-deep); letter-spacing: 2px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--rnd-sm);
  margin-left: 4px;
}
.view-head .view-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ⑦ 列表项 / 卡片去像素化（统一走 token） */
.todo-item, .order-card, .nt-card, .lib-card, .goal-card{
  background: transparent;
  border: none;
  border-radius: var(--rnd-md);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.todo-item:hover, .order-card:hover, .nt-card:hover, .lib-card:hover, .goal-card:hover{
  background: var(--pink-faint);
  box-shadow: 0 4px 14px -4px rgba(136, 152, 174, .42);
}
.todo-item:active, .order-card:active, .nt-card:active, .lib-card:active, .goal-card:active{
  transform: translateY(1px);
}

/* ⑧ 状态：选中 / 完成 / 逾期（统一 hover/active/selected） */
.todo-item.done, .order-card.done, .goal-card.done {
  opacity: .6;
}
.todo-item.done .ti-title, .order-card.done .oc-client {
  text-decoration: line-through;
  text-decoration-color: var(--gray-deep);
}
.selected-day, .selected-tile {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ⑨ 视图内 chip 工具条统一 */
.view-page-filters .chip + .chip { margin-left: 0; }



/* ===== 第十七轮：顶栏点开后的弹窗卡片全清零 + 移除遮罩 =====
   浮窗（#music-panel / #lyric-panel / #bili-panel / #ref-panel / #lm-panel）、
   模态弹窗（.modal-card / #auth-card / #ctx-menu / .toast）按"无背景 / 无边框 / 无磨砂玻璃 / 无噪点"统一处理。
   重点：.modal-mask 暗色遮罩移除（这就是"看得见背景看不见内容"的元凶 —— 透明弹窗被 50% 黑罩盖住，
   内容自然看不见）。视频区（.bili-stage / .bili-player）保留深色实心，
   避免玻璃态盖住视频发花。 */

/* 1) #modal-root 是不拦截事件的透明容器，保持透明；
   .modal-mask 不再清零 —— 它的 iOS 磨砂 scrim 统一由后面的规则给（!important）。 */
#modal-root {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) 轻量通知 .toast —— 透明 + 无边 + 无阴影 + 无玻璃（其余弹窗不再在此清零）
   注意：第十七轮原本把 .modal-card / 各浮窗面板 / .auth-card / #ctx-menu 全部清成透明，
   其中 .modal-card.modal-lg（特异性 0,2,0）会压过第十九轮的玻璃背板规则，
   导致「外观工坊」这类大弹窗仍是透明、滚动内容直接透出壁纸（"穿过玻璃"）。
   现改为：这些弹窗的磨砂玻璃背板统一由「第十九轮」规则负责，此处只保留 .toast。 */
.toast {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  outline: none !important;
  text-shadow: none !important;
}
/* ::before / ::after 装饰一起清 */
#music-panel::before, #music-panel::after, #lyric-panel::before, #lyric-panel::after, #ref-panel::before, #ref-panel::after, #lm-panel::before, #lm-panel::after, .modal-card::before, .modal-card::after, .auth-card::before, .auth-card::after, .toast::before, .toast::after, #ctx-menu::before, #ctx-menu::after{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  content: none !important;
  display: none !important;
}

/* 3) 弹窗标题栏 —— 去掉渐变背景 + 边框 + 装饰字符 */
.modal-head, .panel-head, .lp-head, .ref-head, .lm-head, .chat-head, .chat-side-head{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}
.modal-head::before, .modal-head::after, .panel-head::before, .panel-head::after, .lp-head::before, .lp-head::after, .ref-head::before, .ref-head::after, .lm-head::before, .lm-head::after, .chat-head::before, .chat-head::after, /* 4) 弹窗底部按钮栏（.modal-foot）—— 透明 */
.modal-foot{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* 5) 弹窗四角装饰（.modal-corner）已删：HTML/JS 零引用 */
/* 6) 视频区 / 播放条 —— 保留深色实心（玻璃面会盖花视频）*/

/* 7) 弹窗内部按钮 / input / 文本元素 —— 保留可见性（不强制改色）*/
#music-panel button, #music-panel input, #music-panel select, #music-panel textarea, #music-panel label, #lyric-panel button, #lyric-panel input, #ref-panel button, #ref-panel input, #ref-panel select, #ref-panel textarea, #lm-panel button, #lm-panel input, #lm-panel select, #lm-panel textarea, .modal-card button, .modal-card input, .modal-card select, .modal-card textarea, .modal-card label, .auth-card button, .auth-card input, .auth-card select, .auth-card label{
  color: var(--ink);
  background: transparent;
}

/* 8) 弹窗内的输入框 —— 干净实色，清晰可读（无磨砂玻璃、无模糊层） */
#music-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #music-panel textarea, #music-panel select, #lyric-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #ref-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #lm-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #lm-panel textarea, #lm-panel select, .modal-card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), .modal-card textarea, .modal-card select, .auth-card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), .auth-card textarea, .auth-card select{
  border: 1px solid var(--line-soft) !important;
  background: color-mix(in srgb, var(--field-bg) 24%, transparent) !important;
  color: var(--ink) !important;
  outline: none;
}
/* 弹窗输入框聚焦：强调色描边 */
#music-panel input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #music-panel textarea:focus, #music-panel select:focus, #lyric-panel input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #ref-panel input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #lm-panel input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), #lm-panel textarea:focus, #lm-panel select:focus, .modal-card input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), .modal-card textarea:focus, .modal-card select:focus, .auth-card input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]), .auth-card textarea:focus, .auth-card select:focus{
  border-color: var(--accent-ui) !important;
}

/* 9) 右键菜单 / Toast 列表项 —— 透明 */
#ctx-menu .ctx-item,
.toast {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink);
}

/* ===== 第十八轮：弹窗"无框杂志风"叠层 ——
   第十七轮把 .modal-mask / .modal-card 都设成完全透明 + 无背板，
   弹窗打开后背后页面文字直接穿透到弹窗文字上，视觉严重重叠。
   这里只动遮罩和 #view 的退场：
   - 遮罩：color-mix 半透明 + 16px 模糊 + 轻微饱和（双前缀，Safari 兼容）
   - 背后：#view 走 opacity 0.35 + scale 0.98（主视觉重灾区），顶栏/侧栏只淡不缩
     （scale 会改变 fixed 定位参考系，避开侧栏跑位）
   - 弹窗卡片本身仍然无框无底色（继承第十七轮），只靠留白和字重分层级
   - 关闭时全部恢复原状（0.2s ease） */

/* 1) 弹窗遮罩：iOS 磨砂 scrim —— 背后整页（含顶栏/导航）统一模糊压白，
   文字不可读但留有环境色，玻璃卡片浮在这层上做边缘折射。
   旧版用全透明遮罩 + #view opacity:.35 的方案文字仍可读，是"穿透重影"的根源。 */
.modal-mask {
  background: rgba(246, 248, 250, .55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  background-image: none !important;
  /* 移动端安全区 + 加大上下留白，弹窗卡片有呼吸空间 */
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
:root.dark .modal-mask {
  background: rgba(14, 16, 20, .62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
}

/* 2) 弹窗打开时：scrim 已经把背后糊掉，#view 不再缩小变淡（避免缩放重影）；
   顶栏/导航只禁用误点，视觉上交给 scrim 统一处理。 */
body.modal-open #view {
  opacity: 1;
  transform: none;
}
body.modal-open #topbar,
body.modal-open #nav,
body.modal-open .nav-track {
  pointer-events: none;
}

/* 默认就有 0.2s 过渡，开/关都平滑（弹窗的 popin 之外再叠一层） */
#view { transition: opacity .2s ease, transform .2s ease; }
#topbar, #nav, .nav-track { transition: opacity .2s ease; }

/* 3) 弹窗卡片：确保在遮罩之上、且不被父级 overflow 裁掉
   #modal-root 是 position:fixed; inset:0; z-index:230（body 直接子元素，高于登录层 200），
   没有任何 transform/filter 的祖先 → 不会成为 fixed 的包含块 → 不会被裁。
   卡片在 .modal-mask 内部（mask 又是 flex 居中容器），自然就在遮罩之上。
   max-height 用 dvh：手机弹出键盘时动态视口高度变小，卡片自动收缩 */
.modal-card {
  position: relative;
  z-index: 1;
  max-height: min(86vh, calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
@supports not (height: 100dvh) {
  .modal-card { max-height: 86vh; }
}

/* ================================================================
   移动端交互修复（2026-10-09 · 第二批：交互）
   纯 CSS / 响应式，不碰业务逻辑：
   ① 触屏无 hover，原本靠 :hover 揭开的删除键在手机上永远不可见 → 常显
   ② 触屏点击区过小 → 关键控件放大到触屏友好尺寸
   ③ 当前页高亮在手机端太弱（::after 下划线被隐藏）→ 加底色 + 下划线
   ================================================================ */

/* ① 删除键：触屏直接常显，不再依赖 hover（桌面 hover 行为不变） */
@media (hover: none) {
  .order-card .oc-actions { display: flex; }
  .lib-card .lc-del { display: flex; }
  .nt-card .ntc-del { opacity: 1; }

  /* 删除键点击区放大到触屏友好 */
  .order-card .oc-actions .icon-btn{ width: 36px; height: 36px; font-size: 13px; }
  .lib-card .lc-del,
  .nt-card .ntc-del { width: 36px; height: 36px; font-size: 14px; line-height: 1; }
}

/* ② 顶栏按钮 / 导航项：触屏点击区放大 */
@media (hover: none) {
  /* 触屏点按区统一 ≥ 44×44（原来是 40，够不着标准） */
  .top-btn { width: 44px; height: 44px; font-size: 17px; }
  #nav .witem { min-height: 44px; }
}

/* ③ 移动端：弧形滚轮降级为顶部横滑一条 + 点按区放大
   #nav 由 main.js 的 renderNav() 渲染成 .witem（弧形滚轮）。
   注意 3554 行那条 #nav 规则没有加媒体查询，会把移动端布局覆盖成 190×360 的竖块
   （导航项被裁掉、整块压在内容上方）—— 所以必须在这里显式还原成横滑一条；
   .witem 上的 transform/opacity/filter 是 initWheel 写的行内样式，用 !important 顶掉。 */

/* ④ 首页固定头部造成文字重叠
   .home-head（问候语 + 时钟 + 搜索框）是 position:fixed，而 design-system
   已把它的底色清成了透明 —— 内容滚上来会直接从它下面穿过去，
   问候语和下面的卡片文字就叠在一起了。
   无框风格不能给它补底色块，所以手机上让它回到普通文档流，跟着页面一起滚。 */


/* ================================================================
   第十九轮：弹窗（点击后弹出的所有窗口）保持透明玻璃感
   弹窗原本就是「透明卡片 + 背后液态玻璃 / 壁纸」的玻璃观感（真正的折射由
   glass.bundle.js 的 liquid-glass-react 负责；本文件只让卡片透明、不挡玻璃）。
   之前误把卡片设成实色 --paper，把玻璃感盖没了；这里改回透明，并明确不加任何
   CSS backdrop-filter 磨砂（避免糊成一层「模糊雾」）。

   统一覆盖范围（避免逐个漏改）：
     .modal-card         —— 所有模态框（外观工坊 / 确认框 / 各类弹窗）
     #music-panel #lyric-panel #bili-panel #ref-panel #lm-panel  —— 浮窗面板
     .px-panel           —— 通用弹窗面板
     .auth-card          —— 登录卡
     #ctx-menu           —— 右键菜单
   注：toast 通知 / search 下拉 / view 内嵌面板不在「弹窗」范畴，保持原样。
   ================================================================ */
.modal-card, #music-panel, #lyric-panel, #ref-panel, #lm-panel, .px-panel, .auth-card, #ctx-menu{
  background: transparent !important;
  /* 不要实色 border：玻璃层 inset:0 只铺到内边框，实色边框会外凸 1px 导致「卡片框」与「玻璃框」错位。
     改用 outline 画在卡片内侧 1px 处，与玻璃表面完全重合，不再有一道外凸的框线。 */
  border: none !important;
  outline: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  outline-offset: -1px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
}
/* 吸顶标题栏 / 吸底按钮栏：透明，保持玻璃连贯；用极细线界定边界 */
.modal-head, .modal-foot { background: transparent !important; }
.modal-head { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important; }
.modal-foot { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important; border-bottom: none !important; }

/* 弹窗圆角跟随「设置→液态玻璃」的 cornerRadius：玻璃层与边框圆角始终一致，不再错位/超出 */
.modal-card, #music-panel, #lyric-panel, #ref-panel, #lm-panel, .auth-card, .px-panel, #ctx-menu, #lk-glass-box{
  border-radius: var(--glass-radius, var(--rnd-md));
}

/* ===== 登录界面：液态玻璃（仅 tab 与主按钮：实色底 + 实色描边 → 玻璃面） =====
   两处前提：
     1) 未登录时 body 同样带 .home-on，而首页无框设计把 --glass-* 全清零了，
        所以玻璃变量必须在 #auth-screen 作用域内重新给值（ID 优先级高于 body.home-on）；
     2) 全站 *:not(.glass__warp){backdrop-filter:none!important} 会压掉模糊，
        同样靠 #auth-screen 的 ID 选择器夺回。 */
#auth-screen {
  --glass-bg: rgba(255, 255, 255, .34);
  --glass-bg-strong: rgba(255, 255, 255, .5);
  --glass-line: rgba(255, 255, 255, .45);
  --glass-blur-sm: blur(9px) saturate(1.55);
  --glass-shadow-sm: 0 10px 22px -14px rgba(136, 152, 174, .3), inset 0 1px 0 var(--line-soft);
}
.dark #auth-screen {
  --glass-bg: rgba(44, 50, 60, .34);
  --glass-bg-strong: rgba(44, 50, 60, .5);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-shadow-sm: 0 10px 22px -14px rgba(0, 0, 0, .46), inset 0 1px 0 var(--line-soft);
}
/* 不支持毛玻璃：玻璃退化成实心，保证文字可读 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #auth-screen { --glass-bg: rgba(255, 255, 255, .92); --glass-bg-strong: rgba(255, 255, 255, .96); }
  .dark #auth-screen { --glass-bg: rgba(44, 50, 60, .94); --glass-bg-strong: rgba(44, 50, 60, .97); }
}
#auth-screen .auth-tab,
#auth-screen #auth-submit {
  background: var(--glass-bg) !important;
  background-image: none !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  color: var(--ink) !important;
}
#auth-screen .auth-tab:hover,
#auth-screen #auth-submit:hover {
  background: var(--glass-bg-strong) !important;
}

/* =============================================================================
   手机端布局（<900px）
   参照外部稿「手机端-真实功能.html」的玻璃质感 + 文字发光重做。
   · 断点沿用本项目既有的 900px（桌面端 min-width:901px 及以上一行未动）
   · 配色一律取本项目素雅变量（--ink / --pink / --pink-deep / --gold / --sage），
     未引入参考稿的紫红
   · 导航、路由、事件、接口全部沿用原有实现，本段只负责「长什么样」
   ========================================================================== */
@media (max-width: 900px) {
  /* 变量挂在 body 上而不是 :root：
     「body.home-on」那段（全站生效、无 media）把 --glass-* 整组清成了 transparent，
     它的选择器强度高于 :root —— 只把变量挂在 :root 上会被它整段压掉，
     导致 var(--glass-bg) 解析成 transparent（玻璃卡全透明）。
     本段位置更靠后，同强度下能覆盖回来。 */
  body,
  body.home-on {
    /* 文字发光 */
    --tsh: 0 1px 8px rgba(255, 255, 255, .55), 0 0 2px rgba(255, 255, 255, .6);
    --tsh-soft: 0 1px 6px rgba(255, 255, 255, .45);
    /* 玻璃面 */
    --glass-bg: rgba(255, 255, 255, .34);
    --glass-bg-2: rgba(255, 255, 255, .5);
    --glass-line: rgba(255, 255, 255, .72);
    --glass-hi: rgba(255, 255, 255, .9);
    --glass-blur: blur(4px) saturate(2.2);
    --glass-blur-sm: blur(3px) saturate(2);
    --glass-shadow: 0 12px 34px -20px rgba(104, 117, 137, .20), inset 0 1px 0 var(--glass-hi);
    --glass-shadow-sm: 0 7px 18px -12px rgba(104, 117, 137, .16), inset 0 1px 0 var(--glass-hi);
    --r-xs: 8px; --r-sm: 14px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
    --ease: cubic-bezier(.4, 0, .2, 1);
  }
  :root.dark body {
    --tsh: 0 1px 10px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .45);
    --tsh-soft: 0 1px 7px rgba(0, 0, 0, .42);
    --glass-bg: rgba(44, 50, 60, .34);
    --glass-bg-2: rgba(44, 50, 60, .5);
    --glass-line: rgba(255, 255, 255, .26);
    --glass-hi: rgba(255, 255, 255, .22);
    --glass-shadow: 0 12px 34px -20px rgba(0, 0, 0, .55), inset 0 1px 0 var(--glass-hi);
    --glass-shadow-sm: 0 7px 18px -12px rgba(0, 0, 0, .45), inset 0 1px 0 var(--glass-hi);
  }

  /* ---- 玻璃卡：底色 + 背景模糊 + 白色玻璃边 + 顶部内高光 + 斜向高光层 ---- */
  .g {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--glass-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .g::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 3 !important;
    box-shadow: inset 0 1px 0 var(--glass-hi) !important;
  }
  .g > * { position: relative; z-index: 2; }
  .g::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(118deg, rgba(255, 255, 255, .24), transparent 32%, transparent 64%, rgba(236, 238, 241, .14)) !important;
    mix-blend-mode: screen !important;
  }
  .tw { text-shadow: var(--tsh); }

  /* ---- 面板 / 页头 ---- */
  .panel { padding: 16px; margin-bottom: 12px; }
  .p-k {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    letter-spacing: .22em !important;
    color: var(--pink-deep) !important;
    margin-bottom: 10px !important;
    text-shadow: var(--tsh-soft) !important;
  }
  .vhead { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
  .vhead .ico svg { width: 20px; height: 20px; stroke: var(--pink-deep); fill: none; stroke-width: 1.3; }
  .vhead h1 { font-size: 17px; font-weight: 500; letter-spacing: .04em; text-shadow: var(--tsh); }
  .vhead .sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; color: var(--gray-deep); }
  .vhead .tools { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }

  /* ---- 无边框文字按钮 / 筛选标签 ---- */
  .tbtn {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    color: var(--ink-soft) !important;
    text-shadow: var(--tsh-soft) !important;
    white-space: nowrap !important;
  }
  .tbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; }
  .tbtn:hover, .tbtn.main { color: var(--pink-deep); }
  .tabs {
    display: flex !important;
    gap: 2px !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .chip {
    position: relative !important;
    overflow: hidden !important;
    padding: 9px 12px !important;
    font-size: 11.5px !important;
    color: var(--ink-soft) !important;
    text-shadow: var(--tsh-soft) !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
  }
  .chip:hover { color: var(--ink); }
  .chip.on { color: var(--pink-deep); border-bottom-color: var(--pink-deep); }

  /* ---- 设置行 / 开关 ---- */
  .sr {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    cursor: pointer !important;
  }
  .sr:last-child { border-bottom: none; }
  .sr .ic { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
  .sr .ic svg { width: 17px; height: 17px; stroke: var(--ink-soft); fill: none; stroke-width: 1.35; }
  .sr .tx { flex: 1; }
  .sr .tx .a { font-size: 13px; }
  .sr .tx .b { font-size: 10.5px; color: var(--gray-deep); margin-top: 3px; }
  .sr .v { font-family: var(--mono); font-size: 9px; color: var(--gray-deep); letter-spacing: .08em; }
  .sw {
    width: 38px; height: 20px !important;
    border-radius: 10px !important;
    border: 1.2px solid var(--line) !important;
    position: relative !important;
    flex: none !important;
    transition: border-color .15s !important;
  }
  .sw::after {
    content: '' !important;
    position: absolute !important;
    top: 2.6px; left: 3px !important;
    width: 12px; height: 12px !important;
    border-radius: 50% !important;
    border: 1.2px solid var(--gray-deep) !important;
    transition: all .15s !important;
  }
  .sw.on { border-color: var(--pink-deep); }
  .sw.on::after { transform: translateX(17px); border-color: var(--pink-deep); }

  /* ---- 首页 ---- */
  .h-hi {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 7.6vw, 34px) !important;
    letter-spacing: .06em !important;
    line-height: 1.25 !important;
    text-shadow: var(--tsh) !important;
  }
  .h-phrase { font-size: 12.5px; line-height: 1.9; color: var(--ink); text-shadow: var(--tsh-soft); margin-top: 8px; }
  .h-clock { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
  .h-clock .d { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); }
  .h-clock .h { color: var(--pink-deep); font-size: 12px; }
  .h-clock .t { font-family: var(--mono); font-size: 17px; color: var(--ink); text-shadow: var(--tsh); }
  .h-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
    border-bottom: none !important;
    padding: 10px 2px !important;
  }
  .h-search svg { width: 15px; height: 15px; stroke: var(--pink-deep); fill: none; stroke-width: 1.4; flex: none; }
  .h-search button { color: var(--pink-deep); background: none; border: none; padding: 0; }
  .h-search input { flex: 1; background: none; border: none; outline: none; font-size: 13px; color: var(--ink); }
  .h-search input::placeholder { color: var(--gray-deep); }

  .stat {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    cursor: pointer !important;
  }
  .stat .num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 44px; line-height: .9; color: var(--ink); text-shadow: var(--tsh); min-width: 64px; }
  .stat .meta { flex: 1; }
  .stat .k { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--pink-deep); text-shadow: var(--tsh-soft); }
  .stat .s { font-size: 11.5px; color: var(--ink-soft); text-shadow: var(--tsh-soft); margin-top: 7px; line-height: 1.65; }
  .stat .go { align-self: center; color: var(--ink-soft); }
  .stat .go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }

  .quote { padding: 22px 0; border-bottom: 1px solid var(--line); }
  .quote .k { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; color: var(--pink-deep); text-shadow: var(--tsh-soft); }
  .quote .tx { font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.8; margin-top: 12px; color: var(--ink); text-shadow: var(--tsh); }
  .quote .from { font-size: 11px; color: var(--gray-deep); text-shadow: var(--tsh-soft); margin-top: 8px; }
  .quote .row { display: flex; align-items: center; margin-top: 12px; }
  .quote .tag { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; color: var(--gray-deep); }

  .recent { padding-top: 18px; }
  .recent .k { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; color: var(--ink-soft); margin-bottom: 4px; }
  .r-item {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .r-item .dot { width: 5px; height: 5px; border: 1.2px solid var(--pink-deep); border-radius: 50%; flex: none; }
  .r-item .tx { flex: 1; font-size: 12.5px; color: var(--ink); }
  .r-item .tm { font-family: var(--mono); font-size: 8.5px; color: var(--gray-deep); }

  /* ---- 待办 ---- */
  .rowi {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .rowi:last-child { border-bottom: none; }
  .rowi .bx {
    width: 16px; height: 16px !important;
    border-radius: 5px !important;
    border: 1.3px solid var(--line) !important;
    flex: none !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
  }
  .rowi .bx svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; opacity: 0; }
  .rowi.done .bx { border-color: var(--pink-deep); }
  .rowi.done .bx svg { opacity: 1; color: var(--pink-deep); }
  .rowi .tx { font-size: 13px; }
  .rowi.done .tx { color: var(--gray-deep); text-decoration: line-through; }
  .rowi .tm { margin-left: auto; font-family: var(--mono); font-size: 8.5px; color: var(--gray-deep); }
  .day-l {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: .2em !important;
    color: var(--pink-deep) !important;
    margin: 14px 0 2px !important;
    text-shadow: var(--tsh-soft) !important;
  }
  .day-l:first-child { margin-top: 0; }

  /* ---- 专注 ---- */
  .focus { padding: 20px; text-align: center; margin-bottom: 12px; }
  .focus .modes { display: flex; justify-content: center; gap: 2px; margin-bottom: 14px; flex-wrap: wrap; }
  .focus .clk { font-family: var(--mono); font-size: 44px; color: var(--ink); text-shadow: var(--tsh); letter-spacing: .04em; }
  .focus .ctl { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .focus .tip { font-size: 11px; color: var(--gray-deep); margin-top: 12px; line-height: 1.8; }

  /* ---- 目标 ---- */
  .goal { padding: 16px; margin-bottom: 12px; }
  .goal .g-name { display: flex; align-items: center; gap: 8px; }
  .goal .g-name b { font-size: 14px; font-weight: 500; text-shadow: var(--tsh); }
  .goal .g-cat { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--pink-deep); }
  .goal .heat { display: flex; gap: 3px; margin: 12px 0 10px; }
  .goal .heat i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
  .goal .heat i.h1 { border-color: var(--pink-deep); background: rgba(166, 144, 132, .14); }
  .goal .heat i.h2 { border-color: var(--pink-deep); background: rgba(166, 144, 132, .34); }
  .goal .g-side { display: flex; gap: 18px; align-items: baseline; }
  .goal .g-side .n { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink); text-shadow: var(--tsh); }
  .goal .g-side .l { font-size: 10px; color: var(--gray-deep); }
  .goal .g-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
  .goal .badge { font-family: var(--mono); font-size: 8px; color: var(--gold); letter-spacing: .1em; }

  /* ---- 订单 ---- */
  .order { padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
  .order .oc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .order .oc-client { font-size: 13px; font-weight: 500; text-shadow: var(--tsh); }
  .order .oc-type { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--ink-soft); }
  .order .oc-amount { margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--ink); text-shadow: var(--tsh); }
  .order .oc-days { font-family: var(--mono); font-size: 9px; color: var(--pink-deep); }
  .order .oc-days.ok { color: var(--sage); }
  .order .oc-days.late { color: var(--gold); }
  .order .oc-detail { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--gray-deep); margin-top: 9px; text-shadow: var(--tsh-soft); }
  .order .oc-detail b { color: var(--ink-soft); font-weight: 400; }
  .order .os-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 10px; }
  .order .os-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--gold)); }
  .order .os-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 10px; }
  .order .os-item { color: var(--gray-deep); cursor: pointer; }
  .order .os-item.done { color: var(--sage); }
  .order .oc-actions { display: flex; gap: 2px; margin-top: 10px; }

  /* ---- 记账 ---- */
  .lge {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .lge:last-child { border-bottom: none; }
  .lge .ic { width: 30px; height: 30px; border-radius: 50%; border: 1.2px solid var(--line); display: grid; place-items: center; flex: none; }
  .lge .ic svg { width: 14px; height: 14px; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; }
  .lge .nm { font-size: 12.5px; }
  .lge .st { font-family: var(--mono); font-size: 8.5px; color: var(--gray-deep); margin-top: 2px; }
  .lge .amt { margin-left: auto; font-family: var(--mono); font-size: 13px; }
  .lge .amt.in { color: var(--sage); }
  .lge .amt.out { color: var(--pink-deep); }

  /* ---- 日历 ---- */
  .cal7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal7 .h { font-family: var(--mono); font-size: 7.5px; color: var(--gray-deep); text-align: center; padding: 5px 0; }
  .cal7 .d { aspect-ratio: 1; display: grid; place-items: center; font-size: 11px; color: var(--ink-soft); border-radius: 50%; cursor: pointer; }
  .cal7 .d.mut { opacity: .32; }
  .cal7 .d.td { border: 1.4px solid var(--pink-deep); color: var(--ink); }

  /* ---- 对话 ---- */
  .chat-m { display: flex; gap: 10px; margin-bottom: 14px; }
  .chat-m .who {
    width: 26px; height: 26px !important;
    border-radius: 50% !important;
    border: 1.2px solid var(--line) !important;
    flex: none !important;
    display: grid !important;
    place-items: center !important;
  }
  .chat-m .who svg { width: 13px; height: 13px; stroke: var(--ink-soft); fill: none; stroke-width: 1.3; }
  .chat-m .bub {
    max-width: 78% !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    border: 1px solid var(--glass-line) !important;
    text-shadow: var(--tsh-soft) !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm) !important;
  }
  .chat-m.me { flex-direction: row-reverse; }
  .chat-in { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
  .chat-in textarea {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    resize: none !important;
    font-size: 12.5px !important;
    color: var(--ink) !important;
    line-height: 1.7 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 8px 2px !important;
  }
  .chat-in textarea::placeholder { color: var(--gray-deep); }
  .chat-side { display: flex; flex-direction: column; gap: 2px; }
  .chat-side .ci {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 4px !important;
    font-size: 12.5px !important;
    color: var(--ink-soft) !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .chat-side .ci.on { color: var(--ink); }
  .chat-side .ci .pin { margin-left: auto; color: var(--pink-deep); }
  .chat-side .ci .pin svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.4; }

  /* ---- 随记 ---- */
  .note-c { padding: 14px 16px; margin-bottom: 10px; }
  .note-c .nt { font-size: 13.5px; font-weight: 500; text-shadow: var(--tsh); display: flex; align-items: center; }
  .note-c .nt .del { margin-left: auto; color: var(--gray-deep); }
  .note-c .nt .del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.4; }
  .note-c .nc { font-size: 12px; line-height: 1.85; color: var(--ink-soft); margin-top: 7px; }
  .note-c .nm2 { display: flex; gap: 8px; font-family: var(--mono); font-size: 8px; color: var(--gray-deep); margin-top: 10px; }


  /* ---- 素材库 ---- */
  .lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .lib-it {
    aspect-ratio: 1 !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--glass-line) !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm) !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }
  .lib-it svg { width: 22px; height: 22px; stroke: var(--ink-soft); fill: none; stroke-width: 1.2; }
  .lib-it .lb { position: absolute; bottom: 6px; font-size: 8px; color: var(--gray-deep); }

  /* ---- 音乐 ---- */
  .mus { padding: 16px; }
  .mus .pl-row { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
  .mus .pl-sel { font-size: 12.5px; color: var(--ink); padding: 6px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
  .mus .search-m { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 8px 2px; margin-bottom: 10px; }
  .mus .search-m svg { width: 14px; height: 14px; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; }
  .mus .search-m input { flex: 1; background: none; border: none; outline: none; font-size: 12.5px; color: var(--ink); }
  .mus .disc {
    width: 84px; height: 84px !important;
    border-radius: 50% !important;
    margin: 10px auto 14px !important;
    position: relative !important;
    border: 1.4px solid var(--pink-deep) !important;
    display: grid !important;
    place-items: center !important;
  }
  .mus .disc::after { content: ''; position: absolute; inset: 13px; border: 1px dashed var(--line); border-radius: 50%; }
  .mus .disc svg { width: 24px; height: 24px; stroke: var(--pink-deep); fill: none; stroke-width: 1.3; }
  .mus .mn { font-size: 14px; text-align: center; text-shadow: var(--tsh); }
  .mus .ma { font-size: 11px; color: var(--gray-deep); text-align: center; margin-top: 4px; }
  .mus .prog { height: 3px; border-radius: 2px; background: var(--line); margin: 14px 8px 6px; position: relative; }
  .mus .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--gold)); }
  .mus .pt { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; color: var(--gray-deep); padding: 0 8px; }
  .mus .ctl { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
  .mus .ctl button { color: var(--ink-soft); }
  .mus .ctl button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; }
  .mus .ctl button:hover { color: var(--pink-deep); }
  .mus .vol { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .mus .vol svg { width: 14px; height: 14px; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; }
  .mus .vol input { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; border-radius: 2px; background: var(--line); outline: none; }
  .mus .vol input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px !important;
    border-radius: 50% !important;
    border: 1.4px solid var(--pink-deep) !important;
    background: transparent !important;
    cursor: pointer !important;
  }
  .mus .vol .vv { font-family: var(--mono); font-size: 9px; color: var(--gray-deep); width: 28px; }
  .mrow {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 4px !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .mrow:last-child { border-bottom: none; }
  .mrow.playing .m-n { color: var(--pink-deep); }
  .mrow .m-n { font-size: 12px; flex: 1; }
  .mrow .m-a { font-size: 10px; color: var(--gray-deep); margin-left: 2px; }

  /* ---- 底部抽屉 + 遮罩 ---- */
  .mask {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    background: rgba(22, 24, 28, .10) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s !important;
  }
  .mask.on { opacity: 1; pointer-events: auto; }
  .sheet {
    position: absolute !important;
    left: 10px; right: 10px; bottom: 10px !important;
    z-index: 60 !important;
    max-height: 82% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--glass-bg-2) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--glass-shadow) !important;
    transform: translateY(110%) !important;
    transition: transform .3s var(--ease) !important;
  }
  .sheet.on { transform: translateY(0); }
  .sheet::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(118deg, rgba(255, 255, 255, .22), transparent 34%, transparent 64%, rgba(236, 238, 241, .14)) !important;
    mix-blend-mode: screen !important;
  }
  .sh-bar {
    padding: 16px 20px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2 !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .sh-bar h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--pink-deep); text-shadow: var(--tsh); }
  .sh-bar .e { font-family: var(--mono); font-size: 8px; letter-spacing: .22em; color: var(--gray-deep); }
  .sh-bar .x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-soft); }
  .sh-bar .x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .sh-body { padding: 4px 20px 22px; overflow-y: auto; scrollbar-width: none; position: relative; z-index: 2; }
  .sh-body::-webkit-scrollbar { display: none; }

  /* ---- 九宫格菜单 ---- */
  .menu-grid { padding: 18px 16px 22px; position: relative; z-index: 2; }
  .m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .mb2 {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 13px 2px !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink-soft) !important;
    text-shadow: var(--tsh-soft) !important;
  }
  .mb2 svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.25; }
  .mb2 .n { font-size: 10.5px; }
  .mb2:hover { color: var(--pink-deep); }

  /* ---- Toast ---- */
  .toast {
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    color: var(--ink) !important;
    text-shadow: var(--tsh) !important;
    border: 1px solid var(--glass-line) !important;
    background: var(--glass-bg-2) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur) !important;
  }

  /* ===== 与既有 JS 生成结构对接 =====
     下面这些 class 由各 view 的 JS 动态产出（业务逻辑未改），手机端补齐参考稿观感。
     选择器带上 body.home-on 是为了压过桌面端同名的 home-on 规则（位置更靠后即可覆盖）。 */
  body .home-editorial,
  body.home-on .home-editorial { padding-top: 0; }
  body .home-head-m { margin-bottom: 20px; }

  body .recent-item,
  body.home-on .recent-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    font-size: 12.5px !important;
    color: var(--ink) !important;
  }
  body .recent-item .r-dot,
  body.home-on .recent-item .r-dot { width: 5px; height: 5px; border: 1.2px solid var(--pink-deep); border-radius: 50%; flex: none; }
  body .recent-item .r-time,
  body.home-on .recent-item .r-time { margin-left: auto; font-family: var(--mono); font-size: 8.5px; color: var(--gray-deep); }

  body .search-results,
  body.home-on .search-results {
    position: static !important;
    margin-top: 12px !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: var(--r-md) !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur) !important;
    padding: 4px 14px !important;
    max-height: 52vh !important;
    overflow: auto !important;
  }
  body .sr-group,
  body.home-on .sr-group { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
  body .sr-group:last-child { border-bottom: none; }
  body .sr-group h4,
  body.home-on .sr-group h4 {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    letter-spacing: .2em !important;
    color: var(--pink-deep) !important;
    margin-bottom: 6px !important;
    text-shadow: var(--tsh-soft) !important;
  }
  body .sr-item,
  body.home-on .sr-item {
    position: relative !important;
    overflow: hidden !important;
    padding: 9px 0 !important;
    font-size: 12.5px !important;
    color: var(--ink) !important;
    cursor: pointer !important;
  }
  body .sr-item:hover,
  body.home-on .sr-item:hover { color: var(--pink-deep); }

  /* ======================================================================
     既有 class → 参考稿观感 的映射层
     说明：下面只改「长什么样」，不碰任何 view 的业务 JS。
     选择器统一带 #app #view 前缀，是为了压过前面去色段同特异性的 !important
     （同特异性 + 位置更靠后 → 本段生效）。
     ====================================================================== */

  /* ---- 页面容器与页头（对应参考稿 .pw / .vhead）---- */
  /* 底栏已由 #view 的 bottom 边界避开，不再需要 104px 底部预留（旧整窗滚动时代遗留） */
  #app #view .view-page { padding: 8px 2px 16px; gap: 12px; }
  #app #view .view-head { align-items: center; gap: 9px; margin-bottom: 16px; }
  #app #view .view-title {
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    text-shadow: var(--tsh) !important;
    background: none !important;
    border: none !important;
  }
  #app #view .view-title svg { width: 20px; height: 20px; stroke: var(--pink-deep); }
  #app #view .view-title .sub {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    letter-spacing: .2em !important;
    color: var(--gray-deep) !important;
    text-shadow: none !important;
  }
  #app #view .view-tools {
    margin-left: auto !important;
    display: flex !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    background: none !important;
    border: none !important;
  }

  /* ---- 卡片 → 玻璃卡（对应参考稿 .g）---- */
  #app #view .px-panel, #app #view .todo-panel, #app #view .goal-card, #app #view .cal-panel, #app #view .cal-day-panel, #app #view .set-card, #app #view .work-col, #app #view .chat-side, #app #view .chat-main, #app #view .nt-card, #app #view .lib-card, #app #view .order-card, #app #view .modal-card, #app #view .lg-day, #app #view .lg-cat-panel{
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--glass-shadow) !important;
    position: relative !important;
  }
  #app #view .px-panel::after, #app #view .goal-card::after, #app #view .order-card::after, #app #view .nt-card::after, #app #view .lib-card::after{
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(118deg, rgba(255, 255, 255, .22), transparent 32%, transparent 64%, rgba(236, 238, 241, .14)) !important;
    mix-blend-mode: screen !important;
  }
  #app #view .goal-card > *, #app #view .order-card > *, #app #view .nt-card > *, #app #view .lib-card > *{ position: relative; z-index: 2; }

  /* ---- 筛选标签（对应参考稿 .tabs / .chip）---- */
  #app #view .view-page-filters,
  #app #view .todo-filters,
  #app #view .lg-filters,
  #app #view .lg-book-chips {
    display: flex !important;
    gap: 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: none !important;
    border: none !important;
  }
  #app #view .view-page-filters::-webkit-scrollbar,
  #app #view .todo-filters::-webkit-scrollbar { display: none; }
  #app #view .chip {
    position: relative !important;
    overflow: hidden !important;
    padding: 9px 12px !important;
    font-size: 11.5px !important;
    color: var(--ink-soft) !important;
    text-shadow: var(--tsh-soft) !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
  }
  #app #view .chip:hover { color: var(--ink); }
  #app #view .chip.active {
    color: var(--pink-deep) !important;
    border-bottom-color: var(--pink-deep) !important;
  }

  /* ---- 待办：日期分组 + 行（对应参考稿 .day-l / .rowi）---- */
  #app #view .todo-day {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: .2em !important;
    color: var(--pink-deep) !important;
    margin: 14px 0 2px !important;
    text-shadow: var(--tsh-soft) !important;
    background: none !important;
    border: none !important;
  }
  #app #view .todo-item {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  #app #view .todo-item:last-child { border-bottom: none; }
  #app #view .todo-item .ti-check {
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 5px !important;
    border: 1.3px solid var(--line) !important;
    font-size: 0 !important;
    color: transparent !important;
    background: none !important;
  }
  #app #view .todo-item.done .ti-check {
    border-color: var(--pink-deep) !important;
    color: var(--pink-deep) !important;
    font-size: 10px !important;
  }
  #app #view .todo-item .ti-title { flex: 1; font-size: 13px; }
  #app #view .todo-item.done .ti-title { color: var(--gray-deep); text-decoration: line-through; }
  #app #view .todo-src { font-size: 11px; opacity: .6; }

  /* ---- 目标：热力格（对应参考稿 .goal .heat）---- */
  #app #view .goal-card .goal-heat,
  #app #view .goal-card .goal-vis { display: flex; gap: 3px; margin: 12px 0 10px; }
  #app #view .goal-card .goal-vis i,
  #app #view .goal-card .goal-heat i {
    width: 14px !important;
    height: 14px !important;
    border-radius: 4px !important;
    border: 1px solid var(--line) !important;
    background: none !important;
  }
  #app #view .goal-card .goal-vis i.on,
  #app #view .goal-card .goal-heat i.on { border-color: var(--pink-deep); background: rgba(166, 144, 132, .28); }

  /* ---- 对话气泡（对应参考稿 .chat-m .bub）---- */
  #app #view .m-bubble {
    max-width: 78% !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    border: 1px solid var(--glass-line) !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm) !important;
    backdrop-filter: var(--glass-blur-sm) !important;
    box-shadow: none !important;
    text-shadow: var(--tsh-soft) !important;
  }
  #app #view .msg.user .m-bubble,
  #app #view .chat-item.me .m-bubble { background: var(--glass-bg-2) !important; }
  #app #view .m-thinking { font-size: 12px; color: var(--gray-deep); }

  /* ---- 设置行 / 开关（对应参考稿 .sr / .sw）---- */
  #app #view .set-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  #app #view .set-row:last-child { border-bottom: none; }
  #app #view .set-row .a, #app #view .set-row .b { font-size: 13px; }
  #app #view .set-row .b { font-size: 10.5px; color: var(--gray-deep); margin-top: 3px; }

  /* ---- 按钮：改为无边框文字按钮（对应参考稿 .tbtn）---- */
  #app #view .btn {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    color: var(--ink-soft) !important;
    text-shadow: var(--tsh-soft) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #app #view .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; }
  #app #view .btn:hover, #app #view .btn.btn-primary { color: var(--pink-deep); }
  #app #view .btn:active { transform: none; }

  /* ---- 输入控件：只保留底部一条线（对应参考稿的无框输入）---- */
  #app #view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]),
  #app #view textarea,
  #app #view select,
  #app #view .px-input,
  #app #view .px-textarea {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
  }
  #app #view input:focus,
  #app #view textarea:focus,
  #app #view select:focus {
    border-bottom-color: var(--pink-deep) !important;
    outline: none !important;
  }

  /* ---- 空 / 加载 / 错误态：改成无框文字提示 ---- */
  #app #view .empty-state,
  #app #view .loading-state,
  #app #view .error-state {
    border: none !important;
    background: none !important;
    padding: 26px 0 !important;
    text-align: center !important;
  }
  #app #view .es-msg, #app #view .ls-msg, #app #view .er-msg { font-size: 11.5px !important; color: var(--gray-deep) !important; text-shadow: var(--tsh-soft) !important; }
  #app #view .ls-ico, #app #view .er-ico { display: none !important; }
  #app #view .ls-bar { display: none !important; }

  /* ===== 文字发光 · 高特异性补丁 =====
     全站有一条 `#app #view * { … text-shadow:none !important }`（去色段，ID 特异性 2,1,0）。
     上面参考稿那批纯类选择器（.tw / .h-hi …，特异性 0,1,0）无论加不加 !important 都压不过它，
     所以这里用同级的 #app #view 前缀重写一遍，靠「更靠后」取胜。 */
  #app #view .tw,
  #app #view .h-hi,
  #app #view .h-clock .t,
  #app #view .vhead h1,
  #app #view .p-k,
  #app #view .stat .num,
  #app #view .order .oc-client,
  #app #view .order .oc-amount,
  #app #view .goal .g-name b,
  #app #view .goal .g-side .n,
  #app #view .focus .clk,
  #app #view .quote .tx,
  #app #view .note-c .nt,
  #app #view .mus .mn,
  #app #view .sh-bar h2,
  #app #view .view-title,
  #app #view .chat-item .ci-title {
    text-shadow: var(--tsh) !important;
  }
  #app #view .h-phrase,
  #app #view .stat .k,
  #app #view .stat .s,
  #app #view .quote .k,
  #app #view .quote .from,
  #app #view .day-l,
  #app #view .order .oc-detail,
  #app #view .tbtn,
  #app #view .chip,
  #app #view .m-bubble,
  #app #view .btn,
  #app #view .set-row .a,
  #app #view .sr .tx .a,
  #app #view .sr-item,
  #app #view .todo-day,
  #app #view .es-msg,
  #app #view .ls-msg,
  #app #view .er-msg {
    text-shadow: var(--tsh-soft) !important;
  }

  /* ===== 三段外壳（顶栏 / 中间滚动区 / 底栏导航）=====
     #view 钉在顶栏与底栏之间，只有它内部滚动；内容不会再钻进顶 / 底栏。
     首页与功能页手机端共用这套模型（home-head 在手机版本就是 static 流式）。 */

  #view,
  body.home-on #view {
    position: fixed !important;
    top: 56px !important;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    /* 上内边距 ≥ mask 渐隐高度(18px)，首屏内容不发淡 */
    padding: 20px 14px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 上下边缘渐隐（比桌面略窄） */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
  }
  body.home-on .home-head {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    background: none !important;
  }
  body.home-on .home-editorial { padding-top: 0 !important; }

  /* 顶栏：横贯顶部，功能按钮可横向滑动 */
  #topbar,
  body.home-on #topbar {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 0 6px !important;
    justify-content: flex-end !important;
  }
  #topbar .top-actions {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #topbar .top-actions::-webkit-scrollbar { display: none; }
  #topbar .top-btn,
  #topbar .top-now,
  #topbar .user-chip { flex: 0 0 auto; }
  #topbar .logo-en { display: none !important; }
  #topbar .logo-name { font-size: 15px; letter-spacing: 1px; }
  #topbar .top-now { display: none !important; }

  /* 导航：改为底部横向滑动条（沿用原有路由与 DOM，只换呈现方式）*/
  #nav,
  body.home-on #nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg-2) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: none !important;
    border-top: 1px solid var(--glass-line) !important;
    transform: none !important;
  }
  #nav::-webkit-scrollbar { display: none; }
  #nav .witem {
    /* 关键：.witem 原本是弧形滚轮设计（position:absolute + translateY(-50%)），
       在 flex 容器里不占位，会把 #nav 高度压成 0（实测 13px，底部导航看不见）。
       手机端必须回到常规流式排布。 */
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4;
    white-space: nowrap;
  }
  #nav .witem.active { color: var(--pink-deep); }

  /* 弹窗：窄屏不横向溢出 */
  .modal-card { width: calc(100vw - 28px) !important; max-width: none !important; }
  .modal-mask { padding: 14px; }

  /* 壁纸之上的可读性遮罩（对应参考稿 .wp::after）：
     手机上壁纸会整屏铺在内容后面，没有这层遮罩时文字直接压图、几乎读不出来。 */
  body.has-wallpaper::before,
  body.has-wallpaper.home-on::before {
    content: '' !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, .40));
  }
  body.has-wallpaper.dark::before,
  body.dark.has-wallpaper::before {
    /* 2026-10-12：夜间整屏压暗层几乎全撤（.46/.30/.52 → .16/.08/.18），
       夜间壁纸还原本身亮度；可读性交给文字阴影与磨砂面板固定字色。 */
    background:
      linear-gradient(180deg, rgba(17, 18, 19, .16), rgba(17, 18, 19, .08) 42%, rgba(17, 18, 19, .18));
  }
  /* #topbar / #nav 已在上面显式 fixed；#app 只做背景层叠上下文。
     注意：#view 不能放进 relative 重置，否则中间滚动盒会退回文档流。 */
  #app { position: relative; z-index: 1; }
  #nav, #topbar { z-index: 40; }

  /* 手机端同样锁死整窗：滚动只发生在 #view 中间容器（顶 / 底栏固定不动）。 */
  html,
  body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .nav-track { display: none !important; }
}

/* ============================================================
   26. B 档「乳霜毛玻璃」（纯 CSS，取代 liquid-glass-react 实时折射）
   —— 用户在对比小样中选定的 B 档：blur 30px + saturate 1.65 + 42% 乳白底。
      壁纸光影隐约透上来，背后文字糊成色块，不会和面板正文叠在一起；
      backdrop-filter 由合成器处理，拖动零 JS 计算，不再掉帧。
   —— 旧的 liquid-glass-react（280KB React + SVG 位移滤镜）已整体停用。
   —— 变量名用 --frost-* 新起一套：body.home-on 会把 --glass-* 清零，
      浮窗在首页打开时不能受牵连。
   ============================================================ */
:root{
  /* 2026-10-12 二调：blur 30→18（壁纸透得更清楚），底 .42→.58（补回文字对比度） */
  --frost-blur: blur(18px) saturate(1.5);
  --frost-bg: rgba(255, 255, 255, .58);
  --frost-line: rgba(255, 255, 255, .60);
  --frost-shadow:
    0 20px 50px -16px rgba(70, 55, 80, .28),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}
:root.dark{
  --frost-blur: blur(18px) saturate(1.35);
  --frost-bg: rgba(32, 34, 44, .70);
  --frost-line: rgba(255, 255, 255, .16);
  --frost-shadow:
    0 22px 54px -18px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* 主玻璃面：
   1) .frosted —— 弹窗卡 / 五个浮窗 / 登录卡 / 右键菜单 / toast（HTML 或 ui.js 动态挂上）；
   2) #app #view .px-panel —— 功能页内嵌的通用面板（记账分类面板等），
      选择器必须带两个 ID 才能压过「#app #view *」的通配清零。 */
.frosted,
#app #view .px-panel{
  background-color: var(--frost-bg) !important;
  -webkit-backdrop-filter: var(--frost-blur) !important;
  backdrop-filter: var(--frost-blur) !important;
  border: 1px solid var(--frost-line) !important;
  box-shadow: var(--frost-shadow) !important;
}
/* 字色自成一体：壁纸取色器（applyWallpaperPalette）会按壁纸明暗把 body 上的
   --ink 翻成浅色，浅字压在浅色磨砂面上会整卡发虚（实测白字 rgba 230,235,242）。
   磨砂容器内部把文字变量钉回主题默认：日间永远深字、夜间永远浅字，
   不再跟随壁纸判定反相。元素自身的声明优先于从 body 继承的行内变量值。 */
.frosted,
#app #view .px-panel{
  /* 必须显式重设 color：body 的 color 在 body 上已按旧 --ink 算成计算值再继承下来，
     只改变量不会重算；这里在卡片自身重新求值，正文才能跟着变深。 */
  color: var(--ink);
  --ink: #886070;
  --ink-soft: #a98a97;
  --gray-deep: #a1958c;
  --paper: #ffffff;
  --pink-deep: #7d675b;
}
:root.dark .frosted,
:root.dark #app #view .px-panel{
  --ink: #e8d6dd;
  --ink-soft: #b39aa4;
  --gray-deep: #8591a1;
  --paper: #1e242c;
  --pink-deep: #bccbe0;
}
/* 带 ID 的旧规则（#music-panel{background:transparent!important} 等）特异性高于单个 class，
   这里用 ID + .frosted 再压一层，确保浮窗在任何页面（含首页 body.home-on）都保持乳霜面。 */
#modal-root .modal-card.frosted, #music-panel.frosted, #lyric-panel.frosted, #ref-panel.frosted, #lm-panel.frosted, #auth-card.frosted, #ctx-menu.frosted{
  background-color: var(--frost-bg) !important;
  -webkit-backdrop-filter: var(--frost-blur) !important;
  backdrop-filter: var(--frost-blur) !important;
  border-color: var(--frost-line) !important;
  box-shadow: var(--frost-shadow) !important;
}
/* 兼容兜底：不支持 backdrop-filter 的环境 → 接近实心，文字绝不悬空 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .frosted, #app #view .px-panel{ background-color: rgba(255, 255, 255, .96) !important; }
  :root.dark .frosted, :root.dark #app #view .px-panel{ background-color: rgba(30, 32, 42, .97) !important; }
}
/* 用户在系统里偏好「减少透明」时同样退实心 */
@media (prefers-reduced-transparency: reduce) {
  .frosted, #app #view .px-panel{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, .96) !important;
  }
  :root.dark .frosted, :root.dark #app #view .px-panel{ background-color: rgba(30, 32, 42, .97) !important; }
}


/* ============ Zen Timer 心流计时器 ============ */
.zen-title{text-align:center;margin-bottom:4px}
.zen-en{font-size:10px;letter-spacing:.2em;color:var(--gray-deep);margin-left:4px}
.zen-subject{font-size:12px;color:var(--pink-deep);text-align:center;margin-bottom:8px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring-wrap{position:relative;width:170px;height:170px;margin:6px auto 2px}
.ring-wrap circle{fill:none;stroke-width:5}
.ring-bg{stroke:rgba(122,139,168,.18)}
.ring-fg{stroke:var(--pink-deep);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-opacity .4s;filter:drop-shadow(0 0 5px rgba(122,139,168,.45))}
.ring-ember{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--gold,#c9a86a) 45%,rgba(201,168,106,0) 75%);
  filter:drop-shadow(0 0 6px rgba(201,168,106,.9));pointer-events:none}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.zen-pct{font-size:22px;font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.zen-lbl{font-size:9px;letter-spacing:.3em;color:var(--gray-deep)}
.zen-time{text-align:center;font-size:26px;font-weight:200;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:2px 0 10px}
.zen-time.running{color:var(--pink-deep)}
.zen-stat{font-size:11px;color:var(--gray-deep);text-align:center;min-height:16px;margin-top:6px}/* ============ Vibe 氛围背景与控制台 ============ */
#vibe-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
#vibe-mixer{position:fixed;right:22px;bottom:22px;width:264px;max-width:92vw;z-index:460;border-radius:18px;padding:14px 16px 12px;max-height:82vh;overflow-y:auto}
#vibe-mixer.hidden{display:none}
#vibe-mixer.dragging{box-shadow:0 18px 50px rgba(46,52,64,.24)}
.mx-head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--pink-deep);letter-spacing:.08em;cursor:grab;user-select:none;margin-bottom:10px}
#vibe-mixer.dragging .mx-head{cursor:grabbing}
.mx-drag-hint{margin-left:auto;color:var(--gray-deep);font-size:12px}
.mx-x{width:24px;height:24px}
.mx-modes{display:flex;gap:6px;margin-bottom:10px}
.mx-mode{flex:1;text-align:center;font-size:11px;padding:4px 0;border-radius:99px;cursor:pointer;border:1px solid rgba(122,139,168,.3);color:var(--pink-deep);background:rgba(255,255,255,.4)}
.mx-mode.on{background:rgba(122,139,168,.88);color:#fff;border-color:transparent}
.mx-row{margin-bottom:9px}
.mx-row label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);margin-bottom:4px}
.mx-row label span{color:var(--gray-deep);font-variant-numeric:tabular-nums}
.mx-row input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:rgba(122,139,168,.25);outline:none;cursor:pointer}
.mx-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--pink);box-shadow:0 1px 5px rgba(46,52,64,.25);cursor:grab}
.mx-snds{display:flex;flex-direction:column;gap:7px;padding-top:9px;border-top:1px solid rgba(122,139,168,.18)}
.mx-snd{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-soft)}
.mx-snd .snd-chip{flex:none;min-width:64px;text-align:center;font-size:10.5px;padding:3px 9px;border-radius:99px;cursor:pointer;border:1px solid rgba(122,139,168,.3);background:rgba(255,255,255,.4);color:var(--pink-deep)}
.mx-snd .snd-chip.on{background:rgba(122,139,168,.88);color:#fff;border-color:transparent}
.mx-snd .snd-chip.disabled{opacity:.4;pointer-events:none}
.mx-snd input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2.5px;border-radius:3px;background:rgba(122,139,168,.25);outline:none;cursor:pointer}
.mx-snd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--pink);cursor:grab}
.mx-vv{width:34px;text-align:right;color:var(--gray-deep);font-variant-numeric:tabular-nums}
.mx-head b{display:inline-flex;align-items:center;gap:5px}
.mx-en{font-size:9px;letter-spacing:.12em;color:var(--gray-deep);border:1px solid rgba(122,139,168,.3);border-radius:99px;padding:1px 6px}
.mx-drag-hint{display:inline-flex;align-items:center;cursor:grab;touch-action:none}
.mx-mode{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.mx-snd .snd-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:76px}
/* —— 音效选择（教堂/老CD/磁带/电话/小房间）—— */
.mx-fx{margin:2px 0 9px;padding:8px 9px;border-radius:12px;background:linear-gradient(180deg,rgba(122,139,168,.10),rgba(122,139,168,.04));border:1px solid rgba(122,139,168,.16)}
.mx-fx-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);margin-bottom:6px}
.mx-fx-label i{color:var(--pink)}
.mx-fx-desc{color:var(--gray-deep);font-weight:normal;font-size:10px}
.mx-fx-chips{display:flex;flex-wrap:wrap;gap:5px}
.mx-fx-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:3px 9px;border-radius:99px;cursor:pointer;border:1px solid rgba(122,139,168,.32);background:rgba(255,255,255,.5);color:var(--pink-deep);transition:all .18s}
.mx-fx-chip:hover{border-color:var(--pink);color:var(--pink-deep)}
.mx-fx-chip.on{background:rgba(122,139,168,.88);color:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(46,52,64,.2)}
.mx-fx-chip i{opacity:.85}

#btn-vibe{font-size:15px;line-height:1;position:relative}
#btn-vibe.is-playing::after{content:'';position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(236,121,133,.55);animation:vibePulse 1.6s infinite}
@keyframes vibePulse{0%{box-shadow:0 0 0 0 rgba(236,121,133,.55)}70%{box-shadow:0 0 0 7px rgba(236,121,133,0)}100%{box-shadow:0 0 0 0 rgba(236,121,133,0)}}
@media(max-width:900px){#vibe-mixer{right:10px;bottom:74px;width:min(94vw,264px);max-height:70vh}}

/* ============ 草稿箱面板 ============ */
#btn-drafts{position:relative}
.draft-panel{position:fixed;top:54px;right:18px;z-index:470;width:320px;max-width:calc(100vw - 36px);max-height:70vh;border-radius:16px;padding:14px 14px 10px;display:flex;flex-direction:column;animation:fadein .18s ease}
.draft-head{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--pink-deep);margin-bottom:10px;letter-spacing:.06em}
.draft-head b{display:inline-flex;align-items:center;gap:6px}
.draft-cnt{font-size:11px;color:var(--gray-deep);font-weight:400;background:rgba(122,139,168,.18);padding:1px 7px;border-radius:99px}
.draft-x{margin-left:auto;width:24px;height:24px}
.draft-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.draft-item{padding:10px 11px;border-radius:12px;background:rgba(122,139,168,.08);border:1px solid rgba(122,139,168,.14)}
.draft-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.draft-tag{font-size:10px;padding:1px 8px;border-radius:99px;background:var(--pink);color:#fff;letter-spacing:.05em}
.draft-time{font-size:10px;color:var(--gray-deep)}
.draft-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-preview{font-size:11.5px;color:var(--ink-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.draft-item-act{display:flex;gap:7px;margin-top:8px}
.draft-item-act .btn{font-size:11px;padding:3px 10px}
.draft-empty{text-align:center;color:var(--gray-deep);font-size:12px;line-height:1.8;padding:24px 8px}
.draft-foot{margin-top:10px;padding-top:8px;border-top:1px solid rgba(122,139,168,.16);display:flex;justify-content:flex-end}
.draft-foot .btn{font-size:11px}
@media(max-width:900px){.draft-panel{top:auto;bottom:74px;right:10px;left:10px;width:auto;max-height:60vh}}

/* ============ 参考画布迷你条 ============ */
#ref-minibar{position:fixed;left:18px;bottom:18px;z-index:450;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:14px;max-width:240px}
#ref-minibar.hidden{display:none}
#ref-minibar img{width:52px;height:52px;object-fit:cover;border-radius:9px;background:rgba(122,139,168,.12)}
.rm-info{display:flex;flex-direction:column;font-size:11px;color:var(--ink-soft);line-height:1.3}
.rm-info small{color:var(--gray-deep);font-size:10px}
#ref-minibar .icon-btn{width:26px;height:26px;flex:none;font-size:12px}
@media(max-width:900px){#ref-minibar{left:10px;bottom:70px}}

/* home-search-clean v2：首页搜索无边框无底色（用户指定）；特异性高于 #app #view 重置块，
   任意壁纸上都保持透明，只保留输入文字颜色与搜索图标 */
body.home-on #app #view .search-box,
body.has-wallpaper.wall-dark.home-on #app #view .search-box,
body.has-wallpaper.wall-light.home-on #app #view .search-box{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:7px 2px !important;
}
body.home-on #app #view .search-box:focus-within,
body.has-wallpaper.wall-dark.home-on #app #view .search-box:focus-within,
body.has-wallpaper.wall-light.home-on #app #view .search-box:focus-within{
  border-color:transparent !important;
  box-shadow:none !important;
}
body.home-on #app #view #home-search-go{color:var(--pink-deep) !important;opacity:.8 !important;}

/* ============================================================
   v2026-10 随记/待办大升级：Markdown 编辑器、清单、批量条、优先级、子任务等
   ============================================================ */
/* ---- 危险/迷你 chip ---- */
.chip-danger { color: var(--btn-danger-bg, #bb736b) !important; }
.chip-danger.active { background: color-mix(in srgb, var(--btn-danger-bg, #bb736b) 16%, transparent) !important; border-color: color-mix(in srgb, var(--btn-danger-bg, #bb736b) 45%, transparent) !important; }
.chip-mini { font-size: 11px; padding: 1px 9px; }
.btn-danger-ghost { color: var(--btn-danger-bg, #bb736b); }
.btn-danger-ghost:hover { background: color-mix(in srgb, var(--btn-danger-bg, #bb736b) 12%, transparent); }

/* ---- 随记卡片：置顶/任务 ---- */
.nt-card.is-pinned { border-color: color-mix(in srgb, var(--gold, #d8bd8a) 55%, transparent); }
.nt-pin-ico { color: var(--gold, #c49a5a); display: inline-flex; vertical-align: -1px; margin-right: 3px; }
.nt-task-mini { color: var(--pink-deep); display: inline-flex; align-items: center; gap: 2px; font-size: 11px; }
.ntc-btns { display: flex; gap: 2px; flex: none; }
.ntc-pick { margin-right: 6px; vertical-align: -2px; }
.nt-batch-bar, .todo-panel .nt-batch-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
  background: var(--pink-faint); border: 1px dashed color-mix(in srgb, var(--pink) 40%, transparent);
  font-size: 12.5px; color: var(--ink-soft);
}
.nt-batch-bar b { color: var(--pink-deep); }

/* ---- Markdown 编辑器 ---- */
.nt-editor { display: flex; flex-direction: column; gap: 8px; }
.nte-top { display: flex; gap: 8px; align-items: center; }
.nte-title { font-size: 16px; font-weight: 600; flex: 1; }
.nte-area { min-height: 320px; font-family: var(--font-body); line-height: 1.85; resize: vertical; }
.nte-meta { margin: 0; }
.nte-status { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.nte-save-state { font-size: 11.5px; color: var(--gray-deep); }
#n-pin.active { color: var(--gold, #c49a5a); border-color: color-mix(in srgb, var(--gold, #c49a5a) 50%, transparent); background: color-mix(in srgb, var(--gold, #c49a5a) 12%, transparent); }

.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
.mdt-btn {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  border-radius: 8px; padding: 3px 9px; font-size: 12px; line-height: 1.5; cursor: var(--cursor-ring, pointer);
  transition: background .15s, color .15s, border-color .15s;
}
.mdt-btn:hover { color: var(--pink-deep); border-color: color-mix(in srgb, var(--pink) 55%, transparent); background: var(--pink-faint); }
.mdt-btn:active { transform: translateY(1px); }

/* ---- Markdown 预览排版（弹窗内 & 卡片备注） ---- */
.md-preview { font-size: 14px; line-height: 1.9; color: var(--ink); word-break: break-word; }
.md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 { margin: 14px 0 6px; line-height: 1.5; font-weight: 600; }
.md-preview h3 { font-size: 17px; } .md-preview h4 { font-size: 15.5px; } .md-preview h5, .md-preview h6 { font-size: 14px; color: var(--ink-soft); }
.md-preview p { margin: 0 0 10px; white-space: pre-wrap; }
.md-preview ul, .md-preview ol { margin: 4px 0 10px; padding-left: 22px; }
.md-preview li { margin: 2px 0; }
.md-preview blockquote {
  margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--pink-pale);
  color: var(--ink-soft); background: var(--pink-faint); border-radius: 0 8px 8px 0;
}
.md-preview code {
  font-family: Consolas, monospace; font-size: 12.5px;
  background: var(--bg-2); padding: 1px 6px; border-radius: 6px; color: var(--pink-deep);
}
.md-preview pre {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0 12px;
}
.md-preview pre code { background: none; padding: 0; color: var(--ink); }
.md-preview hr { border: none; border-top: 1px dashed var(--line); margin: 14px 0; }
.md-preview a { color: var(--pink-deep); text-underline-offset: 3px; }
.md-preview del { color: var(--gray-deep); }
.md-preview .md-tasks { list-style: none; padding-left: 4px; }
.md-preview .md-task-li { display: flex; gap: 8px; align-items: flex-start; }
.md-preview .md-task { margin-top: 5px; accent-color: var(--pink-deep); cursor: pointer; }
.md-preview .md-task-li.is-done span { color: var(--gray-deep); text-decoration: line-through; }
#n-preview.md-preview { min-height: 320px; max-height: 56vh; overflow-y: auto; padding: 4px 6px; }

/* ---- 待办：优先级色条 ---- */
.ti-pri { width: 4px; align-self: stretch; border-radius: 4px; flex: none; margin: 2px 6px 2px 0; background: transparent; }
.ti-pri.pri-high { background: #c66a63; }
.ti-pri.pri-mid { background: #c49a5a; }
.ti-pri.pri-low { background: #8aa08f; }
.todo-item { align-items: center; }
.todo-item.dragging { opacity: .45; }
.todo-item.drag-over { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 55%, transparent); border-radius: 12px; }
.todo-item.pickable { cursor: pointer; }
.ti-pick { margin-right: 8px; }

/* 角标（时间/重复/订单/标签） */
.ti-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.ti-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-soft);
  background: var(--pink-faint); border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent);
  padding: 0 7px; border-radius: 99px; line-height: 18px;
}
.ti-badge.has-bell { color: var(--pink-deep); }
.ti-badge.ti-src { background: color-mix(in srgb, var(--sage, #9fc0ad) 14%, transparent); border-color: color-mix(in srgb, var(--sage, #9fc0ad) 35%, transparent); }
.ti-tag { font-size: 11px; color: var(--pink-deep); }
.ti-date.is-overdue, .todo-day.is-overdue { color: var(--btn-danger-bg, #bb736b); }
.todo-day.is-overdue .td-count { background: color-mix(in srgb, var(--btn-danger-bg, #bb736b) 18%, transparent); color: var(--btn-danger-bg, #bb736b); }
.td-count { font-size: 11px; background: var(--pink-pale); color: var(--ink-soft); border-radius: 99px; padding: 0 8px; margin-left: 6px; }

/* 子任务 */
.ti-subbar { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.ti-subprog { width: 90px; height: 5px; border-radius: 99px; background: var(--bg-2); overflow: hidden; display: inline-block; }
.ti-subprog i { display: block; height: 100%; background: var(--pink-deep); border-radius: 99px; transition: width .25s; }
.ti-subtxt { font-size: 11px; color: var(--ink-soft); }
.ti-expand { border: none; background: none; color: var(--pink-deep); font-size: 11px; cursor: var(--cursor-ring, pointer); padding: 0; }
.ti-subs { margin: 4px 0 2px 4px; display: flex; flex-direction: column; gap: 2px; }
.ti-sub { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink); }
.ti-sub input { accent-color: var(--pink-deep); }
.ti-sub .is-done { color: var(--gray-deep); text-decoration: line-through; }
.ti-note-line { font-size: 12px; color: var(--ink-soft); margin-top: 3px; cursor: pointer; }
.ti-note-full { margin-top: 6px; padding: 8px 10px; background: var(--pink-faint); border-radius: 10px; font-size: 12.5px; }
.ti-note-full p { margin: 0 0 6px; } .ti-note-full p:last-child { margin-bottom: 0; }

/* 表单：优先级分段、提醒、子任务编辑 */
.seg-pri { display: flex; gap: 6px; }
.seg-btn { flex: 1; padding: 7px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; color: var(--ink-soft); cursor: var(--cursor-ring, pointer); }
.seg-btn.pri-high.active { border-color: #c66a63; background: color-mix(in srgb, #c66a63 14%, transparent); color: #c66a63; }
.seg-btn.pri-mid.active { border-color: #c49a5a; background: color-mix(in srgb, #c49a5a 14%, transparent); color: #b08537; }
.seg-btn.pri-low.active { border-color: #8aa08f; background: color-mix(in srgb, #8aa08f 16%, transparent); color: #6f8a76; }
.t-remind { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); height: 34px; }
.t-remind input { accent-color: var(--pink-deep); }
.t-subs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.t-sub-row { display: flex; align-items: center; gap: 6px; }
.t-sub-check input { accent-color: var(--pink-deep); }
.t-sub-in { flex: 1; }

/* 窄屏 */
@media (max-width: 640px) {
  .nte-area { min-height: 240px; }
  .ti-subprog { width: 60px; }
}


/* ============================================================
   v2026-10 响应式外壳（方案 A）
   - 桌面 ≥1025px：弧形滚轮导航原样保留，#m-shell 整块隐藏
   - 手机/平板 ≤1024px：顶栏（乳霜磨砂）+ 中间独立滚动区 + 底栏 4 tab + 中央 ✦ 万能抽屉
   - 在线媒体（网易云 / B 站代理）按 body.no-online-media 隐藏入口
   ============================================================ */

/* ---- 在线媒体开关：服务端默认关闭时，所有在线音乐入口消失（本地音乐盒不受影响） ---- */
body.no-online-media #btn-music,
body.no-online-media #top-now,
body.no-online-media .m-app.m-media { display: none !important; }
body.no-online-media #music-panel .music-search,
body.no-online-media #music-panel details { display: none !important; }

/* ---- 桌面默认隐藏移动外壳 ---- */
#m-shell { display: none; }

@media (max-width: 1024px) {
  :root { --m-top-h: 52px; --m-tab-h: 60px; }

  /* ===== 三段外壳：顶栏固定 / 中间滚动 / 底栏固定 ===== */
  html, body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 桌面弧形导航彻底收起，让位给底栏 */
  #nav, .nav-track { display: none !important; }

  #m-shell {
    display: block;
    position: fixed; inset: 0; z-index: 80;
    pointer-events: none;   /* 透明区域不挡内容操作，子控件各自放开 */
  }

  /* ===== 中间滚动区：钉死在顶栏与底栏之间，内容永远不会和栏重合 ===== */
  #view,
  body.home-on #view {
    position: fixed !important;
    top: calc(var(--m-top-h) + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(var(--m-tab-h) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%) !important;
  }
  body.m-sheet-lock #view { overflow-y: hidden !important; }
  body.home-on .home-head {
    position: static !important; top: auto !important; left: auto !important; right: auto !important;
    padding: 0 !important; background: none !important;
  }
  body.home-on .home-editorial { padding-top: 0 !important; }

  /* ===== 顶栏：整条乳霜磨砂（压过全站透明重置），只留品牌 + 夜间 + 氛围 ===== */
  #app #topbar,
  body.home-on #app #topbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: calc(var(--m-top-h) + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 14px 0 !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    background-color: var(--frost-bg) !important;
    -webkit-backdrop-filter: var(--frost-blur) !important;
    backdrop-filter: var(--frost-blur) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--frost-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 22px -14px rgba(70, 55, 80, .35) !important;
    z-index: 85;
  }
  #topbar .top-date { display: none !important; }
  #topbar .top-actions {
    margin-left: auto; gap: 6px !important; flex-wrap: nowrap;
    overflow: visible !important; flex: 0 0 auto;
  }
  /* 这些功能全部收进中央抽屉，顶栏不再挤一排 */
  #btn-music, #btn-lm, #btn-recent, #btn-ref, #btn-settings,
  #btn-logout, #top-now, #user-chip { display: none !important; }
  #topbar .logo-en { display: none !important; }
  #topbar .logo-name { font-size: 14px !important; letter-spacing: 1px; }
  #topbar .top-btn { width: 36px; height: 36px; }

  /* ===== 底栏：完全透明（与桌面端一致），不涂色不模糊；发光只落在文字与图标上 ===== */
  #m-tabbar {
    pointer-events: auto;
    position: fixed; left: 0; right: 0;
    bottom: 0;
    height: calc(var(--m-tab-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch; gap: 2px;
    background: none;
    border-top: 0;
    box-shadow: none;
    z-index: 86;
  }

  /* 抽屉开启：底栏浮到抽屉之上，普通 4 键淡出，只留 × 可点 */
  #m-shell.m-sheet-on #m-tabbar { z-index: 92; }
  .m-tab:not(.m-fab) { transition: opacity .2s; }
  #m-shell.m-sheet-on .m-tab:not(.m-fab) { opacity: 0; pointer-events: none; }
  .m-tab {
    flex: 1; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--gray-deep); font-size: 11px; letter-spacing: .5px;
    padding: 0; border-radius: 12px;
    font-family: inherit;
  }
  .m-tab .m-tab-ico {
    display: flex; color: var(--gray-deep);
    transition: transform .15s, color .15s, filter .15s;
    filter: drop-shadow(0 1px 5px rgba(255, 250, 242, .95));
  }
  .m-tab .m-tab-tx {
    text-shadow: 0 1px 7px rgba(255, 250, 242, .95), 0 0 2px rgba(255, 250, 242, .85);
  }
  html.dark .m-tab .m-tab-ico {
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .85)) drop-shadow(0 0 2px rgba(184, 202, 236, .38));
  }
  html.dark .m-tab .m-tab-tx {
    text-shadow: 0 1px 7px rgba(0, 0, 0, .92), 0 0 2px rgba(184, 202, 236, .42);
  }
  .m-tab.on { color: var(--pink-deep); font-weight: 600; }
  .m-tab.on .m-tab-ico {
    color: var(--pink-deep); transform: translateY(-1px);
    filter: drop-shadow(0 0 7px rgba(222, 130, 142, .65)) drop-shadow(0 1px 4px rgba(255, 250, 242, .85));
  }
  .m-tab.on .m-tab-tx {
    text-shadow: 0 0 9px rgba(222, 130, 142, .7), 0 1px 6px rgba(255, 250, 242, .9);
  }
  html.dark .m-tab.on .m-tab-ico {
    filter: drop-shadow(0 0 8px rgba(232, 146, 158, .6)) drop-shadow(0 1px 4px rgba(0, 0, 0, .8));
  }
  html.dark .m-tab.on .m-tab-tx {
    text-shadow: 0 0 9px rgba(232, 146, 158, .65), 0 1px 6px rgba(0, 0, 0, .85);
  }
  .m-tab:active { transform: scale(.94); }

  /* 中央键：无框墨星，只有柔和模糊发光，开抽屉时旋成 × 并转粉 */
  .m-fab { flex: 0 0 64px; position: relative; }
  .m-fab::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -58%);
    width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 106, .20) 0%, rgba(201, 168, 106, 0) 68%);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity .2s;
  }
  .m-fab-ico {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -60%);
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink, #40342b);
    background: none; border: 0;
    filter: drop-shadow(0 2px 7px rgba(70, 55, 80, .30));
    transition: transform .22s cubic-bezier(.32,.72,.3,1), color .2s, filter .2s;
  }
  .m-fab:active .m-fab-ico { transform: translate(-50%, -60%) scale(.88); }
  html.dark .m-fab::before { background: radial-gradient(circle, rgba(222, 200, 150, .22) 0%, rgba(222, 200, 150, 0) 68%); }
  html.dark .m-fab-ico { color: #efe8db; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
  #m-shell.m-sheet-on .m-fab::before {
    background: radial-gradient(circle, rgba(222, 130, 142, .26) 0%, rgba(222, 130, 142, 0) 68%);
  }
  #m-shell.m-sheet-on .m-fab-ico {
    transform: translate(-50%, -60%) rotate(135deg);
    color: var(--pink-deep);
    filter: drop-shadow(0 0 9px rgba(222, 130, 142, .45));
  }
  .m-fab .m-tab-tx { display: none; }

  /* ===== 万能抽屉 ===== */
  #m-mask {
    pointer-events: auto;
    position: fixed; inset: 0; z-index: 90;
    background: rgba(45, 36, 28, .34);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  #m-sheet {
    pointer-events: auto;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
    max-height: 84vh; max-height: 84dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 18px calc(62px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background-color: var(--paper);
    box-shadow: 0 -20px 60px -20px rgba(50, 38, 25, .45);
    transform: translateY(108%);
    transition: transform .3s cubic-bezier(.32,.72,.3,1);
    color: var(--ink);
  }
  #m-shell.m-sheet-on #m-mask { opacity: 1; visibility: visible; }
  #m-shell.m-sheet-on #m-sheet { transform: translateY(0); }
  #m-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 8px auto 12px; }

  #m-me { display: flex; align-items: center; gap: 11px; padding: 4px 2px 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
  .m-av {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--pink-pale); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .m-av img, .m-av svg { width: 100%; height: 100%; object-fit: cover; }
  .m-me-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .m-me-txt b { font-size: 15px; }
  .m-me-txt small { font-size: 11px; color: var(--gray-deep); }
  #m-pro {
    margin-left: auto; flex: none;
    font-size: 12px; color: #7c6232;
    border: 1px solid color-mix(in srgb, var(--gold, #c9a86a) 45%, transparent);
    background: color-mix(in srgb, var(--gold, #c9a86a) 13%, transparent);
    border-radius: 99px; padding: 6px 12px;
  }
  .m-sec { font-size: 10.5px; letter-spacing: .18em; color: var(--gray-deep); margin: 14px 2px 9px; }
  .m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .m-app {
    border: 0; background: none; cursor: pointer; padding: 4px 2px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-family: inherit; color: var(--ink);
    border-radius: 14px;
    transition: background .15s;
  }
  .m-app:active { background: var(--pink-faint); }
  .m-app .m-ai {
    position: relative;
    width: 52px; height: 52px; border-radius: 17px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px -8px rgba(70, 55, 80, .35);
    display: flex; align-items: center; justify-content: center;
    color: var(--pink-deep);
  }
  .m-app b { font-size: 12px; font-weight: 500; }
  .m-beta {
    position: absolute; top: -7px; right: -8px;
    font-style: normal; font-size: 9px; line-height: 1;
    background: var(--gold, #c9a86a); color: #fff;
    border-radius: 99px; padding: 2px 5px;
  }
  /* 离开小窝：缩成账号旁的小图标按钮（P42） */
  #m-logout {
    flex: none; width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: none; color: var(--gray-deep);
    border-radius: 50%; cursor: pointer; font-family: inherit;
    transition: color .15s, border-color .15s, background .15s;
  }
  #m-logout:hover { color: var(--pink-deep); border-color: color-mix(in srgb, var(--pink-deep) 45%, transparent); }
  #m-logout:active { background: var(--pink-faint); }

  /* ===== 弹窗 / 浮窗：不顶到屏边、不被底栏盖住 ===== */
  .modal-mask { padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .modal-card { width: 100% !important; max-width: 560px !important; max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px)); }
  #vibe-mixer { right: 12px !important; bottom: calc(var(--m-tab-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; width: min(264px, calc(100vw - 24px)) !important; max-height: 66vh !important; }
  #ref-minibar { left: 10px !important; bottom: calc(var(--m-tab-h) + 10px + env(safe-area-inset-bottom, 0px)) !important; }

  /* 壁纸压暗层沿用旧手机规则（外壳重建后保持可读） */
  body.has-wallpaper::before,
  body.has-wallpaper.home-on::before {
    content: '' !important; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16) 42%, rgba(255,255,255,.40));
  }
  body.has-wallpaper.dark::before,
  body.dark.has-wallpaper::before {
    background: linear-gradient(180deg, rgba(17,18,19,.16), rgba(17,18,19,.08) 42%, rgba(17,18,19,.18));
  }
}

/* ===== 平板竖屏（769–1024）：更宽的留白，宫格升到 6 列，抽屉居中 ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  #view, body.home-on #view { padding: 26px 34px 26px !important; }
  .m-grid { grid-template-columns: repeat(6, 1fr); }
  #m-sheet { max-width: 620px; left: 50%; right: auto; transform: translate(-50%, 108%); width: calc(100% - 40px); }
  #m-shell.m-sheet-on #m-sheet { transform: translate(-50%, 0); }
  #m-tabbar { padding-left: max(10px, calc((100vw - 720px) / 2)); padding-right: max(10px, calc((100vw - 720px) / 2)); }
}

/* ===== 小屏手机（≤380）：宫格与间距再紧一点 ===== */
@media (max-width: 380px) {
  .m-grid { gap: 8px; }
  .m-app .m-ai { width: 47px; height: 47px; border-radius: 15px; }
  .m-tab { font-size: 10.5px; }
  #m-pro { padding: 5px 9px; }
}


/* ============================================================
   v2026-10 响应式外壳 · 修正轮 1
   1) 高特异性彻底隐藏旧 #nav：旧手机块里 body.home-on #nav{display:flex!important}
      特异性高过单 ID，必须用 #app 提升，杜绝桌面/手机导航叠影。
   2) 手机 ≤640：待办 / 日历 / AI对话 / 工作台 / 需求 的多栏布局全部纵向堆叠。
   3) 可拖浮窗（音乐 / 本地音乐 / 参考画布 / B站 / 歌词）钉进安全区，不压底栏不出屏。
   ============================================================ */
@media (max-width: 1024px) {
  #app #nav,
  body.home-on #app #nav,
  #app .nav-track { display: none !important; }
}

@media (max-width: 640px) {
  /* ---- 待办：320px 固定专注列会把任务列表挤出屏幕，改为纵向堆叠 ---- */
  .todo-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .todo-panel, .focus-box { min-width: 0 !important; }
  .todo-filters { flex-wrap: wrap !important; overflow-x: visible !important; }

  /* ---- 日历：月历在上，当日 / 本月面板在下 ---- */
  .cal-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .cal-panel, .cal-side { min-width: 0 !important; }

  /* ---- 工作台（进行中/已完成）与需求（需求池/已转订单）双卡片堆叠 ---- */
  /* 单列布局：始终单列；双列布局：手机保持单列，平板及以上保留双列 */
  .work-columns.lo-1 { grid-template-columns: minmax(0, 1fr) !important; }
  .work-columns.lo-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  /* ---- AI 对话：会话列表收成顶部矮栏，对话区在下方独立滚动 ---- */
  .chat-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - 210px) !important;
    height: calc(100dvh - 210px) !important;
    min-height: 340px !important;
  }
  .chat-side { max-height: 30vh; min-width: 0; }
  .chat-main { min-width: 0; }
  .chat-input { flex-wrap: wrap; }

  /* ---- 弹窗内双列表单窄屏不挤 ---- */
  .form-grid, .two-col, .gform-period { grid-template-columns: 1fr !important; }

  /* ---- 浮窗：收进安全区，底沿抬到 tabbar 之上 ---- */
  #music-panel {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important; right: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 56px - 78px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 56px - 78px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
  #lm-panel, #ref-panel{
    left: 10px !important; right: 10px !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; max-width: none !important;
    height: auto !important; max-height: none !important;
  }
  #lyric-panel {
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 20px) !important;
  }
}

/* ============================================================
   v2026-10 响应式外壳 · 修正轮 2
   ≤1024 收起中间空荡荡的全局顶栏：品牌在首页问候里、夜间/氛围/设置等
   全部收在底部中央 ✦ 抽屉（data-hook 仍点击真实按钮，隐藏不影响）。
   中间滚动区直接顶到屏幕顶端（留出刘海安全区与 14px 呼吸）。
   ============================================================ */
@media (max-width: 1024px) {
  :root { --m-top-h: 0px; }
  #app #topbar,
  body.home-on #app #topbar { display: none !important; }
  /* 浮窗顶距跟着收窄，不再给已消失的顶栏留 52px */
  #music-panel { top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
}
@media (max-width: 640px) {
  #lm-panel, #ref-panel { top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
}

/* ============================================================
   OC 小传（原创角色）：纯文字素雅风（2026-10 二次改版）
   注意：#view 内有「核清零」(#app #view * !important)，
   底色 / 边框 / 阴影 / transform 一律要 #app #view 前缀 + !important 才能恢复。
   类名前缀 char- / cc- / cd-（cd 避开聊天 .cd-tag）/ f-* 仅弹窗内使用
   ============================================================ */

/* —— 卡片墙 —— */
.char-sub { font-size: 11px; color: var(--ink-soft); margin: -2px 0 12px; }
.char-tags { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 18px; }
.char-tags:empty { display: none; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 26px; padding: 6px 0 40px; }

.char-card { cursor: pointer; min-width: 0; }
.cc-face {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
#app #view .cc-face {
  background: color-mix(in srgb, var(--c, #b7a78f) 13%, var(--paper)) !important;
  border: 1px solid color-mix(in srgb, var(--c, #b7a78f) 36%, transparent) !important;
}
.cc-face img { width: 100%; height: 100%; object-fit: cover; }
.cc-mono { font-size: 30px; font-weight: 700; color: var(--c, var(--ink)); line-height: 1; }
.cc-name { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cc-name b { font-size: 15px; font-weight: 600; color: var(--ink); transition: color .15s; }
.cc-name em { font-size: 11px; color: var(--ink-soft); font-style: normal; }
.cc-line { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.cc-nref { display: inline-flex; align-items: center; gap: 2px; color: var(--pink-deep); flex: 0 0 auto; }
.cc-tags { display: flex; gap: 4px 10px; flex-wrap: wrap; margin-top: 5px; }
.cc-tags:empty { display: none; }
.cc-tags span { font-size: 10.5px; color: var(--gray-deep); }
.char-card:hover .cc-name b { color: var(--c, var(--pink-deep)); }
#app #view .char-card:hover .cc-face {
  background: color-mix(in srgb, var(--c, #b7a78f) 22%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--c, #b7a78f) 58%, transparent) !important;
}

/* 空状态：与素材库/目标的虚线区同款 */
.char-empty { text-align: center; padding: 58px 20px; }
#app #view .char-empty {
  border: 2px dashed var(--bg-2) !important; border-radius: var(--rnd-md) !important;
}
.char-empty .ce-ico { margin-bottom: 10px; opacity: .6; }
.char-empty .ce-tip { font-size: 11px; color: var(--gray-deep); margin-top: 6px; }

/* —— 详情 —— */
.cd-page { max-width: 720px; padding-bottom: 50px; }
.cd-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cd-back { font-size: 12px; color: var(--ink-soft); cursor: pointer; padding: 4px 6px; background: none; border: none; }
.cd-back:hover { color: var(--pink-deep); }
.cd-ops { display: flex; gap: 4px; align-items: center; }
.cd-head { display: flex; gap: 20px; align-items: center; }
.cd-av {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#app #view .cd-av {
  background: color-mix(in srgb, var(--c, #b7a78f) 13%, var(--paper)) !important;
  border: 1px solid color-mix(in srgb, var(--c, #b7a78f) 36%, transparent) !important;
}
.cd-av img { width: 100%; height: 100%; object-fit: cover; }
.cd-mono { font-size: 36px; font-weight: 700; color: var(--c, var(--ink)); line-height: 1; }
.cd-head-txt { min-width: 0; }
.cd-name { font-size: 24px; font-weight: 700; margin: 0; color: var(--ink); }
.cd-alias { font-size: 13px; color: var(--ink-soft); font-weight: 400; margin-left: 8px; }
.cd-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
.cd-facts em { font-style: normal; color: var(--gray-deep); margin-right: 5px; }
.cd-facts b { font-weight: 600; color: var(--ink); }
.cd-tagrow { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.cd-tagrow:empty { display: none; }
.cd-tagrow span { font-size: 11.5px; color: var(--pink-deep); }

.cd-sec { padding-top: 18px; margin-top: 22px; }
#app #view .cd-sec { border-top: 1px solid var(--line-soft) !important; }
.cd-sec h3 { margin: 0 0 10px; font-size: 12px; color: var(--gray-deep); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.cd-sec h3 em { font-style: normal; margin-left: 2px; }
.cd-sec h3 svg { color: var(--pink-deep); }
.cd-sec p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--ink); }
.cd-empty-line { font-size: 12px; color: var(--gray-deep); }
.cd-empty-first { margin-top: 22px; }

/* 喜好 / 雷点 */
.cd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 44px; }
.cd-mini h4 { margin: 0 0 6px; font-size: 12px; color: var(--gray-deep); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.cd-mini h4 svg { color: var(--pink-deep); }
.cd-mini p { margin: 0; font-size: 13px; line-height: 1.9; }

/* 关系网 */
.cd-rels { display: flex; flex-direction: column; }
.cd-rel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 2px; }
#app #view .cd-rel { border-bottom: 1px solid var(--line-soft) !important; }
.cd-rel b { font-size: 13.5px; font-weight: 600; }
.cd-rel i { font-style: normal; font-size: 11px; color: var(--pink-deep); }
.cd-rel small { flex-basis: 100%; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; }
.cd-go { font-size: 11px; color: var(--gray-deep); }
.cd-rel.link { cursor: pointer; }
.cd-rel.link b { text-decoration: underline dotted; text-underline-offset: 3px; }
.cd-rel.link:hover b, .cd-rel.link:hover .cd-go { color: var(--c, var(--pink-deep)); }

/* 关系网（加深版：类型标签 + 初见 / 现状） */
.cd-rel { flex-direction: column; align-items: stretch; gap: 3px; }
.cd-rel-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cd-rel-type { font-size: 10.5px; font-style: normal; color: var(--c, var(--pink-deep)); border: 1px solid color-mix(in srgb, var(--c, var(--pink-deep)) 40%, transparent); background: color-mix(in srgb, var(--c, var(--pink-deep)) 8%, transparent); border-radius: 999px; padding: 1px 8px; }
.cd-rel-l { flex-basis: auto; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; }
.cd-rel-l em { font-style: normal; color: var(--gray-deep); margin-right: 5px; font-size: 10.5px; }

/* 称号徽章 */
.cd-titles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cd-title-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--tc, var(--pink-deep)); border: 1px solid color-mix(in srgb, var(--tc, var(--pink-deep)) 45%, transparent); background: color-mix(in srgb, var(--tc, var(--pink-deep)) 10%, transparent); padding: 3px 10px; border-radius: 999px; }
.cd-title-badge svg { color: var(--tc, var(--pink-deep)); }

/* 口头禅 */
.cd-motto { margin: 20px 0 0; padding: 11px 18px; font-size: 14.5px; font-weight: 600; line-height: 1.8; color: var(--c, var(--pink-deep)); border-left: 3px solid var(--c, var(--pink-deep)); background: color-mix(in srgb, var(--c, var(--pink-deep)) 7%, transparent); border-radius: 0 10px 10px 0; }

/* 键值小网格（外在 / 身份 / 内在细节） */
.cd-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; margin-bottom: 10px; }
.cd-kv { font-size: 12.5px; line-height: 1.7; }
.cd-kv em { display: block; font-style: normal; font-size: 11px; color: var(--gray-deep); margin-bottom: 1px; }
.cd-kv span { color: var(--ink); white-space: pre-wrap; }
.cd-kv-grid + p { margin-top: 2px; }

/* 名场面 / 语录 */
.cd-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-quote { position: relative; margin: 0; padding: 14px 16px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c, #b7a78f) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c, #b7a78f) 22%, transparent); }
.cd-quote blockquote { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.cd-quote figcaption { margin-top: 8px; font-size: 11px; color: var(--gray-deep); text-align: right; }
.cd-q-copy { position: absolute; top: 7px; right: 8px; font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--paper); color: var(--gray-deep); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.cd-quote:hover .cd-q-copy { opacity: 1; }
.cd-q-copy:hover { color: var(--c, var(--pink-deep)); border-color: color-mix(in srgb, var(--c, var(--pink-deep)) 50%, transparent); }
@media (hover: none) { .cd-q-copy { opacity: 1; } }

/* 时间线（人生经历 / 世界大事记） */
.cd-timeline { list-style: none; margin: 2px 0 0; padding: 0 0 0 4px; }
.cd-tl { position: relative; padding: 0 0 18px 22px; }
.cd-tl::before { content: ''; position: absolute; left: 4px; top: 9px; bottom: -2px; width: 1px; background: var(--line-soft); }
.cd-tl:last-child { padding-bottom: 2px; }
.cd-tl:last-child::before { display: none; }
.cd-tl-dot { position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--c, var(--pink-deep)); }
.cd-tl-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cd-tl-h time { font-size: 11.5px; font-weight: 600; color: var(--c, var(--pink-deep)); }
.cd-tl-stage { font-size: 10.5px; color: var(--gray-deep); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 8px; }
.cd-tl-h b { font-size: 13px; font-weight: 600; color: var(--ink); }
.cd-tl-body p { margin: 4px 0 0 !important; font-size: 12.5px !important; line-height: 1.85 !important; color: var(--ink-soft); }

/* 同世界观角色 */
.cd-mates { display: flex; gap: 16px; flex-wrap: wrap; }
.cd-mate { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; background: none; border: none; cursor: pointer; padding: 0; }
.cd-mate-av { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 18px; font-weight: 700; color: var(--c, var(--pink-deep)); background: color-mix(in srgb, var(--c, #b7a78f) 13%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c, #b7a78f) 36%, transparent); transition: transform .15s; }
.cd-mate-av img { width: 100%; height: 100%; object-fit: cover; }
.cd-mate:hover .cd-mate-av { transform: translateY(-2px); }
.cd-mate-n { font-size: 11px; color: var(--ink-soft); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 角色卡片上的称号 */
.cc-titles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cc-title { font-size: 10px; line-height: 1.5; color: var(--tc, var(--pink-deep)); border: 1px solid color-mix(in srgb, var(--tc, var(--pink-deep)) 40%, transparent); background: color-mix(in srgb, var(--tc, var(--pink-deep)) 9%, transparent); border-radius: 999px; padding: 0 7px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-title-more { font-size: 10px; color: var(--gray-deep); align-self: center; }

/* 参考图画廊 */
.cd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cd-ref { padding: 0; aspect-ratio: 1; cursor: pointer; overflow: hidden; border-radius: 10px; }
#app #view .cd-ref { border: 1px solid var(--line-soft) !important; }
.cd-ref img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
#app #view .cd-ref:hover img { transform: scale(1.06) !important; }

/* —— 新建 / 编辑表单（modal 挂在 body，不受核清零影响）—— */
.f-char-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.f-av {
  width: 84px; height: 84px; border-radius: var(--rnd-md); border: 2px dashed var(--line-soft);
  background: var(--bg-2); overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft); flex: 0 0 auto; padding: 0;
}
.f-av:hover { border-color: var(--pink-deep); color: var(--pink-deep); }
.f-av img { width: 100%; height: 100%; object-fit: cover; }
.f-av-side { flex: 1; min-width: 0; }
.f-colors { display: flex; gap: 7px; flex-wrap: wrap; }
.f-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); outline: 1px solid var(--line-soft); cursor: pointer; padding: 0; transition: transform .12s; }
.f-color:hover { transform: scale(1.14); }
.f-color.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.f-color-none { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); color: var(--ink-soft); }
.f-rel { border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; margin-bottom: 7px; background: var(--bg-2); }
.f-rel-line { display: grid; grid-template-columns: 1fr 104px 1fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.f-rel .px-input, .f-rel .px-select { padding: 6px 8px; font-size: 12px; }
.f-rel .form-grid { gap: 6px; margin: 0; }

/* —— 分区折叠 —— */
.f-fold { border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 0 12px; margin-top: 10px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.f-fold[open] { padding-bottom: 12px; }
.f-fold > summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink); list-style: none; user-select: none; }
.f-fold > summary::-webkit-details-marker { display: none; }
.f-fold > summary::after { content: '▸'; margin-left: auto; color: var(--gray-deep); transition: transform .18s; font-size: 10px; }
.f-fold[open] > summary::after { transform: rotate(90deg); }
.f-fold > summary svg { color: var(--pink-deep); }
.f-fold .f-label:first-of-type { margin-top: 2px; }
.f-fold-n { color: var(--gray-deep); font-weight: 400; font-size: 11px; }

/* —— 档案完整度条：把「这张卡还差什么」摆在表单最上面 —— */
.f-meter:empty { display: none; }   /* bindForm 晚 60ms 才填内容，别让空框闪一下 */
.f-meter { border: 1px solid var(--line-soft); border-radius: var(--rnd-md); padding: 9px 11px 10px; margin-bottom: 12px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.f-meter .fm-top { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink); }
.f-meter .fm-n { font-family: var(--font-en); font-size: 11px; font-weight: 400; color: var(--gray-deep); margin-left: auto; }
.f-meter .fm-bar { height: 3px; border-radius: 999px; background: var(--line-soft); margin-top: 7px; overflow: hidden; }
.f-meter .fm-bar i { display: block; height: 100%; background: var(--pink-deep); border-radius: 999px; transition: width .25s ease; }
.f-meter .fm-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.f-meter .fm-lead { font-size: 11px; color: var(--gray-deep); }
.f-meter .fm-chip { border: 1px solid var(--line-soft); border-radius: 999px; background: var(--bg-2); color: var(--ink-soft); font-size: 11px; padding: 2px 8px; cursor: pointer; transition: border-color .15s, color .15s; }
.f-meter .fm-chip:hover { border-color: var(--pink-deep); color: var(--pink-deep); }
.f-meter .fm-more { font-size: 11px; color: var(--gray-deep); }
.f-meter .fm-ok { font-size: 11px; color: var(--sage); }
.f-meter.is-done { border-color: color-mix(in srgb, var(--sage) 45%, var(--line-soft)); }
.f-meter.is-done .fm-bar i { background: var(--sage); }

/* —— 出图弹窗：预览 + 「要不要把官网链接画进图里」 —— */
.xo { display: flex; gap: 18px; align-items: flex-start; }
.xo-prev { flex: 1; min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--rnd-md); background: var(--bg-2); padding: 12px; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.xo-prev canvas { display: block; width: 100%; max-width: 460px; height: auto; box-shadow: 0 10px 28px rgba(30, 26, 22, .14); }
.xo-side { width: 226px; flex: none; display: flex; flex-direction: column; gap: 9px; }
.xo-sw { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer; line-height: 1.5; }
.xo-tip { font-size: 11px; line-height: 1.75; color: var(--gray-deep); }
.xo-load { font-size: 12px; color: var(--gray-deep); }
.xo-bad { color: var(--danger); }
@media (max-width: 760px) {
  .xo { flex-direction: column; }
  .xo-side { width: 100%; }
  .xo-prev canvas { max-width: 100%; }
}

/* —— 价目表页 —— */
.pr-lead { font-size: 12px; line-height: 1.9; color: var(--gray-deep); margin: -2px 0 14px; }
.pr-sheet { border: 1px solid var(--line-soft); border-radius: var(--rnd-md); background: var(--paper); padding: 16px 18px 18px; }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pr-f { min-width: 0; }
.pr-f.wide { grid-column: 1 / -1; }
.pr-sec { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pr-sec::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.pr-sec em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--gray-deep); }
.pr-head, .pr-row { display: grid; grid-template-columns: 1.1fr 1fr 2fr .7fr .6fr 30px; gap: 8px; align-items: center; }
.pr-head { font-size: 10.5px; letter-spacing: .08em; color: var(--gray-deep); padding: 0 2px 7px; }
.pr-head i { display: block; }
.pr-row + .pr-row { margin-top: 7px; }
.pr-row .px-input { font-size: 12.5px; padding: 7px 9px; }
.pr-none { border: 1px dashed var(--line-soft); border-radius: 10px; padding: 16px; font-size: 12px; line-height: 1.9; color: var(--gray-deep); }
@media (max-width: 760px) {
  .pr-head { display: none; }
  .pr-grid { grid-template-columns: 1fr; }
  .pr-row { grid-template-columns: 1fr 1fr 30px; }
  .pr-row .pr-desc { grid-column: 1 / -1; }
}

/* —— 称号 / 语录 / 时间线子项编辑 —— */
.f-sub { position: relative; border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; margin-bottom: 7px; background: var(--bg-2); }
.f-sub .px-input, .f-sub .px-textarea { font-size: 12px; padding: 6px 9px; }
.f-sub:not(.f-tl-row) { padding-right: 36px; }
.f-sub .f-sub-del { position: absolute; top: 7px; right: 7px; }
.f-title-row { display: flex; align-items: center; gap: 9px; }
.f-t-colors { display: flex; gap: 4px; flex: 0 0 auto; }
.f-dot { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--paper); outline: 1px solid var(--line-soft); cursor: pointer; padding: 0; flex: 0 0 auto; transition: transform .12s; }
.f-dot:hover { transform: scale(1.12); }
.f-dot.active { outline: 2px solid var(--ink); outline-offset: 1px; }
.f-dot.f-tc-auto { background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; }
.f-dot.f-tc-auto::after { content: '自'; font-size: 9px; color: var(--ink-soft); }
.f-tl-top { display: grid; grid-template-columns: 116px 96px 1fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.f-tl-top .f-sub-del { position: static; }
.f-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.f-ref { position: relative; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.f-ref img { width: 100%; height: 84px; object-fit: cover; display: block; }
.f-ref span { display: block; font-size: 10.5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.f-ref .icon-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(40,32,28,.62); color: #fff; border: none; }

/* —— 响应式 —— */
@media (max-width: 760px) {
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 14px; }
  .cc-face { width: 72px; height: 72px; margin-bottom: 9px; }
  .cc-mono { font-size: 26px; }
  .cd-av { width: 72px; height: 72px; }
  .cd-mono { font-size: 28px; }
  .cd-head { gap: 14px; }
  .cd-name { font-size: 20px; }
  .cd-duo { grid-template-columns: 1fr; gap: 14px; }
  .f-char-top { flex-wrap: wrap; }
  .f-rel-line { grid-template-columns: 1fr 104px; }
  .f-tl-top { grid-template-columns: 1fr 1fr; }
  .f-tl-top .f-tl-title { grid-column: 1 / -1; }
  .f-tl-top .f-sub-del { grid-column: 2; grid-row: 1; justify-self: end; }
  .cd-kv-grid { grid-template-columns: 1fr; gap: 7px; }
  .cd-quotes { grid-template-columns: 1fr; }
  .f-title-row { flex-wrap: wrap; }
}
/* ================================================================
   参考画布：独立悬浮窗（Document Picture-in-Picture）态
   面板整个搬进 PiP 窗口后铺满，去掉外框/定位/拖动缩放控件
   ================================================================ */
#ref-panel.in-pip {
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  translate: none !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: auto !important;
  resize: none !important;
  animation: none !important;
}
#ref-panel.in-pip #ref-min,
#ref-panel.in-pip #ref-max,
#ref-panel.in-pip #ref-resize { display: none !important; }
/* 悬浮窗按钮激活态（图钉已弹出） */
#ref-head #ref-pip.on {
  background: var(--pink-faint, rgba(192, 130, 114, .14));
  color: var(--pink-deep, #7d675b);
}
/* ================================================================
   工作台：逾期提醒条（#view 核清零豁免，虚线赤陶色）
   ================================================================ */
#app #view .work-alert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent) !important;
  border-radius: var(--rnd-md) !important;
  background: transparent !important;
  font-size: 12.5px; color: var(--ink);
}
#app #view .work-alert b { color: var(--danger); font-weight: 600; }
#app #view .work-alert .wa-txt { flex: 1 1 220px; }
#app #view .work-alert .wa-ico { display: inline-flex; flex: 0 0 auto; }
@media (max-width: 640px) {
  #app #view .work-alert { font-size: 12px; padding: 8px 12px; }
}
/* ================================================================
   账本：统计页概览小字（笔数 / 日均 / 峰值）
   ================================================================ */
#app #view .lg-st-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: -2px 2px 12px; font-size: 12px; color: var(--ink-soft);
}
#app #view .lg-st-meta b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  #app #view .lg-st-meta { gap: 12px; font-size: 11.5px; }
}

/* = 账本统计图表 / 工作台步骤条：#view 核清零区豁免（细轨 + 灰蓝·鼠尾草填充） = */
#app #view .lg-bar {
  border: none !important;
  background: rgba(125,103,91,.12) !important;
  border-radius: 6px;
}
#app #view .lg-bar-in { border-radius: 6px; }
#app #view .lg-bar-in.lg-bar-exp { background: #b2bcca !important; }
#app #view .lg-bar-in.lg-bar-inc { background: #9db9a1 !important; }
#app #view .lg-daily-bar {
  border: none !important;
  background: rgba(125,103,91,.15) !important;
  border-radius: 2px 2px 0 0;
}
#app #view .lg-daily-bar.on { background: var(--pink-deep) !important; opacity: .88; }
#app #view .oc-steps .os-bar {
  border: none !important;
  background: rgba(125,103,91,.12) !important;
  border-radius: 3px;
}
#app #view .oc-steps .os-bar i { background: var(--pink-deep) !important; border-radius: 3px; }

/* = 账本：触屏提示文案 + 每日柱色调柔化 = */
#app #view .lg-hint-touch { display: none; }
#app #view .lg-daily-bar.on { background: var(--pink-deep) !important; opacity: .62; }
@media (max-width: 640px) {
  #app #view .lg-hint-pc { display: none; }
  #app #view .lg-hint-touch { display: inline; }
}


/* 第十七轮补丁：找回顶栏光环与壁纸态按钮可见性 */
/* 1) 首页不再隐藏 ✧ 光环符号（原 3095 行 home-on display:none，用户要求找回）*/
body.home-on .logo-halo { display: inline-block !important; }
/* 2) 壁纸态：顶栏按钮默认不透明度 .5 → .88，亮云朵 / 暗草丛上都在 */
body.has-wallpaper.home-on #topbar .top-btn { opacity: .88 !important; }
body.has-wallpaper.home-on #topbar .top-btn:hover { opacity: 1 !important; }
/* 3) 图标双向光晕：白色图标落亮云靠深色实影勾边，深色图标落浅壁纸本身即清晰；
      比原 wall-light/wall-dark 单一光晕更抗「整张判暗、顶部却是亮云」的误判 */
body.has-wallpaper #topbar .top-btn svg,
body.has-wallpaper #topbar .top-now svg,
body.has-wallpaper #topbar .user-chip svg,
body.has-wallpaper #topbar .logo .logo-halo {
  /* 原来这里叠了三层纯黑描边（1px 全黑 + 2.5px .75 + 3px .5），
     落在浅色壁纸上就是一圈发黑的糊影。改为交给下面 wall-light / wall-dark 各走一支：
     浅色壁纸只给白光，深色壁纸只给一层淡黑影。 */
}
/* logo 文字在壁纸上也补一层实影，避免落亮区发飘 */
body.has-wallpaper #topbar .logo-name,
body.has-wallpaper #topbar .logo-en {
  text-shadow: var(--wp-halo-soft, var(--tsh-soft, none)) !important;
}
@media (max-width: 900px) {
  body.home-on .logo-halo { display: inline-block !important; }
}


/* 第十八轮补丁：OC 世界观 / 相册 / 笔记 / 导入 */
/* —— 分区切换（角色名册 / 世界观）—— */
#app #view .oct-tabs { display: inline-flex; gap: 2px; margin-left: 12px; }
#app #view .oct-tab {
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: 2px; color: var(--ink-soft);
  padding: 4px 12px; border-bottom: 1px solid transparent !important;
}
#app #view .oct-tab.active { color: var(--ink); border-bottom-color: var(--pink-deep) !important; }
#app #view .oct-tab:hover { color: var(--pink-deep) !important; }

/* —— 世界观列表 —— */
#app #view .wd-list { display: flex; flex-direction: column; padding-bottom: 40px; }
#app #view .wd-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important; padding: 16px 4px; cursor: pointer;
}
#app #view .wd-card:hover .wd-name b { color: var(--c, var(--pink-deep)) !important; }
#app #view .wd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #b7a78f) !important; flex: 0 0 auto; }
#app #view .wd-dot.lg { width: 13px; height: 13px; }
#app #view .wd-main { flex: 1; min-width: 0; }
#app #view .wd-name b { font-size: 15px; font-weight: 600; color: var(--ink); }
#app #view .wd-intro { font-size: 12px; color: var(--ink-soft); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app #view .wd-meta { font-size: 11px; color: var(--gray-deep); flex: 0 0 auto; white-space: nowrap; }
#app #view .wd-empty {
  text-align: center; padding: 58px 20px;
  border: 2px dashed var(--bg-2) !important; border-radius: var(--rnd-md) !important;
}
#app #view .wd-empty .ce-tip { font-size: 11px; color: var(--gray-deep); margin-top: 6px; }

/* —— 世界观详情 —— */
#app #view .wd-page { max-width: 720px; padding-bottom: 50px; }
#app #view .wd-head { margin-bottom: 4px; }
#app #view .wd-cover {
  width: 100%; max-height: 220px; object-fit: cover; display: block; margin-bottom: 18px;
  border-radius: var(--rnd-md) !important; border: 1px solid var(--line-soft) !important;
}
#app #view .wd-title { font-size: 24px; font-weight: 700; margin: 0 0 10px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
#app #view .wd-text { font-size: 13.5px; line-height: 2; color: var(--ink); margin: 0; }
#app #view .wd-ocs { display: flex; flex-wrap: wrap; gap: 18px 22px; }
#app #view .wd-oc {
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 78px;
}
#app #view .wd-oc-face {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--ink); overflow: hidden;
  background: color-mix(in srgb, var(--pink) 10%, var(--paper)) !important;
  border: 1px solid var(--line-soft) !important;
}
#app #view .wd-oc-face img { width: 100%; height: 100%; object-fit: cover; }
#app #view .wd-oc b { font-size: 12px; font-weight: 600; max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
#app #view .wd-oc:hover b { color: var(--pink-deep) !important; }
#app #view .wd-oc:hover .wd-oc-face { border-color: var(--pink-deep) !important; }

/* 角色卡 / 详情里的世界归属 */
#app #view .cc-world { font-size: 10.5px; color: var(--gray-deep); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
#app #view .cd-world-link {
  margin-top: 7px; font-size: 12px; color: var(--pink-deep);
  display: inline-flex; gap: 5px; align-items: center; cursor: pointer;
}
#app #view .cd-world-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 详情小节标题右侧操作 */
#app #view .cd-h-ops { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
#app #view .cn-add {
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  font-size: 11px; color: var(--pink-deep); padding: 2px 6px; cursor: pointer;
}
#app #view .cn-add.ghost { color: var(--gray-deep); }
#app #view .cn-add:hover { text-decoration: underline; text-underline-offset: 3px; }

/* —— 笔记列表（世界观笔记与角色笔记共用）—— */
#app #view .cn-list { display: flex; flex-direction: column; }
#app #view .cn-item {
  text-align: left; width: 100%; cursor: pointer; padding: 11px 2px;
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
#app #view .cn-item:hover .cn-t b { color: var(--pink-deep) !important; }
#app #view .cn-t { display: flex; align-items: center; gap: 8px; }
#app #view .cn-t b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#app #view .cn-t small { margin-left: auto; font-size: 10.5px; color: var(--gray-deep); flex: 0 0 auto; }
#app #view .cn-x {
  font-size: 12px; color: var(--ink-soft); line-height: 1.7; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#app #view .cn-src {
  font-size: 10px; color: var(--pink-deep); flex: 0 0 auto;
  border: 1px solid currentColor !important; border-radius: 20px !important; padding: 0 7px; line-height: 1.7;
}
.cn-src-line { font-size: 11px; color: var(--gray-deep); margin-bottom: 10px; }

/* —— 相册 —— */
#app #view .ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
#app #view .ca-card {
  background: none !important; box-shadow: none !important; text-align: left; cursor: pointer;
  border-radius: 10px !important; border: 1px solid var(--line-soft) !important; padding: 0; overflow: hidden;
}
#app #view .ca-card:hover { border-color: var(--pink-deep) !important; }
#app #view .ca-cover {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: color-mix(in srgb, var(--pink) 7%, var(--paper)) !important; color: var(--gray-deep);
}
#app #view .ca-cover img { width: 100%; height: 100%; object-fit: cover; }
#app #view .ca-name { display: block; font-size: 12px; font-weight: 600; padding: 6px 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
#app #view .ca-n { display: block; font-size: 10.5px; color: var(--gray-deep); padding: 0 9px 7px; }

/* 相册编辑弹窗（挂 body，普通选择器即可）*/
.ca-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }

/* ============ P35 站内信（公告 / 反馈 / 回复） ============ */
#btn-messages { position: relative; }
.msg-dot {
  position: absolute; top: -6px; right: -7px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--badge); color: #fff;
  border: 2px solid var(--paper);
  border-radius: 999px;
  font-size: 9.5px; line-height: 1; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.draft-dot {
  position: absolute; top: -4px; right: -4px;
  width: 9px; height: 9px;
  background: var(--badge);
  border: 2px solid var(--paper);
  border-radius: 50%;
  pointer-events: none; z-index: 2;
}
.m-app { position: relative; }
.m-badge {
  position: absolute; top: 4px; right: calc(50% - 26px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--badge); border: 1.5px solid var(--paper);
  font-style: normal; pointer-events: none;
}
.msg-tabs {
  display: flex; gap: 8px; margin: 14px 0 16px;
}
.msg-tab {
  position: relative;
  border: 2px solid var(--ink); background: var(--paper);
  color: var(--ink); padding: 7px 18px; font-size: 13px;
  font-family: inherit; cursor: pointer;
  transition: transform .06s, background .15s;
}
.msg-tab:hover { background: var(--pink-pale); }
.msg-tab.active { background: var(--pink); color: var(--paper); }
.msg-tab-badge {
  display: none; margin-left: 6px;
  background: var(--badge); color: #fff; border-radius: 999px;
  font-style: normal; font-size: 10px; line-height: 1;
  padding: 3px 6px; vertical-align: 1px;
}
.msg-tab-badge:not([hidden]) { display: inline-block; }
/* P44FIX-fb-notify：站长「待处理用户反馈」角标（管理台标签 / 站长入口通用） */
.fb-badge {
  display: none; margin-left: 4px;
  background: var(--badge); color: #fff; border-radius: 999px;
  font-style: normal; font-size: 10px; line-height: 1;
  padding: 3px 6px; font-weight: 600;
}
.fb-badge:not([hidden]) { display: inline-block; }
.msg-owner-fb {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  font-size: 12.5px;
}
.msg-owner-fb[hidden] { display: none; }
.msg-pane { max-width: 820px; }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  cursor: pointer;
  transition: transform .08s, border-color .15s;
}
.msg-item:hover { border-color: var(--pink-deep); transform: translateY(-1px); }
.msg-item.unread { border-left: 3px solid var(--gold); }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.msg-preview {
  margin: 4px 0 6px; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-time { font-size: 11px; color: var(--gray-deep); }
.msg-unread {
  flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.msg-kind {
  flex-shrink: 0;
  display: inline-block; font-size: 10.5px; line-height: 1;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--gray-deep); color: var(--ink-soft);
}
.msg-kind-ann { color: #8a6d33; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.msg-kind-reply { color: var(--pink-deep); border-color: var(--pink-deep); background: var(--pink-pale); }
.msg-empty {
  text-align: center; padding: 56px 20px; color: var(--gray-deep);
}
.msg-empty svg { opacity: .5; margin-bottom: 10px; }
.msg-empty p { font-size: 14px; color: var(--ink-soft); margin: 6px 0 2px; }
.msg-empty small { font-size: 12px; }
.msg-loading { padding: 40px; text-align: center; color: var(--gray-deep); font-size: 13px; }

/* 反馈表单 */
.msg-form {
  border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.msg-form-title { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.msg-fb-content { resize: vertical; min-height: 96px; line-height: 1.8; font-family: inherit; }
.msg-form-foot { display: flex; align-items: center; justify-content: space-between; }
.msg-fb-count { font-size: 11px; color: var(--gray-deep); }
.msg-fb-tip { font-size: 11.5px; color: var(--gray-deep); margin: 8px 2px 14px; }
.msg-fb-list { display: flex; flex-direction: column; gap: 10px; }
.msg-fb {
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 13px 15px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}
.msg-fb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msg-fb-head b { font-size: 13.5px; color: var(--ink); }
.msg-fb-state {
  flex-shrink: 0; font-size: 10.5px; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--gray-deep); color: var(--ink-soft);
}
.msg-fb-state.read { color: #8a6d33; border-color: var(--gold); }
.msg-fb-state.done { color: #fff; background: var(--pink-deep); border-color: var(--pink-deep); }
.msg-fb-content { margin: 8px 0 6px; font-size: 13px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.msg-reply {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line-soft);
  background: var(--panel-soft);
}
.msg-reply.unread { border-left: 3px solid var(--gold); }
.msg-reply-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.msg-reply-head time, .msg-detail-meta time { font-size: 11px; color: var(--gray-deep); }
.msg-reply p { font-size: 12.5px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

/* 消息详情弹窗 */
.msg-detail-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.msg-detail-content {
  font-size: 14px; line-height: 2; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  background: var(--panel-soft); border-radius: 12px; padding: 14px 16px;
}

/* 站长后台：站内信管理 */
.adm-msg-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.adm-broadcast-form textarea { resize: vertical; min-height: 90px; line-height: 1.8; font-family: inherit; }
.adm-fb-item { border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.adm-fb-item.unread { border-left: 3px solid var(--gold); }
.adm-fb-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 5px; }
.adm-fb-user { font-size: 12.5px; font-weight: 600; color: var(--pink-deep); }
.adm-fb-text { font-size: 12.5px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.adm-fb-time { font-size: 10.5px; color: var(--gray-deep); }
.adm-fb-actions { margin-top: 8px; display: flex; gap: 8px; }
.adm-bc-item { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 13px; margin-bottom: 9px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.adm-bc-item .adm-bc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-bc-item .adm-bc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-bc-item .adm-bc-actions .btn { padding: 3px 8px; font-size: 11px; }
.adm-bc-item b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bc-item .adm-bc-meta { font-size: 11px; color: var(--gray-deep); margin: 3px 0 5px; }
.adm-bc-edit-box { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.adm-bc-edit-title { font-weight: 600; }
.adm-reply-input { width: 100%; margin-top: 6px; }
@media (max-width: 900px) {
  .adm-msg-layout { grid-template-columns: 1fr; }
  .msg-tabs { margin: 10px 0 12px; }
  .msg-tab { flex: 1; padding: 7px 8px; }
}
.ca-edit-tip { font-size: 11px; color: var(--gray-deep); margin-bottom: 10px; }
.ca-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; }
.ca-empty {
  grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--gray-deep); padding: 34px;
  border: 2px dashed var(--bg-2); border-radius: var(--rnd-md);
}
.ca-edit-grid .f-ref img { cursor: zoom-in; }

/* —— 主色自定义取色器（弹窗内）—— */
.f-color-custom { position: relative; overflow: hidden; padding: 0; background: var(--bg-2); }
.f-color-custom .f-color-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent; cursor: pointer; opacity: 0;
}
.f-color-custom .fcc-ico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); pointer-events: none;
}
.f-color-custom.on .f-color-input { opacity: 1; }
.f-color-custom.on .fcc-ico { display: none; }
.f-color-custom.on { outline: 2px solid var(--ink); outline-offset: 1px; }

/* —— 导入随记 / 素材弹窗 —— */
.im-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.im-tabs .oct-tab {
  background: none; border: none; font-size: 12.5px; color: var(--ink-soft);
  padding: 6px 12px; position: relative; top: 1px; border-bottom: 2px solid transparent; cursor: pointer;
}
.im-tabs .oct-tab.active { color: var(--ink); border-bottom-color: var(--pink-deep); }
.im-tip { font-size: 11.5px; color: var(--gray-deep); margin-bottom: 8px; }
.im-list { max-height: 48vh; overflow-y: auto; display: flex; flex-direction: column; }
.im-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.im-row:hover { background: var(--bg-2); }
.im-thumb { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--line-soft); display: block; }
.im-thumb img { width: 100%; height: 100%; object-fit: cover; }
.im-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.im-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-txt small { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-date { font-size: 10.5px; color: var(--gray-deep); flex: 0 0 auto; }
.im-empty { text-align: center; font-size: 12px; color: var(--gray-deep); padding: 40px 20px; }
.im-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.im-count { font-size: 12px; color: var(--ink-soft); }
.im-alb { font-size: 12.5px; display: flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  #app #view .oct-tabs { margin-left: 0; flex-basis: 100%; order: 3; }
  #app #view .ca-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  #app #view .wd-meta { flex-basis: 100%; text-align: right; }
  #app #view .cd-h-ops { flex-basis: 100%; margin-left: 0; margin-top: 4px; }
}

/* PATCH19: wd-card mobile wrap */
@media (max-width: 760px) {
  #app #view .wd-card { flex-wrap: wrap !important; row-gap: 4px; }
  #app #view .wd-meta { flex-basis: 100%; text-align: right; padding-right: 2px; }
}

/* PATCH20: wallpaper legibility + search highlight */
/* 壁纸态：此前只有首页(home-on)文字带光晕，工作台/记账等功能页小字直接落在云朵草地上发虚。
   亮壁纸用白光、暗壁纸用黑影；桌面走 --wp-halo-soft(>=901px 定义)，手机回退 --tsh-soft。 */
body.has-wallpaper.wall-light:not(.home-on) #app #view *,
body.has-wallpaper.wall-light:not(.home-on) #nav,
body.has-wallpaper.wall-light:not(.home-on) #nav * {
  text-shadow: var(--wp-halo-soft, var(--tsh-soft, 0 1px 6px rgba(255,255,255,.5))) !important;
}
body.has-wallpaper.wall-dark:not(.home-on) #app #view *,
body.has-wallpaper.wall-dark:not(.home-on) #nav,
body.has-wallpaper.wall-dark:not(.home-on) #nav * {
  text-shadow: var(--wp-halo-soft, 0 1px 7px rgba(0,0,0,.42)) !important;
}
/* 全局搜索跳到某条角色/世界笔记时，柔和高亮一下 */
#app #view .cn-item.hl-flash {
  background: rgba(127, 140, 160, .16) !important;
  outline: 1px dashed var(--pink-deep) !important;
  outline-offset: 3px;
  border-radius: 10px !important;
}

/* PATCH20b: search results above nav-track */
body.home-on .home-head { z-index: 62 !important; }

/* PATCH20c: nav-track passthrough while search open */
body.search-open .nav-track { pointer-events: none !important; }

/* PATCH20d: stronger wallpaper text halo */
@media (min-width: 901px) {
  body.has-wallpaper.wall-dark { --wp-halo-soft: 0 1px 2px rgba(10,14,22,.65), 0 2px 10px rgba(10,14,22,.45); }
  body.has-wallpaper.wall-light { --wp-halo-soft: 0 1px 2px rgba(255,255,255,.80), 0 2px 10px rgba(255,255,255,.55); }
}
@media (max-width: 900px) {
  body.has-wallpaper.wall-dark { --tsh-soft: 0 1px 2px rgba(10,14,22,.65), 0 2px 10px rgba(10,14,22,.45); --tsh: 0 1px 2px rgba(10,14,22,.6), 0 1px 10px rgba(10,14,22,.5); }
  body.has-wallpaper.wall-light { --tsh-soft: 0 1px 2px rgba(255,255,255,.80), 0 2px 10px rgba(255,255,255,.55); --tsh: 0 1px 2px rgba(255,255,255,.75), 0 1px 9px rgba(255,255,255,.55); }
}

/* PATCH20e: crisp small text on bright wallpaper zones */
@media (min-width: 901px) {
  body.has-wallpaper.wall-dark { --wp-halo-soft: 0 0 2px rgba(8,12,20,.60), 0 1px 2px rgba(8,12,20,.72), 0 2px 9px rgba(8,12,20,.45); }
  body.has-wallpaper.wall-light { --wp-halo-soft: 0 0 2px rgba(255,255,255,.70), 0 1px 2px rgba(255,255,255,.85), 0 2px 9px rgba(255,255,255,.55); }
}
@media (max-width: 900px) {
  body.has-wallpaper.wall-dark { --tsh-soft: 0 0 2px rgba(8,12,20,.60), 0 1px 2px rgba(8,12,20,.72), 0 2px 9px rgba(8,12,20,.45); }
  body.has-wallpaper.wall-light { --tsh-soft: 0 0 2px rgba(255,255,255,.70), 0 1px 2px rgba(255,255,255,.85), 0 2px 9px rgba(255,255,255,.55); }
}

/* PATCH20f: frosted desktop search panel */
@media (min-width: 901px) {
  body.home-on #app #view .search-results {
    background: color-mix(in srgb, var(--paper) 86%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
    box-shadow: 0 16px 44px rgba(10, 14, 22, .28) !important;
  }
}

/* PATCH21: calendar anniversaries */
/* 月历格子里的纪念日心形标记（覆盖 .cc-dots i 的圆点盒模型） */
#app #view .cal-cell .cc-dots i.ann {
  width: auto !important; height: auto !important;
  background: none !important; border: none !important; border-radius: 0 !important;
  font-style: normal !important; font-size: 8px !important; line-height: 1 !important;
  color: var(--pink-deep) !important; padding: 0 1px;
}
#app #view .cal-cell.today .cc-dots i.ann { color: #fff !important; }

/* —— P42 日历提醒横幅：今天 / 近 3 天有待办、截止订单、纪念日 —— */
#cal-banner { margin: 0 0 12px; }
.cal-ban {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 9px 14px; border-radius: 14px;
  font-size: 12px; line-height: 1.6;
}
.cal-ban.is-today {
  background: color-mix(in srgb, var(--danger) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
  color: var(--ink);
}
.cal-ban.is-soon {
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
  border: 1px dashed color-mix(in srgb, var(--gold) 48%, transparent);
  color: var(--ink-soft);
}
.cal-ban.is-none {
  background: transparent; border: 1px dashed var(--line-soft);
  color: var(--gray-deep); justify-content: center;
}
.cal-ban .cb-lead {
  font-family: var(--serif); letter-spacing: 2px; font-size: 13px;
  color: var(--pink-deep); white-space: nowrap;
}
.cal-ban.is-soon .cb-lead { color: var(--gold); }
.cal-ban .cb-grp { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 8px; padding: 1px 4px; }
.cal-ban .cb-grp:hover { background: rgba(255,255,255,.35); }
.cal-ban .cb-grp b { font-weight: 500; color: var(--ink-soft); margin-right: 2px; }
.cal-ban .cb-tag {
  font-style: normal; white-space: nowrap;
  padding: 1px 9px; border-radius: 999px; font-size: 11px; line-height: 17px;
}
.cal-ban .cb-todo { background: color-mix(in srgb, var(--pink-deep) 15%, transparent); color: var(--pink-deep); }
.cal-ban .cb-ord  { background: color-mix(in srgb, var(--gold) 18%, transparent); color: color-mix(in srgb, var(--gold) 72%, var(--ink)); }
.cal-ban .cb-ann  { background: color-mix(in srgb, var(--badge) 14%, transparent); color: var(--badge); }

/* 桌面弧形小径「日历」文字旁的角标 */
.w-cal-badge { font-style: normal; margin-left: 7px; vertical-align: middle; }
.w-cal-badge.is-num {
  display: inline-block; min-width: 15px; padding: 1px 5px;
  border-radius: 999px; background: var(--badge); color: #fff;
  font-size: 9px; line-height: 13px; text-align: center;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--badge) 45%, transparent);
}
.w-cal-badge.is-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 2px var(--paper);
}

/* 手机抽屉日历角标的数字款（小圆点沿用 .m-badge） */
.m-badge.m-badge-num {
  width: auto; min-width: 15px; height: 15px; padding: 0 4px;
  right: 0; top: -3px;
  border-radius: 999px; border-width: 1px;
  font-size: 9px; line-height: 13px; text-align: center;
  color: #fff; font-style: normal; font-weight: 600; letter-spacing: 0;
}

/* 侧栏纪念日列表 */
#app #view .ann-list { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
#app #view .ann-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: color-mix(in srgb, var(--pink) 6%, transparent) !important;
  cursor: pointer; transition: transform .15s ease, background .15s ease;
}
#app #view .ann-row:hover { transform: translateY(-1px); background: var(--pink-faint) !important; }
#app #view .ann-row .ann-ht { color: var(--pink-deep); font-size: 13px; flex: none; }
#app #view .ann-row .ann-m { flex: 1; min-width: 0; }
#app #view .ann-row .ann-n {
  font-size: 12.5px; color: var(--ink); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#app #view .ann-row .ann-d { font-size: 10px; color: var(--ink-soft); line-height: 1.5; }
#app #view .ann-row .ann-cd {
  flex: none; white-space: nowrap; text-align: right;
  font-size: 10px; color: var(--ink-soft);
}
#app #view .ann-row .ann-cd b {
  display: block; font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--pink-deep); line-height: 1.2;
}
#app #view .ann-row.is-today {
  border-color: color-mix(in srgb, var(--pink-deep) 55%, transparent) !important;
  background: color-mix(in srgb, var(--pink) 14%, transparent) !important;
}

/* 当日面板里的纪念日行（沿用 .cal-ord 骨架，粉心代替金点） */
#app #view .cal-ann {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: color-mix(in srgb, var(--pink) 5%, transparent) !important;
  cursor: pointer;
}
#app #view .cal-ann:hover { background: var(--pink-faint) !important; }
#app #view .cal-ann .ca-ht { color: var(--pink-deep); font-size: 12px; flex: none; }
#app #view .cal-ann b { font-size: 12px; display: block; line-height: 1.3; }
#app #view .cal-ann .ca-chip {
  margin-left: auto; flex: none; font-size: 10.5px; white-space: nowrap;
  color: var(--pink-deep); font-family: var(--mono);
}
#app #view .cal-ann.is-today { border-color: color-mix(in srgb, var(--pink-deep) 55%, transparent) !important; }

/* 添加/编辑弹窗里的类型选择按钮 */
#an-kinds .chip { font-size: 12px; }

/* PATCH21b: ann modal chips */
#an-kinds .chip { border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
#an-kinds .chip:hover { background: var(--pink-faint); }
#an-kinds .chip.active,
#an-kinds .chip.active:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }

/* PATCH21c: ann modal chips override */
#an-kinds .chip {
  border: 2px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 999px;
}
#an-kinds .chip:hover { background: var(--pink-faint) !important; }
#an-kinds .chip.active,
#an-kinds .chip.active:hover {
  background: var(--pink-deep) !important;
  border-color: var(--pink-deep) !important;
  color: #fff !important;
}

/* PATCH22: sticky home head + ai-nope banner */
/* 手机首页：问候+时钟+搜索整块吸顶，往下翻时不再跟着滚走 */
@media (max-width: 900px) {
  body.home-on #app #view .home-head-m {
    position: sticky !important;
    top: 0;
    z-index: 6 !important;
    margin-bottom: 14px;
  }
}

/* ai对话：未接入模型时的提醒条（无框风：淡粉底 + 粉描边，深浅壁纸都可读） */
#app #view .ai-nope {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--pink-deep) 45%, transparent) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pink) 10%, transparent) !important;
}
#app #view .ai-nope .an-ico {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink-deep) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  font-style: normal;
}
#app #view .ai-nope .an-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#app #view .ai-nope .an-txt b { font-size: 12.5px; color: var(--ink); }
#app #view .ai-nope .an-txt span { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
#app #view .ai-nope .btn { flex: none; }
@media (max-width: 900px) {
  #app #view .ai-nope { margin: 8px 0 0; }
  #app #view .ai-nope .an-txt span { display: none; }
}

/* PATCH22b: ai-nope frosted legibility */
#app #view .ai-nope {
  background: color-mix(in srgb, var(--paper) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3) !important;
  border: 1px solid color-mix(in srgb, var(--pink-deep) 38%, transparent) !important;
  box-shadow: 0 10px 30px rgba(10, 14, 22, .14) !important;
}
#app #view .ai-nope .an-txt b { color: var(--ink); }
#app #view .ai-nope .an-txt span { color: var(--ink-soft); }
#app #view #ai-nope-go.btn,
#app #view .ai-nope #ai-nope-go {
  background: var(--pink-deep) !important;
  color: #fff !important;
  border: 1px solid var(--pink-deep) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
#app #view #ai-nope-go.btn:hover { filter: brightness(1.06); }

/* PATCH22c: ai-nope frosted system alignment */
#app #view .ai-nope.frosted {
  background-color: var(--frost-bg) !important;
  border: 1px solid var(--frost-line) !important;
  box-shadow: var(--frost-shadow, 0 10px 30px rgba(10, 14, 22, .14)) !important;
}
#app #view .ai-nope .an-ico {
  background: var(--pink-deep);
  color: #fff;
}
:root.dark #app #view .ai-nope .an-ico { color: #2a2f36; }
#app #view #ai-nope-go.btn,
#app #view .ai-nope #ai-nope-go {
  background: var(--pink-deep) !important;
  border: 1px solid var(--pink-deep) !important;
  color: #fff !important;
}
:root.dark #app #view #ai-nope-go.btn,
:root.dark #app #view .ai-nope #ai-nope-go { color: #2a2f36 !important; }

/* PATCH23: wide-mobile home content anchored right */
/* 601-900px：手机模板但屏幕够宽时，数字+文字+箭头这一整团锚到右缘，
   不再缩在左边让右半边空着；<=600px 真手机与 >900px 桌面均不受影响。 */
@media (min-width: 601px) and (max-width: 900px) {
  body.home-on #app #view .stat {
    justify-content: flex-end !important;
    gap: 14px !important;
  }
  /* meta 固定同宽，两行的大数字左缘才能对齐；整团随 flex-end 靠右 */
  body.home-on #app #view .stat .meta {
    flex: 0 0 auto !important;
    width: 210px !important;
  }
  /* 台词签收成内容宽、整体贴右，内部右对齐，底边线随内容走 */
  body.home-on #app #view .quote {
    margin-left: auto !important;
    width: fit-content !important;
    max-width: 64% !important;
    text-align: right;
  }
  body.home-on #app #view .quote .row { justify-content: flex-end; }
}

/* PATCH24: frosted app drawer, wallpaper-adaptive day/dark */
/* 抽屉原来用不透明 var(--paper)，壁纸取色会把整板翻成死黑/死白，与壁纸割裂。
   现在走全站统一的 --frost-* 磨砂变量（壁纸透过来自然适配），
   内部文字/边线变量钉在 #m-sheet 自身（同 .frosted 约定），不再跟随壁纸取色反相。 */
@media (max-width: 1024px) {
  /* 遮罩：暗壁纸/夜间压深一点，亮壁纸保持暖棕薄纱 */
  body.wall-dark #m-mask,
  :root.dark #m-mask {
    background: rgba(10, 12, 18, .48) !important;
  }
  body.wall-light #m-mask {
    background: rgba(52, 40, 28, .30) !important;
  }

  #m-sheet {
    background-color: var(--frost-bg) !important;
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur) !important;
    border-top: 1px solid var(--frost-line) !important;
    box-shadow: var(--frost-shadow) !important;
    /* 钉住内部调色板（日间）：壁纸明暗不再把抽屉文字反相 */
    color: var(--ink);
    --ink: #886070;
    --ink-soft: #a98a97;
    --gray-deep: #9a8e86;
    --paper: #ffffff;
    --pink-deep: #7d675b;
    --pink-pale: #e9ded4;
    --pink-faint: #f3ece6;
    --line: rgba(61, 51, 48, .14);
  }
  :root.dark #m-sheet {
    --ink: #e8d6dd;
    --ink-soft: #b39aa4;
    --gray-deep: #8591a1;
    --paper: #2a323d;
    --pink-deep: #bccbe0;
    --pink-pale: #2f3947;
    --pink-faint: #2a323d;
    --line: rgba(255, 255, 255, .13);
  }

  /* 图标小砖：纸面半档实色 + 细边，浮在磨砂面上有层次 */
  #m-sheet .m-app .m-ai {
    background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
    border: 1px solid var(--line) !important;
  }
  #m-grab { background: var(--line) !important; }

  /* 不支持 backdrop-filter 时退回接近实心，文字绝不悬空 */
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    #m-sheet { background-color: rgba(255, 255, 255, .97) !important; }
    :root.dark #m-sheet { background-color: rgba(28, 32, 40, .98) !important; }
  }
}

/* === P25-CUSTOM-SND-MARK === */
.mx-add{margin-top:2px;font-size:10.5px;padding:6px 0;border-radius:99px;cursor:pointer;border:1px dashed rgba(122,139,168,.45);background:transparent;color:var(--gray-deep);display:inline-flex;align-items:center;justify-content:center;gap:5px}
.mx-add:hover{color:var(--pink-deep);border-color:var(--pink)}
.mx-add-row{display:flex;gap:6px;margin-top:2px}
.mx-add-row .mx-add{flex:1;margin-top:0}
.mx-add-box{border-style:solid;border-color:rgba(122,139,168,.3)}
.mx-pick-list{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow-y:auto;padding:2px}
.mx-pick-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;font-size:12px;cursor:default;border:1px solid transparent;transition:background .12s}
.mx-pick-row:hover{background:rgba(122,139,168,.10)}
.mx-pick-row.picked{opacity:.5}
.mx-pick-no{color:var(--gray);width:18px;text-align:center;font-size:11px}
.mx-pick-name{flex:1;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-pick-artist{color:var(--gray-deep);font-size:11px;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-pick-dur{color:var(--gray);font-size:10.5px;font-variant-numeric:tabular-nums}
.mx-pick-add{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--pink-deep);cursor:pointer;border:1px solid rgba(122,139,168,.3)}
.mx-pick-add:hover{background:var(--pink-pale)}
.mx-pick-hint{margin-top:8px;font-size:11px;line-height:1.55;color:var(--gray-deep)}
.mx-add-form{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:12px;background:rgba(122,139,168,.10)}
.mx-add-form[hidden]{display:none}
.mx-add-form input{font-size:11px;padding:6px 9px;border-radius:8px;border:1px solid rgba(122,139,168,.35);background:rgba(255,255,255,.55);color:var(--ink-soft);outline:none;min-width:0}
.mx-add-form input:focus{border-color:var(--pink)}
.mx-add-actions{display:flex;gap:6px}
.mx-add-actions button{flex:1;font-size:10.5px;padding:5px 0;border-radius:99px;cursor:pointer}
.mx-add-ok{border:none;background:rgba(122,139,168,.88);color:#fff}
.mx-add-cancel{border:1px solid rgba(122,139,168,.35);background:transparent;color:var(--gray-deep)}
.mx-add-hint{font-size:9.5px;line-height:1.5;color:var(--gray-deep);opacity:.85}
.snd-rm{flex:none;width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:var(--gray-deep);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.snd-rm:hover{background:rgba(122,139,168,.18);color:var(--pink-deep)}

/* === P25-CUSTOM-SND-FIX2 === */
.mx-snd input[type=range]{min-width:0}
.mx-snd .snd-chip{min-width:60px}

/* P27RV ===== 全站内容查看态（笔记 / 素材 / 相册）：默认只读排版，编辑显式进入 ===== */
.rv-meta { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:11.5px; color:var(--ink-soft); margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed var(--line); }
.rv-meta .rv-pin { color:var(--pink-deep); font-weight:600; }
.rv-meta .rv-cat { color:var(--pink-deep); }
.rv-src { font-size:11px; color:var(--ink-soft); border:1px solid var(--line-soft); border-radius:999px; padding:1px 10px; }
.rv-body.md-preview { font-size:14.5px; line-height:2; max-height:60vh; overflow-y:auto; padding:2px 6px 2px 2px; }
.rv-body.md-preview h1 { font-size:21px; line-height:1.5; margin:16px 0 8px; font-weight:700; }
.rv-body.md-preview h2 { font-size:18px; line-height:1.5; margin:14px 0 7px; font-weight:700; }
.rv-text { font-size:14.5px; line-height:2; white-space:pre-wrap; word-break:break-word; color:var(--ink); max-height:60vh; overflow-y:auto; padding:2px 4px; }
.rv-empty { color:var(--gray-deep); font-size:13px; text-align:center; padding:44px 20px; line-height:1.9; }
.rv-hero { display:flex; justify-content:center; margin:0 0 12px; }
.rv-hero img { max-width:100%; max-height:48vh; border-radius:12px; border:1px solid var(--line-soft); cursor:zoom-in; background:var(--bg-2); }
.rv-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; max-height:56vh; overflow-y:auto; padding:2px; }
.rv-photo { border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; background:var(--bg-2); cursor:zoom-in; transition:transform .15s ease, box-shadow .15s ease; }
.rv-photo:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(60,48,38,.12); }
.rv-photo img { width:100%; height:150px; object-fit:cover; display:block; }
.rv-photo span { display:block; font-size:11px; padding:4px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); }
.rv-atts { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.rv-att { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:8px; font-size:12.5px; color:var(--ink); }
.rv-att b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.rv-att .im-thumb { width:38px; height:38px; flex:0 0 auto; }
@media (max-width:760px) {
  .rv-photos { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; }
  .rv-photo img { height:118px; }
  .rv-body.md-preview, .rv-text { font-size:14px; max-height:58vh; }
}

/* P28SND-css 氛围控制台：本地音乐上传表单的文件选择框 */
.mx-add-form input[type=file]{font-size:10px;padding:3px 6px;}
.mx-add-form input[type=file]::file-selector-button{margin-right:8px;border:1px solid rgba(122,139,168,.45);background:rgba(255,255,255,.7);border-radius:99px;padding:2px 10px;font-size:10px;color:var(--ink-soft);cursor:pointer}
.mx-add-ok:disabled{opacity:.55;cursor:wait}

/* P28SND-ui 氛围控制台：上传本地音乐表单美化（拖拽区/文件卡/主次按钮/上传转圈） */
.mx-add{margin-top:5px;font-size:11px;letter-spacing:.05em;padding:9px 0;border-radius:12px;border:1px dashed rgba(122,139,168,.55);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.22));color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.mx-add:hover{color:var(--pink-deep);border-color:var(--pink);background:rgba(255,255,255,.72);transform:translateY(-1px)}
.mx-add:active{transform:translateY(0)}
.mx-add-form{gap:8px;padding:10px;border-radius:14px;background:linear-gradient(180deg,rgba(122,139,168,.13),rgba(122,139,168,.05));border:1px solid rgba(122,139,168,.18)}
.mx-drop{position:relative;display:flex;align-items:center;gap:9px;padding:11px 10px;border-radius:12px;border:1px dashed rgba(122,139,168,.5);background:rgba(255,255,255,.5);cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;min-width:0}
.mx-drop:hover{border-color:var(--pink);background:rgba(255,255,255,.72)}
.mx-drop.drag{border-color:var(--pink);background:var(--pink-faint);box-shadow:0 0 0 3px rgba(166,144,132,.18)}
.mx-drop.err{border-color:var(--danger);animation:mxShake .4s}
@keyframes mxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.mx-drop-empty{display:flex;flex-direction:column;align-items:center;width:100%;gap:2px;padding:3px 0;text-align:center}
.mx-drop-empty[hidden],.mx-drop-file[hidden]{display:none}
.mx-drop-ico{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:3px;color:var(--pink-deep);background:rgba(255,255,255,.82);border:1px solid rgba(122,139,168,.3);box-shadow:0 2px 6px rgba(46,52,64,.1)}
.mx-drop-t{font-size:11px;color:var(--ink-soft);line-height:1.35}
.mx-drop-s{font-size:9px;color:var(--gray-deep);letter-spacing:.03em}
.mx-drop-file{display:flex;align-items:center;gap:9px;width:100%;min-width:0}
.mx-note{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,rgba(122,139,168,.97),rgba(101,116,143,.97));box-shadow:0 3px 8px rgba(46,52,64,.25)}
.mx-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mx-file-name{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.mx-file-size{font-size:9px;color:var(--gray-deep);font-variant-numeric:tabular-nums}
.mx-file-clear{flex:none;width:20px;height:20px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;background:rgba(122,139,168,.18);color:var(--gray-deep);cursor:pointer;transition:background .15s,color .15s}
.mx-file-clear:hover{background:var(--btn-danger-bg);color:#fff}
.mx-namewrap{display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:10px;border:1px solid rgba(122,139,168,.32);background:rgba(255,255,255,.6);transition:border-color .18s,box-shadow .18s}
.mx-namewrap:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(166,144,132,.16)}
.mx-namewrap>i{flex:none;color:var(--gray-deep)}
.mx-namewrap input{flex:1;min-width:0;width:100%;border:none!important;background:transparent!important;padding:7px 0!important;border-radius:0;font-size:11px;color:var(--ink-soft);outline:none}
.mx-add-actions{display:flex;gap:7px}
.mx-add-actions button{flex:1;font-size:10.5px;padding:7px 0;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:transform .18s,filter .18s,opacity .18s,box-shadow .18s}
.mx-add-ok{border:none;background:linear-gradient(135deg,rgba(122,139,168,.97),rgba(101,116,143,.97));color:#fff;box-shadow:0 3px 9px rgba(46,52,64,.22)}
.mx-add-ok:hover:not(:disabled):not(.busy){filter:brightness(1.07);transform:translateY(-1px)}
.mx-add-ok:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.mx-add-ok.busy{opacity:.85;cursor:wait}
.mx-add-cancel{border:1px solid rgba(122,139,168,.35);background:rgba(255,255,255,.5);color:var(--gray-deep)}
.mx-add-cancel:hover{color:var(--ink-soft);border-color:rgba(122,139,168,.55)}
.mx-spin{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:mxRot .7s linear infinite;display:inline-block}
@keyframes mxRot{to{transform:rotate(360deg)}}
.mx-add-hint{font-size:9px;line-height:1.6;color:var(--gray-deep);text-align:center;letter-spacing:.02em}

/* ============================================================
   P37 首登新手引导（聚光灯） · PWA 安装气泡 · Pro 温柔提醒条 · 场景化权益卡
   ============================================================ */

/* —— 新手引导：遮罩 + 镂空 + 卡片（全部为引导自有元素，不碰任何目标节点）—— */
#ob-overlay{position:fixed;inset:0;z-index:100000;}
#ob-hole{
  position:fixed;border-radius:14px;z-index:100001;pointer-events:none;
  border:2px solid rgba(176,141,87,.95);
  box-shadow:0 0 0 9999px rgba(28,22,14,.56),0 0 24px rgba(176,141,87,.35);
  transition:left .3s cubic-bezier(.22,.8,.3,1),top .3s cubic-bezier(.22,.8,.3,1),
             width .3s cubic-bezier(.22,.8,.3,1),height .3s cubic-bezier(.22,.8,.3,1);
}
#ob-card{
  position:fixed;z-index:100002;width:304px;max-width:calc(100vw - 24px);
  padding:17px 18px 13px;border-radius:18px;
  border:1px solid rgba(176,141,87,.5);box-shadow:0 18px 50px rgba(0,0,0,.34);
}
#ob-card.ob-pop{animation:obFade .26s ease-out;}
@keyframes obFade{from{opacity:0}to{opacity:1}}
#ob-x{
  position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;
  border:none;background:transparent;color:var(--gray-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#ob-x:hover{color:var(--ink);background:var(--bg-2)}
#ob-dots{display:flex;gap:5px;margin:2px 0 11px}
.ob-dot{width:6px;height:6px;border-radius:50%;background:var(--bg-2);transition:all .25s}
.ob-dot.on{width:16px;border-radius:4px;background:#b08d57}
#ob-title{font-size:15px;font-weight:700;color:var(--ink);margin:0 26px 6px 0}
#ob-body{font-size:12.5px;line-height:1.85;color:var(--ink-soft);margin:0}
#ob-actions{display:flex;align-items:center;gap:8px;margin-top:14px}

/* —— P41 纹理深浅滑杆：纹理选「无」时整行置灰 —— */
.lk-tex-op-row.is-off{opacity:.4;pointer-events:none}
.lk-tex-op-row input[type=range]:disabled{cursor:not-allowed}

/* —— P40 自定义壁纸上传按钮旁的小小 Pro 标 —— */
.lk-pro-mini{
  display:inline-flex;align-items:center;
  border:1px solid rgba(176,141,87,.55);border-radius:999px;
  padding:1px 7px;font-size:9.5px;line-height:15px;letter-spacing:.5px;
  color:#b08d57;background:rgba(176,141,87,.10);white-space:nowrap;
  font-style:normal;
}

/* —— P39 手机端引导：圆角更圆、描边更粗一点，配底栏/抽屉的高亮更醒目 —— */
#ob-overlay.ob-m #ob-hole{border-radius:18px;border-width:2.5px}
#ob-overlay.ob-m #ob-card{border-radius:20px;padding:16px 16px 12px}
#ob-overlay.ob-m #ob-title{font-size:15px}
#ob-overlay.ob-m #ob-body{font-size:12.5px;line-height:1.8}

/* —— PWA 安装气泡：左下角轻提示，移动端避开底栏 —— */
#pwa-bubble{
  position:fixed;left:22px;bottom:24px;z-index:9500;width:288px;max-width:calc(100vw - 24px);
  display:flex;gap:10px;align-items:flex-start;padding:13px 12px;border-radius:16px;
  border:1px solid rgba(176,141,87,.45);box-shadow:0 12px 36px rgba(0,0,0,.26);
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease;
}
#pwa-bubble.in{opacity:1;transform:none}
.pwa-ico{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,#b08d57 16%,transparent)}
.pwa-main{flex:1;min-width:0}
.pwa-main b{font-size:13px;color:var(--ink)}
.pwa-main p{font-size:11.5px;line-height:1.7;color:var(--ink-soft);margin:3px 0 8px}
.pwa-actions{display:flex;gap:8px;flex-wrap:wrap}
#pwa-x{position:absolute;top:7px;right:8px;border:none;background:transparent;color:var(--gray-deep);cursor:pointer;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
#pwa-x:hover{color:var(--ink);background:var(--bg-2)}
@media (max-width:900px){
  #pwa-bubble{left:12px;right:12px;bottom:82px;width:auto}
}

/* —— Pro 触限「温柔提醒」条 —— */
.gentle-bar{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  z-index:9999;display:none;align-items:center;gap:9px;max-width:92vw;
  padding:9px 10px 9px 18px;border-radius:999px;
  background:rgba(59,52,42,.96);color:#f3ead8;border:1px solid rgba(176,141,87,.7);
  box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:12.5px;line-height:1.5;
  opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.gentle-bar.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
#halo-pro-bar-txt{max-width:58vw}
.gb-pro{
  border:none;background:#b08d57;color:#fff;border-radius:999px;padding:5px 13px;
  font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.gb-pro:hover{filter:brightness(1.08)}
.gb-x{
  border:none;background:transparent;color:rgba(243,234,216,.55);font-size:11px;
  cursor:pointer;padding:4px 5px;font-family:inherit;white-space:nowrap;
}
.gb-x:hover{color:#f3ead8}
@media (max-width:600px){
  .gentle-bar{border-radius:16px;bottom:82px;max-width:calc(100vw - 20px);flex-wrap:wrap;padding:11px 12px}
  #halo-pro-bar-txt{max-width:none;flex-basis:100%}
}

/* —— Pro 权益：场景化卡片（替代旧的参数表）—— */
.pf-legend{display:flex;font-size:11px;color:var(--gray-deep);padding:0 4px 5px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.pf-legend span:first-child{flex:1}
.pf-legend span:not(:first-child){width:52px;text-align:center;flex:0 0 auto}
.pro-feats{display:flex;flex-direction:column;gap:8px}
.pro-feat{
  border:1px solid var(--line-soft);border-radius:13px;padding:9px 12px 7px;
  background:color-mix(in srgb,var(--paper) 62%,transparent);
}
.pro-feat.pf-always{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}
.pf-head{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.pf-head b{font-size:12.5px;color:var(--ink)}
.pf-head small{font-size:10.5px;color:var(--gray-deep)}
.pf-ico{display:inline-flex;align-items:center}
.pf-row{display:flex;align-items:baseline;font-size:12px;line-height:2}
.pf-name{flex:1;color:var(--ink-soft);min-width:0}
.pf-free,.pf-pro{width:52px;text-align:center;flex:0 0 auto}
.pf-free{color:var(--gray-deep)}
.pf-pro{color:#b08d57;font-weight:600}
.pf-free.pf-yes{color:#5a8a5f;font-weight:600}
.pf-always .pf-pro.pf-yes{color:#5a8a5f;font-weight:600}

/* ============ P38 找回密码：登录页入口 / 暗号卡 / 三步向导 ============ */
.auth-forgot{
  float:right;border:0;background:none;padding:0;
  font-size:11.5px;color:#b08d57;text-decoration:none;
  border-bottom:1px dashed rgba(176,141,87,.6);
  font-family:inherit;line-height:1.4;
}
.auth-forgot:hover{color:#8f6d3f}
.rc-box{
  margin:4px 0 10px;padding:14px 10px;text-align:center;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:21px;font-weight:700;letter-spacing:2px;
  color:#7a5c2e;background:rgba(255,248,235,.85);
  border:1.5px dashed rgba(176,141,87,.55);border-radius:12px;
  user-select:all;word-break:break-all;line-height:1.5;
}
.rc-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rc-wizard .rc-tip{font-size:12.5px;line-height:1.7;color:var(--gray-deep,#8a7d7d);margin:0 0 12px}
.rc-wizard .rc-input{width:100%;margin-bottom:8px}
.rc-msg{min-height:18px;font-size:12px;color:var(--btn-danger-bg,#bb736b);margin:2px 0 8px}
.rc-q{
  margin:2px 0 10px;padding:9px 12px;font-size:13px;font-weight:600;
  background:rgba(255,248,235,.7);border-radius:10px;color:#6b5330;
}
.rc-tabs{display:flex;gap:8px;margin-bottom:12px}
.rc-tab{
  flex:1;padding:8px 0;border:1.5px solid rgba(176,141,87,.4);background:transparent;
  border-radius:12px;font-size:12.5px;font-family:inherit;color:var(--gray-deep,#8a7d7d);
  transition:.15s;
}
.rc-tab.on{background:rgba(176,141,87,.14);border-color:#b08d57;color:#7a5c2e;font-weight:600}

/* ============================================================
   P42 补丁：月历事项标记可见性恢复
   极简去色层 `#app #view *`（约 3898 行）把 cc-dots 小点、
   today 粉底、selected 金框全部强制透明，导致有待办/订单/
   纪念日的日期在格子里没有任何标记。本层用同 ID 前缀 +
   更高特异性在极简语言内只把"小色点 / 细描边"还回来，
   不恢复大色块。
   ============================================================ */
/* 小点行整体水平居中（去色层连 transform 也清了，一并恢复） */
#app #view .cal-cell .cc-dots {
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* 待办：暖棕粉实点 */
#app #view .cal-cell .cc-dots i {
  width: 5px !important; height: 5px !important;
  border: none !important; border-radius: 50% !important;
  background-color: var(--pink-deep) !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1;
}
/* 截止订单：深金点 */
#app #view .cal-cell .cc-dots i.ord { background-color: color-mix(in srgb, var(--gold) 62%, var(--danger)) !important; }
/* 逾期未交：朱砂红点 */
#app #view .cal-cell .cc-dots i.ord.late { background-color: var(--danger) !important; }
/* 纪念日：玫红小爱心（覆盖 PATCH21 在 today 下变白的旧规则——粉底已不存在） */
#app #view .cal-cell .cc-dots i.ann {
  width: auto !important; height: auto !important;
  background: none !important; border: none !important; border-radius: 0 !important;
  font-size: 9px !important; line-height: 1 !important;
  color: var(--badge) !important;
}
/* 已完成事项淡化，不与未完成抢视线 */
#app #view .cal-cell .cc-dots i.done { opacity: .28; }

/* 今天：不恢复粉底，只让日期数字加粗变深粉（无事项也能认出今天） */
#app #view .cal-cell.today {
  color: var(--pink-deep) !important;
  animation: none !important;
}
#app #view .cal-cell.today .cc-num { font-weight: 700; }

/* 选中日期：细金内描边 */
#app #view .cal-cell.selected {
  outline: 1.5px solid var(--gold) !important;
  outline-offset: -2px !important;
}
/* 悬停反馈（原粉底被去色层清掉） */
#app #view .cal-cell:hover .cc-num { color: var(--pink-deep); }

/* ============================================================
   P43 书页杂志风（随记 / 素材 / OC 笔记）
   语言：宋体标题 + 细金线 + 细分隔线 + 大留白，去卡片化
   页内选择器带 #app #view 前缀绕过去色层；弹窗走 .mag-modal
   ============================================================ */
:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

/* ---------- ① 随记列表：卡片 → 杂志条目 ---------- */
#app #view .nt-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
@media (min-width: 760px) {
  #app #view .nt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px !important;
  }
}
#app #view .nt-card {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 16px 4px 14px !important;
  margin: 0 !important;
}
#app #view .nt-card:hover {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}
#app #view .nt-card.is-pinned { padding-left: 14px !important; }
#app #view .nt-card.is-pinned::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 21px !important;
  width: 3px !important;
  height: 15px !important;
  border-radius: 2px !important;
  background: var(--gold) !important;
  border: none !important;
}
#app #view .ntc-title {
  font-family: var(--font-serif) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  color: var(--ink) !important;
}
#app #view .ntc-content {
  font-size: 12.5px !important;
  line-height: 1.85 !important;
  color: var(--ink-soft) !important;
  margin: 5px 0 7px !important;
}
#app #view .ntc-meta {
  border-top: none !important;
  padding-top: 0 !important;
  font-size: 11px !important;
  letter-spacing: .4px;
  color: var(--gray-deep) !important;
}
#app #view .nt-task-mini {
  font-family: var(--font-serif);
  margin-right: 4px;
}
#app #view .nt-pin-ico { color: var(--gold) !important; }
#app #view .nt-batch-bar .chip { border-radius: 999px; }

/* 分类栏：胶囊 → 杂志小标签（下划线在 active 下方） */
#app #view #nt-cats-bar .chip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  font-size: 13px;
  color: var(--gray-deep);
  position: relative;
}
#app #view #nt-cats-bar .chip.active {
  color: var(--pink-deep) !important;
  background: none !important;
  font-weight: 600;
}
#app #view #nt-cats-bar .chip.active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -8px;
  height: 2px;
  background: var(--gold) !important;
  border: none;
}
#app #view #nt-cats-bar .chip.chip-danger { color: var(--danger); }

/* ---------- ② 弹窗通用：mag-modal 杂志化 ---------- */
.modal-card.mag-modal { --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif; }
.modal-card.mag-modal .modal-head b {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
}
.modal-card.mag-modal .modal-body { padding-top: 16px; }

/* 阅读页标题在正文里渲染，头部只留关闭钮 */
.modal-card.mag-notitle .modal-head {
  min-height: 0 !important;
  padding: 14px 18px 0 !important;
  border-bottom: none !important;
}
.modal-card.mag-notitle .modal-head b { display: none; }

/* ---------- ③ 随记阅读页 ---------- */
.rv-magazine { padding: 0 6px; }
.rv-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 7px;
}
.rv-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 2px;
}
.rv-gold-rule {
  height: 1px;
  border: none;
  margin: 11px 0 10px;
  background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 25%, transparent) 55%, transparent 100%);
}
.rv-magazine .rv-meta,
.modal-card.mag-modal .rv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--gray-deep);
}
.rv-magazine .rv-meta .rv-cat { color: var(--pink-deep); }
.rv-magazine .rv-meta .rv-pin { color: var(--gold); font-weight: 600; }
.rv-magazine .rv-body.md-preview {
  font-size: 14px;
  line-height: 2.05;
  color: var(--ink);
  padding: 0 2px;
}
.rv-magazine .rv-body.md-preview > p {
  text-indent: 2em;
  margin-bottom: 9px;
}
.rv-magazine .md-preview h1,
.rv-magazine .md-preview h2,
.rv-magazine .md-preview h3,
.rv-magazine .md-preview h4 {
  font-family: var(--font-serif);
  letter-spacing: .5px;
}
.rv-magazine .md-preview h3,
.rv-magazine .md-preview h4 { margin-top: 16px; margin-bottom: 7px; }
.rv-magazine .md-preview h3::before,
.rv-magazine .md-preview h4::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1.5px;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}
.rv-magazine .md-preview blockquote {
  background: none !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 13px !important;
  margin: 10px 0 !important;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-soft);
}
.rv-wordmark {
  margin-top: 18px;
  text-align: right;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gray-deep);
  opacity: .85;
}

/* ---------- ④ 随记编辑器 ---------- */
/* 注：弹窗输入框全局规则带 8 个 :not()，特异性极高，这里必须用 #n-title ID 才压得住 */
.modal-card.mag-modal #n-title.nte-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 6px 2px 8px !important;
}
.modal-card.mag-modal .md-toolbar {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 4px 0;
  margin: 10px 0 8px;
  gap: 1px;
  background: none !important;
}
.modal-card.mag-modal .mdt-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 5px 9px !important;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.modal-card.mag-modal .mdt-btn:hover {
  background: none !important;
  border: none !important;
  color: var(--pink-deep) !important;
}
.modal-card.mag-modal .nte-area {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  font-size: 13.5px;
  line-height: 2;
}
.modal-card.mag-modal #n-save {
  font-family: var(--font-serif);
  letter-spacing: 3px;
  border-radius: 999px;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- ⑤ 素材列表：方块卡片 → 横向杂志条目 ---------- */
#app #view .lib-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
@media (min-width: 760px) {
  #app #view .lib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px !important;
  }
}
#app #view .lib-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 2px !important;
  overflow: visible !important;
}
#app #view .lib-card:hover {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}
#app #view .lib-card .lc-img {
  width: 72px !important;
  height: 72px !important;
  min-height: 0 !important;
  flex: 0 0 72px !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  background: var(--pink-faint) !important;
}
#app #view .lib-card .lc-img img { border-radius: 6px; }
#app #view .lib-card .lc-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#app #view .lib-card .lc-title {
  font-family: var(--font-serif) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  white-space: normal !important;
}
#app #view .lib-card .lc-note {
  font-size: 12px !important;
  line-height: 1.75 !important;
  margin: 4px 0 5px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#app #view .lib-card .lc-tag {
  font-size: 10.5px;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
  color: var(--pink-deep) !important;
}
#app #view .lib-card .lc-del {
  position: absolute;
  top: 10px;
  right: 0;
}

/* ---------- ⑥ OC 笔记条目 ---------- */
#app #view .cn-item {
  padding: 15px 2px 13px !important;
}
#app #view .cn-t b {
  font-family: var(--font-serif) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}
#app #view .cn-x {
  font-size: 12.5px !important;
  line-height: 1.85 !important;
  margin-top: 5px !important;
  white-space: normal !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#app #view .cn-src {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  letter-spacing: 1px;
  padding: 1px 6px !important;
  background: none !important;
}
/* 角色详情：宋体角色名 + CHARACTER 金色小标 */
#app #view .cd-name {
  font-family: var(--font-serif) !important;
  letter-spacing: 1px;
}
#app #view .cd-name::before {
  content: "CHARACTER";
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 5px;
}


/* ================ 模板中心 ================ */
#tp-root{max-width:1080px;margin:0 auto;padding:26px 20px 60px}
.view-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.view-title{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:600;color:#2a2620}
.view-title .sub{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:500}
.view-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.cd-back{display:inline-flex;align-items:center;gap:5px;border:1px solid #e3ddd2;background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;color:#6a6052;cursor:pointer}
.cd-back:hover{border-color:#b08d57;color:#b08d57}
.tp-prefill-hint{padding:4px 10px;background:#fff7e8;border:1px dashed #d9c89a;border-radius:6px}

/* 两大分类入口 */
.tp-cats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:10px}
.tp-cat-card{position:relative;text-align:left;cursor:pointer;border:1.5px solid #ece6d8;border-radius:18px;padding:34px 30px;background:#fff;transition:all .25s ease;overflow:hidden}
.tp-cat-card:hover{border-color:#b08d57;transform:translateY(-4px);box-shadow:0 16px 36px rgba(176,141,87,.16)}
.tp-cat-ico{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:14px;background:#faf4e8;margin-bottom:16px}
.tp-cat-card h3{margin:0 0 4px;font-size:22px;font-weight:600;color:#2a2620}
.tp-cat-card small{display:block;font-size:11px;letter-spacing:2.5px;color:#b08d57;margin-bottom:14px;font-weight:500}
.tp-cat-card p{margin:0 0 18px;font-size:13.5px;color:#7a7060;line-height:1.6}
.tp-cat-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#b08d57;font-weight:500}

/* 分类内模板网格 */
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tp-card{border:1px solid #ece6d8;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;transition:all .2s ease}
.tp-card:hover{border-color:#b08d57;transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.tp-thumb{width:100%;aspect-ratio:4/5;background:#f5f1e8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tp-thumb-loading{font-size:11px;color:#b9af9d}
.tp-info{padding:11px 13px 14px}
.tp-info b{display:block;font-size:14px;font-weight:600;color:#2a2620;margin-bottom:2px}
.tp-info span{font-size:11.5px;color:#8a8070}

@media (max-width:820px){
  .tp-cats-grid{grid-template-columns:1fr}
  .tp-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   PATCH25 · 2026-10-28（线上）
   ① 夜间磨砂/玻璃面（弹窗、浮窗、抽屉、氛围台、草稿箱、参考条）
      由「冷蓝」改成首页夜间同调：底 = var(--bg) 雾灰 #2e3034，
      字 = var(--ink) #e8d6dd / var(--ink-soft) #b39aa4，
      强调 = var(--pink-deep) #c5cad4。一律用 color-mix 引用令牌，
      不再另写一套硬编码蓝灰，令牌变了这里跟着变。
   ② 手机 / 平板 AI 对话：上下两块 → 和电脑一样的左右两栏，
      气泡去掉玻璃壳与文字发光，字号抬回 13px。
   ③ 手机 / 平板：站内信收成用户 ID 旁的一枚小铃铛（对齐电脑端）。
   ④ 自定义壁纸仍然自适应换色：有壁纸时磨砂面按壁纸明暗
      （body.wall-dark / body.wall-light，由 applyWallpaperPalette 挂上）
      决定底色与字色，不锁死在本次的夜间同调上。
   —— 本段全部是追加：不改原有一行。回滚 = 删掉 PATCH25 到 PATCH25-END 之间。
   ============================================================ */

/* ---------------- ① 夜间：磨砂面与玻璃面回到首页那一档 ---------------- */
:root.dark {
  --frost-bg: color-mix(in srgb, var(--bg) 76%, transparent);
  --frost-line: color-mix(in srgb, var(--ink) 15%, transparent);
  --glass-bg: color-mix(in srgb, var(--bg) 46%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg) 64%, transparent);
  --glass-inner: color-mix(in srgb, var(--ink) 6%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 13%, transparent);
  --glass-line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --glass-hi: color-mix(in srgb, var(--ink) 10%, transparent);
}
/* 磨砂面内部钉住的调色板（.frosted = 弹窗卡/五个浮窗/登录卡/右键菜单/toast，含氛围台 #vibe-mixer） */
:root.dark .frosted,
:root.dark #app #view .px-panel {
  --ink: #e8d6dd;
  --ink-soft: #b39aa4;
  --gray-deep: #a0a3aa;
  --paper: #2a2c30;
  --pink: #aab0bd;
  --pink-deep: #c5cad4;
  --pink-pale: #3a3d42;
  --pink-faint: #303237;
}
/* 没有 backdrop-filter / 用户要求减少透明时退实心，同样用首页夜间底 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root.dark .frosted,
  :root.dark #app #view .px-panel { background-color: color-mix(in srgb, var(--bg) 97%, transparent) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root.dark .frosted,
  :root.dark #app #view .px-panel { background-color: color-mix(in srgb, var(--bg) 97%, transparent) !important; }
}
/* 登录页自己复制过一份玻璃令牌，一起跟上 */
:root.dark #auth-screen {
  --glass-bg: color-mix(in srgb, var(--bg) 46%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg) 64%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 13%, transparent);
}
/* ≤900 那套玻璃卡把令牌挂在 body 上，单独跟一遍 */
@media (max-width: 900px) {
  :root.dark body,
  :root.dark body.home-on {
    --glass-bg: color-mix(in srgb, var(--bg) 46%, transparent);
    --glass-bg-2: color-mix(in srgb, var(--bg) 62%, transparent);
    --glass-line: color-mix(in srgb, var(--ink) 16%, transparent);
    --glass-hi: color-mix(in srgb, var(--ink) 12%, transparent);
    --glass-shadow: 0 12px 34px -20px rgba(0, 0, 0, .55), inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
  }
}

/* ---------------- ① 氛围台 / 心流计时器 / 草稿箱里那族石板蓝 ---------------- */
/* 122,139,168 是一支实色石板蓝，夜里读起来就是「冷蓝块」；夜间一律换成灰调 + 首页强调 */
:root.dark .mx-mode,
:root.dark .mx-snd .snd-chip,
:root.dark .mx-fx-chip {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 36%, transparent);
  color: var(--ink-soft);
}
:root.dark .mx-mode.on,
:root.dark .mx-snd .snd-chip.on,
:root.dark .mx-fx-chip.on {
  background: var(--pink-deep);
  border-color: transparent;
  color: #24262a;
}
:root.dark .mx-fx-chip:hover { border-color: var(--pink-deep); color: var(--ink); }
:root.dark .mx-row input[type=range],
:root.dark .mx-snd input[type=range] {
  background: color-mix(in srgb, var(--gray-deep) 26%, transparent);
}
:root.dark .mx-snds { border-top-color: color-mix(in srgb, var(--gray-deep) 20%, transparent); }
:root.dark .mx-fx {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gray-deep) 12%, transparent),
    color-mix(in srgb, var(--gray-deep) 5%, transparent));
  border-color: color-mix(in srgb, var(--gray-deep) 22%, transparent);
}
:root.dark .mx-en,
:root.dark .mx-add,
:root.dark .mx-add-cancel,
:root.dark .mx-pick-add {
  border-color: color-mix(in srgb, var(--gray-deep) 36%, transparent);
  color: var(--gray-deep);
}
:root.dark .mx-add-box { border-color: color-mix(in srgb, var(--gray-deep) 30%, transparent); }
:root.dark .mx-add-form {
  background: color-mix(in srgb, var(--gray-deep) 10%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 20%, transparent);
}
:root.dark .mx-add-form input {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 34%, transparent);
  color: var(--ink-soft);
}
:root.dark .mx-add-form input[type=file]::file-selector-button {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 34%, transparent);
  color: var(--ink-soft);
}
:root.dark .mx-drop {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 34%, transparent);
}
:root.dark .mx-drop-ico {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 30%, transparent);
  color: var(--pink-deep);
}
:root.dark .mx-pick-row:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
:root.dark .snd-rm:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--pink-deep); }
:root.dark .mx-note,
:root.dark .mx-add-ok {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink));
  color: #24262a;
}
:root.dark .ring-bg { stroke: color-mix(in srgb, var(--gray-deep) 22%, transparent); }
:root.dark .ring-fg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pink-deep) 45%, transparent)); }
:root.dark .draft-cnt { background: color-mix(in srgb, var(--ink) 8%, transparent); }
:root.dark .draft-item {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--gray-deep) 18%, transparent);
}
:root.dark .draft-foot { border-top-color: color-mix(in srgb, var(--gray-deep) 20%, transparent); }
:root.dark #ref-minibar img { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------------- ① 抽屉（手机 / 平板）与首页同调 ---------------- */
@media (max-width: 1024px) {
  :root.dark #m-sheet {
    --ink: #e8d6dd;
    --ink-soft: #b39aa4;
    --gray-deep: #a0a3aa;
    --paper: #2a2c30;
    --pink: #aab0bd;
    --pink-deep: #c5cad4;
    --pink-pale: #3a3d42;
    --pink-faint: #303237;
    --line: color-mix(in srgb, var(--ink) 13%, transparent);
  }
  :root.dark #m-mask { background: color-mix(in srgb, #1a1b1e 52%, transparent) !important; }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    :root.dark #m-sheet { background-color: color-mix(in srgb, var(--bg) 98%, transparent) !important; }
  }
}

/* ---------------- ④ 自定义壁纸：按壁纸明暗自适应，不跟主题 ---------------- */
/* 亮壁纸 → 面转乳白、字转深；暗壁纸 → 面转中性深灰、字转浅。
   写在 .frosted / #m-sheet 自身上（元素自身的声明优先于 body 继承来的壁纸取色）。 */
body.wall-light,
:root.dark body.wall-light {
  --frost-bg: rgba(255, 255, 255, .62);
  --frost-line: rgba(255, 255, 255, .66);
  --frost-shadow: 0 20px 50px -16px rgba(52, 40, 28, .26), inset 0 1px 0 rgba(255, 255, 255, .74);
  --glass-bg: rgba(255, 255, 255, .36);
  --glass-bg-2: rgba(255, 255, 255, .52);
  --glass-bg-strong: rgba(255, 255, 255, .52);
  --glass-line: rgba(255, 255, 255, .66);
  --glass-hi: rgba(255, 255, 255, .82);
}
body.wall-dark,
:root.dark body.wall-dark {
  --frost-bg: rgba(30, 31, 34, .68);
  --frost-line: rgba(232, 214, 221, .16);
  --frost-shadow: 0 22px 54px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(232, 214, 221, .13);
  --glass-bg: rgba(28, 29, 32, .42);
  --glass-bg-2: rgba(28, 29, 32, .58);
  --glass-bg-strong: rgba(28, 29, 32, .6);
  --glass-line: rgba(232, 214, 221, .16);
  --glass-hi: rgba(232, 214, 221, .12);
}
body.wall-light .frosted,
body.wall-light #app #view .px-panel,
:root.dark body.wall-light .frosted,
:root.dark body.wall-light #app #view .px-panel {
  color: var(--ink);
  --ink: #573c48;
  --ink-soft: #8a6f7a;
  --gray-deep: #9a8e86;
  --paper: #ffffff;
  --pink: #a69084;
  --pink-deep: #7d675b;
  --pink-pale: #e9ded4;
  --pink-faint: #f3ece6;
}
body.wall-dark .frosted,
body.wall-dark #app #view .px-panel,
:root.dark body.wall-dark .frosted,
:root.dark body.wall-dark #app #view .px-panel {
  color: var(--ink);
  --ink: #e8d6dd;
  --ink-soft: #b39aa4;
  --gray-deep: #a0a3aa;
  --paper: #24262a;
  --pink: #aab0bd;
  --pink-deep: #c5cad4;
  --pink-pale: #34373c;
  --pink-faint: #2c2e32;
}
@media (max-width: 1024px) {
  body.wall-light #m-sheet,
  :root.dark body.wall-light #m-sheet {
    color: var(--ink);
    --ink: #573c48;
    --ink-soft: #8a6f7a;
    --gray-deep: #9a8e86;
    --paper: #ffffff;
    --pink: #a69084;
    --pink-deep: #7d675b;
    --pink-pale: #e9ded4;
    --pink-faint: #f3ece6;
    --line: rgba(61, 51, 48, .14);
  }
  body.wall-dark #m-sheet,
  :root.dark body.wall-dark #m-sheet {
    color: var(--ink);
    --ink: #e8d6dd;
    --ink-soft: #b39aa4;
    --gray-deep: #a0a3aa;
    --paper: #24262a;
    --pink: #aab0bd;
    --pink-deep: #c5cad4;
    --pink-pale: #34373c;
    --pink-faint: #2c2e32;
    --line: rgba(232, 214, 221, .13);
  }
}

/* ---------------- ② AI 对话：手机 / 平板改成左右两栏 ---------------- */
/* 平板与小号手机（641–1024）：会话轨从 250px 收到 196px，右边的对话区更宽 */
@media (max-width: 1024px) {
  .chat-layout {
    grid-template-columns: 196px minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 0 10px !important;
  }
  .chat-side, .chat-main { min-width: 0; }
}
/* ≤900：气泡不再是一块玻璃 —— 去掉壳、边框、模糊与文字发光，正文 13px 用满宽度 */
@media (max-width: 900px) {
  #app #view .msg .m-bubble {
    max-width: 92% !important;
    padding: 5px 2px !important;
    border: none !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }
  #app #view .msg.ai .m-bubble { background: none !important; color: var(--ink) !important; }
  #app #view .msg.user .m-bubble,
  #app #view .chat-item.me .m-bubble {
    background: color-mix(in srgb, var(--pink) 30%, transparent) !important;
    color: var(--ink) !important;
    padding: 9px 13px !important;
    border-radius: 16px 16px 4px 16px !important;
  }
  #app #view .chat-item .ci-title { text-shadow: none !important; }
  #app #view .chat-side-head input,
  #app #view .chat-input textarea { text-shadow: none !important; }
}
/* ≤640：上下两块 → 左轨 116px + 右对话区（和电脑一个语法，只是窄） */
@media (max-width: 640px) {
  .chat-layout {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 0 8px !important;
    height: calc(100vh - 210px) !important;
    height: calc(100dvh - 210px) !important;
    min-height: 340px !important;
  }
  .chat-side { max-height: none !important; min-width: 0; }
  .chat-side-head { padding: 7px !important; }
  #app #view .chat-side-head input {
    font-size: 11px !important;
    padding: 5px 7px !important;
  }
  /* 标签条：换行会把窄轨撑高，改成一行横向滑 */
  #app #view .chat-tags {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 6px !important;
  }
  #app #view .chat-tags::-webkit-scrollbar { display: none; }
  #app #view .chat-list { padding: 4px !important; }
  #app #view .chat-item {
    padding: 6px 20px 6px 7px !important;
    margin-bottom: 4px !important;
    border-radius: 10px !important;
  }
  #app #view .chat-item .ci-title {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  /* 10px 的日期/条数读数在 116px 轨里只会糊成一行灰点，交给点开后的标题栏 */
  #app #view .chat-item .ci-meta { display: none !important; }
  #app #view .chat-item .ci-del { right: 3px !important; top: 4px !important; width: 16px !important; height: 16px !important; }
  #app #view .chat-item .ci-pin { right: 3px !important; top: auto !important; bottom: 4px !important; font-size: 10px !important; }
  .chat-head { padding: 9px 11px !important; }
  #app #view .chat-head b { font-size: 13px !important; }
  #app #view .chat-msgs { padding: 12px 10px !important; gap: 10px !important; }
  #app #view .msg { max-width: 96% !important; }
}

/* ---------------- ③ 站内信收成用户 ID 旁的小铃铛 ---------------- */
@media (max-width: 1024px) {
  /* 和「离开小窝」做成一对：同一个盒子、同一档灰，只是它带红点 */
  #m-msg-bell {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: none;
    color: var(--gray-deep);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, border-color .15s, background .15s;
  }
  #m-msg-bell:hover { color: var(--pink-deep); border-color: color-mix(in srgb, var(--pink-deep) 45%, transparent); }
  #m-msg-bell:active { background: var(--pink-faint); }
  #m-msg-bell svg { width: 15px; height: 15px; display: block; }
  /* 抽屉里的红点原本挂在 56px 大砖上（right 是算到砖心的），收到铃铛上要贴着圆周 */
  #m-me .m-badge { top: 0; right: 0; width: 8px; height: 8px; border-width: 1.5px; }
  #m-me { gap: 9px; }
}

/* ============================ PATCH25-END ============================ */

/* ============================================================
   PATCH26 · 2026-10-28（线上）
   ① 「基础日间」（日间主题 + 没有自定义壁纸）的首页：
      欢迎区大字、日期与时间、模块的大数字 → 深灰 #414345
      （这一档已经在页面上用很久：桌面「今日小签」的 .quote-text 就是它）
      夜间、以及任何设了自定义壁纸的情况一个字不动——壁纸照旧走自适应换色。
   ② 手机 / 平板（≤900，走手机模板的那一批）首页：工作台 / 待办 / 今日小签
      整团锚到右缘、里面的文字与数字也右对齐
      （PATCH23 只给了 601–900，这里补上 ≤600 的真手机，并把里面的对齐补齐）。
   —— 全部是追加：不改原有一行。回滚 = 删掉 PATCH26 到 PATCH26-END 之间。
   ============================================================ */

/* ---------------- ① 日间首页：大字 / 日期时间 / 数字 → 深灰 ---------------- */
:root:not(.dark) body.home-on:not(.has-wallpaper) {
  --hero-ink: #414345;    /* 大字：问候语、小签正文 */
  --hero-clock: #414345;  /* 日期与时间 */
  --hero-num: #414345;    /* 大数字：工作台 / 待办的读数 */
}

/* 桌面：问候大字 + 日期 + 时间（时间原先单独钉在强调玫瑰上，这里一并还灰） */
:root:not(.dark) body.home-on:not(.has-wallpaper) .home-hello .hi { color: var(--hero-ink) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .home-clock { color: var(--hero-clock) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .home-clock .hc-date { color: var(--hero-clock) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .home-clock .hc-time { color: var(--hero-clock) !important; }
/* 桌面三块模块的大数字（标题、边注照旧是次要灰，不动） */
:root:not(.dark) body.home-on:not(.has-wallpaper) .focus-card .fc-num { color: var(--hero-num) !important; }

/* 手机 / 平板：问候大字 + 日期 + 时间 + 大数字 + 小签正文 */
:root:not(.dark) body.home-on:not(.has-wallpaper) .h-hi { color: var(--hero-ink) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .h-clock .d { color: var(--hero-clock) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .h-clock .t { color: var(--hero-clock) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .stat .num { color: var(--hero-num) !important; }
:root:not(.dark) body.home-on:not(.has-wallpaper) .quote .tx { color: var(--hero-ink) !important; }

/* ---------------- ② 手机 / 平板（≤900）：三块右对齐 ---------------- */
@media (max-width: 900px) {
  /* 工作台 / 待办：整团（大数字 + 说明 + 箭头）锚到右缘。
     .stat .meta 原本 flex:1 会把整行撑满，justify-content 就不起作用了，收成内容宽。 */
  body.home-on #app #view .stat { justify-content: flex-end !important; }
  body.home-on #app #view .stat .num { text-align: right !important; }
  body.home-on #app #view .stat .meta {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-align: right !important;
  }
  body.home-on #app #view .stat .k,
  body.home-on #app #view .stat .s { text-align: right !important; }
  /* 今日小签：home.js 在 .tx / .from 上写了行内 align-items:center / text-align:center，
     行内样式只能同样用 !important 拿回来（PATCH23 已经这么做过一次） */
  body.home-on #app #view .quote { text-align: right !important; }
  body.home-on #app #view .quote .tx {
    align-items: flex-end !important;
    text-align: right !important;
  }
  body.home-on #app #view .quote .from { text-align: right !important; }
  body.home-on #app #view .quote .row { justify-content: flex-end !important; }
  /* 真手机（≤600）：整团贴右，左缘自然收；不给固定宽，免得箭头被挤出屏幕 */
  body.home-on #app #view .quote { margin-left: auto !important; }
}

/* ============================ PATCH26-END ============================ */
/* ============================================================
   PATCH27 · 2026-10-28（线上）
   模板中心改版：两块大图标入口删掉，换成「分类名 + 该分类前 2 个真实卡面」；
   右下角「查看更多模板 ›」进分类页，分类页「‹ 返回模板中心」回首页。
   语言跟着本站现行走：零边框、零阴影、不上浮、层级靠亮度差与留白。
   —— 全部是追加：不改原有一行。回滚 = 删掉 PATCH27 到 PATCH27-END 之间。
   ⚠ 选择器一律带 #app #view #tp-root：style.css:4025 那条通配把 #view 里的
     background / border-color / box-shadow / transform / letter-spacing 全清了。
   ⚠ 线上没有 --font-serif（那是本地星海那支），线的衬线令牌叫 --serif。
   ============================================================ */
#app #view #tp-root .tp-home { display: flex; flex-direction: column; gap: 34px; }

/* 分类页眉：标题 + 英文小签 + 右侧动线，描述单独占一行压在下面 */
#app #view #tp-root .tp-sh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; }
#app #view #tp-root .tp-sh h2 {
  margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 400;
  color: var(--ink); letter-spacing: .06em !important;
}
#app #view #tp-root .tp-sh h2 i {
  margin-left: 9px; font-family: var(--font-en); font-size: 9.5px; font-weight: 400;
  font-style: normal; color: var(--gray-deep); letter-spacing: .22em !important;
}
#app #view #tp-root .tp-sh p {
  margin: 0; order: 3; flex: 1 1 100%; font-size: 12px;
  color: var(--ink-soft); letter-spacing: .02em !important;
}
#app #view #tp-root .tp-more {
  order: 2; margin-left: auto; padding: 2px 0;
  background: transparent !important; background-color: transparent !important;
  background-image: none !important;
  border: none !important; box-shadow: none !important; text-shadow: none !important;
  color: var(--pink-deep); font-size: 12.5px; letter-spacing: .04em !important;
  cursor: pointer; transition: opacity .2s ease-out;
}
#app #view #tp-root .tp-more:hover { text-decoration: underline; }
#app #view #tp-root .tp-chev { display: inline-block; margin: 0 5px; opacity: .7; }

/* 卡面：首页一行两个，分类页一排四个 */
#app #view #tp-root .tp-row {
  display: grid; margin-top: 16px; gap: 18px 20px;
  grid-template-columns: repeat(2, minmax(0, 210px));
}
#app #view #tp-root .tp-grid {
  display: grid; margin-top: 16px; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#app #view #tp-root .tp-tc {
  display: block; padding: 0; text-align: left; cursor: pointer;
  background: transparent !important; background-color: transparent !important;
  background-image: none !important;
  border: none !important; box-shadow: none !important; text-shadow: none !important;
}
/* 悬停/键盘聚焦只改两件事：图亮一档、纸下多一道极细的强调色脚线（不动位置） */
#app #view #tp-root .tp-tc .tp-thumb { border-bottom: 1px solid transparent !important; }
#app #view #tp-root .tp-tc img { opacity: .88; transition: opacity .22s ease-out; }
#app #view #tp-root .tp-tc:hover img,
#app #view #tp-root .tp-tc:focus-visible img { opacity: 1; }
#app #view #tp-root .tp-tc:hover .tp-thumb,
#app #view #tp-root .tp-tc:focus-visible .tp-thumb { border-bottom-color: var(--pink-deep) !important; }
#app #view #tp-root .tp-tc:focus-visible { color: var(--pink-deep); }

#app #view #tp-root .tp-info { display: block; padding: 10px 2px 0; }
#app #view #tp-root .tp-info b {
  display: block; margin: 0; font-size: 13px; font-weight: 500;
  color: var(--ink); letter-spacing: .03em !important; transition: color .22s ease-out;
}
#app #view #tp-root .tp-info i {
  display: block; margin-top: 3px; font-family: var(--font-en); font-size: 9px;
  font-style: normal; color: var(--gray-deep); letter-spacing: .2em !important;
}
#app #view #tp-root .tp-tc:hover .tp-info b,
#app #view #tp-root .tp-tc:focus-visible .tp-info b { color: var(--pink-deep); }
#app #view #tp-root .tp-thumb-loading { font-size: 11px; color: var(--gray-deep); }

/* 页头那行旧的金色副标一起收进中性灰；携带数据的提示条去掉米黄底框 */
#app #view #tp-root .view-title { color: var(--ink); }
#app #view #tp-root .view-title .sub {
  font-family: var(--font-en); font-size: 9.5px; font-weight: 400;
  color: var(--gray-deep); letter-spacing: .24em !important;
}
#app #view #tp-root .tp-prefill-hint {
  padding: 0; font-size: 12px; color: var(--gray-deep);
  background: transparent !important; background-color: transparent !important;
  background-image: none !important;
  border: none !important; box-shadow: none !important;
}

@media (max-width: 820px) {
  #app #view #tp-root .tp-row,
  #app #view #tp-root .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app #view #tp-root .tp-sh h2 { font-size: 18px; }
  #app #view #tp-root .tp-more { font-size: 12px; }
}
/* ============================ PATCH27-END ============================ */
/* ============================================================
   PATCH28 · 2026-10-28（线上）
   AI 对话在「手机 / 平板」上换成：会话抽屉 + 阅读版式
   —— 参考的是「一张图读下来」这件事，不是它长什么样：
      ① 会话列表不再挤成 116px 的一条窄轨（那个宽度里标题两行就断了），
         ≤1024 收成一块从左边推出来的抽屉，按 置顶 / 今天 / 昨天 / 7 天内 / 更早 分组；
      ② 小精灵回的是 markdown，之前 esc 完直接上屏，用户脸上就是 **重点** 和「- 列表」——
         现在按站里已有的列表语言排（5px 玫瑰圆点是 style.css:3479 定的，被 4025 的通配清零吃掉了，这里只把它请回来）；
      ③ 正文抬到 14.5px / 1.95，行宽夹到 66ch，读一段话不用逐行找右边界。
   三条口径：零边框零阴影（抽屉右缘那道 12% 的描边是唯一的线）；选中/强调仍走 --pink-deep；
   日间与夜间各给一档遮罩，不写第二套硬编码色。
   —— 全部是追加：不改原有一行。回滚 = 删掉 PATCH28 到 PATCH28-END 之间 + 盖回 .bak-p28。
   ============================================================ */

/* ---------------- ① 小精灵的话按 markdown 排版（这个与宽度无关，桌面同样生效） ---------------- */
#app #view .chat-msgs .cm-p { margin: .38em 0 !important; }
#app #view .chat-msgs .cm-h {
  font-family: var(--serif) !important;
  font-size: 1.14em !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  color: var(--ink) !important;
  margin: 1.2em 0 .34em !important;
}
#app #view .chat-msgs .cm-p:first-child,
#app #view .chat-msgs .cm-h:first-child,
#app #view .chat-msgs .cm-ul:first-child,
#app #view .chat-msgs .cm-ol:first-child,
#app #view .chat-msgs .cm-pre:first-child,
#app #view .chat-msgs .cm-q:first-child { margin-top: 0 !important; }
#app #view .chat-msgs .cm-p:last-child,
#app #view .chat-msgs .cm-h:last-child,
#app #view .chat-msgs .cm-ul:last-child,
#app #view .chat-msgs .cm-ol:last-child,
#app #view .chat-msgs .cm-pre:last-child,
#app #view .chat-msgs .cm-q:last-child { margin-bottom: 0 !important; }
#app #view .chat-msgs strong { color: var(--ink); }
/* 中文没有斜体字面，浏览器会合成一套「假斜」，很难看。font-synthesis-style 关掉它：
   拉丁照斜，汉字老老实实站直。 */
#app #view .chat-msgs em { font-style: italic; font-synthesis-style: none; color: var(--ink); }
#app #view .chat-msgs ul,
#app #view .chat-msgs ol { padding-left: 1.3em; margin: .5em 0 !important; }
#app #view .chat-msgs li { margin: .36em 0 !important; }
#app #view .chat-msgs ol { padding-left: 1.7em; }
/* 无序列表那粒点：全局规则（1764 / 3479）已经把尺寸、位置、圆度都定好了，
   只是 background 被 4025 的通配清零压掉了 —— 抬到 (2,1,3) 加 !important 就够，别再造第二套点 */
#app #view .chat-msgs ul li::before { background: var(--pink-deep) !important; opacity: .6; }
#app #view .chat-msgs .cm-code {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important;
  font-size: .88em !important;
  color: var(--pink-deep) !important;
}
#app #view .chat-msgs .cm-pre {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important;
  font-size: .86em !important;
  line-height: 1.7 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  color: var(--ink-soft) !important;
  margin: .62em 0 !important;
  padding: 2px 0 2px .9em !important;
  border-left: 2px solid !important;
  border-left-color: color-mix(in srgb, var(--pink-deep) 42%, transparent) !important;
}
#app #view .chat-msgs .cm-q {
  color: var(--ink-soft) !important;
  margin: .5em 0 !important;
  padding-left: .9em !important;
  border-left: 2px solid !important;
  border-left-color: color-mix(in srgb, var(--ink-soft) 34%, transparent) !important;
}
#app #view .chat-msgs .cm-a {
  color: var(--pink-deep) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------- ② 会话抽屉：标题栏那颗「对话」开，点遮罩 / Esc / 选中一条关 ---------------- */
/* 桌面用不上这块，先按「不存在」处理；≤1024 才把它推出来 */
#app #view .chat-layout { position: relative; }
#app #view .chat-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
#app #view .chat-head .ch-list { display: none; }

@media (max-width: 1024px) {
  /* 两栏 → 单栏：会话轨不再占一条固定的列，改成浮在对话区之上 */
  #app #view .chat-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    /* 收起的抽屉整块停在左边界外，不裁掉就会把页面撑出一道横向可滚区 */
    overflow: hidden !important;
  }
  #app #view .chat-side {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(76vw, 296px) !important;
    max-height: none !important;
    z-index: 6;
    border: none !important;
    border-radius: 0 16px 16px 0 !important;
    background: var(--bg) !important;
    /* 唯一的线：抽屉右缘一道 12% 的正文色，靠它和身后的字分界 */
    border-right: 1px solid !important;
    border-right-color: color-mix(in srgb, var(--ink) 12%, transparent) !important;
    transform: translateX(-104%) !important;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1) !important;
  }
  #app #view .chat-layout.is-open .chat-side { transform: none !important; }
  #app #view .chat-layout.is-open .chat-scrim { pointer-events: auto; }
  :root:not(.dark) #app #view .chat-layout.is-open .chat-scrim {
    background: color-mix(in srgb, var(--ink) 18%, transparent) !important;
    opacity: 1;
  }
  :root.dark #app #view .chat-layout.is-open .chat-scrim {
    background: rgba(4, 6, 10, .58) !important;
    opacity: 1;
  }
  /* 入口：标题栏左端一枚「对话」，选中档用强调色，不给底不给框 */
  #app #view .chat-head .ch-list {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 5px 9px 5px 6px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 999px;
    color: var(--pink-deep) !important;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #app #view .chat-head .ch-list svg { width: 15px; height: 15px; display: block; }
  /* 分组名：宋体小签，疏排一档，和页面其它边注同一口气 */
  #app #view .chat-list .cl-group {
    font-family: var(--serif) !important;
    font-size: 10.5px !important;
    letter-spacing: .22em !important;
    color: var(--ink-soft) !important;
    padding: 13px 8px 6px !important;
  }
  #app #view .chat-list .cl-group:first-child { padding-top: 3px !important; }
}

/* ---------------- ③ 阅读版式：一段话读下来，不是一串气泡 ---------------- */
@media (max-width: 1024px) {
  #app #view .chat-msgs { padding: 16px 16px 22px !important; gap: 16px !important; }
  #app #view .msg { max-width: 100% !important; gap: 10px !important; }
  #app #view .msg .m-ico { width: 24px; height: 24px; }
  #app #view .msg .m-bubble {
    max-width: 66ch !important;
    padding: 2px 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-size: 14.5px !important;
    line-height: 1.95 !important;
  }
  #app #view .msg.ai .m-bubble { flex: 1 1 auto; min-width: 0; color: var(--ink) !important; }
  /* 你说的那句仍然是一小片浅滩——和话分开，但不再是一块玻璃 */
  #app #view .msg.user { align-self: flex-end; }
  #app #view .msg.user .m-bubble {
    max-width: 46ch !important;
    padding: 9px 13px !important;
    border-radius: 14px 14px 4px 14px !important;
    background: color-mix(in srgb, var(--pink) 26%, transparent) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  /* 深度思考那块：正文抬上来以后它不能还是 11px 的灰条，收到 12.5px 并留一道左沿 */
  #app #view .msg .m-thinking { font-size: 12.5px !important; }
}
/* ============================ PATCH28-END ============================ */

/* ============================ PATCH29 ============================ */
/* 线上 2026-10-28 · OC 详情页「和 TA 聊聊」：对话页顶部的角色扮演徽标。
   纯追加，原有一行没动。上面那段通配清零（约 4163 行）把 #app #view 里一切
   底色/边框/阴影刷掉，所以底色必须带 !important、选择器抬到 (3,1,0) 才抢得回来。
   语言跟现站走：零边框、零阴影、不上浮；色只读令牌，日/夜两档由 --pink-faint
   （日 #faf5f0 / 夜 #303237）与 --pink-deep 自己翻。 */
#app #view .chat-head #chat-oc-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-width: 0;
  max-width: 46%;
  padding: 3px 5px 3px 11px !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--pink-faint) !important;
  color: var(--pink-deep) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
#app #view .chat-head #chat-oc-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #view .chat-head #chat-oc-badge .chip-x {
  flex: none;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 5px;
  margin: 0;
  border-radius: 999px;
  font: inherit;
  line-height: 1;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#app #view .chat-head #chat-oc-badge .chip-x:hover,
#app #view .chat-head #chat-oc-badge .chip-x:focus-visible { opacity: 1; }
/* 窄屏：标题让位给徽标，一行放得下「对话」按钮 + 标题 + 角色扮演 */
@media (max-width: 640px) {
  #app #view .chat-head { gap: 6px; }
  #app #view .chat-head b { font-size: 13px; }
  #app #view .chat-head #chat-oc-badge { max-width: 44%; font-size: 11px !important; padding: 2px 4px 2px 9px !important; }
}
/* ========================== PATCH29-END ========================== */

/* ============================================================
   PATCH30（2026-10-28）· 氛围台让位 + 本地音乐盒排序把手
   纯追加；原有一行都没动。回滚 = 删掉 PATCH30 → PATCH30-END 这一段
   （并把 localmusic.js / vibe/mixer.js / main.js / index.html / sw.js 盖回 .bak-p30）。
   ① 氛围台 #vibe-mixer 原本 z-index:460，比弹窗(230)、右键菜单(220)、提示(240)、
      本地音乐盒(120)、歌词(120)、参考(119)、抽屉(91) 都高。手机/平板上它是
      right:12px + 宽 min(264px, 100vw-24px) + 高 66vh，正好压在
      「从本地音乐盒选择」那层弹窗的下半屏（那一行行的 ＋ 和「关闭」都在里面），
      也压在整屏的本地音乐盒上。它是**一块面板**，不是系统层，所以：
        · 全站降到 115 —— 各浮窗、右键、弹窗、提示都在它上面；
          仍高于正文(10)/装饰(12)，桌面右下角落位不变、互不遮挡。
        · ≤1024 再降到 88 —— 抽屉(91)、音乐小屋(90) 这些正在用的窗口浮在它上面；
          它自己已经用 bottom:calc(var(--m-tab-h)+12px) 让开了底栏，不需要靠层级争位置。
   ② 本地音乐盒的行首把手 .lm-grip：触屏没有 :hover，所以常态就在、只是很暗。
   ============================================================ */
#vibe-mixer { z-index: 115 !important; }
@media (max-width: 1024px) {
  #vibe-mixer { z-index: 88 !important; }
}

/* 排序把手（#lm-panel 在 #app #view 外面，通配清零管不到它，正常写即可） */
#lm-panel .lm-grip {
  flex: none; width: 20px; height: 24px; margin-left: -6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; box-shadow: none; outline: none;
  color: var(--gray-deep); opacity: .4; cursor: grab;
  touch-action: none;                 /* 手指按在这里不该带动列表滚动 */
  -webkit-user-select: none; user-select: none;
}
#lm-panel .lm-grip svg { display: block; }
#lm-panel .lm-grip:hover { opacity: .82; color: var(--pink-deep); }
#lm-panel .lm-grip:active { cursor: grabbing; opacity: 1; }
#lm-panel .lm-grip:focus-visible { opacity: 1; outline: 1px solid var(--pink-deep); outline-offset: 1px; }
/* 拖动期间不要选中文字；被拖着那一粒留个浅滩 */
#lm-panel .music-list.sorting, #lm-panel .lm-row.dragging { -webkit-user-select: none; user-select: none; }
#lm-panel .lm-row.dragging { opacity: .5; }
#lm-panel .lm-row.drag-over { border-top: 2px solid var(--accent-ui) !important; }
/* ========================== PATCH30-END ========================== */

/* ============================================================
   PATCH31（2026-10-28）· 手机/平板顶栏回来：左＝光环HALO，右＝日/夜 + 草稿箱
   纯追加；原有一行都没动。回滚 = 删掉 PATCH31 → PATCH31-END 这一段
   （并把 index.html / sw.js 盖回 .bak-p31）。
   背景：上一轮「修正轮 2」把 ≤1024 的 #topbar 整条 display:none、--m-top-h 归 0，
   理由是「品牌在首页问候里，功能都在 ✦ 抽屉里」。站长看了判定左上角空着不对：
   要和电脑一样——左边是站点名，右边是图标。所以这一轮：
     ① 顶栏放回来，但**照桌面的样子**：不涂底、不上边、不投影（桌面那份早就被
        style.css 4177 那段清成透明了，手机上 6091 的乳霜磨砂壳这里主动拿掉）。
        正文本来就是 position:fixed + top:calc(var(--m-top-h)+安全区)，
        所以顶栏占的那 48px 是从正文里让出来的，内容不会从底下穿过去，不需要磨砂底。
     ② 右端只留两枚：日/夜（#btn-theme，main.js 的 syncThemeEntry 会跟着主题换月亮/太阳）
        和草稿箱（#btn-drafts，红点 #draft-dot 归 drafts 自己管）。
        氛围、站内信、Pro、设置、音乐小屋、本地音乐盒、退出**仍旧只在 ✦ 抽屉里**，
        和 PATCH25/30 那几轮的收口一致（顶栏一排挤五个是上一版被否掉的样子）。
        抽屉里那两个入口这次从 index.html 删掉了——小工具那一格正好剩 4 个一行。
        data-hook 的委托监听（mobile-nav.js）按 [data-hook] 现扫，少两个按钮不影响。
     ③ 层级：顶栏还是 85（正文 10 / 装饰 12 之上，底栏 86、音乐小屋 90、抽屉 91、
        右键 220、弹窗 230、提示 240、灯箱 300、氛围台 88 之下或各自照旧）。
   ============================================================ */
@media (max-width: 1024px) {
  :root { --m-top-h: 48px !important; }

  #app #topbar,
  body.home-on #app #topbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 2px) 12px 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 左：和电脑同一份 .logo（✧ + 光环HALO + HALO），只把字号收一档 */
  #app #topbar .logo { display: flex !important; align-items: baseline; gap: 6px; min-width: 0; }
  #topbar .logo-halo { display: inline-block !important; font-size: 15px; }
  #topbar .logo-name { font-size: 14px !important; letter-spacing: 1.5px; }
  #topbar .logo-en { display: inline !important; font-size: 8.5px; letter-spacing: 1.5px; margin-top: 0; }

  /* 右：只留日/夜 + 草稿箱，其余仍旧收在 ✦ 抽屉里 */
  #topbar .top-actions { margin-left: auto !important; gap: 2px !important; }
  #btn-music, #btn-lm, #btn-recent, #btn-ref, #btn-settings, #btn-logout,
  #btn-vibe, #btn-messages, #btn-pro, #top-now, #user-chip { display: none !important; }
  #topbar .top-btn { width: 38px; height: 38px; }
  #topbar .top-btn svg { width: 17px; height: 17px; }
}
/* ========================== PATCH31-END ========================== */

/* ============================================================
   PATCH32 · 2026-10-29（线上）
   ① 模板中心只留六版定版排版（设定卡 d1/d2/s1/s2 + 价目表 p1/p2）——分类页的
      网格要能在 4 套 / 2 套之间自己收拢；
   ② 「填写资料」页（#tf-root）从来没有任何样式，这一版第一次给它排版。
   纯追加；原有一行都没动。回滚 = 删掉 PATCH32 → PATCH32-END 这一段。
   ⚠ 选择器一律带 #app #view #tf-root / #tp-root：style.css:4025 那条通配把 #view 里
     每个元素（含伪元素）的 background / background-color / background-image /
     border-*-color / box-shadow / outline / filter / transform / letter-spacing 清成
     transparent|none|0，要留下来的东西必须 !important 自己抢回来。
   语言跟现站走：零边框、零阴影、不上浮，层级由亮度差表达；标题宋体，读数 9–11px 边注。
   ============================================================ */

/* ── 一、填写页骨架：左边把字写完，右边预览常驻 ───────────────── */
#app #view #tf-root .tf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 8px 30px;
  align-items: start;
}
#app #view #tf-root .tf-form { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
#app #view #tf-root .tf-preview-pane {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 9px;
}

/* 分区：一张卡片、一道边框都没有，只靠留白分行 */
#app #view #tf-root .tf-sec { display: flex; flex-direction: column; gap: 3px; }
#app #view #tf-root .tf-sec > h4 {
  display: flex; align-items: baseline; gap: 7px;
  margin: 0 0 12px;
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  letter-spacing: .12em !important;
  color: var(--ink);
}
#app #view #tf-root .tf-sec > h4 i { color: var(--pink-deep); opacity: .8; }

/* ── 二、版面条：排版 × 三格配色 × 纸 ───────────────────────── */
#app #view #tf-root .tf-design > h4 { letter-spacing: .16em !important; }
#app #view #tf-root .tf-chips {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px;
}
#app #view #tf-root .tf-chip {
  padding: 3px 0;
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  font-family: inherit; font-size: 12.5px; letter-spacing: .04em;
  color: var(--gray-deep);
  text-align: left;
  cursor: pointer;
  transition: color .2s ease-out;
}
#app #view #tf-root .tf-chip:hover,
#app #view #tf-root .tf-chip:focus-visible { color: var(--ink); }
#app #view #tf-root .tf-chip.active { color: var(--pink-deep); font-weight: 600; }
/* 这一版有多大：读数挂在纸色那一排的最右端，不参与选择 */
#app #view #tf-root .tf-dims {
  margin-left: auto;
  font-size: 10px; letter-spacing: .1em;
  color: var(--ink-soft);
  white-space: nowrap;
}
#app #view #tf-root .tf-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
#app #view #tf-root .tf-slot { display: inline-flex; align-items: center; gap: 7px; }
#app #view #tf-root .tf-slot b {
  font-size: 10px; font-weight: 400; letter-spacing: .06em;
  color: var(--ink-soft);
}
/* 三格是 <input type=color>：4048 那条恢复规则把它排除在外，只剩通配清零——
   所以边框必须自己在这儿还给它，否则屏幕上看不见那块色 */
#app #view #tf-root .tf-slot input[type=color] {
  width: 24px; height: 24px; padding: 0;
  background: transparent !important;
  border: 1px solid var(--line-soft) !important;
  cursor: pointer;
}

/* ── 三、预览栏：头部一行读数 + 简易/可视化切换 ────────────────── */
#app #view #tf-root .tf-preview-head {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 11px; letter-spacing: .16em;
  color: var(--gray-deep);
}
#app #view #tf-root .tf-mode-switch { margin-left: auto; display: inline-flex; gap: 12px; }
#app #view #tf-root .tf-mode-btn {
  padding: 0;
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  font-family: inherit; font-size: 11px; letter-spacing: .1em;
  color: var(--gray-deep); cursor: pointer;
  transition: color .2s ease-out;
}
#app #view #tf-root .tf-mode-btn:hover { color: var(--ink); }
#app #view #tf-root .tf-mode-btn.active { color: var(--pink-deep); font-weight: 600; }
#app #view #tf-root .tf-mode-prochip {
  margin-left: 4px;
  font-size: 8.5px; letter-spacing: .12em;
  color: var(--ink-soft);
}
#app #view #tf-root .tf-preview-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 248px;
}
#app #view #tf-root .tf-preview-wrap canvas { display: block; }
#app #view #tf-root .tf-preview-load {
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--ink-soft);
}
#app #view #tf-root .tf-export { margin-top: 3px; }

/* ── 四、服务项目行：五项一排 + 一枚删除，靠对齐读不靠线 ────────── */
#app #view #tf-root .tf-items { display: flex; flex-direction: column; gap: 9px; }
#app #view #tf-root .tf-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.4fr) 62px 52px 24px;
  gap: 6px 10px;
  align-items: center;
}
#app #view #tf-root .tf-i-price,
#app #view #tf-root .tf-i-unit { text-align: right !important; }
#app #view #tf-root .tf-i-del {
  padding: 2px 0;
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  /* 4067 那条恢复规则给 .icon-btn 钉了 color: var(--ink) !important，不抢就还是正文色 */
  color: var(--gray-deep) !important;
  cursor: pointer;
  transition: color .2s ease-out;
}
#app #view #tf-root .tf-i-del:hover,
#app #view #tf-root .tf-i-del:focus-visible { color: var(--pink-deep) !important; }

/* ── 五、分类页网格：4 套 / 2 套共用同一个 .tp-grid ───────────────
   PATCH27 定的是 repeat(4, …)；价目表只剩 2 版以后右边会空两格，
   读起来像缺一块。改成 auto-fill 按卡宽收，一套就一格，四套照样铺满。 */
#app #view #tp-root .tp-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

/* ── 六、窄屏：两块叠起来，预览不再 sticky ────────────────────── */
@media (max-width: 1024px) {
  #app #view #tf-root .tf-body { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #app #view #tf-root .tf-preview-pane { position: static; }
  #app #view #tf-root .tf-preview-wrap { min-height: 220px; }
}
@media (max-width: 820px) {
  /* 这里要把 PATCH27 那条两列规则接回来：.tp-grid 现在归 auto-fill，
     不重写的的话窄屏会被 minmax(196px) 顶成单列 */
  #app #view #tp-root .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* 手机上六格放不下，改成三行：名称/英文 + 把手，说明整行，读数最后一行 */
  #app #view #tf-root .tf-item-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 26px;
    gap: 6px 8px;
  }
  #app #view #tf-root .tf-i-desc { grid-column: 1 / -1; }
  #app #view #tf-root .tf-i-del  { grid-column: 3; grid-row: 1; }
  #app #view #tf-root .tf-dims { margin-left: 0; flex: 1 1 100%; }
}
/* ========================== PATCH32-END ========================== */

/* ============================================================
   PATCH33（2026-10-29 线上）本地音乐盒 ＝ 站长选定的 A 素纸
   不换语法，只把比例和触屏修对：播放器从「一坨」压成一行，
   歌单在手机收成一排横滑的小签，剩下的整屏都给歌。
   #lm-panel 在 #app #view 外面，通配清零管不到它，正常写即可。
   ============================================================ */

/* ---- 1. 播放器：五块 → 一行（手机自己 wrap 成三行） ---- */
#lm-panel .lm-player{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px; padding: 2px 14px 10px; flex-shrink: 0;
}
#lm-panel .lm-player > .music-now     { flex: 1 1 200px; min-width: 0; gap: 9px; }
#lm-panel .lm-player > .music-progress{ flex: 1 1 150px; min-width: 0; }
#lm-panel .lm-player > .music-ctl     { flex: none; gap: 8px; }
#lm-panel .lm-player > .music-sub     { flex: none; gap: 8px; }
#lm-panel .lm-player > .music-vol     { flex: none; width: 96px; gap: 6px; }

/* 封面从 56px 的方框收成一粒小盘：它只是「这是一首歌」的记号，不是画框 */
#lm-panel .music-cover{
  width: 22px; height: 22px; flex-shrink: 0;
  border: none; background: transparent; color: var(--pink-deep);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#lm-panel .music-cover svg{ width: 16px; height: 16px; }
#lm-panel .music-cover img{ width: 22px; height: 22px; border-radius: 999px; object-fit: cover; }
#lm-panel .music-meta{ min-width: 0; display: flex; align-items: baseline; gap: 8px; }
#lm-panel .music-name  { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
#lm-panel .music-artist{ flex: none; min-width: 0; max-width: 120px; margin-top: 0; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 进度条：10px 的 2px 黑框槽 → 2px 的一条线；正在听的位置用强调色 */
#lm-panel .music-bar{ height: 2px; border: none; background: var(--gray); border-radius: 2px; }
#lm-panel #lm-fill  { background: var(--pink-deep); border-radius: 2px; }
#lm-panel .music-time{ display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-en); font-size: 10.5px; color: var(--gray-deep); margin-top: 3px; }
#lm-panel .music-ctl .icon-btn    { width: 30px; height: 30px; }
#lm-panel .music-ctl .m-ctl-main  { width: 30px; height: 30px; border-radius: 999px;
  background: var(--pink-faint); color: var(--pink-deep); }
#lm-panel .music-ctl .m-ctl-main:hover { background: var(--pink-faint); color: var(--pink-deep); }
#lm-panel .music-sub .icon-btn  { width: 26px; height: 26px; padding: 2px; }
#lm-panel .music-vol input[type=range]{ width: 56px; flex: none; }
#lm-panel .music-vol #lm-vol-val{ display: none; }

/* ---- 2. 标题条上的数量：从「描边的胶囊」收成一颗读数 ---- */
#lm-panel .lm-count{ border: none; background: transparent; color: var(--pink-deep); padding: 0; font-size: 11px; }
#lm-panel .lm-en   { color: var(--gray-deep); letter-spacing: 1.5px; }

/* ---- 3. 主体：播放器在上，下面才是「歌单 | 歌」两栏 ---- */
#lm-panel .lm-main{ flex: 1; min-height: 0; }
#lm-panel .lm-side{ width: 124px; background: transparent; border-right: none;
  padding: 0 0 8px; }
#lm-panel .lm-side-head{ padding: 0 10px 6px 14px; }
#lm-panel .lm-side-head b{ font-size: 11px; letter-spacing: 2px; color: var(--gray-deep); }
#lm-panel .lm-pl-list{ padding: 0 8px 0 14px; gap: 1px; }
/* 歌单是「一行字」不是「一块按钮」：选中只改亮度，不给底色 */
#lm-panel .lm-pl{ padding: 4px 0; border: none; border-radius: 0; background: transparent; color: var(--gray-deep); font-size: 12px; }
#lm-panel .lm-pl:hover { color: var(--ink); }
#lm-panel .lm-pl.active{ background: transparent; border: none; color: var(--pink-deep); font-weight: 600; }
#lm-panel .lm-pl .lm-pl-n{ font-size: 10px; }
#lm-panel .lm-right{ padding: 0 14px 8px; gap: 6px; }
#lm-panel .lm-list-head{ padding: 0 0 4px; }

/* ---- 4. 歌曲行：零框零底，正在播的那一行左侧立一道 2px 强调竖线 ---- */
#lm-panel .music-list{ border: none; padding: 0; background: transparent; }
#lm-panel .music-row { border: 2px solid transparent; }
#lm-panel .lm-row{ display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 6px; border-left: 2px solid transparent; font-size: 12.5px; }
#lm-panel .lm-row:hover { background: var(--pink-faint); border-color: transparent; }
/* .playing 必须写在 :hover 之后（同为 (1,2,0)，靠源码顺序决胜负） */
#lm-panel .lm-row.playing{ background: transparent; border-left-color: var(--pink-deep); }
#lm-panel .lm-row.playing:hover{ background: var(--pink-faint); }
#lm-panel .lm-row .mr-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
#lm-panel .lm-row .mr-artist{ flex: none; min-width: 0; max-width: 84px; }
#lm-panel .lm-row .lm-no   { width: 16px; font-size: 10.5px; }
#lm-panel .lm-row .lm-size { flex: none; width: 54px; text-align: right;
  font-family: var(--font-en); font-size: 10.5px; color: var(--gray-deep); }
#lm-panel .lm-row .lm-dur  { flex: none; width: 40px; text-align: right; font-size: 10.5px; }
/* × 常显：手机上「悬停才出现」等于没有删除入口。opacity 表意，不画框 */
#lm-panel .lm-row .lm-x{ display: inline-flex; width: 24px; height: 24px; flex-shrink: 0;
  border: none; background: transparent; color: var(--gray-deep); opacity: .55;
  align-items: center; justify-content: center; cursor: pointer; }
#lm-panel .lm-row .lm-x:hover,
#lm-panel .lm-row .lm-x:active { opacity: 1; color: var(--pink-deep); }
#lm-panel .lm-row.dragging { opacity: .5; }
#lm-panel .lm-row.drag-over{ border-top: 2px solid var(--accent-ui) !important; }

/* ---- 5. 长提示搬到底部，收成一行 10px 边注；额度用满才变色 ---- */
#lm-panel .lm-tip{ display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: nowrap; order: 5; flex-shrink: 0;
  padding: 6px 14px; border: none; border-top: 1px solid var(--line-soft);
  font-size: 10px; line-height: 1.5; color: var(--gray-deep); }
#lm-panel .lm-tip > span:first-child{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lm-panel .lm-tip .lm-usage{ flex: none; margin-left: auto; font-size: 10px; color: var(--gray-deep); }
#lm-panel .lm-tip .lm-usage.is-full{ color: var(--pink-deep); }

/* ---- 6. 空态给一个真的落点（触屏拖不进来，得有能按的地方） ---- */
#lm-panel .lm-empty{ padding: 28px 14px; text-align: center; font-size: 11.5px; line-height: 1.9; color: var(--gray-deep); }
#lm-panel .lm-empty .lm-empty-add{ display: inline-block; margin-top: 10px; padding: 6px 16px;
  border: none; border-radius: 999px; background: var(--pink-faint); color: var(--pink-deep);
  font: inherit; font-size: 12px; cursor: pointer; }
#lm-panel .lm-empty .lm-empty-add:hover { color: var(--pink-deep); }

/* ---- 7. 手机（≤640，那块浮窗本来就通栏）---- */
@media (max-width: 640px) {
  /* 播放器换成三行：谁在播 / 听到哪儿 / 怎么播 */
  #lm-panel .lm-player{ gap: 6px 10px; padding: 2px 12px 8px; }
  #lm-panel .lm-player > .music-now     { flex: 1 1 100%; }
  #lm-panel .lm-player > .music-progress{ flex: 1 1 100%; }
  /* 歌单从一栏变成一排横滑的小签 */
  #lm-panel .lm-main{ flex-direction: column; }
  #lm-panel .lm-side{ width: auto; flex: none; flex-direction: row; align-items: center;
    border-right: none; padding: 0; min-height: 0; }
  #lm-panel .lm-side-head{ order: 2; display: flex; align-items: center; padding: 0 12px 0 4px; }
  #lm-panel .lm-side-head b{ display: none; }
  #lm-panel .lm-pl-list{ order: 1; flex: 1 1 auto; min-width: 0; flex-direction: row;
    gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0 0 0 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #lm-panel .lm-pl-list::-webkit-scrollbar{ display: none; }
  #lm-panel .lm-pl{ flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11px; color: var(--gray-deep); }
  #lm-panel .lm-pl.active{ background: var(--pink-faint); color: var(--pink-deep); font-weight: 500; }
  #lm-panel .lm-right{ padding: 0 12px 6px; }
  /* 行要给手指按：高一点、× 大一点，大小那一列先不要（宽度不够） */
  #lm-panel .lm-row{ padding: 9px 12px 9px 6px; gap: 8px; }
  #lm-panel .lm-row .lm-size { display: none; }
  #lm-panel .lm-row .mr-artist{ max-width: 64px; }
  #lm-panel .lm-row .lm-x{ width: 30px; height: 30px; opacity: .7; }
  #lm-panel .lm-tip{ padding: 6px 12px; }
}
/* PATCH33-END */
/* ============================================================
   PATCH34 · 2026-10-29（线上）
   OC 名册改成站长选定的「A 立绘墙」：84px 圆头像 → 3:4 竖幅立绘（整张画都在，
     缩略图本身就能认人）；四行小字收成两行＝名字（宋体 15）+ 一行边注（性别·年龄·种族 · 世界名）。
     参考图数、称号、标签从卡面拿掉——标签本来就在页头那排筛选里，图数在详情页看。
   世界观列表改成「A 世界的门」：一行一世界 → 一张色纸，底色＝这个世界自己的颜色染 8%（悬停 13%），
     简介给两行（不再一行截断），底下排成员头像 + 「N 个角色 · N 篇笔记」+「进入 ›」。
   语言跟 PATCH27 同一种：零框零阴影不上浮，悬停只改两件事（图亮一档 + 名字下一道 1px 强调色脚线）。
   —— 全部是追加：不改原有一行。回滚 = 删掉 PATCH34 到 PATCH34-END 之间。
   ⚠ 通配清零（style.css:4025）把 #view 里的 background / border-*-color / outline / filter /
     letter-spacing 全清了，所以这些属性一律 !important，选择器抬到 #app #view #char-grid /
     #wd-list / .ocx-* / .wod-*（(2,1,1)）才打得过旧规则（.wd-card 那条 border-bottom 是 (2,1,0)+!important，
     这次干脆不再挂 wd-card 类，旧规则原地留着当死规则）。outline 被清了，键盘聚焦只能靠脚线与染度表意。
   ⚠ 底色用 var(--bg)（纸上那层米色地面），不用 var(--paper)（线上日间 --paper 是纯白＝卡片面）：
     预览里那个 --paper 对应的就是线上的 --bg（日 #f7f4f1 / 夜 #2e3034，逐值对过）。
     色纸要比地面"染深"一点才读得出是一个色场；染白一档就成了贴一张卡片上去。
   ⚠ 只用线上已有的令牌。预览里那档日间小字 #6f6a71（4.82:1）全站还没经站长点头，这里没引进，
     边注仍走 --gray-deep（日 #a1958c / 夜 #a0a3aa），和现存的 .cc-line / .cc-world 同一档，不比现状更差。
   ============================================================ */

/* ============================ 名册 A 立绘墙 ============================ */
#app #view #char-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 24px 20px !important;
}
#app #view .ocx-card {
  display: block; width: 100%; min-width: 0; padding: 0; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; font: inherit; color: var(--ink);
  background: transparent !important; background-color: transparent !important; background-image: none !important;
  border: none !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important;
}
/* 立绘：竖幅、零框。没有图的档案走同一支渐变色纸 + 宋体首字，不留空洞 */
#app #view .ocx-art {
  display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  background-color: color-mix(in srgb, var(--c, #b7a78f) 11%, var(--bg)) !important;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--c, #b7a78f) 20%, var(--bg)),
    color-mix(in srgb, var(--c, #b7a78f) 7%, var(--bg))) !important;
}
#app #view .ocx-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: .9; transition: opacity .22s ease-out;
}
#app #view .ocx-card:hover .ocx-art img,
#app #view .ocx-card:focus-visible .ocx-art img { opacity: 1; }
#app #view .ocx-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 34px; font-weight: 200; line-height: 1; color: var(--ink);
}
/* 名字：宋体一档，超长省略；悬停/聚焦只加一道 1px 强调色脚线（不动位置） */
#app #view .ocx-n {
  display: block; margin: 10px 0 0; padding-bottom: 2px;
  font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid transparent !important;
  transition: color .22s ease-out, border-bottom-color .22s ease-out;
}
#app #view .ocx-n em { font-style: normal; font-size: 11px; color: var(--ink-soft); margin-left: 7px; }
#app #view .ocx-card:hover .ocx-n,
#app #view .ocx-card:focus-visible .ocx-n {
  color: var(--pink-deep); border-bottom-color: var(--pink-deep) !important;
}
#app #view .ocx-l {
  display: block; margin: 4px 0 0; font-size: 11.5px; color: var(--gray-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#app #view .ocx-l i { font-style: normal; color: var(--ink-soft); }
#app #view .ocx-l i::before { content: '· '; }

@media (max-width: 900px) {
  #app #view #char-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)) !important; }
}
@media (max-width: 560px) {
  #app #view #char-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 22px 14px !important; }
  #app #view .ocx-n { font-size: 14px; }
  #app #view .ocx-l { font-size: 11px; }
  #app #view .ocx-mono { font-size: 30px; }
}

/* ============================ 世界观 A 世界的门 ============================ */
#app #view #wd-list {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; align-items: start; padding-bottom: 40px;
}
/* 色纸：染度分层，没有第二种材质。白纸上 8% 已经看得出来，20% 以上就读成一块污渍，所以卡到 13% 收 */
#app #view .wod-door {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  padding: 16px 16px 14px; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; color: var(--ink);
  background-color: color-mix(in srgb, var(--c, #b7a78f) 8%, var(--bg)) !important;
  background-image: none !important;
  border: none !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important;
  transition: background-color .22s ease-out;
}
#app #view .wod-door:hover,
#app #view .wod-door:focus-visible {
  background-color: color-mix(in srgb, var(--c, #b7a78f) 13%, var(--bg)) !important;
}
#app #view .wod-n {
  display: block; font-family: var(--serif); font-size: 17px; font-weight: 400;
  letter-spacing: .05em !important; color: var(--ink);
}
#app #view .wod-i {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 7px 0 0; font-size: 12px; line-height: 1.85; color: var(--gray-deep);
}
#app #view .wod-f { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; }
#app #view .wod-f > span { font-size: 11px; color: var(--gray-deep); }
/* 成员头像：叠着排的一圈小圆，22px——它是"谁住在这个世界"的读数，不是装饰 */
#app #view .wod-fs { display: flex; align-items: center; flex: 0 0 auto; }
#app #view .wod-fs-i {
  display: block; flex: 0 0 auto; width: 22px; height: 22px; margin-left: -6px;
  border-radius: 50%; overflow: hidden; text-align: center;
  background-color: color-mix(in srgb, var(--c, #b7a78f) 34%, var(--bg)) !important;
  font-family: var(--serif); font-size: 11px; font-weight: 400; line-height: 22px; color: var(--ink);
}
#app #view .wod-fs-i:first-child { margin-left: 0; }
#app #view .wod-fs-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* +N 挂在 .wod-fs 里，不是 .wod-f 的直接子元素，所以 .wod-f > span 那条本来就没管到它；
   用后代选择器（(2,2,0)）写，将来怎么挪都在同一排读数的管辖里 */
#app #view .wod-f .wod-more { font-size: 10.5px; color: var(--gray-deep); margin-left: 5px; }
/* 「进入 ›」必须比同一排读数亮一档：.wod-f > span 是 (2,1,1)，所以这条要抬到 (2,2,1) 才压得住 */
#app #view .wod-f > span.wod-go { margin-left: auto; font-size: 11.5px; color: var(--pink-deep); flex: 0 0 auto; }

@media (max-width: 640px) {
  #app #view #wd-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  #app #view .wod-door { padding: 14px 13px 12px; }
  #app #view .wod-n { font-size: 16px; }
  #app #view .wod-i { font-size: 11.5px; line-height: 1.75; }
}
/* ============================ PATCH34-END ============================ */
/* ============================================================
   PATCH35 · 2026-10-29（线上）
   日间「基础首页」（日间主题 + 没挂自定义壁纸）的那几枚大数字颜色太深，往浅走一档。
   只动 PATCH26 留下的 --hero-num 这一支令牌（桌面 .focus-card .fc-num 50px 细宋体 /
   手机平板 .stat .num 44px 细宋体）；问候大字 --hero-ink、日期与时间 --hero-clock 一个字不动。
   #414345 → #505356：对纸上地面（--bg #f7f4f1）的对比度从 9.07:1 收到 7.07:1，
   仍是「深灰」，只是不再压眼睛（细字重大字重行，同一个人的读数本来不该比标题还重）。
   夜间与自定义壁纸照旧完全不碰——壁纸那套自适应换色是站长点名要留的行为。
   —— 全部是追加：不改原有一行。回滚 = 删掉 PATCH35 到 PATCH35-END 之间。
   ============================================================ */
:root:not(.dark) body.home-on:not(.has-wallpaper) {
  --hero-num: #505356;    /* 大数字：工作台 / 待办的读数（原 PATCH26 的 #414345 浅一档） */
}
/* ============================ PATCH35-END ============================ */
/* ============================================================
   PATCH36 · 2026-10-29（线上）
   站长：「手机和平板端，这种类型的功能标题位置太低了，优化一下」
   （附一张 iPhone 待办页截图，红圈圈住「≡v 待办 TODOS ≡ 多选 ＋新建待办」那一行）
   纯追加；原有一行都没动。回滚 = 删掉 PATCH36 → PATCH36-END 这一段。

   实测病因（_lab/live-patch/fixture-head36.html，量顶栏底到标题顶的死区 = 32px）：
     顶栏带 --m-top-h = 48（PATCH31 抬起顶栏那轮定的）
   + #view padding-top = 18（style.css:6071，和它自己那条 top:16px 的遮罩淡出段绑在一起）
   + .view-head padding-top = 8（style.css:4336）
   + 行内 align-items:center 让 17px 标题在 30px 高的按钮旁边垂直居中 ≈ 6
   = 标题字顶到屏幕顶 80px，其中光「顶栏底到标题顶」就占了 32px。
   三个数各收一档，一共抬上去 24px（80 → 56，死区 32 → 14）：
     ① --m-top-h 48 → 42：顶栏里真正有东西的是 2px 上内边距 + 38px 的图标盒 = 40，
        48 那 8px 是白让的。**图标盒 38×38 一个没动**（PATCH31 那轮定的手指尺寸）。
     ② #view 的 padding-top 18 → 8，同时把那条遮罩淡出段从 16px 一起收到 8px。
        这两件事必须同批：淡出段停在 16 而正文只让出 8，标题就落在半透明的淡出区里，
        看着像"提上去了但糊了"（探针 title_is_in_fade 专门盯这一条）。
     ③ .view-head 的 padding-top 8 → 0：底栏间距另有 margin-bottom 16px 管着，
        上面这 8px 纯粹是死区。
   ⚠️ --m-top-h 写在 body:not(.home-on) 上，**不写在 :root**：
      ①那个数被两条规则读走（#view 的 top 和顶栏自己的 height），写在 :root 会连首页
        那 48px 的品牌带一起缩掉 6px。他这次点名的是功能页标题，首页不在范围内。
      ②自定义属性按"最近的设置了它的祖先"取值，#view 和 #topbar 都是 body 的子孙，
        所以挂在 body 上照样生效（:root 那两条 --m-top-h 管不到更近的 body）。
      ③ 正文那条同理写成 body:not(.home-on) #view（1,1,1）；首页那条是
        body.home-on #view（1,1,0），二者互斥——星海的 .hs-* 版式和 18px 的呼吸是配套的。
   ⚠️ 顶栏高度规则（style.css:6096 height:calc(var(--m-top-h)+安全区)!important）
      仍然按 --m-top-h 走，所以①改一个数顶栏和正文边界一起动，不会出现"标题压进品牌带"。
   ============================================================ */
@media (max-width: 1024px) {
  body:not(.home-on) { --m-top-h: 42px !important; }

  body:not(.home-on) #view {
    padding-top: 8px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%) !important;
  }

  /* 页眉上面那 8px 也一并收掉。同样带 body:not(.home-on)——首页没有 .view-head，
     但探针里 home-on 的页眉跟着掉了 8px，说明不锁住就是全站规则；锁住才敢写"首页不碰"。 */
  body:not(.home-on) #app #view .view-head { padding-top: 0 !important; }
}
/* ============================ PATCH36-END ============================ */
/* ================================================================
   PATCH37 · 2026-10-29 线上：订单卡片右下角那三枚键（完成 / 编辑 / 删除）
   站长两条原话：①「那三个图标太小了稍微改一点点，别太夸张」
   ②「手机和平板端是得长按才出现一小会，如果点击订单就会变成编辑订单，需要优化一下」。
   根因（量的，不是猜的）：这一排是 style.css:790-791 「display:none + :hover 才 flex」。
   给触屏兜底的那条写在 @media (hover:none)（4554），而他的手机/平板浏览器自报
   hover:hover，两条都不命中——于是只有长按那一下浏览器合成出悬停，键才冒出来一小会。
   顺带那句「框已经放大了图标还是小」也在同一块里：4554 那段只把框写成 36×36 +
   font-size:13，而字形是 work.js 里 data-size="12" 落成 <svg> 的 width/height 属性，
   font-size 管不到它。所以兜底档即使命中，看到的仍然是 12px 的图标。
   这次改判据：按宽度而不是按悬停能力——<=1024 就是手机/平板（和顶栏、底栏、
   抽屉同一口径），常驻可见、字形真放大。桌面（>1024）的 hover 行为一个字没动。
   ================================================================ */
@media (max-width: 1024px) {
  /* 常显。位置一并从「绝对定位浮在卡片右下角」改成「内容下面一行、靠右」：
     <=900 那段（style.css:5325 #app #view .order-card > *）本来就把卡片直接子元素
     拉回了 position:relative，键排实际已经在流里；把 901–1024 也统一成同一种排法，
     就不必先量该给卡片留多少 padding-bottom，也不会让三枚键压在备注/步骤最后一行上。
     right/bottom 那两个 8px 是绝对定位时代的遗留，相对定位下会把整排往左上推 8px，清掉。 */
  #app #view .order-card .oc-actions {
    display: flex !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  /* 框 24 → 32、字形 12 → 16，各一档，不是一倍。取站内已有的两档之间：
     框比基础 .icon-btn(30) 略宽、比触屏兜底那档(36) 略窄；
     字形比手机顶栏 .top-btn(17) 小一格。再大就变成他说的「夸张」了。 */
  #app #view .order-card .oc-actions .icon-btn { width: 32px; height: 32px; }

  /* <svg> 的 width/height 是属性不是内联样式，普通 CSS 声明就盖得住，不需要 !important */
  #app #view .order-card .oc-actions .icon-btn svg { width: 16px; height: 16px; }
}
/* ============================ PATCH37-END ============================ */

/* ============================ PATCH38 · 2026-10-29 线上 ============================
   设置中心「功能菜单顺序」：三端各一条可拖的顺序列表（电脑导航 / 手机平板底部+抽屉 / 小工具）。
   这块在 #modal-root 里、不在 #view 里，所以第 4025 行那条通配清零管不到它，普通权重就够；
   但 4459 那条 `.modal-card button { color: var(--ink); background: transparent }`（0,1,1）
   会一路管到行按钮，所以每条选择器都带 .modal-card（0,2,0 起）才压得住、也才盖得上悬停态。 */

.modal-card .mo-note { font-size: 11.5px; line-height: 1.8; color: var(--gray-deep); margin: 0 0 12px; }
.modal-card .mo-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px 20px; }
.modal-card .mo-lane { min-width: 0; }
.modal-card .mo-head { font-size: 11px; letter-spacing: .16em; color: var(--gray-deep); margin: 0 0 8px; }
.modal-card .mo-list { display: flex; flex-direction: column; gap: 2px; }
.modal-card .mo-band {
  font-size: 10px; letter-spacing: .2em; color: var(--pink-deep);
  margin: 9px 0 3px; padding-left: 4px;
}
.modal-card .mo-band:first-child { margin-top: 0; }
.modal-card .mo-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; margin: 0; padding: 4px 8px 4px 2px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--ink); font-family: inherit; font-size: 12.5px; text-align: left;
  cursor: default; -webkit-user-select: none; user-select: none;
  transition: background .16s, color .16s;
}
.modal-card .mo-row:hover,
.modal-card .mo-row:focus-visible,
.modal-card .mo-row.is-drag { background: var(--pink-faint); color: var(--pink-deep); outline: none; }
.modal-card .mo-grip {
  flex: none; width: 26px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-deep); opacity: .75;
  cursor: grab; touch-action: none;
}
.modal-card .mo-row:hover .mo-grip { opacity: 1; color: var(--pink-deep); }
.modal-card .mo-row.is-drag { cursor: grabbing; }
.modal-card .mo-row.is-drag .mo-grip { opacity: 1; color: var(--pink-deep); }
.modal-card .mo-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-card .mo-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.modal-card .mo-hint { font-size: 10.5px; color: var(--gray-deep); opacity: .85; }

@media (max-width: 640px) {
  .modal-card .mo-row { min-height: 42px; }
  .modal-card .mo-grip { width: 30px; }
  .modal-card .mo-tx { font-size: 13px; }
}
/* ============================ PATCH38-END ============================ */
/* ============================ PATCH39 · 2026-10-29 ============================ */
/* PATCH39：OC 记忆三件（笔记配图 / 关系双向同步 / 记忆备份）。纯追加，既有一行没动。
   这批界面大多落在弹窗里（写笔记、看笔记、设置中心的记忆备份卡），所以带 .modal-card
   前缀（要压过 style.css:4459 那条 .modal-card button 的透明底 + ink 字色）；
   另外三块在 #view 里（笔记缩略图、关系上的「同步」小签、编辑表单里的读取提示），
   一律带 #app #view 才压得住 4025 那条通配清零。 */

/* —— 写笔记弹窗：配图格 —— */
.modal-card .cn-imgs-hint {
  font-style: normal; margin-left: 8px; font-size: 10.5px; letter-spacing: .04em; color: var(--gray-deep);
}
.modal-card .cn-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.modal-card .cn-img {
  position: relative; width: 78px; height: 78px; margin: 0; padding: 0;
  border-radius: 3px; overflow: hidden; cursor: zoom-in;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.modal-card .cn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modal-card .cn-img-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  color: #fff; background: rgba(10, 12, 18, .46) !important;
  opacity: .74; transition: opacity .18s ease-out;
}
.modal-card .cn-img-x:hover { opacity: 1; }
.modal-card .cn-img-add {
  width: 78px; height: 78px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--gray-deep) !important;
  background: color-mix(in srgb, var(--ink) 5%, transparent) !important;
  transition: color .18s ease-out, background-color .18s ease-out;
}
.modal-card .cn-img-add b { font-weight: 400; font-size: 19px; line-height: 1; }
.modal-card .cn-img-add span { font-size: 9.5px; letter-spacing: .06em; }
.modal-card .cn-img-add:hover {
  color: var(--pink-deep) !important;
  background: color-mix(in srgb, var(--ink) 9%, transparent) !important;
}

/* —— 看笔记：配图比编辑时大一点，点开才是整图 —— */
.modal-card .rv-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modal-card .rv-img {
  width: 118px; height: 118px; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  cursor: zoom-in; background: transparent !important;
}
.modal-card .rv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* —— OC 详情页：笔记那一行的缩略图（在 #view 里）—— */
#app #view .cn-thumbs { display: flex; gap: 4px; margin-top: 7px; }
#app #view .cn-thumbs img {
  display: block; width: 30px; height: 30px; object-fit: cover; border-radius: 2px; opacity: .9;
}
#app #view .cn-thumbs span { font-size: 10px; color: var(--gray-deep); align-self: center; }

/* —— 关系上的「同步」小签：这条由对方档案镜像过来 —— */
#app #view .cd-rel-mx {
  font-style: normal; font-size: 9.5px; letter-spacing: .1em; color: var(--gray-deep); opacity: .9;
}

/* —— 编辑表单：关系自动读取提示（空着时不占位）—— */
#app #view .f-rel-hint { display: none; }
#app #view .f-rel-hint.on {
  display: block; margin: -2px 0 6px; font-size: 10.5px; line-height: 1.7;
  letter-spacing: .04em; color: var(--pink-deep);
}

/* —— 设置中心 · 记忆备份 —— */
.modal-card .mb-note { font-size: 11.5px; line-height: 1.95; color: var(--gray-deep); max-width: 64em; }
.modal-card .mb-note b { color: var(--ink); font-weight: 600; }
.modal-card .mb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 2px; }
.modal-card .mb-stat { margin-left: auto; font-size: 10.5px; color: var(--gray-deep); }
.modal-card .mb-list { display: flex; flex-direction: column; margin-top: 8px; }
.modal-card .mb-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.modal-card .mb-row:last-child { border-bottom: 0; }
.modal-card .mb-main { min-width: 0; }
.modal-card .mb-when { font-size: 12.5px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.modal-card .mb-kind { font-size: 9.5px; letter-spacing: .1em; color: var(--pink-deep); }
.modal-card .mb-meta { font-size: 10.5px; color: var(--gray-deep); margin-top: 2px; }
.modal-card .mb-ops { margin-left: auto; display: flex; gap: 1px; flex: 0 0 auto; }
.modal-card .mb-ops button {
  font-size: 11.5px; color: var(--gray-deep) !important; background: transparent !important;
  border: 0; padding: 4px 8px; border-radius: 2px; cursor: pointer;
  transition: color .18s ease-out, background-color .18s ease-out;
}
.modal-card .mb-ops button:hover {
  color: var(--pink-deep) !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
}
.modal-card .mb-ops button[data-mb="del"]:hover { color: var(--danger, #b0665a) !important; }
.modal-card .mb-ops button:disabled { opacity: .5; cursor: default; }
.modal-card .mb-empty { font-size: 12px; color: var(--gray-deep); padding: 14px 0 4px; line-height: 1.8; }

@media (max-width: 640px) {
  .modal-card .mb-row { flex-wrap: wrap; gap: 2px 10px; padding: 11px 0; }
  .modal-card .mb-ops { margin-left: 0; width: 100%; }
  .modal-card .mb-ops button { padding: 5px 10px 5px 0; font-size: 12px; }
  .modal-card .cn-img, .modal-card .cn-img-add { width: 64px; height: 64px; }
  .modal-card .rv-img { width: 88px; height: 88px; }
}
/* ============================ PATCH39-END ============================ */

/* ============ PATCH41：多模型 / 思考强度 / 引用回复 / 拖文件 ============ */

/* 模型徽标：只把当前模型名摆出来，零框零底，悬停才亮 */
.chat-head .chat-model{border:none;background:transparent;color:var(--gray-deep);font-size:11.5px;padding:2px 6px;cursor:pointer;font-family:var(--font-body);transition:color .18s;}
.chat-head .chat-model:hover{color:var(--pink-deep);}

/* 思考强度：三档字，选中的那一档亮起来 */
.ci-effort{display:inline-flex;align-items:center;gap:2px;}
.ci-effort button{border:none;background:transparent;color:var(--gray-deep);font-size:11.5px;padding:4px 8px;border-radius:8px;cursor:pointer;font-family:var(--font-body);transition:color .18s,background-color .18s;}
.ci-effort button:hover{color:var(--ink);}
.ci-effort button.is-on{color:var(--pink-deep);background:var(--pink-faint);}
.ci-gap{flex:1;}

/* 引用条：贴在输入框上方的一句原文 */
.ci-quote{display:flex;align-items:baseline;gap:6px;padding:2px 2px 0;font-size:12px;color:var(--gray-deep);min-width:0;}
.ci-quote .cq-to{color:var(--pink-deep);flex:none;}
.ci-quote .cq-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.78;}
.ci-quote .cq-x{flex:none;border:none;background:transparent;color:var(--gray-deep);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.ci-quote .cq-x:hover{color:#c83c3c;}

/* 消息里的引用块：灰一档、细竖线，不抢正文 */
.m-quote{font-size:11.5px;line-height:1.65;color:var(--gray-deep);border-left:2px solid var(--line-soft);padding-left:8px;margin-bottom:6px;max-height:5.4em;overflow:hidden;}
.m-quote b{display:block;font-weight:600;opacity:.72;margin-bottom:1px;font-size:11px;}
.msg.user .m-quote{color:rgba(255,255,255,.84);border-left-color:rgba(255,255,255,.45);}

/* 拖文件：对话区整块接住，正文先淡下去，提示条压在中间 */
.chat-main{position:relative;}
.chat-layout.is-drag #chat-msgs{opacity:.26;transition:opacity .18s;}
.chat-drop{position:absolute;left:0;right:0;top:0;bottom:56px;display:none;align-items:center;justify-content:center;font-size:13px;letter-spacing:.04em;color:var(--pink-deep);background:color-mix(in srgb,var(--paper) 58%,transparent);pointer-events:none;z-index:6;}
.chat-drop.is-on{display:flex;}

/* 设置中心：常用模型 */
.st-models{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;}
.st-mchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:10px;background:var(--pink-faint);color:var(--ink);cursor:pointer;}
.st-mchip em{font-style:normal;font-size:10.5px;color:var(--gray-deep);}
.st-mchip.is-def{background:var(--pink-pale);}
.st-mchip.is-def em{color:var(--pink-deep);}
.st-mchip button{border:none;background:transparent;color:var(--gray-deep);cursor:pointer;font-size:13px;line-height:1;padding:0;}
.st-mchip button:hover{color:#c83c3c;}
.st-mnone{font-size:11.5px;color:var(--gray-deep);}
.st-model-add{display:flex;gap:6px;align-items:center;}
.st-model-add .px-input{flex:1;}

@media (max-width:640px){
  .ci-effort button{padding:4px 6px;font-size:11px;}
  .chat-head .chat-model{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* PATCH41-END */

/* ============================================================
   PATCH43 工作台 · 账本行（站长从三个方向里挑了 A）
   一行一笔：左日期列 / 中甲方 + 标签 / 右金额成列 / 末尾 ⋯
   按 已逾期 · 本周内 · 以后 · 已完成 分组，去卡片、只用细线
   ⚠️ 线上有一条 `#app #view [class^="lg-"]` / `[class^="os-"]` 的
      「底色边框一锅端」，那里是 !important，所以本块里凡是
      底色 / 边框 / 投影都自带 !important，否则细线会被吃掉。
   ============================================================ */
#app #view .work-ledger { display: block; }

#app #view .lg-grp { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; padding-bottom: 6px; }
#app #view .lg-grp:first-child { margin-top: 6px; }
#app #view .lg-grp > span {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink);
}
#app #view .lg-grp > i { flex: 1; height: 1px; background: var(--line-soft) !important; }
#app #view .lg-grp > b {
  font-size: 10.5px; font-weight: 400; letter-spacing: .3px;
  color: var(--gray-deep); font-variant-numeric: tabular-nums;
}
#app #view .lg-grp-over > span { color: var(--danger); }
#app #view .lg-grp-over > i { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 45%, transparent), var(--line-soft)) !important; }

#app #view .lg-item { position: relative; }
#app #view .lg-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 26px;
  align-items: center; gap: 9px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-soft) !important;
  background: transparent !important;
}
#app #view .lg-row:hover { background: transparent !important; }
#app #view .lg-row:hover .lg-c { color: var(--pink-deep); }

#app #view .lg-date { line-height: 1.25; }
#app #view .lg-date b {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
#app #view .lg-date span { display: block; font-size: 9px; letter-spacing: .2px; color: var(--gray-deep); margin-top: 1px; }

#app #view .lg-main { min-width: 0; line-height: 1.3; }
#app #view .lg-c {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#app #view .lg-k {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 9.5px; color: var(--gray-deep);
  white-space: nowrap; overflow: hidden;
}
#app #view .lg-k > * { overflow: hidden; text-overflow: ellipsis; }
#app #view .lg-k i { font-style: normal; }
#app #view .lg-stage { color: var(--pink-deep); }
#app #view .lg-stepbtn {
  border: 0 !important; background: none !important; padding: 0; margin: 0;
  font: inherit; font-size: 9.5px; color: var(--pink-deep);
  text-decoration: underline; text-underline-offset: 2px;
  box-shadow: none !important;
}
#app #view .lg-amt {
  font-size: 12.5px; color: var(--pink-deep); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#app #view .lg-more {
  width: 26px; height: 26px; padding: 0;
  border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 12px; line-height: 1; letter-spacing: 1px; color: var(--gray-deep);
}
#app #view .lg-more:hover { color: var(--pink-deep); }

#app #view .lg-row.is-over .lg-date b,
#app #view .lg-row.is-over .lg-date span,
#app #view .lg-row.is-over .lg-amt { color: var(--danger); }
#app #view .lg-row.is-done .lg-date b,
#app #view .lg-row.is-done .lg-c,
#app #view .lg-row.is-done .lg-amt { color: var(--gray-deep); }

#app #view .lg-steps { padding: 2px 2px 10px 53px; border-bottom: 1px solid var(--line-soft) !important; }
#app #view .lg-steps .os-list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
#app #view .lg-steps .os-item {
  font-size: 11px; cursor: pointer; padding: 1px 4px;
  border: 1px dashed var(--line-soft) !important; color: var(--ink-soft);
  background: transparent !important;
  user-select: none; -webkit-user-select: none;
}
#app #view .lg-steps .os-item.done { text-decoration: line-through; color: var(--gray-deep); border-style: solid !important; }

@media (max-width: 1024px) {
  /* 触屏没有悬停：⋯ 放大到手指够得着，行高略增，步骤标签加宽 */
  #app #view .lg-row { grid-template-columns: 42px minmax(0, 1fr) auto 30px; gap: 8px; padding: 11px 2px; }
  #app #view .lg-more { width: 30px; height: 30px; font-size: 14px; }
  #app #view .lg-steps { padding-left: 50px; }
  #app #view .lg-steps .os-item { padding: 3px 8px; font-size: 11.5px; }
}
@media (max-width: 640px) {
  #app #view .lg-row { grid-template-columns: 40px minmax(0, 1fr) auto 28px; gap: 7px; }
  #app #view .lg-amt { font-size: 12px; }
  #app #view .lg-grp { margin-top: 16px; }
  #app #view .lg-steps { padding-left: 47px; }
}

/* PATCH43-END */
/* ============================================================
   PATCH44 随记 · 对开手账（站长挑的 A）
   桌面：左目录 236px / 右正文，点哪条换哪条，不再弹窗
   手机 ≤860：目录 → 整页正文（左上「‹ 目录」返回）
   提醒：#app #view 下有一条 `*` 的 !important 去色层，
        这里凡是背景 / 边框 / 阴影都必须自带 !important，否则一律透明
   ============================================================ */
#app #view .fo-spread {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 2px;
}
#app #view .fo-idx {
  border-right: 1px solid var(--line-soft) !important;
  padding: 0 10px 0 0 !important;
  background: transparent !important;
  max-height: calc(100vh - 250px);
  min-height: 300px;
  overflow-y: auto;
}
#app #view .fo-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  gap: 8px;
  align-items: baseline;
  padding: 7px 8px 7px 6px !important;
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
#app #view .fo-row:hover,
#app #view .fo-row.is-on { background: transparent !important; }
#app #view .fo-row:hover .fo-t { color: var(--ink); }
#app #view .fo-row.is-chosen { background: transparent !important; box-shadow: inset 2px 0 0 var(--pink-deep) !important; }
#app #view .fo-row.is-chosen .fo-d { color: var(--pink-deep); font-weight: 600; }
#app #view .fo-d {
  font-size: 10px;
  letter-spacing: .3px;
  color: var(--gray-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#app #view .fo-row.is-on .fo-d { color: var(--pink-deep); }
#app #view .fo-t {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app #view .fo-row.is-on .fo-t,
#app #view .fo-row.is-chosen .fo-t { color: var(--ink); font-weight: 600; }
#app #view .fo-row.is-hit .fo-t {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
}
#app #view .fo-pin {
  color: var(--gold) !important;
  display: flex;
  justify-content: flex-end;
}
#app #view .fo-none {
  padding: 24px 4px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--gray-deep);
}

#app #view .fo-pag {
  min-width: 0;
  max-height: calc(100vh - 250px);
  min-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
}
#app #view .fo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 10px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
#app #view .fo-sp { flex: 1; }
#app #view .fo-back {
  display: none;
  border: 0 none !important;
  background: none !important;
  padding: 2px 0 !important;
  margin: 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--pink-deep);
  cursor: pointer;
}
#app #view .fo-act {
  border: 0 none !important;
  background: none !important;
  padding: 2px 0 !important;
  margin: 0;
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .6px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .16s ease;
}
#app #view .fo-act:hover { color: var(--pink-deep); }
#app #view .fo-act + .fo-act { margin-left: 14px; }
#app #view .fo-act.is-danger { color: var(--danger); }
#app #view .fo-act.is-main {
  margin-top: 10px !important;
  padding: 7px 20px !important;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: var(--pink-deep);
  border: 1px solid var(--line-soft) !important;
}
#app #view .fo-blank { padding: 40px 0 30px; max-width: 26em; }
#app #view .fo-blank-t {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--ink);
}
#app #view .fo-blank-s {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.95;
  color: var(--gray-deep);
}

/* 右页里的杂志正文：弹窗那套样式是给 #modal-root 写的，
   #app #view 下底色/边框会被去色层清掉，这里按原样补回 */
#app #view .fo-pag .rv-magazine { padding: 0 !important; }
#app #view .fo-pag .rv-title { font-size: 21px !important; }
#app #view .fo-pag .rv-body.md-preview {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
#app #view .fo-pag .rv-gold-rule {
  height: 1px !important;
  border: 0 none !important;
  margin: 12px 0 !important;
  background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 25%, transparent) 55%, transparent 100%) !important;
}
#app #view .fo-pag .md-preview blockquote {
  background: none !important;
  border: 0 none !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 13px !important;
  margin: 10px 0 !important;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-soft);
}
#app #view .fo-pag .md-preview code {
  background: var(--bg-2) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  font-family: Consolas, monospace;
  font-size: 12.5px;
  color: var(--pink-deep) !important;
}
#app #view .fo-pag .md-preview pre {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  overflow-x: auto;
  margin: 8px 0 12px !important;
}
#app #view .fo-pag .md-preview pre code {
  background: none !important;
  padding: 0 !important;
  color: var(--ink) !important;
}
#app #view .fo-pag .md-preview hr {
  border: 0 none !important;
  border-top: 1px dashed var(--line-soft) !important;
  margin: 14px 0 !important;
}
#app #view .fo-pag .md-preview h3::before,
#app #view .fo-pag .md-preview h4::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px;
  height: 1.5px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--gold) !important;
}

@media (max-width: 860px) {
  #app #view .fo-spread { display: block; }
  #app #view .fo-idx {
    border-right: 0 none !important;
    padding-right: 0 !important;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  #app #view .fo-pag {
    display: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
  }
  #app #view .fo-spread.is-reading .fo-idx { display: none; }
  #app #view .fo-spread.is-reading .fo-pag { display: block; }
  #app #view .fo-back { display: inline-block; }
  #app #view .fo-row {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    padding: 12px 6px !important;
  }
  #app #view .fo-t { font-size: 13.5px; }
  #app #view .fo-d { font-size: 10.5px; }
  #app #view .fo-act { padding: 8px 0 !important; }
  #app #view .fo-pag .rv-title { font-size: 19px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #app #view .fo-act { transition: none; }
}
/* PATCH44-END */

/* ============================================================
   PATCH45 记账「光账」上线
   两个历史空洞（不是这次新引入的）：
   ① --danger 在样式里被引用了十几处（逾期圆点、负余额、支出金额…），却从来没定义过，
      那些声明一直是 invalid、被浏览器丢掉 —— 逾期小圆点其实是透明的。
   ② 空状态第三行 .es-tip 一直没有样式，全靠继承，和上一行贴在一起。
   ============================================================ */
:root { --danger: #bb736b; }
:root.dark { --danger: #d08a7e; }
.empty-state .es-tip {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: .2px;
  color: var(--gray-deep);
}

/* ============================================================
   PATCH46 壁纸适配：金线 / 光晕 / 图标 / 角标 全部跟随壁纸色
   取色在 js/views/settings.js 的 applyWallpaperPalette()：--gold / --glow /
   --accent-ico / --accent-ui / --pink / --pink-pale / --pink-faint / --badge。
   这里只把仍然写死暖色的几处接到变量上；没有壁纸时用这里的默认值，
   和以前一模一样，不加壁纸的人看不到任何变化。
   ============================================================ */
:root { --badge: #c06a5b; }

/* 站内信 / 草稿箱的未读角标、手机抽屉里的小红点：跟壁纸同族，不再是突兀的砖红 */
.msg-dot,
.draft-dot,
.m-badge {
  background: var(--badge) !important;
}

/* 顶栏「✦ 光环 Pro」：内联 style 写死了 #b08d57，只能用 !important 盖掉，
   否则壁纸态下这一枚永远是暖金，紧挨着头像格外显眼 */
#topbar #btn-pro { color: var(--gold) !important; }
/* PATCH46-END */

/* ============================================================
   PATCH47（2026-10-30）· 一条对话绑多个角色
   - 顶部徽标从「角色扮演 · 名字 ×」变成「角色扮演 / 群聊 · N + 每个角色一枚可摘的胶囊 + ＋ + 新开」
   - 角色页「群聊」按钮的选人弹窗
   徽标底色沿用 PATCH29 的 --pink-faint 胶囊；这里只放宽宽度、允许换行，
   内层胶囊用 --pink-deep 的 10% 叠色，零边框零阴影，跟全站语言一致。
   ============================================================ */
#app #view .chat-head #chat-oc-badge {
  max-width: 62% !important;
  flex-wrap: wrap;
  row-gap: 3px;
  padding: 3px 6px 3px 10px !important;
}
#app #view .chat-head #chat-oc-badge .ocb-lead {
  flex: none;
  font-size: 11px !important;
  letter-spacing: .04em;
  opacity: .72;
}
#app #view .chat-head #chat-oc-badge .ocb-chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex: none;
  max-width: 10em;
  padding: 0 1px 0 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--pink-deep) 10%, transparent) !important;
  font-size: 11px !important;
  line-height: 18px !important;
}
#app #view .chat-head #chat-oc-badge .ocb-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #view .chat-head #chat-oc-badge .ocb-add,
#app #view .chat-head #chat-oc-badge .ocb-new {
  flex: none;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 6px;
  margin: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 11px !important;
  line-height: 18px !important;
  color: inherit;
  opacity: .62;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#app #view .chat-head #chat-oc-badge .ocb-add:hover,
#app #view .chat-head #chat-oc-badge .ocb-add:focus-visible,
#app #view .chat-head #chat-oc-badge .ocb-new:hover,
#app #view .chat-head #chat-oc-badge .ocb-new:focus-visible {
  opacity: 1;
  background-color: color-mix(in srgb, var(--pink-deep) 12%, transparent) !important;
}
/* 窄屏：标题、标签、徽标允许折成两行，三个角色也放得下 */
@media (max-width: 640px) {
  #app #view .chat-head { flex-wrap: wrap; }
  #app #view .chat-head #chat-oc-badge { max-width: 100% !important; }
  #app #view .chat-head #chat-oc-badge .ocb-chip { max-width: 8.5em; }
}

/* ---------- 群聊选人弹窗（#modal-root 里，不在 #view 的通配清零范围） ---------- */
.gc-tip,
.m-tip {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.gc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
  margin-top: 10px;
  -webkit-overflow-scrolling: touch;
}
.gc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color .16s var(--ease);
}
.gc-row:hover { border-color: var(--pink); }
.gc-row input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--pink-deep);
}
.gc-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.gc-tx b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gc-tx small {
  font-size: 11.5px;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--gray-deep);
}
/* PATCH47-END */

/* ===== PATCH48 · 访客模式（不登录直接进首页） ===== */
/* 顶栏右上角「登录 / 注册」：淡金底的小药丸，不描边不投影，跟整排图标同一语气 */
.top-login {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: none; border-radius: 99px;
  background: var(--pink-pale); color: var(--pink-deep);
  font: inherit; font-size: 12.5px; letter-spacing: .02em;
  cursor: pointer; white-space: nowrap;
  transition: color .2s, background .2s;
}
.top-login:hover { color: var(--ink); background: var(--gray); }
.top-login .tl-n {
  font-style: normal; font-size: 10px; line-height: 1;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 99px; background: var(--gold); color: #6b5530;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 侧栏滚轮里「登录后可用」的页面：文字压淡，末尾补一个小字提示 */
.witem-need {
  margin-left: 7px; vertical-align: 2px;
  font-family: var(--font-body); font-size: 9px; letter-spacing: .04em;
  color: var(--gray);
}

/* 登录页底部：不想登录就继续当访客 */
.auth-guest {
  display: block; width: 100%; margin-top: 8px; padding: 6px 0;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--gray-deep);
  transition: color .2s;
}
.auth-guest:hover { color: var(--ink); }

/* 手机抽屉账号条里的「登录 / 注册」 */
#m-me .m-login {
  margin-left: auto; flex: none; border: none; cursor: pointer;
  padding: 6px 11px; border-radius: 99px;
  background: var(--pink-pale); color: var(--pink-deep);
  font: inherit; font-size: 12px;
}
body.guest-on #m-pro { display: none; }   /* 访客先把位置留给登录，Pro 登录后再看 */
#m-views [data-go].guest-locked .m-ai,
#m-tabbar [data-go].guest-locked .m-tab-ico { opacity: .42; }
#m-views [data-go].guest-locked b { color: var(--gray-deep); }
#m-views [data-go].guest-locked { position: relative; }
#m-views [data-go].guest-locked::after {
  content: '需登录'; position: absolute; top: 0; right: 0;
  font-size: 9px; color: var(--gray-deep); letter-spacing: .02em;
}
@media (max-width: 640px) {
  .top-login { padding: 5px 9px; font-size: 11.5px; }
  .top-login .tl-n { display: none; }
}

/* ============================================================
   PATCH49 · 2026-10-30（线上）
   站长：「手机和平板端只有首页才有我圈出来的，其他地方不要做」
   （红圈＝首页顶栏：✧ 光环HALO HALO ＋ 日/夜 ＋ 登录/注册 淡粉键）
   ⇒ ≤1024 顶栏只在 body.home-on 出现，其余页面整条不渲染；
      同时把 --m-top-h 归 0：正文 top 不再给已经不存在的顶栏让出 42–48px 的死区。
   顶栏上那两枚（日夜 / 草稿箱）没有丢，挪进了 ✦ 抽屉的「小工具」一格里
   （index.html #m-tools，data-hook 事件委托照旧点真实按钮）。
   纯追加；回滚 = 删掉 PATCH49 → PATCH49-END 这一段（并把 index.html 盖回 .bak-p49）。
   ============================================================ */
@media (max-width: 1024px) {
  /* ① 顶栏只在首页。PATCH31 那条「#app #topbar 也 display:flex」在这里被整条否掉：
        先全隐，再单独把 home-on 放出来。 */
  #app #topbar { display: none !important; }
  body.home-on #app #topbar { display: flex !important; }

  /* ② 高度令牌：首页 48（PATCH31 定的数），其余 0。
        body 级 !important 才压得住 PATCH36 的 body:not(.home-on){42px}。 */
  body:not(.home-on) { --m-top-h: 0px !important; }
  body.home-on { --m-top-h: 48px !important; }

  /* ③ 没有顶栏的页面：正文自己留 12px 呼吸，遮罩淡出同步 12px
        （PATCH36 那一对是 8/8，那 8px 是给「顶栏底」让的余量，顶栏没了就还回来一点）。 */
  body:not(.home-on) #view {
    padding-top: 12px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%) !important;
  }
}
/* ============================ PATCH49-END ============================ */

/* ============================================================
   PATCH55 · 2026-10-30（线上）
   AI 对话手机 / 平板：换成「整页对话 + 抽屉目录 + 卡片输入」
   ① 目录：从左边滑出的整块列表（药丸搜索框、分组小签、纯文字条目）
   ② 正文：满宽阅读，不再有窄轨
   ③ 输入：一颗圆角卡片，字在上面，思考强度/图片/文档/发送在下面一行
   ============================================================ */
@media (max-width: 1024px) {
  #app #view .chat-layout {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  #app #view .chat-main {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 目录：整块抽屉 */
  #app #view .chat-scrim {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  #app #view .chat-side {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: min(88vw, 360px) !important;
    height: auto !important;
    max-height: none !important;
    z-index: 6;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg) !important;
    border: none !important;
    border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateX(-102%) !important;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1) !important;
  }
  #app #view .chat-layout.is-open .chat-side { transform: none !important; }
  #app #view .chat-layout.is-open .chat-scrim {
    opacity: 1;
    pointer-events: auto;
    background: color-mix(in srgb, var(--ink) 24%, transparent);
  }
  #app #view .chat-layout.is-open .ch-list { color: var(--ink) !important; }

  /* 搜索：一颗圆角药丸 */
  #app #view .chat-side-head {
    padding: 14px 14px 6px !important;
    border-bottom: none !important;
  }
  #app #view .chat-side-head input {
    width: 100% !important;
    border: none !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--ink) 7%, transparent) !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
  #app #view .chat-tags { display: none !important; }

  /* 列表：一条条纯文字，没有框没有底 */
  #app #view .chat-list { padding: 2px 8px 18px !important; }
  #app #view .cl-group {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    color: var(--gray-deep) !important;
    padding: 15px 10px 5px !important;
  }
  #app #view .cl-group:first-child { padding-top: 6px !important; }
  #app #view .chat-item {
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 11px 10px !important;
  }
  #app #view .chat-item:hover { transform: none !important; background: transparent !important; }
  #app #view .chat-item.active { background: transparent !important; color: var(--ink) !important; }
  #app #view .chat-item .ci-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
  }
  #app #view .chat-item.active .ci-title { font-weight: 600 !important; }
  #app #view .chat-item .ci-meta { display: none !important; }
  #app #view .chat-item .ci-del { display: none !important; }
  #app #view .chat-item .ci-pin { top: 9px !important; right: 8px !important; font-size: 10px !important; }

  /* 标题栏：左端一枚菜单图标，不带字 */
  #app #view .chat-head { padding: 8px 14px !important; }
  #app #view .chat-head .ch-list {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important; height: 30px !important;
    padding: 0 !important;
    margin-right: 4px !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--ink-soft) !important;
    border-radius: 0 !important;
  }
  #app #view .chat-head .ch-list span { display: none !important; }
  #app #view .chat-head b { font-size: 14px !important; }

  /* 正文：满宽 */
  #app #view .chat-msgs { padding: 14px 18px 18px !important; gap: 14px !important; background: transparent !important; }

  /* 输入：一颗圆角卡片 */
  #app #view .chat-input {
    position: relative !important;
    display: block !important;
    flex-wrap: nowrap !important;
    margin: 0 10px 10px !important;
    padding: 12px 12px 10px !important;
    border: none !important;
    border-top: none !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
    box-shadow: none !important;
  }
  #app #view .chat-input::before { content: none !important; display: none !important; }
  #app #view .ci-wrap { display: block !important; }
  #app #view .chat-input textarea {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 0 8px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 104px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    resize: none !important;
    overflow-y: auto !important;
  }
  #app #view .ci-tools { padding-right: 62px !important; gap: 6px !important; }
  #app #view .ci-effort { gap: 6px !important; }
  #app #view .ci-effort button {
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
    border-radius: 999px !important;
    background: transparent !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
  }
  #app #view .ci-effort button.is-on {
    border-color: color-mix(in srgb, var(--pink-deep) 45%, transparent) !important;
    color: var(--pink-deep) !important;
    background: transparent !important;
  }
  #app #view #chat-send {
    position: absolute !important;
    right: 10px !important;
    bottom: 8px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 13px !important;
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    align-self: auto !important;
  }
}

/* PATCH55 补：抽屉里的搜索框单独提一级，盖过全局 input 规则 */
@media (max-width: 1024px) {
  #app #view #chat-search {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--ink) 7%, transparent) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* ============================================================
   PATCH56 · 2026-10-30（线上）
   站长：「下面的描边胶囊太占位置了，输入框又很靠上。显得功能区很窄很小。
          另外，包括主页，所有功能区为什么都这么靠下，太影响视野了，
          最上面空着那一大排是干嘛」
   ① 首页：顶栏那条带宽 48→40（里面只有 26px 高的 logo＋三枚 38 高的圆键），
      正文顶部内边距 18→6。第一眼内容 66px → 46px。
   ② 其它页：顶栏本来就不渲染（--m-top-h:0），死区来自三处叠加——
      #view 顶部 12、页头下内边距 8、页头下沿 16；一并收到 4 / 0 / 8。
      第一条内容 72px → 46px，标题行 12px → 4px。
   ③ AI 对话输入区：三枚「思考强度」去描边去底色，只留字色（选中走强调色）；
      卡片收薄、输入字号回到 15，发送改成实心药丸。功能区不再被一圈圈描边撑高。
   纯追加；回滚 = 删掉 PATCH56 → PATCH56-END 这一段。
   ============================================================ */
@media (max-width: 1024px) {
  /* ① 首页顶栏与首屏 */
  body.home-on { --m-top-h: 40px !important; }
  body.home-on #view { padding-top: 6px !important; }

  /* ② 不带顶栏的页面：把三处叠加的死区一起收掉 */
  body:not(.home-on) #view {
    padding-top: 4px !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4px, #000 calc(100% - 20px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 4px, #000 calc(100% - 20px), transparent 100%) !important;
  }
  body:not(.home-on) #app #view .view-page { padding-top: 0 !important; }
  body:not(.home-on) #app #view .view-head {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
  }

  /* ③ AI 对话：顶栏头一行贴顶，正文与输入区收薄 */
  #app #view .chat-head { padding: 4px 14px 6px !important; }
  #app #view .chat-msgs { padding: 10px 18px 16px !important; }
  #app #view .chat-input {
    padding: 10px 12px 8px !important;
    margin: 0 10px 8px !important;
    border-radius: 18px !important;
  }
  #app #view .chat-input textarea {
    padding: 2px 0 6px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  #app #view .ci-tools {
    min-height: 26px !important;
    align-items: center !important;
    padding-right: 66px !important;
    gap: 1px !important;
  }
  #app #view .ci-effort button {
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 4px 7px !important;
    font-size: 11.5px !important;
    color: var(--gray-deep) !important;
  }
  #app #view .ci-effort button.is-on {
    background: transparent !important;
    border: none !important;
    color: var(--pink-deep) !important;
    font-weight: 600 !important;
  }
  #app #view .ci-tool { width: 26px !important; height: 26px !important; }
  #app #view #chat-send {
    border: none !important;
    background: var(--pink-deep) !important;
    color: #fff !important;
    height: 30px !important;
    padding: 0 14px !important;
    bottom: 7px !important;
    right: 10px !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
  }
  #app #view #chat-send:disabled { opacity: .45 !important; }
}
/* ============================ PATCH56-END ============================ */

/* ============================================================
   PATCH56-补 · 2026-10-30（线上）
   实测 390×844：对话卡片底边停在 674px，底栏从头 784px 起、留 20px 内边距，
   中间整整空出 82px —— 输入区看上去又小又飘。旧写法把高度算成
   calc(100dvh - 210px)，那 210 是「顶栏 + 页头 + 底栏」的旧估值。
   改成按可用高度撑满（100% - 页头 44），底部只留卡片自身 8px + 页面 20px 内边距。
   ============================================================ */
@media (max-width: 1024px) {
  #app #view .chat-layout {
    height: calc(100% - 44px) !important;
    min-height: 0 !important;
  }
  #app #view .chat-msgs { padding-bottom: 12px !important; }
  #app #view .ci-effort button { min-height: 28px !important; padding: 4px 8px !important; }
  /* 发送：强调色实心 + 纸面反色（四套主题 --paper 恒与 --ink 相反） */
  #app #view #chat-send { background: var(--pink-deep) !important; color: var(--paper) !important; }
  body.has-wallpaper.wall-dark #app #view #chat-send { background: var(--ink) !important; color: var(--paper) !important; }
}

/* ============================================================
   PATCH57 · 2026-10-30（线上）
   站长：「推理强度就不能收到一个小图标里面吗，全放在下面丑死了而且还占了对话框的位置。
          选对话，新建对话，管理标签放在同一排啊，缩小一点」
   ① 思考强度：三档字收成「✦ 直接答」一枚小入口，点开在输入框上方弹出三选一。
   ② 对话页页头：手机上「新对话 / 管理标签」由 JS 挪进对话标题行，
      页头整块不再渲染 —— 顶上一排就是 ☰ 对话名 ＋ 新对话 ＋ 管理标签。
   纯追加；回滚 = 删掉 PATCH57 → PATCH57-END，并把 chat.js 盖回 .bak-p57。
   ============================================================ */

/* ---- 思考强度：一枚入口 + 弹出三选一（全宽度通用，桌面也不会散成三行） ---- */
#app #view .ci-effort { position: relative; display: inline-flex; align-items: center; }
#app #view .ci-effort .ci-eff-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: none !important; background: transparent !important;
  color: var(--gray-deep) !important;
  font: inherit; font-size: 11.5px !important;
  padding: 4px 6px !important; border-radius: 8px !important;
  line-height: 1 !important; cursor: pointer;
}
#app #view .ci-effort .ci-eff-btn.is-on { color: var(--pink-deep) !important; }
#app #view .ci-effort .ci-eff-btn svg { width: 14px; height: 14px; }
#app #view .ci-eff-menu {
  display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 9;
  padding: 4px; border-radius: 12px;
  /* 全站有一条 #app #view * { background:none !important; border-color:transparent !important }，
     弹层必须自己把那三样抢回来 */
  background: var(--paper) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16) !important;
}
#app #view .ci-eff-menu.is-open { display: flex; flex-direction: column; gap: 2px; }
#app #view .ci-eff-menu button {
  border: none !important; background: transparent !important;
  color: var(--ink-soft) !important;
  font: inherit; font-size: 12px !important; text-align: left; white-space: nowrap;
  padding: 7px 14px !important; border-radius: 8px !important; line-height: 1.2 !important;
}
#app #view .ci-eff-menu button.is-on { color: var(--pink-deep) !important; background: var(--pink-faint) !important; }

@media (max-width: 1024px) {
  /* ---- 对话页：页头并进标题行以后，标题行自己排整齐 ---- */
  #app #view .chat-head { padding: 4px 12px 6px !important; gap: 8px !important; }
  #app #view .chat-head b {
    flex: 1 1 auto !important; min-width: 0 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    font-size: 13.5px !important;
  }
  #app #view .chat-head .view-tools {
    display: flex !important; flex: none !important; flex-wrap: nowrap !important;
    margin-left: auto !important; gap: 4px !important;
  }
  #app #view .chat-head .view-tools .btn {
    height: 28px !important; min-height: 0 !important;
    padding: 0 9px !important; border-radius: 999px !important;
    font-size: 11.5px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
  }
  #app #view .chat-head .view-tools .btn svg { width: 12px !important; height: 12px !important; }
  /* 页头没了，对话区直接吃满正文高度 */
  #app #view .chat-layout.no-head { height: 100% !important; }
}
/* ============================ PATCH57-END ============================ */

/* ============================================================
   PATCH58 · 2026-10-30（线上）
   站长：「把这个对话框的字缩小一点，对话框长度加一点」。
   输入框字号 15 → 13.5，默认高度 24 → 46（空框也露出两行），
   自动长高的上限 104 → 120，发送键跟着这条更高的一行居中。
   纯追加；回滚 = 删掉 PATCH58 这一段。
   ============================================================ */
@media (max-width: 1024px) {
  #app #view .chat-input { padding: 12px 12px 9px !important; }
  #app #view .chat-input textarea {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    min-height: 46px !important;
    max-height: 120px !important;
    padding: 3px 0 8px !important;
  }
  #app #view #chat-send {
    height: 32px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    bottom: 8px !important;
    right: 10px !important;
    font-size: 12.5px !important;
  }
}
/* ============================ PATCH58-END ============================ */

/* ============================================================
   PATCH59 · 2026-10-30（线上）
   站长：「感觉可以搞个手势滑动收起和打开诶，ai对话这个列表，
          而且太宽啦，再收窄五分之一或者六分之一吧」。
   ① 目录抽屉 88vw → 73vw（上限 360 → 300），收窄约六分之一。
   ② 拖动跟手：.is-dragging 关掉过渡，横滑手势由 js/views/chat.js 驱动；
      touch-action: pan-y 让竖向滚动照常，横向手势归滑动手势用。
   纯追加；回滚 = 删掉 PATCH59 这一段。
   ============================================================ */
@media (max-width: 1024px) {
  #app #view .chat-side {
    width: min(73vw, 300px) !important;
    touch-action: pan-y !important;
  }
  #app #view .chat-layout.is-dragging .chat-side,
  #app #view .chat-layout.is-dragging .chat-scrim { transition: none !important; }
}
/* ============================ PATCH59-END ============================ */

/* ===== PATCH60 工作台统计卡：合并成一张卡、两行（275px → 约 95px） =====
   结构：.ws-main 内 .ws-top（标题 + 月份选择）+ .ws-num（金额 + 笔数）+ .ws-chips（单行横滑）
   分类胶囊默认被全局 #app #view .chip 的 padding:9px 12px 撑到 37px 并折成两行，这里压回 21px。 */
#app #view .work-stats { display: block !important; margin-bottom: 12px !important; }
#app #view .work-stats .ws-main { flex: none !important; width: auto !important; padding: 10px 12px 9px !important; }
#app #view .ws-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
#app #view .work-stats .ws-label { font-size: 11px !important; line-height: 1.4 !important; color: var(--ink-soft) !important; }
#app #view #ws-month.ws-month-in {
  max-width: 120px !important; width: auto !important;
  border: 0 !important; border-width: 0 !important;
  background: transparent !important; background-color: transparent !important;
  /* 视觉上仍是很小的一行字，但用 padding + 负 margin 把可点区域撑到约 34px */
  padding: 6px 2px !important; margin: -6px -2px !important;
  font-size: 12px !important; line-height: 1.5 !important;
  color: var(--pink-deep) !important; text-align: right !important; box-shadow: none !important;
}
#app #view .work-stats .ws-num {
  display: flex !important; align-items: baseline !important; gap: 6px !important;
  margin: 2px 0 0 !important; font-size: 22px !important; line-height: 1.2 !important;
}
#app #view .work-stats .ws-num small {
  font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 400 !important;
  letter-spacing: 0 !important; color: var(--gray-deep) !important; line-height: 1.4 !important;
}
#app #view .ws-chips {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
  margin-top: 6px !important; overflow-x: auto !important; padding-bottom: 2px !important;
  scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important;
}
#app #view .ws-chips::-webkit-scrollbar { display: none !important; }
#app #view .ws-chips .chip {
  flex: 0 0 auto !important; padding: 2px 8px !important;
  font-size: 11px !important; line-height: 1.5 !important; white-space: nowrap !important;
  border-bottom: 0 !important; color: var(--ink-soft) !important;
}
#app #view .ws-chips .chip.active { color: var(--pink-deep) !important; }
#app #view .ws-chips .chip b { font-family: var(--font-en) !important; font-weight: 500 !important; }


/* ============================================================
   2026-10-31 · 站内信未读：去掉图标外面的框，只留一个小点
   - 抽屉铃铛原来是 30px 圆框（1px 线），和旁边的图标不是一套；
     现在只剩图标本身，有未读时右上角一枚 7px 小点（同氛围台播放点）。
   - 顶栏铃铛原来是带数字的胶囊，同样改成小点；数字只留在站内信页内的标签上。
   - 颜色走 --badge / --paper：自定义壁纸时 PATCH46 已按壁纸取色，这里不再写死。
   ============================================================ */
#m-msg-bell { border: 0 !important; background: none !important; }
#m-msg-bell:hover, #m-msg-bell:focus-visible { color: var(--pink-deep); border: 0 !important; }
#m-msg-bell:active { background: var(--pink-faint) !important; }
#m-msg-bell svg { width: 16px !important; height: 16px !important; }
#m-me #m-msg-bell .m-badge {
  top: 2px; right: 3px;
  width: 7px; height: 7px; min-width: 0;
  border: 1.5px solid var(--paper);
  background: var(--badge);
}
#btn-messages .msg-dot {
  top: -3px; right: -3px;
  width: 8px; height: 8px; min-width: 0; padding: 0;
  border: 2px solid var(--paper);
  background: var(--badge);
  font-size: 0; line-height: 0;
}

/* 小点是 display:flex，属性选择器压不过它，hidden 必须显式关掉 */
.msg-dot[hidden], #m-msg-dot[hidden] { display: none !important; }

/* ============================================================
   PATCH60 · 2026-10-31（线上）
   ① 桌面正文顶部那条大空带：第 2376 行 `#view{margin-top:78px}`
      原本是给手机顶栏让位的；桌面 #view 已经用 top:76px 让开悬浮顶栏，
      再叠一层 78px 就空出一条横带，把随记/待办正文整体压到半屏以下。
      桌面（≥901）把它归零；手机/平板走 --m-top-h，不受影响。
   ② 心流计时器：站长「文字行距缩小一点」「那排小字删掉」
      行距只收元素间距和行高，字号/圆环尺寸不动。
   ============================================================ */
@media (min-width: 901px) {
  #view { margin-top: 0; }
}
.focus-box .zen-title { margin-bottom: 2px; }
.focus-box .zen-subject { margin-bottom: 4px; }
.focus-box .ring-wrap { margin: 2px auto 0; }
.focus-box .zen-time { margin: 0 0 6px; line-height: 1.15; }
.focus-box .focus-modes { margin-bottom: 8px; }
.focus-box .focus-ctl { margin-top: 8px; }
.focus-box .zen-stat { margin-top: 4px; }