/* ===== 统一版 v20260722 (含全部修复：移动端下拉/滚动穿透/常规设置横排) ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:root {
  --accent: #5ec95c;
  --bg1: color-mix(in srgb, var(--accent) 38%, #20304a);
  --bg2: color-mix(in srgb, var(--accent) 20%, #34465f);
  --bg3: color-mix(in srgb, var(--accent) 8%, #5b7390);
  --text: #ffffff; --text-dim: rgba(255,255,255,.72);
  --tile-bg: rgba(255,255,255,.14); --tile-border: rgba(255,255,255,.22); --tile-hover: rgba(255,255,255,.28);
  --panel-bg: rgba(255,255,255,.14); --panel-border: rgba(255,255,255,.25);
  --overlay-bg: rgba(14,18,25,.82); --overlay-text: #ffffff; --overlay-dim: rgba(255,255,255,.6);
  --search-bg: rgba(255,255,255,.18); --search-border: rgba(255,255,255,.3); --search-text: #ffffff;
}
body.light {
  --bg1: #c5d2ca;
  --bg2: #b3c2bb;
  --bg3: #d7e0db;
  --text: #1d2733; --text-dim: rgba(0,0,0,.55);
  --tile-bg: rgba(255,255,255,.78); --tile-border: rgba(0,0,0,.08); --tile-hover: #ffffff;
  --panel-bg: rgba(255,255,255,.82); --panel-border: rgba(0,0,0,.12);
  --overlay-bg: rgba(255,255,255,.92); --overlay-text: #1d2733; --overlay-dim: rgba(0,0,0,.5);
  --search-bg: rgba(255,255,255,.88); --search-border: rgba(0,0,0,.12); --search-text: #1d2733;
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text); overflow: hidden; background: #0e1219;
}

#bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: opacity .2s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}

/* 模糊层在清晰层下面 → 永远 opacity:1、纹理一次缓存永不重算。
   打开捷径页只需 #bg 淡出，模糊层自然显露，零过渡零操作 */
#bg-blur {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  background-size: cover; background-position: center;
  filter: blur(var(--blur-radius, 14px)) brightness(.80) saturate(1.08);
  transform: scale(1);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  /* 静态模糊层：常态仅 brightness 无模糊，捷径页(.blur-bg)时才 blur；
     不保留 will-change/translateZ，避免常驻全屏合成层抢占 GPU（流畅度优化）。
     高分屏(DPR>=2)时 --blur-radius 由 JS 降为 8px，物理像素砍半、观感几乎无差。
     缩放只走 transform（GPU 合成），blur 结果已缓存成纹理、不重算，开销可控；
     与清晰层 #bg 同步 scale(1.1)，保证交叉淡入期间两层对齐、放大效果可见（模糊层才是露出的可见层） */
}
/* 动态背景（原生 WebGL 粒子，叠加在 #bg 之上、内容之下）*/
#dynamicBg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: block; opacity: 1; transition: opacity .4s ease;
}
body:not(.dynamic-bg) #dynamicBg { display: none; }
@media (prefers-reduced-motion: reduce) {
  #dynamicBg { display: none !important; }
}

/* ===== 全局顶栏工具栏（右上 ☰ 开关 + 横贯下拉顶栏） ===== */
.app-toolbar {
  position: fixed; top: 16px; right: 20px; left: auto;
  z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  /* 容器本身穿透点击：避免收起态下 1100×114 的隐形盒子吞掉捷径页顶部 tile 的点击；
     仅 .tb-toggle 与展开面板 .tb-panel.open 恢复 pointer-events:auto */
  pointer-events: none;
}
/* ☰ 三横开关 */
.tb-toggle {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer; flex: none;
  pointer-events: auto;            /* 容器已穿透，开关需显式恢复可点 */
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(var(--toggle-blur, 14px)) saturate(160%); -webkit-backdrop-filter: blur(var(--toggle-blur, 14px)) saturate(160%);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s;
}
.tb-toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.tb-toggle:active { transform: scale(.94); }
.tb-toggle-bars { position: relative; width: 20px; height: 14px; }
.tb-toggle-bars i {
  position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s, top .3s;
}
.tb-toggle-bars i:nth-child(1) { top: 0; }
.tb-toggle-bars i:nth-child(2) { top: 6px; }
.tb-toggle-bars i:nth-child(3) { top: 12px; }
/* 打开时三横 → X */
.app-toolbar.open .tb-toggle-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.app-toolbar.open .tb-toggle-bars i:nth-child(2) { opacity: 0; }
.app-toolbar.open .tb-toggle-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* 横贯整页的下拉顶栏（半透明毛玻璃） */
.tb-panel {
  width: calc(100vw - 32px); max-width: 1100px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 18px; border-radius: 16px;
  background: rgba(20,26,22,.42); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(var(--panel-blur, 22px)) saturate(180%); -webkit-backdrop-filter: blur(var(--panel-blur, 22px)) saturate(180%);
  box-shadow: 0 12px 40px rgba(0,0,0,.32);
  opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.98);
  pointer-events: none;
  transition: opacity .26s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .26s;
}
.tb-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
.tb-left { padding-right: 14px; border-right: 1px solid rgba(255,255,255,.14); }
/* 图标按钮 */
.tb-btn {
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer; flex: none;
  display: grid; place-items: center; position: relative;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text);
  transition: transform .22s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s, box-shadow .2s;
}
.tb-btn:hover {
  background: rgba(94,201,92,.18); border-color: rgba(94,201,92,.5);
  transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 18px rgba(94,201,92,.22);
}
.tb-btn:active { transform: scale(.92); }
.tb-ico { font-size: 18px; line-height: 1; }
/* 待办/便签 开启态高亮（来自顶栏开关） */
.tb-btn.active {
  background: rgba(94,201,92,.26); border-color: rgba(94,201,92,.65);
  box-shadow: 0 0 0 1px rgba(94,201,92,.4) inset, 0 6px 18px rgba(94,201,92,.18);
}
.tb-btn.active::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: #5ec95c; box-shadow: 0 0 8px #5ec95c;
}
/* 登录态头像高亮（已登录 vs 未登录 视觉区分） */
.tb-btn.logged-in {
  background: rgba(94,201,92,.26); border-color: rgba(94,201,92,.65);
  box-shadow: 0 0 0 1px rgba(94,201,92,.4) inset, 0 0 12px rgba(94,201,92,.3);
}
/* 登录后点头像弹出的「账号管理 / 退出登录」菜单 */
.tb-user-wrap { position: relative; display: flex; }
.tb-user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 132px;
  padding: 6px; border-radius: 12px; z-index: 75; display: none;
  background: rgba(20,26,22,.92); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(var(--panel-blur, 22px)) saturate(180%); -webkit-backdrop-filter: blur(var(--panel-blur, 22px)) saturate(180%);
  box-shadow: 0 12px 40px rgba(0,0,0,.4); flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.tb-user-menu:not(.hidden) { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
.tb-user-item {
  display: flex; align-items: center; width: 100%; padding: 9px 12px;
  border-radius: 9px; cursor: pointer; background: transparent; border: none;
  color: var(--text); font-size: 13px; text-align: left; transition: background .15s;
}
.tb-user-item:hover { background: rgba(94,201,92,.18); }
/* 浅色模式：头像下拉改为浅色玻璃，文字用深色（var(--text) 在浅色下已是深色），否则深底深字看不清 */
body.light .tb-user-menu { background: rgba(255,255,255,.96); border-color: rgba(0,0,0,.1); box-shadow: 0 12px 40px rgba(0,0,0,.16); }
body.light .tb-user-item { color: #1d2733; }
body.light .tb-user-item:hover { background: rgba(94,201,92,.16); color: #1d2733; }
@media (max-width: 560px) {
  .tb-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    max-width: calc(100vw - 24px);
  }
  .tb-left, .tb-right {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-items: center;
    padding: 0;
    border: none;
  }
  .tb-left { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .tb-btn { width: 46px; height: 46px; border-radius: 13px; }
  .tb-ico { font-size: 20px; }
}
.sync-badge {
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: rgba(46,204,113,.28); border: 1px solid rgba(46,204,113,.5); color: #eafff0;
}

.center {
  position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; padding: 0 20px; z-index: 2;
  will-change: transform; /* 隔离时钟每秒重绘到独立合成层，避免牵动背景重绘 */
  transition: transform .42s cubic-bezier(.16,1,.3,1); /* 捷径页上移/复位平滑过渡，GPU 合成层无卡顿 */
}
#clock {
  display: inline-block; /* 宽度贴合文字，便于搜索框按比例计算 */
  font-size: clamp(56px, 12vw, 120px); font-weight: 300; letter-spacing: 2px;
  transition: font-size .42s cubic-bezier(.16,1,.3,1); /* 捷径页缩小时平滑过渡，纯合成层无卡顿 */
  /* 紧贴反色描边：无论壁纸是深是浅都勾出字形轮廓，避免同色壁纸看不清 */
  text-shadow:
    0 0 1px rgba(0,0,0,.85),
    0 1px 3px rgba(0,0,0,.55),
    0 3px 18px rgba(0,0,0,.35);
  line-height: 1.1;
}
/* 浅色模式：深青绿色（呼应青柠主题，避免死黑）+ 白色描边，深色壁纸下也清晰 */
body.light #clock {
  color: #1e5a42;
  text-shadow:
    0 0 1px rgba(255,255,255,.95),
    0 1px 3px rgba(255,255,255,.8),
    0 3px 16px rgba(255,255,255,.5);
}
.search { margin: 24px auto 0; max-width: var(--search-w, 380px); transition: max-width .35s cubic-bezier(.22,.61,.36,1), margin-top .42s cubic-bezier(.16,1,.3,1); position: relative; }

/* ★ 搜索栏：去掉 backdrop-filter（毛玻璃），用纯色半透明 + 伸缩动效（容器整体变宽） */
.search {
  display: flex; align-items: center; gap: 0;
}
.search input {
  width: 100%; padding: 13px 46px 13px 20px; border-radius: 26px; border: 1px solid var(--search-border);
  background: var(--search-bg); color: var(--search-text); font-size: 15px; outline: none;
  transition: border-color .25s ease,
              box-shadow .3s ease,
              background .25s ease,
              padding-left .25s ease;
  padding-left: 20px; /* 默认无图标，留白更紧凑 */
}
/* 聚焦时左侧让出 46px 给搜索引擎图标 */
.search.focused input { padding-left: 46px; }
.search.input-wide { max-width: var(--search-w-wide, 760px); }
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.search input::placeholder { color: var(--text-dim); }

/* ========== 搜索引擎选择器 ========== */
.engine-btn {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer; display: flex; align-items: center;
  justify-content: center; z-index: 2; padding: 0;
  opacity: 0; pointer-events: none;
  transition: background .2s, opacity .2s ease, transform .2s ease;
}
/* 默认隐藏搜索引擎图标，仅当搜索框聚焦（出现输入光标）时才滑入显示 */
.search.focused .engine-btn { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.engine-btn:hover { background: rgba(255,255,255,.1); }
.engine-btn:active { transform: translateY(-50%) scale(.92); }
.engine-icon { font-size: 17px; line-height: 1; pointer-events: none; }

/* 命令面板触发按钮：搜索框右侧常驻的「⌘K」入口（扩展端 Ctrl+K 会被 Chrome 接管，故提供可见点击入口） */
.cmd-trigger {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--panel-border); background: rgba(255,255,255,.05);
  color: var(--text-dim); font-size: 12px; cursor: pointer; z-index: 3; padding-top: 0; padding-bottom: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.cmd-trigger:hover { background: rgba(94,201,92,.16); color: var(--accent); border-color: rgba(94,201,92,.4); }
.cmd-trigger:active { transform: translateY(-50%) scale(.95); }
.cmd-trigger .cmd-trigger-k { font-size: 13px; font-weight: 600; }
@media (max-width:560px){
  .cmd-trigger { right: 6px; height: 24px; padding: 0 7px; }
  .cmd-trigger .cmd-trigger-label { display: none; }   /* 移动端只显示 ⌘ 图标，更紧凑 */
}

.engine-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 220px; max-width: 280px;
  background: rgba(20,24,34,.95); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: 100; overflow: hidden;
  animation: engineDrop .18s cubic-bezier(.22,.61,.36,1);
}
@keyframes engineDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.engine-dropdown.hidden { display: none; }

.engine-list { padding: 6px 0; }
.engine-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border: none; background: none; color: rgba(255,255,255,.88);
  font-size: 14px; cursor: pointer; width: 100%; text-align: left;
  transition: background .15s;
}
.engine-item:hover { background: rgba(255,255,255,.08); }
.engine-item.active { color: var(--accent, #5ec95c); }
.engine-item.active .engine-item-name { font-weight: 600; }
.engine-item-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.engine-item-name { flex: 1; }
.engine-item-hotkey {
  font-size: 12px; color: rgba(255,255,255,.3); flex-shrink: 0;
  font-family: -apple-system, "SF Mono", monospace;
}

.engine-divider { height: 1px; background: rgba(255,255,255,.1); margin: 4px 12px; }
.engine-pref-btn {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border: none; background: none; color: rgba(255,255,255,.6);
  font-size: 13px; cursor: pointer; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.engine-pref-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }

.scroll-hint {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--overlay-dim); opacity: .85; z-index: 9; pointer-events: none;
  transition: opacity .3s;
}
.scroll-hint.hidden { opacity: 0; }
.scroll-hint-text { white-space: nowrap; }
/* 捷径坞开启时隐藏文字 */
.scroll-hint.dock-mode .scroll-hint-text { display: none; }

/* ★ 捷径坞图标（3×3 圆角方块网格，蓝紫渐变背景）★ */
.dock-icon {
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #5b8def 0%, #8b5cf6 100%);
  border-radius: 10px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  box-shadow: 0 2px 10px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.25);
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dock-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.dock-dot {
  border-radius: 2.5px;
  background: rgba(255,255,255,.88);
}

.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  will-change: opacity;
  transition: opacity .3s ease;
  overflow: hidden;            /* ★ 兜底：防止 .grid 撑高时滚动条溢出到图层层、绕过自身隐藏规则 */
}
.overlay.visible { opacity: 1; pointer-events: auto; }

/* ---------- 命令面板 ⌘K（毛玻璃居中弹层，GPU 合成，无 backdrop-filter 卡顿）---------- */
.cmd-palette {
  position: fixed; inset: 0; z-index: 60;            /* 高于 overlay(40) 与设置层，盖住一切 */
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  background: rgba(8,12,10,.45);
  opacity: 0; pointer-events: none;
  overscroll-behavior: contain;        /* 防止滚动链穿透到下层页面 */
  will-change: opacity;
  transition: opacity .18s ease;
}
.cmd-palette.hidden { display: none; }
.cmd-palette.open { opacity: 1; pointer-events: auto; }
.cmd-card {
  width: min(640px, calc(100vw - 32px));
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  transition: transform .18s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.cmd-palette.open .cmd-card { transform: translateY(0) scale(1); }
.cmd-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--panel-border); }
.cmd-prompt { font-size: 15px; color: var(--accent); opacity: .85; }
.cmd-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 16px; }
.cmd-input::placeholder { color: var(--text-dim); }
.cmd-close { border: none; background: transparent; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cmd-close:hover { color: var(--text); }
.cmd-results { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.cmd-group-label { font-size: 11px; color: var(--text-dim); padding: 8px 12px 4px; letter-spacing: .04em; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cmd-item .cmd-ico { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; }
.cmd-item .cmd-title { flex: 1; min-width: 0; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item .cmd-hint { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.cmd-item.active, .cmd-item:hover { background: rgba(94,201,92,.16); }
.cmd-item.active .cmd-title { color: var(--accent); }
.cmd-empty { padding: 18px 14px; color: var(--text-dim); font-size: 13px; text-align: center; }
.cmd-footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--panel-border); font-size: 12px; color: var(--text-dim); }
.cmd-footer b { color: var(--text); font-weight: 500; }
@media (max-width:560px){
  .cmd-palette { padding-top: 10vh; }
  .cmd-card { width: calc(100vw - 20px); }
  .cmd-item .cmd-hint { display: none; }   /* 移动端隐藏右侧提示，给标题更多空间 */
}

.overlay-inner {
  height: 100%; display: flex; flex-direction: column;
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  position: relative;               /* 为 .grid-fade 渐隐层提供定位上下文 */
}
.overlay-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  /* 右侧留白：给固定定位的 ☰ 开关让位，避免窄屏下与「收起 ↑」重叠（搜索页/捷径页 ☰ 统一 top:16px） */
  padding: 26px 58px 14px 4px; flex-shrink: 0;
}
.overlay-head-left { display: flex; align-items: center; gap: 8px; }
.overlay-head-right {
  display: flex; align-items: center; gap: 8px;
  position: relative;            /* 作为头像下拉菜单的定位父级 */
}
/* 捷径 hover 提示（显示在右上角按钮区） */
.tile-hover-hint {
  font-size: 12px; color: var(--overlay-dim);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.tile-hover-hint:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}
.overlay-btn {
  border: 1px solid var(--panel-border); background: var(--panel-bg);
  color: var(--text); padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 12px;
}
.overlay-btn:hover { background: var(--panel-bg); filter: brightness(1.12); }
#loginBtn.overlay-btn { font-weight: 600; }
/* 「登录」改为人头图标：未登录深灰/黑无填充，已登录青柠绿实底白人，一眼可辨 */
#loginBtn {
  background: transparent; border: 1px solid transparent;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3a3a3a;                 /* 未登录：深灰/黑，无填充色 */
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}
#loginBtn:hover { background: rgba(0,0,0,.07); transform: translateY(-1px); }
#loginBtn .avatar-ico { width: 20px; height: 20px; display: block; }
#loginBtn.is-member {            /* 已登录：青柠绿实底 + 白色人头 + 发光环 */
  background: #5ec95c; color: #fff;
  box-shadow: 0 0 0 3px rgba(94,201,92,.22);
}
#loginBtn.is-member:hover { background: #54bd52; }

/* 头像下拉菜单 */
#loginBtn { position: relative; }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  width: 200px; border-radius: 14px;
  background: var(--panel-bg, rgba(30,30,34,.95));
  border: 1px solid var(--panel-border, rgba(255,255,255,.1));
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  overflow: hidden; opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.user-dropdown:not(.hidden) { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ud-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 6px;
}
.ud-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--overlay-text, rgba(255,255,255,.7));
  padding: 7px; box-sizing: border-box;
}
.ud-info { display: flex; flex-direction: column; min-width: 0; }
.ud-name {
  font-size: 15px; font-weight: 700; color: var(--overlay-text, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-sub {
  font-size: 13px; color: var(--overlay-text, rgba(255,255,255,.55));
  margin-top: 2px; cursor: pointer;
}
.ud-sub:hover { color: var(--overlay-text, rgba(255,255,255,.85)); }
.ud-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--overlay-text, rgba(255,255,255,.75));
  text-align: left; transition: background .15s ease, color .15s ease;
}
.ud-item:hover { background: rgba(255,255,255,.07); color: var(--overlay-text, #fff); }
.crumb { font-size: 15px; color: var(--overlay-text); }
.crumb a { color: var(--overlay-text); opacity: .75; text-decoration: none; }
.crumb a:hover { color: var(--overlay-text); opacity: 1; text-decoration: underline; }
.crumb .sep { margin: 0 6px; opacity: .6; }
/* 分类内视图：分类名居中显示（青柠风） */
.cat-name-label {
  font-size: 18px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--overlay-text);
}
.overlay-close {
  border: 1px solid var(--panel-border); background: var(--panel-bg);
  color: var(--overlay-text); padding: 7px 16px; border-radius: 10px; cursor: pointer; font-size: 13px;
}
.overlay-close:hover { background: var(--panel-border); }

/* ★ 图层打开时：在静止的 #bg 上做模糊（scroll 不触发重绘，顺滑），
   放大 1.06 避免 blur 边缘漏出透明缝；brightness 微降保证卡片可读 */
/* 打开捷径页：清晰层淡出+推近、模糊层原地显露（仅 opacity 过渡，不重算 blur）
   关闭毛玻璃时：去模糊，仅暗化（零 GPU 开销，丝滑） */
body:not(.blur-bg) #bg-blur { filter: brightness(.45); }
body.overlay-open #bg { opacity: 0; }
/* ★ 进捷径页：清晰层+模糊层同步推近放大（像拉近镜头）
   放大倍率由 --zoom-scale 控制（物理像素越多自动降级，见 optimizeForHiDPI）；
   模糊层才是露出的可见层，必须一起缩放放大才看得见；
   切回搜索页（移除 overlay-open）时两层缩放一并复位。
   两层同步 scale，保证交叉淡入淡出期间对齐不抖 */
body.overlay-open #bg,
body.overlay-open #bg-blur { transform: scale(var(--zoom-scale, 1.1)); }
/* 捷径页打开时隐藏主页时钟+搜索，避免后台绘制 */
/* 捷径页：时钟+搜索不隐藏，改为缩小并平移到顶部正中，浮于捷径网格之上；网格下移让位 */
body.overlay-open:not(.settings-open) .center {
  transform: translate(-50%, calc(-50% - 33vh)) scale(0.7); /* 整体缩小为 70%（即缩小30%），与搜索页形成连续形变 */
  z-index: 41; /* 高于 .overlay(40)，露出顶部小条；设置打开时不显示(:not(.settings-open)) */
}
/* 捷径网格顶部让位（避免被浮起的 .center 小条压住首行） */
body.overlay-open .grid { padding-top: 148px; }

/* 移动端：顶部小条更紧凑、搜索框占满并留出左右按钮位 */
@media (max-width:560px){
  /* 上移量从 40vh 减到 22vh：避免整体 scale(0.7) 后被手机地址栏/状态栏遮挡时钟 */
  body.overlay-open:not(.settings-open) .center { transform: translate(-50%, calc(-50% - 24vh)) scale(0.7); } /* 时间/搜索框再往下一点 */
  body.overlay-open:not(.settings-open) #clock { font-size: 24px; } /* 顶部小钟视觉约 17px，兼顾可读与紧凑 */
  body.overlay-open:not(.settings-open) .search { max-width: calc((100vw - 90px) / 0.7); margin-top: 8px; } /* 补偿 scale(0.7)，右侧给「收起/菜单」按钮留位 */
  body.overlay-open .grid { padding-top: 110px; } /* 捷径内容再上移一点，贴近搜索框 */
}
/* 无障碍：用户开启「减少动态效果」时直接定位、不做过渡动画 */
@media (prefers-reduced-motion: reduce){
  .center { transition: none; }
  #clock { transition: none; }
}
body.overlay-open #main .scroll-hint { opacity: .2; pointer-events: none; }
/* 捷径页与搜索页的 ☰ 统一在 top:16px（移除原 overlay-open 下移 72px 的规则，避免两页位置不一致） */
/* ★ 设置层打开时：彻底冻结底层捷径网格滚动（移动端 touch 滑动穿透根因）
   注意：仅用 settings-open 控制，绝不用 overlay-open —— 否则正常浏览捷径时 .grid 也会被冻住滚不动 */
body.settings-open .grid { overflow: hidden; }
/* iOS 滚动锁：设置层打开时锁死整页，杜绝橡皮筋穿透到底层
   ★ 性能优化：改用 html:has() 仅做滚动裁剪，去掉 position:fixed/width 触发的整页重排(reflow)，
     这是「打开设置卡顿」的根因——整页重排会强制全屏 blur(14px) 重算 */
html:has(body.settings-open) { overflow: hidden; }
body.settings-open { overflow: hidden; }

/* 命令面板打开时同样锁死整页，杜绝滚轮/触摸穿透到下层搜索页与捷径页 */
html:has(body.cmd-open) { overflow: hidden; }
body.cmd-open { overflow: hidden; }
/* ★ 关键修复：body 永远 overflow:hidden，真正滚动的是 .grid（捷径网格）。
   v1.2.93 只锁了 html/body（等于没锁），这里补上 .grid 才能真正阻断下层滚动 —— 与 settings-open 同思路 */
body.cmd-open .grid { overflow: hidden; }

.grid {
  flex: 1 1 auto; min-height: 0;    /* ★ min-height:0 是 flex 滚动的关键：让网格在固定高度内滚动而非被内容撑高 */
  overflow-y: auto; padding: 8px 4px 40px;
  display: grid; grid-template-columns: repeat(auto-fill, 96px);
  gap: 20px; justify-content: center; align-content: start;
  contain: layout paint style;
  /* 隐藏滚动条（全浏览器兼容） */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE / 旧 Edge */
}
.grid::-webkit-scrollbar { display: none; width: 0; height: 0; }  /* Chrome / Safari / Edge */

/* overlay-inner 兜底：防止任何父容器意外出现滚动条 */
.overlay-inner { overflow: hidden; }
/* 但 grid 子元素需要恢复滚动（因为 overlay-inner 设了 overflow:hidden） */
.overlay-inner > .grid { overflow-y: auto; }

/* 网格底部渐隐提示（内容超出时出现，滚到底部自动消失） */
.grid-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px; pointer-events: none; z-index: 5;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.25));
  opacity: 0; transition: opacity .3s ease;
}
.grid-fade.visible { opacity: 1; }
body.light .grid-fade { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55)); }

.tile {
  position: relative; width: 96px; height: 96px; border-radius: 18px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--tile-bg); border: 1px solid var(--tile-border);
  transition: transform .12s ease, background .12s ease;
  user-select: none;
  contain: layout style;
}
.tile:hover { background: var(--tile-hover); }
.tile.dragging { opacity: .4; transform: scale(.94); }
.tile.drag-over { box-shadow: -3px 0 0 0 #7cc6ff; }
.tile.drop-into { background: rgba(124,198,255,.35); border-color: #7cc6ff; transform: scale(1.06); }

.tile-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--tile-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; overflow: hidden;
}
.tile-img { width: 100%; height: 100%; object-fit: cover; }
.tile-title {
  font-size: 12px; max-width: 88px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-cat .cat-icon { background: rgba(255,206,84,.3); }
.cat-count {
  position: absolute; top: 8px; right: 10px; font-size: 11px;
  background: rgba(0,0,0,.35); border-radius: 10px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.tile-add {
  background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.4); color: rgba(255,255,255,.8);
}
.tile-add:hover { background: rgba(255,255,255,.16); color: #fff; }
.tile-add .tile-icon { background: transparent; font-size: 28px; }

/* ★ 返回瓦片（分类内视图，青柠风 ← 按钮）★ */
.tile-back {
  background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.25);
  cursor: pointer;
}
.tile-back:hover { background: rgba(255,255,255,.18); }
.tile-back .back-icon {
  font-size: 24px; font-weight: 300; color: rgba(255,255,255,.7);
  background: transparent; border-radius: 12px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.tile-back .tile-title { font-size: 12px; color: rgba(255,255,255,.55); }

/* ★ 浅色模式下：+添加 / 返回 框原本白透明显看不清，改用深色虚线 ★ */
body.light .tile-add {
  background: rgba(0,0,0,.04);
  border: 1px dashed rgba(0,0,0,.35);
  color: rgba(0,0,0,.5);
}
body.light .tile-add:hover { background: rgba(0,0,0,.08); color: rgba(0,0,0,.75); }
body.light .tile-back {
  background: rgba(0,0,0,.04);
  border: 1px dashed rgba(0,0,0,.3);
}
body.light .tile-back .back-icon { color: rgba(0,0,0,.5); }
body.light .tile-back .tile-title { color: rgba(0,0,0,.5); }


.modal {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); z-index: 100;
}
#settingsPanel { background: rgba(0,0,0,.58); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dialog-close {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.08); color: #666;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dialog-close:hover { background: rgba(0,0,0,.16); }

.auth-card {
  position: relative; width: 340px; padding: 32px 28px;
  background: rgba(30,38,52,.94); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); color: #fff;
}
.auth-card .dialog-close { background: rgba(255,255,255,.14); color: #fff; }
.auth-card .dialog-close:hover { background: rgba(255,255,255,.28); }
.auth-card h1 { font-size: 22px; text-align: center; margin-bottom: 18px; font-weight: 600; }
.auth-tip { font-size: 12px; text-align: center; color: rgba(255,255,255,.78); margin: -10px 0 18px; line-height: 1.5; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs button { flex: 1; padding: 8px; border: none; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; }
.tabs button.active { background: rgba(255,255,255,.32); font-weight: 600; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card input { padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: #fff; font-size: 14px; outline: none; }
.auth-card input::placeholder { color: rgba(255,255,255,.65); }
.auth-card button[type="submit"] { padding: 11px; border: none; border-radius: 10px; cursor: pointer; background: #fff; color: #2b4a73; font-size: 15px; font-weight: 600; }
.auth-card button[type="submit"]:hover { background: #f0f0f0; }
.msg { margin-top: 10px; font-size: 13px; text-align: center; color: #ffd9d9; min-height: 16px; }

#userLabel { cursor: pointer; }
.account-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.account-info > div { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.account-info .label { color: rgba(255,255,255,.7); }
.account-info span:last-child { font-weight: 600; }
.section-title { font-size: 15px; font-weight: 600; margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.account-danger { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.account-danger #deleteAccountBtn { width: 100%; padding: 10px; border: 1px solid rgba(255,120,120,.6); border-radius: 10px; background: transparent; color: #ffb3b3; cursor: pointer; font-size: 14px; }
.account-danger #deleteAccountBtn:hover { background: rgba(255,80,80,.18); }
.danger-tip { font-size: 12px; color: rgba(255,179,179,.7); margin-top: 8px; line-height: 1.5; }

.add-card {
  position: relative; width: 400px; padding: 26px 28px 24px;
  background: #fbfcfe; border: 1px solid rgba(200,210,220,.6);
  border-radius: 16px; box-shadow: 0 14px 50px rgba(0,0,0,.25); color: #333;
}
.add-card.small { width: 320px; }
.add-card h2 { font-size: 18px; margin-bottom: 18px; font-weight: 600; color: #1a1a1a; }
.add-tabs { margin-bottom: 18px; }
.add-tabs button {
  flex: 1; padding: 8px 0; border: none; border-bottom: 2px solid #e2e6ea; border-radius: 0;
  background: transparent; color: #8a929b; font-size: 14px; cursor: pointer; transition: all .2s;
}
.add-tabs button.active { color: #222; border-bottom-color: var(--accent); font-weight: 600; }
.add-tabs .beta { font-size: 11px; background: rgba(76,175,80,.18); color: #388e3c; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }

.form-area { display: flex; flex-direction: column; gap: 6px; }
.form-area label { font-size: 13px; color: #5a626b; margin: 8px 0 3px; font-weight: 500; }
.hint-inline { color: #a5adb5; font-weight: 400; font-size: 12px; }
.form-area input[type="url"], .form-area input[type="text"] {
  padding: 10px 13px; border-radius: 10px; border: 1px solid #d7dbe0; background: #fff;
  color: #222; font-size: 14px; outline: none; width: 100%; transition: border-color .2s;
}
.form-area input:focus { border-color: #4CAF50; }
.form-area select {
  padding: 10px 13px; border-radius: 10px; border: 1px solid #d7dbe0; background: #fff;
  color: #333; font-size: 14px; outline: none; flex: 1; cursor: pointer;
}

.url-row { position: relative; display: flex; align-items: center; }
.url-row input { flex: 1; }
.fetch-spin { position: absolute; right: 12px; font-size: 12px; color: #4CAF50; }

.icon-picker { display: flex; align-items: center; gap: 10px; }
.icon-preview {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: #eef1f4;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: #888;
  border: 1px solid #e0e4e8;
}

/* 首次使用引导弹窗 */
.onboard-card { width: 430px; text-align: center; }
.onboard-desc { font-size: 13.5px; color: #5a626b; margin: -8px 0 18px; }
.onboard-options { display: flex; gap: 12px; justify-content: center; }
.onboard-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 8px; border: 1.5px solid #e2e6ea; border-radius: 14px; background: #fff;
  cursor: pointer; transition: all .2s cubic-bezier(.16,1,.3,1);
}
.onboard-opt:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.onboard-ico { font-size: 22px; }
.onboard-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.onboard-sub { font-size: 11.5px; color: #9aa2ab; line-height: 1.3; }
.onboard-tip { font-size: 12px; color: #a5adb5; margin-top: 16px; }
.icon-picker input { flex: 1; }
.icon-input-wrap { flex: 1; display: flex; gap: 8px; align-items: center; }
.icon-input-wrap input { flex: 1; }

.cat-row { display: flex; gap: 8px; align-items: center; }
.mini-btn {
  padding: 9px 12px; border: 1px solid #d7dbe0; border-radius: 10px; background: #fff; color: var(--accent);
  font-size: 13px; cursor: pointer; white-space: nowrap; font-weight: 500;
}
.mini-btn:hover { background: #f2fbf3; border-color: #4CAF50; }

.btn-add {
  padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; margin-top: 14px; transition: background .2s;
}
.btn-add:hover { filter: brightness(.93); }
.coming-soon { text-align: center; color: #999; font-size: 14px; padding: 30px 0; }

.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .btn-add { margin-top: 0; flex: 1; }
.btn-del {
  flex: 1; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: #e74c3c; color: #fff; font-size: 15px; font-weight: 600; transition: background .2s;
}
.btn-del:hover { background: #c0392b; }
.btn-cancel {
  flex: 1; padding: 12px; border: 1px solid #d7dbe0; border-radius: 10px; cursor: pointer;
  background: #fff; color: #5a626b; font-size: 15px; font-weight: 500; transition: background .2s;
}
.btn-cancel:hover { background: #f2f4f6; }

.confirm-card { width: 340px; }
.confirm-text { font-size: 14px; color: #444; line-height: 1.6; margin: 4px 0 2px; }

.hidden { display: none !important; }

.gear-btn {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.gear-btn:hover { background: rgba(255,255,255,.28); transform: rotate(60deg); }

/* ★ 快捷设置下拉（搜索页 🎨 图标） */
.quick-settings-btn { position: relative; }
.quick-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 236px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 10px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 100; animation: quickDropIn .18s ease-out;
}
@keyframes quickDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; color: var(--text);
  padding: 10px 16px; font-size: 14px; cursor: pointer;
  text-align: left; transition: background .15s;
}
.quick-item:hover { background: rgba(255,255,255,.08); }
.quick-theme-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.07);
}
.quick-theme-label {
  font-size: 13px; color: var(--text-dim); white-space: nowrap;
}
.quick-theme-seg {
  display: flex; background: rgba(128,128,128,.18); border-radius: 9px; padding: 3px; gap: 2px;
}
.qtheme-btn {
  border: none; background: none; color: var(--text-dim);
  font-size: 12px; padding: 5px 9px; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap;
}
.qtheme-btn:hover { color: var(--text); }
.qtheme-btn.active { background: var(--accent); color: #fff; font-weight: 600; }

.settings-card {
  position: relative; width: 400px; max-height: 76vh;
  background: rgba(18,22,30,.96); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; box-shadow: 0 18px 46px rgba(0,0,0,.45); color: #fff;
  overflow: hidden; animation: settingsIn .2s ease-out;
  contain: layout style paint;
  overscroll-behavior: contain;
  will-change: transform, opacity;  /* ★ 性能：提升为独立 GPU 图层，交互/滚动不再重绘背景模糊 */
  backface-visibility: hidden;
}
@keyframes settingsIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-card .dialog-close {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.7);
  z-index: 10;  /* ★ 修复：二级菜单 .settings-sub 因 will-change 创建层叠上下文会盖住 X，提升 X 层级确保可点 */
}
.settings-card .dialog-close:hover { background: rgba(255,255,255,.24); color: #fff; }

/* 捐助面板：加宽设置卡片，让收款码看得更清楚（仅捐赠子页生效，不影响其它设置） */
.settings-card.donate-open { width: 560px; max-width: calc(100vw - 24px); }

/* 菜单视图自身也可滚动（防止移动端菜单项超出 card 时被裁切），并隔离滚动链不穿透 */
.settings-view { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.settings-card h2 { font-size: 20px; text-align: center; margin-bottom: 8px; font-weight: 600; }
.settings-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; color: rgba(255,255,255,.95); }
.settings-card h4 { font-size: 14px; margin: 12px 0 6px; color: rgba(255,255,255,.7); }

.settings-nav { display: flex; flex-direction: column; gap: 0; }
.set-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  border: none; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.88); font-size: 15px; text-align: left;
  border-radius: 10px; transition: background .15s, transform .1s;
}
.set-item:hover { background: rgba(255,255,255,.1); }
.set-item:active { background: rgba(255,255,255,.15); }
.set-icon { font-size: 19px; width: 26px; text-align: center; }
.set-text { flex: 1; }
.set-divider { height: 1px; background: rgba(255,255,255,.1); margin: 6px 16px; }

.settings-sub {
  animation: subIn .22s cubic-bezier(.22,.61,.36,1);
  padding: 0 24px 20px;
  will-change: transform, opacity;  /* ★ 性能：子面板切换动画走 GPU 合成 */
}
@keyframes subIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sub-back {
  border: none; background: none; color: rgba(255,255,255,.65); font-size: 14px;
  cursor: pointer; padding: 8px 0; margin-bottom: 4px; transition: color .15s;
}
.sub-back:hover { color: #fff; }

.sub-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 10px 12px 4px;
  max-height: 58vh; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sub-body::-webkit-scrollbar { width: 5px; }
.sub-body::-webkit-scrollbar-track { background: transparent; }
.sub-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.sub-hint { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; }
/* 二级菜单正文段落：默认白字（深主题），浅色主题由浅色块覆盖为深字 */
.panel-text { color: rgba(255,255,255,.85); line-height: 1.7; }

/* ===== 捐赠面板（捐助我们）===== */
.donate-intro { text-align: center; margin-bottom: 4px; }
.donate-qr-grid {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  margin-top: 8px;
}
.donate-qr-card {
  flex: 1 1 200px; max-width: 240px; min-width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.donate-qr-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.donate-qr-badge {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 12px; border-radius: 999px;
  color: #fff; background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.donate-qr-img {
  width: 190px; height: 190px; border-radius: 14px; overflow: hidden; cursor: zoom-in;
  background: #fff; padding: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  display: flex; align-items: center; justify-content: center;
}
.donate-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.donate-qr-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); }
.donate-empty { text-align: center; opacity: .8; }

/* 浅色主题：更实的卡片底 + 深色文字 */
body.light .donate-qr-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
body.light .donate-qr-label { color: #1d2733; }
body.light .donate-qr-badge { color: #14331a; }

/* ===== 收款码放大灯箱（点击二维码放大，方便扫码）===== */
.donate-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.86);
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  will-change: opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.donate-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.donate-lightbox-inner {
  transform: scale(.94);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.donate-lightbox.open .donate-lightbox-inner { transform: scale(1); }
.donate-lightbox-inner {
  position: relative; max-width: min(92vw, 460px); text-align: center;
  padding: 22px 22px 18px; border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.donate-lightbox-inner img {
  width: min(78vw, 380px); height: min(78vw, 380px);
  object-fit: contain; border-radius: 14px; background: #fff;
  display: block; margin: 0 auto;
}
.donate-lightbox-label { margin-top: 14px; font-size: 17px; font-weight: 700; color: #1d2733; }
.donate-lightbox-hint { margin-top: 8px; font-size: 12.5px; color: #5a6675; line-height: 1.5; }
.donate-lightbox-close {
  position: absolute; top: -16px; right: -16px;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #fff; color: #1d2733; font-size: 22px; line-height: 1;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.donate-lightbox-close:hover { transform: scale(1.08); background: #f0f0f0; }

/* ===== 移动端：捐赠二维码单列放大，方便扫码 ===== */
@media (max-width: 560px) {
  .settings-card.donate-open { width: calc(100vw - 16px); }
  .donate-qr-grid { flex-direction: column; align-items: stretch; gap: 14px; }
  .donate-qr-card { flex: 1 1 auto; max-width: none; width: 100%; padding: 20px 14px 18px; }
  .donate-qr-img { width: min(72vw, 260px); height: min(72vw, 260px); }
  .donate-qr-label { font-size: 15px; }
  .donate-lightbox-inner { padding: 18px 16px 14px; }
  .donate-lightbox-inner img { width: min(82vw, 340px); height: min(82vw, 340px); }
  .donate-lightbox-close { top: -14px; right: -8px; }
}

.toggle-row, .radio-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px; cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 44px; height: 24px;
  border-radius: 12px; background: rgba(255,255,255,.2); position: relative;
  transition: background .2s; cursor: pointer; outline: none;
}
.toggle-row input[type="checkbox"]:checked { background: #4CAF50; }
.toggle-row input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(20px); }

.radio-row { gap: 10px; padding: 8px 0; border-bottom-color: rgba(255,255,255,.06); }
.radio-row input[type="radio"] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: transparent;
  transition: all .2s; cursor: pointer; outline: none; flex-shrink: 0;
}
.radio-row input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px rgba(40,44,52,.92); }

.wp-row label { display: block; }
.wp-row input[type="url"], .sub-body input[type="password"],
.sub-body input[type="text"] {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
  color: #fff; font-size: 14px; outline: none; transition: border-color .2s;
}
.wp-row input:focus, .sub-body input:focus { border-color: #7cc6ff; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

.hint-box { text-align: center; padding: 20px 0; }
.hint-box p { color: rgba(255,255,255,.6); margin-bottom: 14px; line-height: 1.5; }
.user-profile { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.user-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); display: flex; align-items: center;
  justify-content: center; font-size: 24px; flex-shrink: 0;
}
.user-detail { display: flex; flex-direction: column; gap: 2px; }
.user-detail strong { font-size: 15px; }
.user-detail small { color: rgba(255,255,255,.55); font-size: 12px; }
.user-meta { font-size: 12px; color: rgba(255,255,255,.5); padding: 4px 0 8px; }
#setPwdForm { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.user-actions { display: flex; gap: 10px; margin-top: 6px; }

.set-section-title {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 16px 0 8px 2px;
}
.set-section-title:first-child { padding-top: 4px; }
.set-section-desc {
  font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.5;
  padding: 0 0 6px 2px;
}

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  width: 100%; gap: 12px;
}
.set-row-label { 
  font-size: 14px; color: rgba(255,255,255,.88); flex: 1; 
  min-width: 80px; overflow: hidden; line-height: 1.4;
}
.set-row-desc { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.4; margin-top: 2px; }

.set-switch {
  -webkit-appearance: none; appearance: none; width: 46px; height: 26px;
  border-radius: 13px; background: rgba(255,255,255,.18); position: relative;
  transition: background .2s; cursor: pointer; outline: none; flex-shrink: 0;
}
.set-switch:checked { background: var(--accent); }
.set-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.set-switch:checked::after { transform: translateX(20px); }

.set-select {
  padding: 7px 28px 7px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  font-size: 13px; outline: none; cursor: pointer; appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff66'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 10px 6px; flex-shrink: 0; min-width: 100px;
  transition: border-color .2s;
}
.set-select:focus { border-color: var(--accent); }
.set-select option { background: #222; color: #fff; }

.color-picker { display: flex; gap: 9px; flex-shrink: 0; }
.color-dot {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, border-color .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { border-color: #fff; transform: scale(1.15); }
.c-green  { background: #5ec95c; }
.c-teal   { background: #2dbfb8; }
.c-purple { background: #a78bfa; }
.c-red    { background: #f87171; }
.c-blue   { background: #60a5fa; }

.set-btn-reset {
  padding: 7px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  font-size: 13px; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.set-btn-reset:hover { background: rgba(255,255,255,.16); color: #fff; }

/* 轻量提示条（强制同步 / 操作反馈） */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 9999; max-width: 80vw; padding: 11px 20px; border-radius: 12px;
  background: rgba(33, 41, 52, .92); color: #fff; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12); pointer-events: none;
  animation: toastIn .22s cubic-bezier(.16,1,.3,1);
}
.toast.toast-error { background: rgba(200, 50, 50, .94); border-color: rgba(255,255,255,.18); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.settings-sub .sub-body { max-height: 58vh; }

/* ==================== 浅色主题：设置菜单整体跟随变浅 ==================== */
body.light .settings-card {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.1);
  color: #1d2733;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
body.light .settings-card .dialog-close { background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); }
body.light .settings-card .dialog-close:hover { background: rgba(0,0,0,.11); color: #1d2733; }
body.light .settings-card h3 { color: #1d2733; }
body.light .settings-card h4 { color: rgba(0,0,0,.6); }
body.light .set-item { color: rgba(0,0,0,.82); }
body.light .set-item:hover { background: rgba(0,0,0,.06); }
body.light .set-item:active { background: rgba(0,0,0,.1); }
body.light .set-divider { background: rgba(0,0,0,.08); }
body.light .sub-back { color: rgba(0,0,0,.5); }
body.light .sub-back:hover { color: #1d2733; }
body.light .sub-body { scrollbar-color: rgba(0,0,0,.2) transparent; }

/* 浅色主题：登录/注册框 + 账号面板（复用 .auth-card） */
body.light .auth-card {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.12);
  color: #1d2733;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
body.light .auth-card .dialog-close { background: rgba(0,0,0,.06); color: rgba(0,0,0,.45); }
body.light .auth-card .dialog-close:hover { background: rgba(0,0,0,.12); color: #1d2733; }
body.light .auth-card h1 { color: #1d2733; }
body.light .auth-tip { color: rgba(0,0,0,.5); }
body.light .tabs button { background: rgba(0,0,0,.06); color: rgba(0,0,0,.6); }
body.light .tabs button.active { background: rgba(0,0,0,.14); color: #1d2733; }
body.light .auth-card input { border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.04); color: #1d2733; }
body.light .auth-card input::placeholder { color: rgba(0,0,0,.4); }
body.light .auth-card button[type="submit"] { background: #5ec95c; color: #fff; }
body.light .auth-card button[type="submit"]:hover { background: #54bd52; }
body.light .msg { color: #d33; }
body.light .account-info .label { color: rgba(0,0,0,.5); }
body.light .account-info div { color: #1d2733; }
body.light .section-title { color: rgba(0,0,0,.7); }

/* 浅色主题：头像下拉菜单 */
body.light .user-dropdown {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 12px 36px rgba(0,0,0,.15);
}
body.light .ud-avatar { background: rgba(0,0,0,.06); color: rgba(0,0,0,.45); }
body.light .ud-name { color: #1d2733; }
body.light .ud-sub { color: rgba(0,0,0,.5); }
body.light .ud-sub:hover { color: rgba(0,0,0,.75); }
body.light .ud-item { color: rgba(0,0,0,.65); }
body.light .ud-item:hover { background: rgba(0,0,0,.05); color: #1d2733; }
body.light .sub-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
body.light .sub-hint { color: rgba(0,0,0,.5); }
body.light .toggle-row, body.light .radio-row { border-bottom-color: rgba(0,0,0,.08); }
body.light .toggle-row input[type="checkbox"] { background: rgba(0,0,0,.18); }
body.light .radio-row input[type="radio"] { border-color: rgba(0,0,0,.3); }
body.light .wp-row input[type="url"],
body.light .sub-body input[type="password"],
body.light .sub-body input[type="text"] {
  border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.04); color: #1d2733;
}
body.light .hint-box p { color: rgba(0,0,0,.55); }
body.light .user-avatar { background: rgba(0,0,0,.06); }
body.light .user-detail small { color: rgba(0,0,0,.5); }
body.light .user-meta { color: rgba(0,0,0,.5); }
body.light .set-section-title { color: rgba(0,0,0,.45); }
body.light .set-section-desc { color: rgba(0,0,0,.45); }
body.light .set-row { border-bottom-color: rgba(0,0,0,.07); }
body.light .set-row-label { color: rgba(0,0,0,.82); }
body.light .set-row-desc { color: rgba(0,0,0,.45); }
body.light .set-switch { background: rgba(0,0,0,.16); }
/* 浅色模式下开关「开」状态用更深的绿，确保在白底清晰醒目（开=绿，关=灰） */
body.light .set-switch:checked { background: #2faa2c; }
body.light .set-select {
  border-color: rgba(0,0,0,.14); background-color: rgba(0,0,0,.04); color: #1d2733;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300000066'/%3E%3C/svg%3E");
}
body.light .set-select option { background: #f2f5f3; color: #1d2733; }
body.light .set-btn-reset { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.05); color: rgba(0,0,0,.7); }
body.light .set-btn-reset:hover { background: rgba(0,0,0,.1); color: #1d2733; }
body.light .wp-tabs { border-bottom-color: rgba(0,0,0,.1); }
body.light .wp-tab { color: rgba(0,0,0,.5); }
body.light .wp-tab:hover { color: rgba(0,0,0,.8); }
body.light .wp-tab.active { color: #1d2733; }
body.light .wp-thumb { background: rgba(0,0,0,.04); }
body.light .wp-thumb:hover { border-color: rgba(0,0,0,.25); }
body.light .wp-thumb-none { background: linear-gradient(135deg, #d9e4dd 0%, #cdd9e4 40%, #d2def0 70%, #e0d6ef 100%); color: rgba(0,0,0,.5); }
body.light .bing-card { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
body.light .bing-img { background: rgba(0,0,0,.05); }
body.light .bing-title { color: #1d2733; }
body.light .bing-desc { color: rgba(0,0,0,.55); }
body.light .bing-meta { color: rgba(0,0,0,.5); }
body.light .bing-download { background: rgba(0,0,0,.06); color: rgba(0,0,0,.7); }
body.light .bing-download:hover { background: rgba(0,0,0,.12); color: #1d2733; }
body.light .wp-custom-hint { color: rgba(0,0,0,.45); }
body.light .panel-text { color: #1d2733; }
body.light .step-text h4 { color: #1d2733; }
body.light .step-text p { color: rgba(0,0,0,.6); }
body.light .wp-action-btn { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.05); color: rgba(0,0,0,.7); }
body.light .wp-action-btn:hover { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.25); }
body.light .wp-loading { color: rgba(0,0,0,.4); }
body.light .color-dot.active { border-color: #1d2733; }
/* 介绍与使用说明面板 */
body.light .guide-tagline { color: rgba(0,0,0,.55); }
body.light .feature-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
body.light .feature-card:hover { background: rgba(94,201,92,.1); box-shadow: 0 10px 26px rgba(94,201,92,.16); }
body.light .feature-text b { color: rgba(0,0,0,.85); }
body.light .feature-text span { color: rgba(0,0,0,.5); }
body.light .step-figure { background: radial-gradient(circle at 30% 25%, rgba(94,201,92,.1), rgba(0,0,0,.02)); border-color: rgba(0,0,0,.08); }
body.light .step-figure svg { filter: brightness(0.45); }
body.light .step-text { color: rgba(0,0,0,.7); }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .01ms !important; animation-delay: 0ms !important;
  transition-duration: .01ms !important; transition-delay: 0ms !important;
}

/* ==================== 壁纸面板增强样式 ==================== */

.wp-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); overflow-x: hidden; }
.wp-tab {
  padding: 8px 18px; border: none; background: none; color: rgba(255,255,255,.5);
  font-size: 14px; cursor: pointer; position: relative; transition: color .2s;
  white-space: nowrap; flex-shrink: 0;
}
.wp-tab.active { color: #fff; }
.wp-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px;
  height: 2px; background: var(--accent); border-radius: 1px;
}
.wp-tab:hover { color: rgba(255,255,255,.85); }

.wp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wp-thumb {
  aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color .2s;
  position: relative; background: rgba(255,255,255,.06);
}
.wp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.wp-thumb:hover { border-color: rgba(255,255,255,.3); }
.wp-thumb:hover img { transform: scale(1.08); }
.wp-thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.wp-random-hint { font-size: 12px; color: var(--text-dim); margin: 10px 2px 0; line-height: 1.5; }
.wp-thumb.selected::after {
  content: '\2713'; position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
/* 锁定默认壁纸格子（新用户/新访客的固定默认）*/
.wp-thumb-default {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.wp-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 11px; line-height: 1;
  padding: 3px 7px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
/* 无壁纸（默认渐变）特殊格子 */
.wp-thumb-none {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%);
  font-size: 13px; color: rgba(255,255,255,.7); font-weight: 500;
  letter-spacing: 0.5px;
}

.bing-card {
  display: flex; gap: 14px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  margin-bottom: 16px;
}
.bing-img {
  width: 140px; height: 90px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; background: rgba(255,255,255,.05);
}
.bing-img img { width: 100%; height: 100%; object-fit: cover; }
.bing-info { flex: 1; min-width: 0; }
.bing-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.bing-desc { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; margin-bottom: 8px; }
.bing-meta {  display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.5); flex-wrap: wrap;
}
.bing-like { display: flex; align-items: center; gap: 4px; color: #f87171; cursor: pointer; }
.bing-download { padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 12px; cursor: pointer; border: none; transition: background .2s; text-decoration: none; }
.bing-download:hover { background: rgba(255,255,255,.18); color: #fff; }

.wp-custom-area { margin-top: 12px; }
.wp-custom-hint {
  font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 10px;
  line-height: 1.6;
}
.wp-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.wp-action-btn {
  padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s;
}
.wp-action-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

/* 壁纸加载状态 */
.wp-loading {
  text-align: center; padding: 30px 0; font-size: 13px;
  color: rgba(255,255,255,.4); 
}
.wp-error {
  text-align: center; padding: 20px 0; font-size: 13px;
  color: rgba(248,113,113,.7); 
}

/* 一言增强 */
#oneWord {
  transition: opacity .4s ease;
}

/* 默认捷径编辑模式横幅（?default=1） */
#defaultBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(94,201,92,.96), rgba(32,201,151,.96));
  color: #06210a; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 14px rgba(0,0,0,.28);
}
#defaultBar b { font-weight: 800; }
#defaultBar .mini-btn {
  margin-left: auto; background: #06210a; color: #fff; border: none;
  padding: 7px 14px; border-radius: 10px; font-size: 13px; cursor: pointer;
}
#defaultBar .mini-btn:hover { background: #0c3a14; }
body.default-mode { padding-top: 42px; }

/* ==================== 首页小组件（便签多张可拖动 / 待办圆圈勾选消失） ==================== */
#widgetsLayer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
/* 进入网站捷径页时整体隐藏（只在家页/搜索视图出现） */
body.overlay-open #widgetsLayer { display: none; }
#noteLayer { position: absolute; inset: 0; pointer-events: none; }

/* 便签卡 / 待办卡 通用底卡 */
.note-card, .todo-widget {
  position: fixed; width: 240px; max-width: calc(100vw - 24px);
  background: rgba(28,36,50,.55); border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; color: #fff; pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
}
.todo-widget { left: 20px; bottom: 20px; }
.widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.widget-head:active { cursor: grabbing; }
.widget-title { font-weight: 600; font-size: 13px; opacity: .95; }
.widget-close {
  border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.widget-close:hover { background: rgba(248,113,113,.75); }

/* 便签卡头部（拖动把手）+ 新建/删除按钮 */
.note-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.note-head:active { cursor: grabbing; }
.note-actions { display: flex; gap: 6px; }
.note-mini-btn {
  border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.note-mini-btn:hover { background: rgba(255,255,255,.28); }
.note-mini-btn.note-del:hover { background: rgba(248,113,113,.75); }

/* 输入区 */
.widget-input, .todo-input {
  width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
  background: rgba(0,0,0,.24); color: #fff; font-size: 13px; padding: 8px 10px;
  resize: none; font-family: inherit;
}
.widget-input:focus, .todo-input:focus { outline: none; border-color: var(--accent); }
.note-input { min-height: 80px; }

/* 待办列表 + 圆圈 */
.todo-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 200px; overflow-y: auto; }
.todo-item { display: flex; align-items: center; gap: 9px; padding: 5px 2px; transition: opacity .24s ease, transform .24s ease; }
.todo-item.done { opacity: 0; transform: translateX(12px); }
.todo-circle {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); background: transparent; cursor: pointer;
  padding: 0; position: relative; transition: background .15s, border-color .15s;
}
.todo-circle:hover { border-color: var(--accent); }
.todo-item.done .todo-circle { background: var(--accent); border-color: var(--accent); }
.todo-item.done .todo-circle::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.todo-text { flex: 1; min-width: 0; word-break: break-word; }
.todo-add { display: flex; gap: 6px; }
.todo-add-btn {
  border: none; background: var(--accent); color: #fff; border-radius: 9px;
  width: 32px; flex-shrink: 0; font-size: 18px; cursor: pointer; line-height: 1;
}

/* 浅色主题自适应 */
body.light .note-card, body.light .todo-widget {
  background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.1); color: #1d2733;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
body.light .widget-input, body.light .todo-input { background: #fff; color: #1d2733; border-color: rgba(0,0,0,.12); }
/* 浅色模式：待办/便签关闭(×)与新建(＋)按钮——深图标 + 清晰圆底，避免白字浮在白卡上看不见 */
body.light .widget-close { background: rgba(0,0,0,.08); color: #1d2733; }
body.light .widget-close:hover { background: rgba(248,113,113,.85); color: #fff; }
body.light .note-mini-btn { background: rgba(0,0,0,.08); color: #1d2733; }
body.light .note-mini-btn:hover { background: rgba(0,0,0,.14); }
body.light .note-mini-btn.note-del:hover { background: rgba(248,113,113,.85); color: #fff; }
body.light .todo-circle { border-color: rgba(0,0,0,.35); }
/* 减弱动态 */
body.reduce-motion .note-card, body.reduce-motion .todo-widget, body.reduce-motion .todo-item { transition: none !important; }

/* ==================== 移动端响应式 ==================== */
@media (max-width: 480px) {
  .settings-card {
    width: calc(100vw - 20px); max-height: 80vh;
    border-radius: 14px;
  }
  .settings-card h2 { font-size: 18px; }
  .settings-card h3 { font-size: 16px; margin-bottom: 10px; }
  .settings-sub { padding: 0 16px 16px; }

  /* 设置行 */
  .set-row {
    flex-wrap: wrap; gap: 6px; padding: 10px 0;
    align-items: flex-start;
  }
  .set-row-label {
    font-size: 13px; flex: 1 1 100%; width: 100%;
    line-height: 1.5;
  }
  .set-row-desc {
    display: block; margin-top: 3px; line-height: 1.4;
    font-size: 12px; color: rgba(255,255,255,.4);
  }
  .set-switch {
    flex-shrink: 0; align-self: center;
  }
  .set-select {
    flex-shrink: 0; min-width: auto; padding: 6px 24px 6px 10px;
    font-size: 12px;
  }

  /* 颜色选择器 */
  .color-picker { gap: 6px; }
  .color-dot { width: 22px; height: 22px; }

  /* 导航项 */
  .set-item { padding: 11px 16px; font-size: 14px; gap: 12px; }
  .set-icon { font-size: 17px; width: 24px; }

  /* 分区标题 */
  .set-section-title {
    font-size: 12px; letter-spacing: 1px;
    padding: 12px 0 6px 0;
  }

  /* 子面板滚动 + 防竖排 */
  .sub-body { max-height: 55vh; display: flex; flex-direction: column; }

  /* 搜索栏 */
  .search { max-width: calc(100vw - 40px); margin: 18px auto 0; }
  .search.input-wide { max-width: calc(100vw - 30px); }
  .search input { font-size: 14px; padding: 11px 16px 11px 42px; border-radius: 22px; }
  .engine-btn { left: 8px; width: 28px; height: 28px; }
  .engine-icon { font-size: 15px; }

  /* 引擎下拉 — 移动端由 JS 计算 fixed 定位（CSS 只负责尺寸和外观） */
  .engine-dropdown {
    min-width: 200px; max-width: calc(100vw - 40px);
    z-index: 200;
  }

  /* 时钟 */
  #clock { font-size: clamp(44px, 14vw, 90px); }

  /* 重置按钮 */
  .set-btn-reset { padding: 6px 14px; font-size: 12px; }

  /* 壁纸网格 */
  .wp-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bing-img { width: 100px; height: 65px; }

  /* 默认模式横幅 */
  #defaultBar { padding: 8px 14px; font-size: 13px; }
  body.default-mode { padding-top: 38px; }

  /* 首页小组件：移动端折叠为底部抽屉，禁用自由拖动（避免遮挡搜索框 + 拖动误滑页面） */
  #widgetsLayer { z-index: 45; }
  /* 便签仅桌面端有效，移动端完全隐藏（不渲染、不占位） */
  #noteLayer { display: none !important; }
  /* 顶栏便签图标同步隐藏：移动端便签功能不可用，留着图标点了也无效反而误导 */
  .tb-btn[data-action="note"] { display: none !important; }
  /* 待办卡：贴底，限高内部滚动，在小组件按钮上方留出空间 */
  .todo-widget {
    left: 12px !important; right: 12px !important; top: auto !important; bottom: 68px !important;
    width: auto !important; max-width: none; max-height: 24vh; overflow-y: auto;
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  /* 拖动把手禁用触摸滚动，防止拖动/触摸时连带滑动底层页面 */
  .note-head, .widget-head { cursor: default; touch-action: none; }
  body.widgets-open .todo-widget { opacity: 1; transform: translateY(0); pointer-events: auto; }
  /* 抽屉打开时上移搜索框，避开待办卡遮挡（仅待办，无便签） */
  .center { transition: transform .25s ease; }
  body.widgets-open .center { transform: translate(-50%, calc(-50% - 24vh)); }
}

@media (max-width: 360px) {
  .settings-card { width: calc(100vw - 12px); border-radius: 12px; }
  .settings-sub { padding: 0 12px 12px; }
  .set-item { padding: 10px 12px; }
  .set-row-label { font-size: 12.5px; }
  .color-dot { width: 20px; height: 20px; }
}

/* ===== 介绍与使用说明 (guide) ===== */
.guide-body { gap: 4px; }
.guide-hero { text-align: center; padding: 8px 6px 14px; }
.guide-logo { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(94,201,92,.4)); }
.guide-title {
  font-size: 23px; font-weight: 700; margin: 6px 0 6px;
  background: linear-gradient(90deg,#8fe98f,#2dbfb8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide-tagline { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.6); max-width: 320px; margin: 0 auto; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 6px; }
.feature-card {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; transition: transform .18s ease, border-color .18s, box-shadow .18s, background .18s;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(94,201,92,.55);
  background: rgba(94,201,92,.09);
  box-shadow: 0 10px 26px rgba(94,201,92,.2);
}
.feature-icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.feature-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-text b { font-size: 13px; color: rgba(255,255,255,.92); font-weight: 600; }
.feature-text span { font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.5); }

.guide-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.step-row { display: flex; gap: 14px; align-items: center; }
.step-row:nth-child(even) { flex-direction: row-reverse; }
.step-figure {
  flex-shrink: 0; width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(94,201,92,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
}
.step-figure svg { width: 74px; height: 74px; }
.step-text { flex: 1; min-width: 0; }
.step-row:nth-child(even) .step-text { text-align: right; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-bottom: 5px;
  background: linear-gradient(135deg,#5ec95c,#2dbfb8); color: #07120c;
  font-size: 12px; font-weight: 700;
}
.step-text h4 { font-size: 14.5px; color: rgba(255,255,255,.95); margin: 0 0 3px; }
.step-text p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; }
.step-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.1); color: #9be8a0;
}

@media (max-width: 480px) {
  .feature-grid { grid-template-columns: 1fr; }
  .step-row, .step-row:nth-child(even) { flex-direction: row; }
  .step-row:nth-child(even) .step-text { text-align: left; }
  .step-figure { width: 76px; height: 76px; }
  .step-figure svg { width: 62px; height: 62px; }
}

/* ===== 导入浏览器书签 ===== */
.import-tip { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin-bottom: 12px; }
body.light .import-tip { color: rgba(0,0,0,.55); }
.bm-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.bm-status { font-size: 13px; color: var(--accent); margin: 8px 0; }
.bm-list {
  max-height: 280px; overflow-y: auto; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 4px; margin: 8px 0; background: rgba(0,0,0,.12);
}
body.light .bm-list { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.03); }
.bm-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; transition: background .15s ease;
}
.bm-row:hover { background: rgba(255,255,255,.06); }
body.light .bm-row:hover { background: rgba(0,0,0,.04); }
.bm-row input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.bm-row .bm-title { flex: 1; min-width: 0; font-size: 13px; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.light .bm-row .bm-title { color: rgba(0,0,0,.85); }
.bm-row .bm-url { flex-shrink: 0; max-width: 42%; font-size: 11px; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
body.light .bm-row .bm-url { color: rgba(0,0,0,.45); }
.bm-more { font-size: 12px; color: rgba(255,255,255,.5); text-align: center; padding: 6px; }
body.light .bm-more { color: rgba(0,0,0,.5); }
.bm-import-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.bm-selall { font-size: 13px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; cursor: pointer; }
body.light .bm-selall { color: rgba(0,0,0,.7); }
.bm-import-bar select { flex: 1; min-width: 120px; }
/* 导入方式切换栏 */
.bm-modebar { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; flex-wrap: wrap; }
.bm-mode-label { font-size: 13px; color: rgba(255,255,255,.7); }
body.light .bm-mode-label { color: rgba(0,0,0,.6); }
.bm-mode-opt { font-size: 13px; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 5px; cursor: pointer; }
body.light .bm-mode-opt { color: rgba(0,0,0,.8); }
.bm-mode-opt input { accent-color: var(--accent); width: 15px; height: 15px; }
/* 文件夹树形预览 */
.bm-tree { padding: 4px; }
.bm-folder { margin-bottom: 4px; }
.bm-folder-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.06); cursor: pointer; }
body.light .bm-folder-head { background: rgba(0,0,0,.04); }
.bm-caret { width: 14px; text-align: center; color: rgba(255,255,255,.6); font-size: 12px; user-select: none; flex-shrink: 0; }
body.light .bm-caret { color: rgba(0,0,0,.5); }
.bm-folder-cb { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.bm-folder-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.light .bm-folder-title { color: rgba(0,0,0,.85); }
.bm-folder-count { font-size: 11px; color: rgba(255,255,255,.45); flex-shrink: 0; }
body.light .bm-folder-count { color: rgba(0,0,0,.45); }
.bm-folder-body { margin: 2px 0 2px 22px; }
.bm-folder.collapsed .bm-folder-body { display: none; }

/* ===== 文件传输面板（同网 P2P + 跨网微信） ===== */
.ft-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; }
.ft-modal.hidden { display: none !important; }
.ft-backdrop { position: absolute; inset: 0; background: rgba(8,12,18,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 120; }
.ft-panel {
  position: relative; z-index: 121; width: min(520px, 92vw); max-height: 86vh; overflow: auto;
  background: rgba(20,28,40,.82); color: #eaf0f7; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  padding: 18px;
}
body.light .ft-panel { background: rgba(255,255,255,.92); color: #1d2733; border-color: rgba(0,0,0,.08); }
.ft-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ft-tabs { display: flex; gap: 6px; background: rgba(255,255,255,.06); padding: 4px; border-radius: 12px; }
body.light .ft-tabs { background: rgba(0,0,0,.05); }
.ft-tab { border: 0; background: transparent; color: inherit; opacity: .7; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.ft-tab.active { background: rgba(94,201,92,.18); color: #7ee07a; opacity: 1; }
body.light .ft-tab.active { color: #2f7d2c; }
.ft-close { width: 32px; height: 32px; border-radius: 9px; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; font-size: 15px; }
.ft-close:hover { background: rgba(255,255,255,.16); }
.ft-tip { font-size: 13px; opacity: .85; margin: 0 0 14px; line-height: 1.6; }
.ft-sub { font-size: 12px; opacity: .6; margin: 10px 0 0; }
.ft-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ft-row { display: flex; gap: 8px; }
.ft-join { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.ft-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.2); color: inherit; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
body.light .ft-input { background: #fff; border-color: rgba(0,0,0,.15); }
.ft-btn { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s; }
.ft-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.14); }
.ft-btn.primary { background: linear-gradient(135deg,#5ec95c,#3fae54); color: #06210a; border: 0; font-weight: 500; }
.ft-btn.ghost { background: transparent; }
.ft-stage { animation: ftFade .2s ease; }
@keyframes ftFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ft-code-box { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 10px; }
.ft-code { font-size: 34px; font-weight: 600; letter-spacing: 4px; color: #7ee07a; font-family: ui-monospace, monospace; }
body.light .ft-code { color: #2f7d2c; }
.ft-count { font-size: 14px; opacity: .7; font-variant-numeric: tabular-nums; }
.ft-devices { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; }
.ft-peers { display: flex; flex-direction: column; gap: 10px; }
.ft-peer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
body.light .ft-peer { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.08); }
.ft-peer-name { font-size: 15px; font-weight: 600; color: #eafff0; }
body.light .ft-peer-name { color: #143a17; }
.ft-peer-acts { display: flex; gap: 8px; flex-shrink: 0; }
.ft-btn.small { padding: 7px 12px; font-size: 12px; border-radius: 9px; }
.ft-empty { opacity: .6; font-size: 13px; margin: 4px 0; }
/* 分隔线「或」 */
.ft-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; opacity: .5; }
.ft-divider::before, .ft-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
body.light .ft-divider::before, body.light .ft-divider::after { background: rgba(0,0,0,.14); }
.ft-divider span { font-size: 12px; }
/* 描边主按钮（同网传输的「配对新设备」） */
.ft-btn.primary.outline { background: transparent; color: #7ee07a; border: 1px solid rgba(94,201,92,.5); }
.ft-btn.primary.outline:hover { background: rgba(94,201,92,.12); }
body.light .ft-btn.primary.outline { color: #2f7d2c; border-color: rgba(47,125,44,.5); }
body.light .ft-btn.primary.outline:hover { background: rgba(47,125,44,.1); }
/* 同网传输内嵌配对卡片 */
.ft-pair-inline { margin-top: 16px; }
.ft-pair-inline .ft-qr-card { width: 100%; box-sizing: border-box; }
.ft-pair { display: flex; align-items: center; justify-content: center; padding: 18px 0; min-height: 240px; }
.ft-pair-status { font-size: 13px; color: #7ee07a; margin: 8px 0 0; min-height: 18px; }
body.light .ft-pair-status { color: #2f7d2c; }
.ft-filepick { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); cursor: pointer; font-size: 13px; margin-right: 10px; }
.ft-filepick:hover { background: rgba(255,255,255,.06); }
.ft-filepick input { display: none; }
.ft-cam { margin-right: 10px; }
.ft-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
/* 拖放发送高亮：桌面端把文件拖到窗口时提示“松开鼠标即可发送” */
.ft-modal.ft-drag .ft-panel { box-shadow: 0 0 0 2px var(--accent), 0 20px 70px rgba(0,0,0,.55); transform: scale(1.012); }
.ft-modal.ft-drag::after {
  content: "松开鼠标即可发送"; position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; letter-spacing: .04em; color: #fff;
  background: rgba(8,14,10,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  pointer-events: none;
}
.ft-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
body.light .ft-item { background: rgba(0,0,0,.04); }
.ft-item .fi-ico { font-size: 18px; }
.ft-item .fi-main { flex: 1; min-width: 0; }
.ft-item .fi-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-item .fi-meta { font-size: 11px; opacity: .6; }
.ft-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 6px; overflow: hidden; }
.ft-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#5ec95c,#8fe08c); transition: width .15s linear; }
.ft-item .fi-dl { border: 0; background: rgba(94,201,92,.2); color: #7ee07a; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; text-decoration: none; }
body.light .ft-item .fi-dl { color: #2f7d2c; }
.ft-hint { font-size: 12px; opacity: .65; margin: 12px 0 0; line-height: 1.6; }
/* 传输记录列表头 + 清除记录按钮 */
.ft-list-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.ft-list-head .ft-list-title { font-size: 12px; opacity: .6; font-weight: 600; letter-spacing: .03em; }
.ft-btn.tiny { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
/* 下载完成后的“已下载”勾选态 */
.ft-item .fi-dl.downloaded { background: rgba(94,201,92,.16); color: #7ee07a; cursor: default; }
body.light .ft-item .fi-dl.downloaded { color: #2f7d2c; }
/* 通用确认弹窗（复用改名弹窗的毛玻璃质感，但无模糊以保证流畅） */
.ft-confirm-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.ft-confirm-modal.hidden { display: none !important; }
.ft-confirm-backdrop { position: absolute; inset: 0; background: rgba(8,12,18,.62); }
.ft-confirm-card {
  position: relative; width: min(340px, 90vw); padding: 22px;
  background: #161d28; color: #eaf0f7; border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: ftRenameIn .22s cubic-bezier(.16,1,.3,1);
}
body.light .ft-confirm-card { background: #fff; color: #1d2733; border-color: rgba(0,0,0,.08); }
.ft-confirm-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.ft-confirm-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.6; opacity: .85; }
.ft-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ft-wechat { text-align: center; padding: 12px 0; }
/* 跨网微信：页内地址指示 + iframe（被微信 X-Frame-Options 拦截时显示降级提示）。与同网传输同尺寸，不放大。 */
@media (max-width: 480px) {
  /* 手机端隐藏跨网微信：该功能定位为手机→电脑传文件，手机本身不需要此 Tab */
  [data-ft-tab="wechat"] { display: none !important; }
  [data-ft-pane="wechat"] { display: none !important; }
  /* 手机端隐藏「切换方式」选择：移动端只有手指滑动一种方式，无需选择（onboarding 弹窗 + 设置下拉） */
  #psSwitchRow { display: none !important; }
  #pageSwitchModal { display: none !important; }
}
/* 跨网微信：简洁提示卡片（微信禁止 iframe，直接引导新窗口打开） */
.ft-wechat { display: flex; align-items: center; justify-content: center; padding: 20px 0; min-height: 200px; }
.ft-fb-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 28px; border-radius: 14px; background: rgba(20,26,22,.94); max-width: 460px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); }
body.light .ft-fb-card { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.08); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.ft-fb-ico { font-size: 36px; }
.ft-fb-title { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.ft-fb-card .ft-sub { max-width: 420px; margin: 0; line-height: 1.6; }
.ft-fb-card .ft-btn { margin-top: 4px; }

/* 分享 / 添加到主屏幕 图标按钮 */
.ft-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s; }
.ft-icon-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
body.light .ft-icon-btn { background: rgba(0,0,0,.05); }
body.light .ft-icon-btn:hover { background: rgba(0,0,0,.1); }

/* 添加到主屏幕 底部浮层 */
.ft-addhome { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end; justify-content: center; }
.ft-addhome.hidden { display: none !important; }
.ft-addhome-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: ftah-fade .2s ease; }
.ft-addhome-sheet { position: relative; width: min(440px, 100%); background: rgba(20,28,38,.96); color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 20px 20px 0 0; padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); animation: ftah-up .28s cubic-bezier(.16,1,.3,1); }
body.light .ft-addhome-sheet { background: rgba(255,255,255,.97); color: #1d2733; border-color: rgba(0,0,0,.1); }
.ft-addhome-grip { width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); margin: 0 auto 12px; }
.ft-addhome-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.ft-addhome-sub { margin: 0 0 12px; font-size: 13px; opacity: .7; line-height: 1.6; }
.ft-addhome-steps { margin: 0 0 12px; }
.ft-addhome-steps.hidden { display: none !important; }
.ft-os-tag { display: inline-block; font-size: 12px; font-weight: 600; color: #7ee07a; background: rgba(94,201,92,.16); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
body.light .ft-os-tag { color: #2f7d2c; }
.ft-addhome-steps ol { margin: 0; padding-left: 20px; }
.ft-addhome-steps li { font-size: 13px; line-height: 1.9; opacity: .9; }
.ft-addhome-note { font-size: 13px; line-height: 1.7; opacity: .9; margin: 0; }
.ft-addhome-url { display: flex; gap: 8px; margin-top: 4px; }
.ft-addhome-url .ft-input { flex: 1; min-width: 0; font-size: 12px; }
.ft-addhome-close { width: 100%; margin-top: 12px; }
@keyframes ftah-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ftah-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 481px) {
  .ft-addhome { align-items: center; }
  .ft-addhome-sheet { border-radius: 20px; }
}

/* 扫码传输：二维码卡片（premium 玻璃风，浅/深适配） */
.ft-qr { display: flex; align-items: center; justify-content: center; padding: 18px 0; min-height: 240px; }
.ft-qr-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 28px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
body.light .ft-qr-card { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); }
.ft-qr-box { width: 224px; height: 224px; padding: 12px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.ft-qr-box canvas { display: block; image-rendering: pixelated; }
.ft-qr-codebox { justify-content: center; margin-top: 2px; }
.ft-qr-url { max-width: 420px; word-break: break-all; margin: 0; opacity: .5; line-height: 1.5; }

/* 邀请横幅：已配对设备发起直连时，对方在传输窗口顶部收到提示 */
.ft-invite-banner { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
.ft-invite-banner:empty { display: none; }
.ft-invite { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(94,201,92,.22), rgba(94,201,92,.1)); border: 1px solid rgba(94,201,92,.45); animation: ftInviteIn .28s cubic-bezier(.16,1,.3,1); }
body.light .ft-invite { background: linear-gradient(135deg, rgba(47,125,44,.16), rgba(47,125,44,.06)); border-color: rgba(47,125,44,.4); }
.ft-invite-ico { font-size: 16px; }
.ft-invite-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #eafff0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.light .ft-invite-text { color: #143a17; }
.ft-invite .ft-btn.small { padding: 6px 14px; }
/* 设备重命名弹窗：页面内毛玻璃，替代原生 prompt */
.ft-rename-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.ft-rename-modal.hidden { display: none !important; }
.ft-rename-backdrop { position: absolute; inset: 0; background: rgba(8,12,18,.62); }
.ft-rename-card {
  position: relative; width: min(360px, 90vw); padding: 22px;
  background: #161d28; color: #eaf0f7; border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: ftRenameIn .22s cubic-bezier(.16,1,.3,1);
}
body.light .ft-rename-card { background: rgba(255,255,255,.94); color: #1d2733; border-color: rgba(0,0,0,.08); }
@keyframes ftRenameIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ft-rename-title { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.ft-rename-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: inherit;
}
.ft-rename-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
body.light .ft-rename-input { background: #fff; border-color: rgba(0,0,0,.15); }
.ft-rename-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
/* 关窗时的邀请通知卡片（macOS 风格，右上角） */
.ft-notify-stack { position: fixed; top: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 12px; max-width: calc(100vw - 36px); pointer-events: none; }
.ft-notify-stack:empty { display: none; }
.ft-notify {
  pointer-events: auto; width: 320px; max-width: calc(100vw - 36px); box-sizing: border-box;
  display: flex; gap: 12px; padding: 14px 14px 14px 16px; position: relative;
  background: rgba(22,30,42,.86); color: #eaf0f7; border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1);
}
.ft-notify.show { opacity: 1; transform: none; }
body.light .ft-notify { background: rgba(255,255,255,.92); color: #1d2733; border-color: rgba(0,0,0,.1); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.ft-notify-ico { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.ft-notify-body { flex: 1; min-width: 0; }
.ft-notify-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; color: #7ee07a; }
body.light .ft-notify-title { color: #2f7d2c; }
.ft-notify-text { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-notify-actions { display: flex; gap: 8px; margin-top: 10px; }
.ft-notify-actions .ft-btn.small { padding: 6px 14px; }
.ft-notify-close { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border: 0; background: transparent; color: inherit; opacity: .55; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
.ft-notify-close:hover { opacity: 1; background: rgba(255,255,255,.1); }
body.light .ft-notify-close:hover { background: rgba(0,0,0,.06); }

/* ===== 网盘面板 ===== */
.nd-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;}
.nd-modal.hidden{display:none;}
.nd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);}
.nd-panel{position:relative;width:min(720px,92vw);max-height:82vh;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;
  -webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%);
  box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 1px rgba(255,255,255,.15) inset;
}
body.light .nd-panel{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1);box-shadow:0 24px 80px rgba(0,0,0,.12);}
.nd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--panel-border);flex-shrink:0;}
.nd-title-row{display:flex;align-items:center;gap:10px;}
.nd-title{font-size:17px;font-weight:700;color:var(--text);}
.nd-provider-badge{font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(94,201,92,.2);color:#7ee07a;font-weight:600;}
body.light .nd-provider-badge{background:rgba(47,125,44,.1);color:#2f7d2c;}
.nd-close{width:32px;height:32px;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.nd-close:hover{background:rgba(255,255,255,.1);}

/* 授权引导 */
.nd-auth-guide{text-align:center;padding:60px 40px 48px;}
.nd-guide-icon{font-size:56px;margin-bottom:16px;}
.nd-guide-text{color:var(--text-dim);font-size:14px;margin-bottom:24px;line-height:1.6;max-width:360px;margin-left:auto;margin-right:auto;}
.nd-btn-primary{display:inline-block;padding:12px 28px;border:none;border-radius:12px;background:linear-gradient(135deg,#5ec95c,#4dabf7);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.nd-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(94,201,92,.35);}
.nd-msg{margin-top:14px;font-size:13px;min-height:18px;}

/* 文件浏览器 */
.nd-browser{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
.nd-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--panel-border);flex-wrap:wrap;flex-shrink:0;}
.nd-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0;font-size:13px;color:var(--text-dim);overflow:hidden;}
.nd-breadcrumb a{color:var(--overlay-text);text-decoration:none;white-space:nowrap;transition:color .15s;}
.nd-breadcrumb a:hover{color:var(--accent);}
body.light .nd-breadcrumb a{color:#2f6fd8;} body.light .nd-breadcrumb a:hover{color:#1a5ccc;}
.nd-breadcrumb .nd-sep{opacity:.4;font-size:11px;}
.nd-toolbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.nd-btn-sm{padding:6px 12px;border:none;border-radius:8px;background:rgba(255,255,255,.12);color:var(--text);font-size:12px;cursor:pointer;transition:background .15s;white-space:nowrap;}
.nd-btn-sm:hover{background:rgba(255,255,255,.22);}
body.light .nd-btn-sm{background:rgba(0,0,0,.06);color:#333;} body.light .nd-btn-sm:hover{background:rgba(0,0,0,.12);}
.nd-search-input{padding:6px 10px;border:1px solid var(--panel-border);border-radius:8px;background:transparent;color:var(--text);font-size:12px;width:140px;outline:none;transition:border-color .15s,width .2s;}
.nd-search-input:focus{border-color:var(--accent);width:180px;}
body.light .nd-search-input{background:#fff;color:#333;}

/* 配额条 */
.nd-quota-bar{height:4px;background:rgba(255,255,255,.08);position:relative;flex-shrink:0;overflow:hidden;}
.nd-quota-fill{height:100%;background:linear-gradient(90deg,#5ec95c,#4dabf7);border-radius:2px;transition:width .4s ease;}
.nd-quota-text{position:absolute;right:8px;top:-18px;font-size:10px;color:var(--text-dim);opacity:0;transition:opacity .2s;}
.nd-quota-bar:hover .nd-quota-text{opacity:1;}

/* 文件列表 */
.nd-file-list{flex:1;overflow-y:auto;padding:8px 0;}
.nd-file-item{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(255,255,255,.04);}
.nd-file-item:hover{background:rgba(255,255,255,.06);}
body.light .nd-file-item:hover{background:rgba(0,0,0,.03);}
body.light .nd-file-item{border-bottom-color:rgba(0,0,0,.04);}
.nd-file-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  background:rgba(255,255,255,.1);
}
body.light .nd-file-ico{background:rgba(0,0,0,.05);}
.nd-file-info{flex:1;min-width:0;}
.nd-file-name{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nd-file-meta{font-size:12px;color:var(--text-dim);margin-top:2px;display:flex;gap:12px;}
.nd-file-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.nd-file-item:hover .nd-file-actions{opacity:1;}
.nd-file-action{width:30px;height:30px;border:none;border-radius:8px;background:rgba(255,255,255,.1);color:var(--text-dim);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.nd-file-action:hover{background:rgba(255,255,255,.2);color:var(--text);}
.nd-file-action.danger:hover{background:rgba(229,96,77,.25);color:#e5604d;}

/* 加载状态 */
.nd-loading{text-align:center;padding:60px 40px;color:var(--text-dim);}
.nd-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:ndSpin .7s linear infinite;margin:0 auto 14px;}
@keyframes ndSpin{to{transform:rotate(360deg);}}

/* 空状态 */
.nd-empty{text-align:center;padding:60px 40px;color:var(--text-dim);font-size:14px;}
.nd-empty-icon{font-size:48px;margin-bottom:12px;}

.hidden{display:none!important;}
@keyframes ftInviteIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== 跨设备剪贴板云同步面板 ===== */
.cb-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;}
.cb-modal.hidden{display:none;}
.cb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);}
.cb-panel{position:relative;width:min(460px,92vw);max-height:82vh;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;
  -webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%);
  box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 1px rgba(255,255,255,.15) inset;
  animation:cbPop .28s cubic-bezier(.16,1,.3,1);}
@keyframes cbPop { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
body.light .cb-panel{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.1);box-shadow:0 24px 80px rgba(0,0,0,.12);}
.cb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--panel-border);flex-shrink:0;}
.cb-title-row{display:flex;align-items:center;gap:10px;min-width:0;}
.cb-title{font-size:17px;font-weight:700;color:var(--text);}
.cb-device-name{font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(94,201,92,.18);color:#7ee07a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
body.light .cb-device-name{background:rgba(47,125,44,.12);color:#2f7d2c;}
.cb-head-actions{display:flex;align-items:center;gap:6px;}
.cb-icon-btn{width:32px;height:32px;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.cb-icon-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.08);}
body.light .cb-icon-btn:hover{background:rgba(0,0,0,.06);}
.cb-close{width:32px;height:32px;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.cb-close:hover{background:rgba(255,255,255,.1);}
body.light .cb-close:hover{background:rgba(0,0,0,.06);}
.cb-hint{padding:10px 20px;font-size:12px;color:var(--text-dim);line-height:1.5;border-bottom:1px solid var(--panel-border);}
.cb-list{flex:1;min-height:0;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;}
.cb-empty{text-align:center;padding:48px 20px;color:var(--text-dim);font-size:13px;}
.cb-item{background:rgba(255,255,255,.06);border:1px solid var(--panel-border);border-radius:14px;padding:10px 12px;transition:background .2s,transform .2s,box-shadow .2s;cursor:default;}
.cb-item:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18);}
body.light .cb-item{background:rgba(0,0,0,.03);}
body.light .cb-item:hover{background:rgba(0,0,0,.06);}
.cb-item-new{animation:cbItemIn .4s cubic-bezier(.16,1,.3,1);}
@keyframes cbItemIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.cb-item-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-bottom:6px;gap:8px;}
.cb-item-from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-item-time{flex-shrink:0;opacity:.8;}
.cb-item-content{font-size:13px;color:var(--text);line-height:1.5;word-break:break-all;white-space:pre-wrap;max-height:120px;overflow:hidden;cursor:text;-webkit-user-select:text;user-select:text;}
.cb-item-url{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
body.light .cb-item-url{color:#2f6fd8;}
.cb-item-actions{display:flex;justify-content:flex-end;margin-top:8px;}
.cb-copy-btn{padding:5px 14px;border:none;border-radius:8px;background:linear-gradient(135deg,#5ec95c,#4dabf7);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.cb-copy-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(94,201,92,.35);}
.cb-copy-btn:active{transform:scale(.96);}
.cb-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-top:1px solid var(--panel-border);flex-shrink:0;font-size:11px;gap:10px;}
.cb-status{color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-status-err{color:#ff6b6b;}
.cb-foot-note{color:var(--text-dim);opacity:.75;white-space:nowrap;}

/* ========== 云同步笔记面板 ========== */
.notes-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;}
.notes-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.notes-panel{position:relative;width:min(960px,calc(100vw - 32px));height:min(680px,calc(100vh - 120px));max-height:calc(100vh - 80px);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:0 24px 70px rgba(0,0,0,.45);animation:notesIn .28s cubic-bezier(.16,1,.3,1);}
@keyframes notesIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.notes-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--panel-border);gap:12px;}
.notes-title{font-size:17px;font-weight:700;margin:0;}
.notes-head-actions{display:flex;align-items:center;gap:8px;}
.notes-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s;}
.notes-btn.primary{background:linear-gradient(135deg,#5ec95c,#4dabf7);color:#fff;border:none;}
.notes-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(94,201,92,.35);}
.notes-btn.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--panel-border);}
.notes-btn.ghost:hover{background:rgba(255,255,255,.12);}
body.light .notes-btn.ghost{background:rgba(0,0,0,.04);}
body.light .notes-btn.ghost:hover{background:rgba(0,0,0,.08);}
.notes-close{width:34px;height:34px;border-radius:10px;border:none;background:transparent;color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer;transition:background .2s;}
.notes-close:hover{background:rgba(255,255,255,.1);}
body.light .notes-close:hover{background:rgba(0,0,0,.06);}
.notes-body{flex:1;min-height:0;display:flex;position:relative;}
.notes-drawer-toggle{display:none;}
.notes-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--panel-border);display:flex;flex-direction:column;background:rgba(0,0,0,.06);}
.notes-list{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}
.notes-empty{text-align:center;padding:30px 14px;color:var(--text-dim);font-size:13px;line-height:1.6;}
.notes-item{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:transparent;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;}
.notes-item:hover{background:rgba(255,255,255,.08);}
.notes-item.active{background:rgba(94,201,92,.18);border-color:rgba(94,201,92,.45);}
body.light .notes-item.active{background:rgba(94,201,92,.14);}
.notes-item-main{flex:1;min-width:0;}
.notes-item-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notes-item-preview{font-size:12px;color:var(--text-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notes-editor-wrap{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;gap:10px;}
.notes-editor-head{display:flex;align-items:center;gap:10px;}
.notes-title-input{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:11px;border:1px solid var(--panel-border);background:rgba(255,255,255,.06);color:var(--text);font-size:15px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s;}
.notes-title-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);}
.notes-content-input{flex:1;min-height:0;width:100%;padding:14px;border-radius:14px;border:1px solid var(--panel-border);background:rgba(255,255,255,.05);color:var(--text);font-size:15px;line-height:1.7;resize:none;outline:none;transition:border-color .2s,box-shadow .2s;}
.notes-content-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);}
.notes-status{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-dim);padding:0 4px;}
.notes-status .saving{color:var(--accent);}

/* 移动端：抽屉式列表 */
@media (max-width:640px){
  .notes-panel{width:calc(100vw - 24px);height:calc(100vh - 48px);max-height:none;border-radius:18px;}
  .notes-head{padding:12px 14px;}
  .notes-title{font-size:15px;}
  .notes-body{flex-direction:column;}
  .notes-drawer-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border:none;background:rgba(255,255,255,.06);border-bottom:1px solid var(--panel-border);color:var(--text);font-size:13px;cursor:pointer;}
  .notes-sidebar{position:absolute;left:0;top:46px;bottom:0;width:75%;max-width:260px;z-index:5;background:var(--panel-bg);border-right:1px solid var(--panel-border);transform:translateX(-102%);transition:transform .25s cubic-bezier(.16,1,.3,1);box-shadow:8px 0 30px rgba(0,0,0,.35);}
  .notes-sidebar.open{transform:translateX(0);}
  .notes-editor-wrap{width:100%;flex:1;min-width:auto;padding:12px;gap:8px;}
  .notes-editor-head{flex-wrap:wrap;gap:8px;}
  .notes-title-input{width:100%;flex:none;}
  .notes-btn{height:36px;padding:0 12px;}
  .notes-content-input{flex:1;min-height:0;font-size:16px;}
}

/* ========== 提词器（独立主题，与站点主题解耦） ========== */
.teleprompter{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow:hidden;}
.teleprompter[data-theme="dark"]{background:#050505;color:#f2f2f2;}
.teleprompter[data-theme="light"]{background:#f7f7f7;color:#111;}
.tp-content{flex:1;min-height:0;overflow-y:hidden;padding:20vh 6vw 40vh;font-size:48px;line-height:1.85;font-weight:500;letter-spacing:.02em;white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;}
.teleprompter[data-theme="dark"] .tp-content::-webkit-scrollbar{display:none;}
.teleprompter[data-theme="light"] .tp-content::-webkit-scrollbar{display:none;}
.tp-line{margin:0 0 .85em 0;transition:opacity .25s;}
.tp-mirrored{transform:scaleX(-1);}
.tp-controls{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 10px 36px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);background:rgba(30,30,30,.82);z-index:101;}
.teleprompter[data-theme="light"] .tp-controls{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.1);box-shadow:0 10px 36px rgba(0,0,0,.15);}
.tp-btn{width:40px;height:40px;border-radius:11px;border:none;background:rgba(255,255,255,.1);color:inherit;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s;}
.tp-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);}
.teleprompter[data-theme="light"] .tp-btn{background:rgba(0,0,0,.06);}
.teleprompter[data-theme="light"] .tp-btn:hover{background:rgba(0,0,0,.1);}
.tp-range{-webkit-appearance:none;appearance:none;width:90px;height:6px;border-radius:3px;background:rgba(255,255,255,.2);outline:none;cursor:pointer;}
.teleprompter[data-theme="light"] .tp-range{background:rgba(0,0,0,.12);}
.tp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent,#5ec95c);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.tp-progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08);z-index:101;}
.teleprompter[data-theme="light"] .tp-progress{background:rgba(0,0,0,.06);}
.tp-progress-bar{height:100%;width:0%;background:var(--accent,#5ec95c);box-shadow:0 0 10px var(--accent,#5ec95c);transition:width .1s linear;}
@media (max-width:640px){
  .tp-content{padding:16vh 5vw 35vh;font-size:36px;line-height:1.75;}
  .tp-controls{width:calc(100vw - 32px);bottom:14px;padding:8px 10px;gap:6px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;border-radius:14px;}
  .tp-btn{width:38px;height:38px;flex-shrink:0;}
  .tp-range{width:70px;flex-shrink:0;}
}