/* === 全局 UI 自定义变量（可被 JS 改）=== */
:root {
  --ui-font-size: 14px;         /* 主体字体大小 */
  --ui-line-height: 1.6;        /* 主体行距 */
  --ui-density: 1;              /* 界面密度系数：0.85 紧凑，1 默认，1.15 宽松 */
  --ui-glass-blur: 24px;        /* 毛玻璃模糊值（px） */
  --ui-transition-speed: 0.25s; /* 动画/过渡时长 */
  --ui-scroll-behavior: smooth; /* 滚动行为 */
}

/* 字体大小+行距落地的几个主要区域 */
body,
.read-content,
.ql-editor,
.read-modal-body,
.note-list,
.contentTextLog {
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
}

/* 界面密度作用到常见容器和按钮 */
.headerbar,
.toolbar,
.menu-list,
.note-item,
.btn,
.field-input,
.read-meta {
  /* 用乘法系数做密度 */
  gap: calc(8px * var(--ui-density));
  padding-top: calc(6px * var(--ui-density));
  padding-bottom: calc(6px * var(--ui-density));
}

/* 毛玻璃统一口子：所有面板都用变量 */
.content-modal__box,
.modal__box,
#sidebar,
#listPane,
#readerPane {
  /*backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.25);*/
  /*-webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.25);*/
  transition: backdrop-filter var(--ui-transition-speed), background var(--ui-transition-speed);
   background: rgba(255, 255, 255, 0.3);
}

/* ✅ 用伪元素来实现毛玻璃 */
#sidebar::before,
#listPane::before,
#readerPane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.25);
  pointer-events: none;
  z-index: -1;
}



/* 滚动与动画开关：性能低的可以关掉 */
:root[data-transition="off"] * {
  transition: none !important;
  animation-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* 滚动开了就走 smooth */
html {
  scroll-behavior: var(--ui-scroll-behavior);
}











/* =========================================================
   在线记事本 - 自定义主题合集
   放在你现有 CSS 的最底部即可
   ========================================================= */

/* ---------------------------------------------------------
   1) macOS Frost (3D毛玻璃硬刚版)
   --------------------------------------------------------- */
:root[data-theme="macos-frost"] {
  --bg: radial-gradient(circle at 0% -10%, rgba(255, 255, 255, 0.45) 0%, rgba(225, 235, 252, 0.6) 35%, rgba(211, 221, 242, 0.85) 70%, #e2e8f0 100%);
  --panel: rgba(255, 255, 255, 0.35);
  --panel-elevated: rgba(255, 255, 255, 0.35);
  --text: #0f172a;
  --muted: rgba(75, 85, 99, 0.85);
  --muted-2: rgba(100, 116, 139, 0.6);
  --border: rgba(255, 255, 255, 0.55);
  --border-2: rgba(15, 23, 42, 0.04);
  --primary: #4c8eff;
  --primary-2: #70a6ff;
  --card-radius: 20px;
  --soft-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  --glass: blur(30px) saturate(170%);
}

:root[data-theme="macos-frost"] body {
  background: var(--bg) !important;
  background-attachment: fixed !important;
}

/* 顶栏 */
:root[data-theme="macos-frost"] .headerbar {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(255, 255, 255, 0.42) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.03) !important;
  border-radius: 0 0 18px 18px;
  position: relative;
}
:root[data-theme="macos-frost"] .headerbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .7;
  border-radius: inherit;
}

/* 主布局容器 */
:root[data-theme="macos-frost"] #sidebar,
:root[data-theme="macos-frost"] #listPane,
:root[data-theme="macos-frost"] #readerPane {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(26px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.05) !important;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
:root[data-theme="macos-frost"] #listPane::before,
:root[data-theme="macos-frost"] #readerPane::before,
:root[data-theme="macos-frost"] #sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .75;
}

/* 弹窗 */
:root[data-theme="macos-frost"] .modal,
:root[data-theme="macos-frost"] .content-modal {
  background: rgba(3, 7, 18, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

:root[data-theme="macos-frost"] .modal__box,
:root[data-theme="macos-frost"] #readModal .modal__box,
:root[data-theme="macos-frost"] .content-modal__box {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.28) 72%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  position: relative;
  overflow: hidden;
}

/* 内高光+内阴影 */
:root[data-theme="macos-frost"] .modal__box::before,
:root[data-theme="macos-frost"] #readModal .modal__box::before,
:root[data-theme="macos-frost"] .content-modal__box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
}
:root[data-theme="macos-frost"] .modal__box::after,
:root[data-theme="macos-frost"] #readModal .modal__box::after,
:root[data-theme="macos-frost"] .content-modal__box::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(15, 23, 42, 0.025);
  pointer-events: none;
}

/* 列表卡片 */
:root[data-theme="macos-frost"] .note-list .note-item {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.045) !important;
  position: relative;
  overflow: hidden;
}
:root[data-theme="macos-frost"] .note-list .note-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .8;
  pointer-events: none;
}

/* 按钮玻璃胶囊 */
:root[data-theme="macos-frost"] .btn {
  background: radial-gradient(circle at 12% 5%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.25) 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
:root[data-theme="macos-frost"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
}

/* 滚动条 */
:root[data-theme="macos-frost"] #sidebar::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] #listPane::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] #readerPane::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] .read-modal-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}
:root[data-theme="macos-frost"] #sidebar::-webkit-scrollbar-track,
:root[data-theme="macos-frost"] #listPane::-webkit-scrollbar-track,
:root[data-theme="macos-frost"] #readerPane::-webkit-scrollbar-track {
  background: rgba(248, 250, 252, 0.08) !important;
}

/* 夜间 */
:root[data-theme="macos-frost"][data-color-scheme="dark"] {
  --bg: radial-gradient(circle at 10% 0%, rgba(148, 163, 184, 0.03) 0%, rgba(15, 23, 42, 1) 70%);
  --panel: rgba(7, 11, 18, 0.35);
  --panel-elevated: rgba(8, 12, 19, 0.38);
  --text: #e2e8f0;
  --muted: rgba(203, 213, 225, 0.75);
  --border: rgba(255, 255, 255, 0.08);
}
:root[data-theme="macos-frost"][data-color-scheme="dark"] .modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #readModal .modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] .content-modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #sidebar,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #listPane,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #readerPane {
  background: linear-gradient(160deg,
    rgba(14, 20, 30, 0.78) 0%,
    rgba(14, 20, 30, 0.25) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35) !important;
}

/* ---------------------------------------------------------
   2) Aqua Bloom（水光流体玻璃）
   --------------------------------------------------------- */
:root[data-theme="aqua-bloom"] {
  --bg: radial-gradient(circle at 5% 10%, rgba(218, 255, 250, 0.85) 0%, rgba(198, 232, 255, 0.6) 36%, rgba(247, 235, 255, 0.6) 65%, #ffffff 100%);
  --panel: rgba(255, 255, 255, 0.65);
  --text: #0f172a;
  --muted: rgba(71, 85, 105, 0.8);
  --border: rgba(255, 255, 255, 0.7);
}
:root[data-theme="aqua-bloom"] body {
  background: var(--bg);
  background-attachment: fixed;
}
:root[data-theme="aqua-bloom"] .headerbar,
:root[data-theme="aqua-bloom"] #sidebar,
:root[data-theme="aqua-bloom"] #listPane,
:root[data-theme="aqua-bloom"] #readerPane,
:root[data-theme="aqua-bloom"] .modal__box,
:root[data-theme="aqua-bloom"] .content-modal__box {
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 90%);
  border: 1px solid rgba(233, 248, 255, 0.9);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
:root[data-theme="aqua-bloom"] .btn {
  background: linear-gradient(135deg, rgba(79, 209, 197, 0.95) 0%, rgba(141, 235, 255, 0.85) 100%);
  border: none;
  color: #0f172a;
  border-radius: 999px;
  box-shadow: 0 12px 35px rgba(45, 212, 191, 0.35);
}

/* ---------------------------------------------------------
   3) Sunset Mirage（夕阳暖玻璃）
   --------------------------------------------------------- */
:root[data-theme="sunset-mirage"] {
  --bg: linear-gradient(140deg, #ffecd2 0%, #fcb69f 45%, #f48fb1 85%);
  --panel: rgba(255, 255, 255, 0.35);
  --text: #402b3a;
  --muted: rgba(64, 43, 58, 0.7);
  --border: rgba(255, 255, 255, 0.8);
}
:root[data-theme="sunset-mirage"] body { background: var(--bg); background-attachment: fixed; }
:root[data-theme="sunset-mirage"] .headerbar,
:root[data-theme="sunset-mirage"] #sidebar,
:root[data-theme="sunset-mirage"] #listPane,
:root[data-theme="sunset-mirage"] #readerPane,
:root[data-theme="sunset-mirage"] .modal__box {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 237, 218, 0.4) 100%);
  border: 1px solid rgba(255, 248, 241, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(255, 121, 96, 0.18);
}
:root[data-theme="sunset-mirage"] .btn {
  background: linear-gradient(140deg, #ff7043 0%, #ffb74d 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 12px 35px rgba(255, 112, 67, 0.4);
}

/* ---------------------------------------------------------
   4) Nebula Drift（星云深色霓虹）
   --------------------------------------------------------- */
:root[data-theme="nebula-drift"] {
  --bg: radial-gradient(circle at 0% 0%, #111827 0%, #020617 35%, #020617 70%, #000 100%);
  --panel: rgba(2, 6, 23, 0.35);
  --text: #e2e8f0;
  --muted: rgba(148, 163, 184, 0.65);
  --border: rgba(148, 163, 184, 0.12);
  --glow1: rgba(139, 92, 246, 0.35);
  --glow2: rgba(244, 114, 182, 0.28);
}
:root[data-theme="nebula-drift"] body {
  background: radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.28) 0, rgba(2, 6, 23, 1) 40%), radial-gradient(circle at 80% 20%, rgba(244, 114, 182, 0.15) 0, rgba(2, 6, 23, 1) 45%), #020617;
  background-attachment: fixed;
}
:root[data-theme="nebula-drift"] .headerbar,
:root[data-theme="nebula-drift"] #sidebar,
:root[data-theme="nebula-drift"] #listPane,
:root[data-theme="nebula-drift"] #readerPane,
:root[data-theme="nebula-drift"] .modal__box {
  background: radial-gradient(circle at 10% 5%, rgba(15, 23, 42, 0.35) 0, rgba(15, 23, 42, 0.05) 60%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
:root[data-theme="nebula-drift"] .modal__box::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), rgba(244, 114, 182, 0));
  filter: blur(28px);
  pointer-events: none;
}
:root[data-theme="nebula-drift"] .btn {
  background: radial-gradient(circle at 5% 5%, rgba(139, 92, 246, 1) 0%, rgba(236, 72, 153, 0.7) 100%);
  border: none;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.65);
}

/* ---------------------------------------------------------
   5) Moss Paper（自然手账纸质）
   --------------------------------------------------------- */
:root[data-theme="moss-paper"] {
  --bg: radial-gradient(circle at 0% 0%, #f9fafb 0%, #edf2f4 35%, #e4e9e1 100%);
  --panel: #ffffff;
  --text: #2f3e46;
  --muted: rgba(55, 65, 81, 0.6);
  --border: rgba(190, 213, 186, 0.8);
}
:root[data-theme="moss-paper"] body {
  background: var(--bg);
}
:root[data-theme="moss-paper"] .headerbar,
:root[data-theme="moss-paper"] #sidebar,
:root[data-theme="moss-paper"] #listPane,
:root[data-theme="moss-paper"] #readerPane,
:root[data-theme="moss-paper"] .modal__box {
  background: #ffffff;
  border: 1px solid rgba(190, 213, 186, 0.6);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(22, 35, 25, 0.04);
}
:root[data-theme="moss-paper"] .note-list .note-item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(215, 228, 209, 0.6);
  border-radius: 12px;
}
:root[data-theme="moss-paper"] .btn {
  background: #d6e4d3;
  color: #2f3e46;
  border: 1px solid rgba(192, 211, 191, 0.9);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   6) Frostbyte（极地冷白科技）
   --------------------------------------------------------- */
:root[data-theme="frostbyte"] {
  --bg: linear-gradient(180deg, #e2f3ff 0%, #ffffff 60%, #f8fafc 100%);
  --panel: rgba(255, 255, 255, 0.85);
  --text: #0f172a;
  --muted: rgba(100, 116, 139, 0.7);
  --border: rgba(163, 192, 214, 0.65);
  --accent: #0ea5e9;
}
:root[data-theme="frostbyte"] body { background: var(--bg); }
:root[data-theme="frostbyte"] .headerbar,
:root[data-theme="frostbyte"] #sidebar,
:root[data-theme="frostbyte"] #listPane,
:root[data-theme="frostbyte"] #readerPane,
:root[data-theme="frostbyte"] .modal__box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(163, 192, 214, 0.4);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
:root[data-theme="frostbyte"] .btn {
  background: #0ea5e9;
  color: #fff;
  border: 1px solid rgba(14, 165, 233, 0.4);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   7) Vanta Noir（黑镜高对比）
   --------------------------------------------------------- */
:root[data-theme="vanta-noir"] {
  --bg: radial-gradient(circle at 10% 25%, #0f172a 0%, #020617 35%, #000 100%);
  --panel: rgba(2, 6, 23, 0.55);
  --text: #e2e8f0;
  --muted: rgba(203, 213, 225, 0.65);
  --border: rgba(148, 163, 184, 0.22);
}
:root[data-theme="vanta-noir"] body { background: var(--bg); background-attachment: fixed; }
:root[data-theme="vanta-noir"] .headerbar,
:root[data-theme="vanta-noir"] #sidebar,
:root[data-theme="vanta-noir"] #listPane,
:root[data-theme="vanta-noir"] #readerPane,
:root[data-theme="vanta-noir"] .modal__box {
  background: radial-gradient(circle at 5% 5%, rgba(15, 23, 42, 0.75) 0, rgba(15, 23, 42, 0.05) 65%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
:root[data-theme="vanta-noir"] .btn {
  background: radial-gradient(circle at 5% 5%, rgba(59, 130, 246, 1) 0%, rgba(59, 130, 246, 0.3) 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 0 18px rgba(59,130,246,.45);
}

/* ---------------------------------------------------------
   8) Cyber Sakura（赛博樱粉）
   --------------------------------------------------------- */
:root[data-theme="cyber-sakura"] {
  --bg: radial-gradient(circle at 50% -20%, rgba(255, 128, 191, 0.6) 0%, rgba(3, 7, 18, 1) 58%);
  --panel: rgba(3, 7, 18, 0.4);
  --text: #ffe4ff;
  --muted: rgba(255, 214, 255, 0.55);
  --border: rgba(255, 128, 191, 0.25);
}
:root[data-theme="cyber-sakura"] body { background: var(--bg); background-attachment: fixed; }
:root[data-theme="cyber-sakura"] .headerbar,
:root[data-theme="cyber-sakura"] #sidebar,
:root[data-theme="cyber-sakura"] #listPane,
:root[data-theme="cyber-sakura"] #readerPane,
:root[data-theme="cyber-sakura"] .modal__box {
  background: radial-gradient(circle, rgba(3,7,18,.55) 0, rgba(3,7,18,0) 55%);
  border: 1px solid rgba(255, 184, 222, 0.35);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(255, 128, 191, 0.16);
}
:root[data-theme="cyber-sakura"] .btn {
  background: radial-gradient(circle at 5% 5%, #ff80bf 0%, rgba(128, 208, 255, 0.7) 100%);
  color: #1f2937;
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 17px rgba(255, 128, 191, 0.65);
}

/* ---------------------------------------------------------
   9) Ivory Mist（苹果系系统白）
   --------------------------------------------------------- */
:root[data-theme="ivory-mist"] {
  --bg: linear-gradient(180deg, #f5f5f7 0%, #ffffff 35%, #ffffff 100%);
  --panel: #ffffff;
  --text: #111827;
  --muted: rgba(75, 85, 99, 0.65);
  --border: rgba(209, 213, 219, 0.8);
}
:root[data-theme="ivory-mist"] body { background: var(--bg); }
:root[data-theme="ivory-mist"] .headerbar,
:root[data-theme="ivory-mist"] #sidebar,
:root[data-theme="ivory-mist"] #listPane,
:root[data-theme="ivory-mist"] #readerPane,
:root[data-theme="ivory-mist"] .modal__box {
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.8);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.02);
}
:root[data-theme="ivory-mist"] .btn {
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.85);
  border-radius: 999px;
  color: #111827;
}

/* 修复：sunset-mirage 下 回到顶部按钮会跟着滚的问题 */
:root[data-theme="sunset-mirage"] #listPane {
  background: transparent !important;              /* 本体不要玻璃了 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;                              /* 给伪元素定位的参照 */
}

/* 把原来想要的那层暖色玻璃放到伪元素里 */
:root[data-theme="sunset-mirage"] #listPane::before {
  content: "";
  position: absolute;
  inset: 0;
  height: var(--listpane-skin-h, 100%);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 237, 218, 0.4) 100%
  );
  border: 1px solid rgba(255, 248, 241, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(255, 121, 96, 0.18);
  pointer-events: none;     /* 不挡你点里面的笔记 */
  z-index: -1;              /* 在下面，别盖内容 */
}


/*马卡龙加强*/
/* ===========================================
   Pastel Frost （马卡龙主题·强化版）
   放在最后，覆盖之前的同名样式
   =========================================== */
:root[data-theme="pastel-frost"] {
  /* 背景：柔彩多段渐变，偏少女 / 轻设计 */
  --bg: radial-gradient(circle at 5% 0%, #ffe4f0 0%, #fef6d6 32%, #d9f6ff 68%, #ffffff 100%);
  /* 卡片主色要明显是粉的，不要透明白 */
  --panel: rgba(255, 255, 255, 0.8);
  --panel-soft: rgba(255, 242, 248, 0.85);
  --text: #513b4d;
  --muted: rgba(93, 76, 88, 0.65);
  --border: rgba(255, 182, 193, 0.55); /* lightpink 边框 */
  --accent: #ff9eb5;   /* 主要按钮粉 */
  --accent-2: #8adfe0; /* 辅助薄荷 */
  --radius: 16px;
}

:root[data-theme="pastel-frost"] body {
  background: var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--text);
}

/* 顶部栏：半透明粉白 */
:root[data-theme="pastel-frost"] .headerbar {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 240, 247, 0.65) 100%) !important;
  border-bottom: 1px solid rgba(255, 182, 193, 0.5) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(255, 182, 193, 0.15);
}

/* ===== 主容器：不要直接 blur 在 #listPane 上，免得 fixed 跟着动 ===== */
:root[data-theme="pastel-frost"] #sidebar,
:root[data-theme="pastel-frost"] #readerPane {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 211, 224, 0.6) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 38px rgba(255, 182, 193, 0.12);
  position: relative;
}

/* ⭐ 重点：#listPane 用伪元素铺玻璃，不影响里面的固定按钮 */
:root[data-theme="pastel-frost"] #listPane {
  background: transparent !important;
  position: relative;
}
:root[data-theme="pastel-frost"] #listPane::before {
  content: "";
  position: absolute;
  inset: 0;
  height: var(--listpane-skin-h, 100%);
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 240, 247, 0.6) 45%,
    rgba(233, 255, 252, 0.38) 100%);
  border: 1px solid rgba(255, 211, 224, 0.6);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(255, 182, 193, 0.12);
  pointer-events: none;
  z-index: -1;
}

/* 弹窗、设置、阅读弹窗：粉嫩玻璃卡片 */
:root[data-theme="pastel-frost"] .modal__box,
:root[data-theme="pastel-frost"] #readModal .modal__box,
:root[data-theme="pastel-frost"] .content-modal__box {
  background: radial-gradient(circle at 12% 10%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 240, 247, 0.7) 45%,
    rgba(230, 255, 255, 0.35) 85%) !important;
  border: 1px solid rgba(255, 182, 193, 0.55) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 20px 40px rgba(255, 182, 193, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* 内部高光，做成糖霜质感 */
:root[data-theme="pastel-frost"] .modal__box::before,
:root[data-theme="pastel-frost"] #readModal .modal__box::before,
:root[data-theme="pastel-frost"] .content-modal__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 95% 95%, rgba(255, 213, 229, 0.4), rgba(255, 213, 229, 0) 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 笔记卡片：要看得出是马卡龙色块 */
:root[data-theme="pastel-frost"] .note-list .note-item {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 211, 224, 0.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(255, 185, 202, 0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
:root[data-theme="pastel-frost"] .note-list .note-item::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -32px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 197, 219, 0.55) 0%, rgba(255, 197, 219, 0) 65%);
  pointer-events: none;
}

/* 按钮：粉色主按钮 + 薄荷悬浮 */
:root[data-theme="pastel-frost"] .btn {
  background: linear-gradient(140deg, rgba(255, 158, 181, 1) 0%, rgba(255, 209, 224, 0.85) 100%);
  border: 1px solid rgba(255, 189, 206, 0.9);
  color: #4f2f3d;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(255, 185, 202, 0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root[data-theme="pastel-frost"] .btn:hover {
  background: linear-gradient(140deg, rgba(255, 158, 181, 1) 0%, rgba(191, 244, 229, 0.85) 100%);
  box-shadow: 0 14px 38px rgba(255, 185, 202, 0.5);
  transform: translateY(-1px);
}

/* 滚动条也要粉嫩点 */
:root[data-theme="pastel-frost"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 182, 193, 0.45);
  border-radius: 999px;
}
:root[data-theme="pastel-frost"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 182, 193, 0.7);
}

/*马卡龙加强*/

/*readModal主题修复*/
/* ======================================================
   让 readModal 也跟着主题走
   （覆盖之前所有 #readModal .modal__box 的定义）
   ====================================================== */

/* 1) macOS Frost */
:root[data-theme="macos-frost"] #readModal .modal__box,
:root[data-theme="macos-frost"] #readModal .read-modal-header {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.28) 72%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}
:root[data-theme="macos-frost"] #readModal .read-modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* 2) Aqua Bloom */
:root[data-theme="aqua-bloom"] #readModal .modal__box,
:root[data-theme="aqua-bloom"] #readModal .read-modal-header {
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 90%) !important;
  border: 1px solid rgba(233, 248, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
}
:root[data-theme="aqua-bloom"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(233, 248, 255, 0.8) !important;
}

/* 3) Sunset Mirage */
:root[data-theme="sunset-mirage"] #readModal .modal__box,
:root[data-theme="sunset-mirage"] #readModal .read-modal-header {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 237, 218, 0.45) 100%) !important;
  border: 1px solid rgba(255, 248, 241, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 38px rgba(255, 121, 96, 0.18) !important;
}
:root[data-theme="sunset-mirage"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(255, 190, 143, 0.5) !important;
}

/* 4) Nebula Drift */
:root[data-theme="nebula-drift"] #readModal .modal__box,
:root[data-theme="nebula-drift"] #readModal .read-modal-header {
  background: radial-gradient(circle at 10% 5%, rgba(15, 23, 42, 0.45) 0, rgba(15, 23, 42, 0.05) 60%) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}
:root[data-theme="nebula-drift"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
}

/* 5) Moss Paper */
:root[data-theme="moss-paper"] #readModal .modal__box,
:root[data-theme="moss-paper"] #readModal .read-modal-header {
  background: #ffffff !important;
  border: 1px solid rgba(190, 213, 186, 0.6) !important;
  box-shadow: 0 14px 30px rgba(22, 35, 25, 0.04) !important;
}
:root[data-theme="moss-paper"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(198, 216, 194, 0.6) !important;
}

/* 6) Frostbyte */
:root[data-theme="frostbyte"] #readModal .modal__box,
:root[data-theme="frostbyte"] #readModal .read-modal-header {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(163, 192, 214, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.04) !important;
}
:root[data-theme="frostbyte"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(163, 192, 214, 0.4) !important;
}

/* 7) Vanta Noir */
:root[data-theme="vanta-noir"] #readModal .modal__box,
:root[data-theme="vanta-noir"] #readModal .read-modal-header {
  background: radial-gradient(circle at 5% 5%, rgba(15, 23, 42, 0.75) 0, rgba(15, 23, 42, 0.05) 65%) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35) !important;
}
:root[data-theme="vanta-noir"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

/* 8) Cyber Sakura */
:root[data-theme="cyber-sakura"] #readModal .modal__box,
:root[data-theme="cyber-sakura"] #readModal .read-modal-header {
  background: radial-gradient(circle, rgba(3, 7, 18, 0.55) 0, rgba(3, 7, 18, 0) 55%) !important;
  border: 1px solid rgba(255, 184, 222, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 38px rgba(255, 128, 191, 0.16) !important;
}
:root[data-theme="cyber-sakura"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(255, 184, 222, 0.25) !important;
}

/* 9) Ivory Mist */
:root[data-theme="ivory-mist"] #readModal .modal__box,
:root[data-theme="ivory-mist"] #readModal .read-modal-header {
  background: #ffffff !important;
  border: 1px solid rgba(209, 213, 219, 0.8) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.02) !important;
}
:root[data-theme="ivory-mist"] #readModal .read-modal-header {
  border-bottom: 1px solid rgba(209, 213, 219, 0.6) !important;
}

/*readModal主题修复*/


/*青草主题修复*/
/* ==========================================
   Moss Paper v2 （自然草地版）
   覆盖旧的 moss-paper
   ========================================== */
:root[data-theme="moss-paper"] {
  /* 背景：天空蓝 ➜ 草地绿，偏轻、不要太饱和 */
  --bg: linear-gradient(180deg, #e8f4ff 0%, #d7f3d7 46%, #c8ebc3 100%);
  /* 主卡片还是白的，这样文字清晰 */
  --panel: #ffffff;
  --text: #1f3425;  /* 偏墨绿 */
  --muted: rgba(38, 66, 48, 0.65);
  --border: rgba(145, 192, 149, 0.75);
  --accent: #43b97f;   /* 叶绿 */
  --accent-soft: rgba(67, 185, 127, 0.12);
  --radius: 14px;
}

:root[data-theme="moss-paper"] body {
  background: var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--text);
  position: relative;
}

/* 增加一点“草地/树影”的装饰层，让它看起来不是纯渐变 */
:root[data-theme="moss-paper"] body::before {
  content: "";
  position: fixed;
  inset: -80px -40px auto;
  height: 60vh;
  background:
    radial-gradient(circle at 10% 40%, rgba(91, 189, 132, 0.25) 0, rgba(91, 189, 132, 0) 45%),
    radial-gradient(circle at 85% 20%, rgba(57, 140, 88, 0.22) 0, rgba(57, 140, 88, 0) 40%),
    radial-gradient(circle at 60% 80%, rgba(223, 244, 223, 0.6) 0, rgba(223, 244, 223, 0) 65%);
  pointer-events: none;
  z-index: -1;
  filter: saturate(115%);
}

/* 顶部栏 = 草地上的白色工具栏 */
:root[data-theme="moss-paper"] .headerbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(149, 185, 149, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(36, 78, 53, 0.1);
}

/* 左栏&阅读区：白面板 + 绿边 */
:root[data-theme="moss-paper"] #sidebar,
:root[data-theme="moss-paper"] #readerPane {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(145, 192, 149, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(25, 63, 38, 0.06);
  position: relative;
}

/* ⭐ 列表这块还是用 ::before 铺，不要影响回到顶部按钮 */
:root[data-theme="moss-paper"] #listPane {
  background: transparent !important;
  position: relative;
}
:root[data-theme="moss-paper"] #listPane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(145, 192, 149, 0.55);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(25, 63, 38, 0.05);
  pointer-events: none;
  z-index: -1;
}

/* 笔记卡片：像放在草地上的小纸片 */
:root[data-theme="moss-paper"] .note-list .note-item {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(145, 192, 149, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(25, 63, 38, 0.04) !important;
  position: relative;
}
:root[data-theme="moss-paper"] .note-list .note-item::after {
  /* 一点叶子感的角标 */
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  width: 45px;
  height: 45px;
  background: radial-gradient(circle, rgba(67, 185, 127, 0.35) 0, rgba(67, 185, 127, 0) 60%);
  pointer-events: none;
}

/* 阅读弹窗也要自然风 */
:root[data-theme="moss-paper"] #readModal .modal__box,
:root[data-theme="moss-paper"] .content-modal__box {
  background: #ffffff !important;
  border: 1px solid rgba(145, 192, 149, 0.5) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 36px rgba(25, 63, 38, 0.08) !important;
}

/* 顶部标题栏 */
:root[data-theme="moss-paper"] #readModal .read-modal-header {
  background: rgba(236, 247, 233, 0.9) !important;
  border-bottom: 1px solid rgba(145, 192, 149, 0.5) !important;
}

/* 按钮：绿色胶囊，但不要太重 */
/* 兼容你全局的 .btn */
:root[data-theme="moss-paper"] .btn {
  background: linear-gradient(140deg, #43b97f 0%, #8fddb0 100%);
  border: 1px solid rgba(67, 185, 127, 0.45);
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 10px 26px rgba(67, 185, 127, 0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
:root[data-theme="moss-paper"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(67, 185, 127, 0.45);
}

/* 次级按钮/关闭按钮如果是浅色，加一条 */
:root[data-theme="moss-paper"] .btn.closeContentModal,
:root[data-theme="moss-paper"] .btn.btn-secondary {
  background: rgba(239, 250, 240, 0.85);
  color: #1f3425;
  border: 1px solid rgba(145, 192, 149, 0.45);
  box-shadow: none;
}

/* 滚动条也走绿色 */
:root[data-theme="moss-paper"] ::-webkit-scrollbar-thumb {
  background: rgba(93, 166, 110, 0.45);
  border-radius: 999px;
}
:root[data-theme="moss-paper"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 132, 85, 0.68);
}

/*青草主题修复*/

/*星云主题修复*/
/* ==========================================
   Nebula Drift v2 —— 银河星云版
   覆盖旧的 nebula-drift
   ========================================== */
:root[data-theme="nebula-drift"] {
  /* 深空间底色 */
  --bg: radial-gradient(circle at 0% 0%, #0f172a 0%, #020617 35%, #000 100%);
  --panel: rgba(9, 12, 23, 0.35);
  --text: #e2e8f0;
  --muted: rgba(186, 197, 211, 0.7);
  --border: rgba(148, 163, 184, 0.25);
  --glow-purple: rgba(139, 92, 246, 0.75);
  --glow-pink: rgba(244, 114, 182, 0.65);
  --glow-cyan: rgba(56, 189, 248, 0.4);
  --radius: 16px;
}

:root[data-theme="nebula-drift"] body {
  /* 底层：深空 */
  background: radial-gradient(circle at 10% 10%, #111827 0%, #020617 35%, #000 100%) !important;
  background-attachment: fixed !important;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

/* 顶层星光：真正的“满天星” */
:root[data-theme="nebula-drift"] body::before {
  content: "";
  position: fixed;
  inset: -200px -200px -200px -200px;
  /* 一大张星星图：用多个 radial-gradient 拼 */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle, rgba(248, 250, 252, 0.6) 0, rgba(248, 250, 252, 0) 35%),
    radial-gradient(circle, rgba(186, 230, 253, 0.7) 0, rgba(186, 230, 253, 0) 40%);
  background-size: 3px 3px, 4px 4px, 5px 5px;
  background-repeat: repeat;
  opacity: 0.28;
  pointer-events: none;
  z-index: -2;
}

/* 中层星云：紫+粉+青，做流光 */
:root[data-theme="nebula-drift"] body::after {
  content: "";
  position: fixed;
  inset: -10% -5%;
  background:
    radial-gradient(circle at 12% 20%, rgba(139, 92, 246, 0.45) 0%, rgba(139, 92, 246, 0) 45%),
    radial-gradient(circle at 80% 10%, rgba(244, 114, 182, 0.4) 0%, rgba(244, 114, 182, 0) 55%),
    radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0) 55%),
    radial-gradient(circle at 0% 100%, rgba(39, 95, 207, 0.28) 0%, rgba(39, 95, 207, 0) 55%);
  filter: blur(35px) saturate(140%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}

/* 顶部栏：深空玻璃条 */
:root[data-theme="nebula-drift"] .headerbar {
  background: radial-gradient(circle at 5% 5%, rgba(15, 23, 42, 0.85) 0, rgba(2, 6, 23, 0.2) 70%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ⭐ 关键：容器本体透明，用 ::before 铺玻璃，这样 fixed 不会被粘住 */
:root[data-theme="nebula-drift"] #sidebar,
:root[data-theme="nebula-drift"] #readerPane {
  background: rgba(12, 14, 26, 0.28) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  position: relative;
}

:root[data-theme="nebula-drift"] #listPane {
  background: transparent !important;
  position: relative;
}
:root[data-theme="nebula-drift"] #listPane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 5% 5%, rgba(15, 23, 42, 0.8) 0, rgba(15, 23, 42, 0.1) 60%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: -1;
}

/* 阅读弹窗也要星云质感 */
:root[data-theme="nebula-drift"] #readModal .modal__box,
:root[data-theme="nebula-drift"] .content-modal__box {
  background: radial-gradient(circle at 20% 5%, rgba(15, 23, 42, 0.7) 0, rgba(2, 6, 23, 0.25) 70%) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-radius: 18px !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(120, 140, 175, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* 给阅读弹窗再加一层小星云，内部有光 */
:root[data-theme="nebula-drift"] #readModal .modal__box::before,
:root[data-theme="nebula-drift"] .content-modal__box::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(circle, rgba(139, 92, 246, 0.33), rgba(244, 114, 182, 0) 55%),
    radial-gradient(circle at 85% 80%, rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0) 55%);
  filter: blur(25px);
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: screen;
}

/* 阅读标题栏 */
:root[data-theme="nebula-drift"] #readModal .read-modal-header {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 100%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
}

/* 笔记卡片 = 星光面板 */
:root[data-theme="nebula-drift"] .note-list .note-item {
  background: radial-gradient(circle at 14% 10%, rgba(15, 23, 42, 0.78) 0, rgba(15, 23, 42, 0.05) 60%) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4) !important;
  position: relative;
  overflow: hidden;
}
:root[data-theme="nebula-drift"] .note-list .note-item::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.45) 0, rgba(244, 114, 182, 0) 75%);
  filter: blur(22px);
  pointer-events: none;
}

/* 按钮：星云霓虹胶囊 */
:root[data-theme="nebula-drift"] .btn {
  background: radial-gradient(circle at 5% 5%, rgba(139, 92, 246, 1) 0%, rgba(236, 72, 153, 0.85) 70%, rgba(56, 189, 248, 0.75) 110%);
  border: 1px solid rgba(236, 72, 153, 0.35);
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
:root[data-theme="nebula-drift"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.7);
}

/* 滚动条：深空蓝 */
:root[data-theme="nebula-drift"] ::-webkit-scrollbar-thumb {
  background: rgba(140, 160, 190, 0.32);
  border-radius: 99px;
}
:root[data-theme="nebula-drift"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 160, 190, 0.6);
}

/* 夜间开关对这个主题其实影响不大，但保留一下 */
:root[data-theme="nebula-drift"][data-color-scheme="dark"] #readModal .modal__box {
  background: radial-gradient(circle at 12% 4%, rgba(15, 23, 42, 0.85) 0, rgba(15, 23, 42, 0.45) 60%) !important;
}

/*星云主题修复*/




/*主题样式*/
/* 🍎 macOS Frost（毛玻璃） */
/* 🍎 macOS Frost（强化版 3D 毛玻璃） */
/* =========================
   🍎 macOS Frost 3D 毛玻璃（硬刚版）
   放到你现有 CSS 的最后
   ========================= */
:root[data-theme="macos-frost"] {
  /* 后景：要能被 blur 吃到，冷灰+一点蓝 */
  --bg: radial-gradient(circle at 0% -10%, rgba(255, 255, 255, 0.45) 0%, rgba(225, 235, 252, 0.6) 35%, rgba(211, 221, 242, 0.85) 70%, #e2e8f0 100%);
  /* 面板是半透明的白，但不是纯白 */
  --panel: rgba(255, 255, 255, 0.35);
  --panel-elevated: rgba(255, 255, 255, 0.35);
  --text: #0f172a;
  --muted: rgba(75, 85, 99, 0.85);
  --muted-2: rgba(100, 116, 139, 0.6);
  --border: rgba(255, 255, 255, 0.55);
  --border-2: rgba(15, 23, 42, 0.04);
  --primary: #4c8eff;
  --primary-2: #70a6ff;
  --card-radius: 20px;
  --soft-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  --glass: blur(30px) saturate(170%);
}

/* 背景一定要显，避免玻璃像透明 */
:root[data-theme="macos-frost"] body {
  background: var(--bg) !important;
  background-attachment: fixed !important;
}

/* ===== 顶部栏 ===== */
:root[data-theme="macos-frost"] .headerbar {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(255, 255, 255, 0.42) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.03) !important;
  border-radius: 0 0 18px 18px;
  position: relative;
}
:root[data-theme="macos-frost"] .headerbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .7;
  border-radius: inherit;
}

/* ===== 主布局容器（左栏、列表、阅读区）===== */
:root[data-theme="macos-frost"] #sidebar,
:root[data-theme="macos-frost"] #listPane,
:root[data-theme="macos-frost"] #readerPane {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(26px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.05) !important;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
:root[data-theme="macos-frost"] #listPane::before,
:root[data-theme="macos-frost"] #readerPane::before,
:root[data-theme="macos-frost"] #sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .75;
}

/* ===== 各种弹窗（你项目里很多）===== */
:root[data-theme="macos-frost"] .modal,
:root[data-theme="macos-frost"] .content-modal {
  background: rgba(3, 7, 18, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

:root[data-theme="macos-frost"] .modal__box,
:root[data-theme="macos-frost"] #readModal .modal__box,
:root[data-theme="macos-frost"] .content-modal__box {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.28) 72%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  position: relative;
  overflow: hidden;
}

/* 内高光+内阴影，做厚度 */
:root[data-theme="macos-frost"] .modal__box::before,
:root[data-theme="macos-frost"] #readModal .modal__box::before,
:root[data-theme="macos-frost"] .content-modal__box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
}
:root[data-theme="macos-frost"] .modal__box::after,
:root[data-theme="macos-frost"] #readModal .modal__box::after,
:root[data-theme="macos-frost"] .content-modal__box::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(15, 23, 42, 0.025);
  pointer-events: none;
}

/* 阅读弹窗里的顶部条也要玻璃 */
:root[data-theme="macos-frost"] .read-modal-header,
:root[data-theme="macos-frost"] .read-modal-header.mac-like {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.25) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.33) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

/* ===== 列表里的卡片 ===== */
:root[data-theme="macos-frost"] .note-list .note-item {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.045) !important;
  position: relative;
  overflow: hidden;
}
:root[data-theme="macos-frost"] .note-list .note-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: .8;
  pointer-events: none;
}

/* ===== 按钮：玻璃胶囊 ===== */
:root[data-theme="macos-frost"] .btn {
  background: radial-gradient(circle at 12% 5%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.25) 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
:root[data-theme="macos-frost"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
}

/* ===== 滚动条：淡玻璃 ===== */
:root[data-theme="macos-frost"] #sidebar::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] #listPane::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] #readerPane::-webkit-scrollbar-thumb,
:root[data-theme="macos-frost"] .read-modal-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}
:root[data-theme="macos-frost"] #sidebar::-webkit-scrollbar-track,
:root[data-theme="macos-frost"] #listPane::-webkit-scrollbar-track,
:root[data-theme="macos-frost"] #readerPane::-webkit-scrollbar-track {
  background: rgba(248, 250, 252, 0.08) !important;
}

/* ===== 夜间：保持毛玻璃，不要黑块 ===== */
:root[data-theme="macos-frost"][data-color-scheme="dark"] {
  --bg: radial-gradient(circle at 10% 0%, rgba(148, 163, 184, 0.03) 0%, rgba(15, 23, 42, 1) 70%);
  --panel: rgba(7, 11, 18, 0.35);
  --panel-elevated: rgba(8, 12, 19, 0.38);
  --text: #e2e8f0;
  --muted: rgba(203, 213, 225, 0.75);
  --border: rgba(255, 255, 255, 0.08);
}
:root[data-theme="macos-frost"][data-color-scheme="dark"] .modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #readModal .modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] .content-modal__box,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #sidebar,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #listPane,
:root[data-theme="macos-frost"][data-color-scheme="dark"] #readerPane {
  background: linear-gradient(160deg,
    rgba(14, 20, 30, 0.78) 0%,
    rgba(14, 20, 30, 0.25) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35) !important;
}


/* === macOS Frost Theme · Rebuild === */
:root[data-theme="macos-frost"] {
  --mac-bg: rgba(255, 255, 255, 0.55);
  --mac-border-light: rgba(255, 255, 255, 0.6);
  --mac-border-dark: rgba(0, 0, 0, 0.08);
  --mac-blur: 24px;
  --mac-radius: 14px;
  --mac-shadow: 0 10px 30px rgba(0,0,0,0.06);
  --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* 全局背景（淡灰白渐变 + 光晕） */
:root[data-theme="macos-frost"] body {
  background: linear-gradient(180deg, #f8f9fb 0%, #f2f3f5 100%);
  font-family: var(--mac-font);
  color: #222;
}

/* === 主结构玻璃层 === */
:root[data-theme="macos-frost"] #sidebar,
:root[data-theme="macos-frost"] #listPane,
:root[data-theme="macos-frost"] #readerPane {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: var(--mac-shadow);
  border-radius: var(--mac-radius);
  overflow: hidden;
}

/* 用伪元素实现真正的毛玻璃 */
:root[data-theme="macos-frost"] #sidebar::before,
:root[data-theme="macos-frost"] #listPane::before,
:root[data-theme="macos-frost"] #readerPane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mac-radius);
  background: var(--mac-bg);
  backdrop-filter: blur(var(--mac-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--mac-blur)) saturate(1.3);
  box-shadow:
    inset 0 1px 0 var(--mac-border-light),
    inset 0 -1px 0 var(--mac-border-dark),
    var(--mac-shadow);
  pointer-events: none;
  z-index: -1;
}

/* === 顶栏 === */
:root[data-theme="macos-frost"] .headerbar {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(var(--mac-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--mac-blur)) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* === 卡片 / 笔记项 === */
:root[data-theme="macos-frost"] .note-item {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 12px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}
:root[data-theme="macos-frost"] .note-item:hover {
  background: rgba(255,255,255,0.65);
  transform: translateY(-2px);
}

/* === 弹窗 === */
:root[data-theme="macos-frost"] .modal__box {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 25px 60px rgba(0,0,0,0.1);
}

/* === 滚动条（淡灰） === */
:root[data-theme="macos-frost"] ::-webkit-scrollbar-thumb {
  background: rgba(180,180,190,0.35);
  border-radius: 10px;
}

/* === 夜间配色 === */
:root[data-theme="macos-frost"][data-color-scheme="dark"] {
  --mac-bg: rgba(30,30,32,0.45);
  --mac-border-light: rgba(255,255,255,0.1);
  --mac-border-dark: rgba(0,0,0,0.3);
  --mac-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
:root[data-theme="macos-frost"][data-color-scheme="dark"] body {
  background: linear-gradient(180deg, #202124 0%, #1a1b1d 100%);
  color: #eee;
}


/* ============================
   Nebula Drift · 补丁包
   1) 减薄 sidebar / readerPane 的“雾”
   2) 顶部芯片按钮改为深空芯片
   3) 左侧选中态改为星云高亮
   ============================ */

/* 1) 去掉白雾：覆盖全局的 ::before 奶白背景，换成深空半透明 */
:root[data-theme="nebula-drift"] #sidebar::before,
:root[data-theme="nebula-drift"] #readerPane::before {
  background: radial-gradient(circle at 15% 10%,
              rgba(15, 23, 42, 0.75) 0%,
              rgba(15, 23, 42, 0.18) 65%) !important; /* 深空，而不是奶白 */
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* 让容器本体更清透一点（和 listPane 统一气质） */
:root[data-theme="nebula-drift"] #sidebar,
:root[data-theme="nebula-drift"] #readerPane {
  background: rgba(12, 14, 26, 0.18) !important;  /* 从 0.28 降到 0.18 更通透 */
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* 2) 顶部“搜索/快捷记录/最近更新”等芯片：用深空胶囊而不是霓虹渐变 */
:root[data-theme="nebula-drift"] .headerbar .btn,
:root[data-theme="nebula-drift"] .toolbar .btn,
:root[data-theme="nebula-drift"] .segmented .btn {
  background: rgba(15, 23, 42, 0.55) !important;           /* 深空底 */
  border: 1px solid rgba(148, 163, 184, 0.25) !important;  /* 冷灰描边 */
  color: #e2e8f0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* 芯片的激活/当前态（比如“最近更新”被选中） */
:root[data-theme="nebula-drift"] .headerbar .btn.is-active,
:root[data-theme="nebula-drift"] .toolbar .btn.is-active,
:root[data-theme="nebula-drift"] .segmented .btn.is-active {
  background: radial-gradient(circle at 30% 20%,
              rgba(139, 92, 246, 0.55) 0%,
              rgba(236, 72, 153, 0.35) 80%) !important;     /* 星云紫粉光 */
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.4) !important;
}

/* 如果你的芯片没有 is-active class，用 [aria-pressed=true] 或 .active 也兜住 */
:root[data-theme="nebula-drift"] .headerbar .btn[aria-pressed="true"],
:root[data-theme="nebula-drift"] .toolbar .btn.active,
:root[data-theme="nebula-drift"] .segmented .btn.active {
  background: radial-gradient(circle at 30% 20%,
              rgba(139, 92, 246, 0.55) 0%,
              rgba(236, 72, 153, 0.35) 80%) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.4) !important;
}

/* 3) 左侧 sidebar 的选中项：从浅灰改成“星云流光” */
:root[data-theme="nebula-drift"] #sidebar .menu-list .is-active,
:root[data-theme="nebula-drift"] #sidebar .menu-list .active,
:root[data-theme="nebula-drift"] #sidebar .menu-list li[aria-current="true"] {
  background: linear-gradient(135deg,
              rgba(88, 28, 135, 0.45),
              rgba(236, 72, 153, 0.28)) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #e5e7eb !important;
}

/* 选中项的 hover 更亮一点 */
:root[data-theme="nebula-drift"] #sidebar .menu-list .is-active:hover,
:root[data-theme="nebula-drift"] #sidebar .menu-list .active:hover {
  background: linear-gradient(135deg,
              rgba(139, 92, 246, 0.55),
              rgba(236, 72, 153, 0.35)) !important;
}

/* 普通项 hover：深空浅亮，不要奶白 */
:root[data-theme="nebula-drift"] #sidebar .menu-list li:hover {
  background: rgba(15, 23, 42, 0.45) !important;
  color: #e2e8f0 !important;
}










/* ============================================================
   通用输入控件修复补丁 —— 让各主题下输入/搜索框都协调
   ============================================================ */

/* 默认浅色主题（glass、bright-bento、pastel-frost、moss-paper、ivory-mist） */
:root[data-theme="glass"],
:root[data-theme="bright-bento"],
:root[data-theme="pastel-frost"],
:root[data-theme="moss-paper"],
:root[data-theme="ivory-mist"] {
  --field-bg: rgba(255, 255, 255, 0.8);
  --field-border: rgba(200, 200, 200, 0.6);
  --field-text: #222;
}

/* macOS Frost */
:root[data-theme="macos-frost"] {
  --field-bg: rgba(255, 255, 255, 0.6);
  --field-border: rgba(180, 180, 180, 0.5);
  --field-text: #1e293b;
}

/* Aqua Bloom（水光） */
:root[data-theme="aqua-bloom"] {
  --field-bg: rgba(255, 255, 255, 0.8);
  --field-border: rgba(193, 232, 255, 0.8);
  --field-text: #0f172a;
}

/* Sunset Mirage（夕阳） */
:root[data-theme="sunset-mirage"] {
  --field-bg: rgba(255, 247, 236, 0.9);
  --field-border: rgba(255, 190, 143, 0.7);
  --field-text: #402b3a;
}

/* Frostbyte（极地） */
:root[data-theme="frostbyte"] {
  --field-bg: rgba(255, 255, 255, 0.9);
  --field-border: rgba(163, 192, 214, 0.6);
  --field-text: #0f172a;
}

/* Nebula Drift（星云） */
:root[data-theme="nebula-drift"] {
  --field-bg: rgba(15, 23, 42, 0.55);
  --field-border: rgba(139, 92, 246, 0.4);
  --field-text: #e2e8f0;
}

/* Vanta Noir（黑镜） */
:root[data-theme="vanta-noir"] {
  --field-bg: rgba(15, 23, 42, 0.65);
  --field-border: rgba(120, 130, 150, 0.4);
  --field-text: #e2e8f0;
}

/* Cyber Sakura（赛博樱） */
:root[data-theme="cyber-sakura"] {
  --field-bg: rgba(26, 7, 25, 0.6);
  --field-border: rgba(255, 128, 191, 0.45);
  --field-text: #ffe4ff;
}

/* Mono Ink（黑白） */
:root[data-theme="mono-ink"] {
  --field-bg: rgba(255, 255, 255, 0.85);
  --field-border: rgba(70, 70, 70, 0.5);
  --field-text: #111;
}


.search:focus,
.quick-add:focus,
.sort:focus,
.field-input:focus,
.template:focus {
  outline: none;
  border-color: var(--primary, var(--field-border));
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  transform: scale(1.01);
}

.search:hover,
.quick-add:hover,
.sort:hover,
.field-input:hover,
.template:hover {
  background: rgba(255,255,255,0.08);
}









/* =========================================================
   侧栏项（通用基座）—— 变量驱动，适配所有主题
   ========================================================= */

/* 默认变量（浅色主题的兜底） */
:root {
  --side-bg: var(--panel);
  --side-text: var(--text);
  --side-border: transparent;

  --side-hover-bg: color-mix(in oklab, var(--panel) 80%, #fff);
  --side-hover-border: color-mix(in oklab, var(--border) 70%, #fff);

  --side-active-bg: #EEF4FF;
  --side-active-border: color-mix(in oklab, var(--primary) 20%, var(--border));
  --side-active-text: var(--text);
}

/* 通用样式（吃变量） */
.side-list li{
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  background: var(--side-bg);
  color: var(--side-text);
  border: 1px solid var(--side-border);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.side-list li:hover{
  background: var(--side-hover-bg);
  border-color: var(--side-hover-border);
}

.side-list li.active,
.side-list li[aria-current="true"],
.side-list li.is-active{
  background: var(--side-active-bg) !important;
  border-color: var(--side-active-border) !important;
  color: var(--side-active-text, var(--side-text)) !important;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--side-active-border) 25%, transparent);
}

/* =========================================================
   各主题的侧栏配色（只改变量）
   ========================================================= */

/* 1) Nebula Drift（星云·深色） */
:root[data-theme="nebula-drift"]{
  --side-bg: rgba(15,23,42,.35);
  --side-text:#e2e8f0;
  --side-border: rgba(148,163,184,.16);

  --side-hover-bg: rgba(15,23,42,.5);
  --side-hover-border: rgba(148,163,184,.28);

  --side-active-bg: linear-gradient(135deg, rgba(88,28,135,.55), rgba(236,72,153,.35));
  --side-active-border: rgba(168,85,247,.45);
  --side-active-text:#e5e7eb;
}

/* 2) Vanta Noir（黑镜·深色） */
:root[data-theme="vanta-noir"]{
  --side-bg: rgba(15,23,42,.5);
  --side-text:#e5e7eb;
  --side-border: rgba(148,163,184,.18);

  --side-hover-bg: rgba(15,23,42,.65);
  --side-hover-border: rgba(148,163,184,.28);

  --side-active-bg: linear-gradient(135deg, rgba(30,41,59,.85), rgba(2,6,23,.55));
  --side-active-border: rgba(148,163,184,.35);
  --side-active-text:#f1f5f9;
}

/* 3) Cyber Sakura（赛博樱·深色霓虹） */
:root[data-theme="cyber-sakura"]{
  --side-bg: rgba(3,7,18,.45);
  --side-text:#ffe4ff;
  --side-border: rgba(255,128,191,.22);

  --side-hover-bg: rgba(3,7,18,.6);
  --side-hover-border: rgba(255,184,222,.35);

  --side-active-bg: linear-gradient(135deg, rgba(255,128,191,.4), rgba(128,208,255,.22));
  --side-active-border: rgba(255,184,222,.45);
  --side-active-text:#fff0ff;
}

/* 4) macOS Frost（浅玻璃） */
:root[data-theme="macos-frost"]{
  --side-bg: rgba(255,255,255,.6);
  --side-text:#1e293b;
  --side-border: rgba(180,180,180,.35);

  --side-hover-bg: rgba(255,255,255,.8);
  --side-hover-border: rgba(200,200,200,.55);

  --side-active-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  --side-active-border: rgba(180,180,180,.7);
}

/* 5) Aqua Bloom（水光） */
:root[data-theme="aqua-bloom"]{
  --side-bg: rgba(255,255,255,.8);
  --side-text:#0f172a;
  --side-border: rgba(193,232,255,.6);

  --side-hover-bg: rgba(255,255,255,.95);
  --side-hover-border: rgba(193,232,255,.85);

  --side-active-bg: linear-gradient(135deg, rgba(141,235,255,.9), rgba(79,209,197,.7));
  --side-active-border: rgba(141,235,255,.9);
}

/* 6) Sunset Mirage（夕阳） */
:root[data-theme="sunset-mirage"]{
  --side-bg: rgba(255,247,236,.85);
  --side-text:#402b3a;
  --side-border: rgba(255,190,143,.45);

  --side-hover-bg: rgba(255,247,236,.95);
  --side-hover-border: rgba(255,190,143,.7);

  --side-active-bg: linear-gradient(135deg, rgba(255,183,77,.85), rgba(244,143,177,.5));
  --side-active-border: rgba(255,190,143,.8);
}

/* 7) Moss Paper（自然） */
:root[data-theme="moss-paper"]{
  --side-bg: #fff;
  --side-text:#1f3425;
  --side-border: rgba(145,192,149,.45);

  --side-hover-bg: rgba(239,250,240,.9);
  --side-hover-border: rgba(145,192,149,.6);

  --side-active-bg: linear-gradient(135deg, rgba(67,185,127,.22), rgba(223,244,223,.9));
  --side-active-border: rgba(67,185,127,.55);
}

/* 8) Pastel Frost（马卡龙） */
:root[data-theme="pastel-frost"]{
  --side-bg: rgba(255,255,255,.9);
  --side-text:#513b4d;
  --side-border: rgba(255,211,224,.6);

  --side-hover-bg: rgba(255,240,247,.92);
  --side-hover-border: rgba(255,211,224,.8);

  --side-active-bg: linear-gradient(135deg, rgba(255,158,181,.85), rgba(191,244,229,.65));
  --side-active-border: rgba(255,189,206,.9);
}

/* 9) Frostbyte（极地） */
:root[data-theme="frostbyte"]{
  --side-bg: rgba(255,255,255,.9);
  --side-text:#0f172a;
  --side-border: rgba(163,192,214,.4);

  --side-hover-bg: rgba(255,255,255,1);
  --side-hover-border: rgba(163,192,214,.6);

  --side-active-bg: linear-gradient(135deg, rgba(14,165,233,.2), rgba(255,255,255,.95));
  --side-active-border: rgba(14,165,233,.55);
}

/* 10) Ivory Mist（系统白）/ Glass / Bright-bento（浅色系可共用默认值）
   如果要更个性，也可单独写一段覆盖变量。 */





/* =========================================================
   外观与界面（设置面板）主题适配补丁
   目标：修复暗色主题下按钮文字仍然是黑色的问题
   作用范围：#contentModalTheme 内部
   放在 CSS 最底部
   ========================================================= */

/* 统一的“设置面板”变量（默认按浅色系兜底） */
#contentModalTheme {
  --ui-surface: var(--panel, #fff);
  --ui-text: var(--text, #111);
  --ui-muted: var(--muted, #64748b);
  --ui-border: var(--border, rgba(0,0,0,.08));

  /* 主题按钮/控件（默认浅色） */
  --ui-btn-bg: rgba(255,255,255,.9);
  --ui-btn-text: #0f172a;
  --ui-btn-border: rgba(0,0,0,.08);
  --ui-btn-bg-hover: rgba(255,255,255,1);
}

/* 面板本体跟主题保持一致的前景/背景 */
#contentModalTheme .ui-settings-modal{
  color: var(--ui-text);
}
#contentModalTheme .ui-setting-hint{ color: var(--ui-muted); }

/* 主题按钮（左侧你那一列主题项）统一吃 --ui-btn-* 变量 */
#contentModalTheme .theme-grid .btn{
  background: var(--ui-btn-bg) !important;
  color: var(--ui-btn-text) !important;
  border: 1px solid var(--ui-btn-border) !important;
}
#contentModalTheme .theme-grid .btn:hover{
  background: var(--ui-btn-bg-hover) !important;
}

/* 折叠头、行内控件的文字也跟随 */
#contentModalTheme .ui-setting-head{ color: var(--ui-text); }
#contentModalTheme .ui-setting-row > span,
#contentModalTheme label{ color: var(--ui-text); }

/* 输入/选择控件在面板内的适配（不影响全局 toolbar） */
#contentModalTheme .ui-setting-body select,
#contentModalTheme .ui-setting-body input[type="text"],
#contentModalTheme .ui-setting-body input[type="number"]{
  background: var(--field-bg, var(--ui-btn-bg));
  color: var(--field-text, var(--ui-btn-text));
  border: 1px solid var(--field-border, var(--ui-btn-border));
  border-radius: 12px;
  height: 38px;
  padding: 0 12px;
}

/* range 的滑轨与提示色 */
#contentModalTheme .ui-setting-body input[type="range"]{
  accent-color: var(--primary, #8b5cf6);
}

/* -------------------------
   深色主题的专属变量覆盖
   ------------------------- */

/* 星云（nebula-drift） */
:root[data-theme="nebula-drift"] #contentModalTheme{
  --ui-text: #e2e8f0;
  --ui-muted: rgba(186,197,211,.7);
  --ui-btn-bg: rgba(15,23,42,.60);
  --ui-btn-text: #e2e8f0;
  --ui-btn-border: rgba(148,163,184,.28);
  --ui-btn-bg-hover: rgba(15,23,42,.75);
}

/* 黑镜（vanta-noir） */
:root[data-theme="vanta-noir"] #contentModalTheme{
  --ui-text: #e5e7eb;
  --ui-muted: rgba(203,213,225,.7);
  --ui-btn-bg: rgba(15,23,42,.65);
  --ui-btn-text: #e5e7eb;
  --ui-btn-border: rgba(148,163,184,.28);
  --ui-btn-bg-hover: rgba(15,23,42,.8);
}

/* 赛博樱（cyber-sakura） */
:root[data-theme="cyber-sakura"] #contentModalTheme{
  --ui-text: #ffe4ff;
  --ui-muted: rgba(255,214,255,.65);
  --ui-btn-bg: rgba(26,7,25,.55);
  --ui-btn-text: #ffe4ff;
  --ui-btn-border: rgba(255,128,191,.35);
  --ui-btn-bg-hover: rgba(26,7,25,.7);
}

/* 其它浅色主题（macOS frost、frostbyte、aqua、sunset、moss、pastel、ivory）
   用默认的浅色变量即可；若想更个性可以在这里继续加覆盖块。 */







/* =======================================================
   Cyber Sakura 赛博樱 · 通透修复补丁
   放在样式表最后
   目标：
   1) 降低奶白感，提升通透与对比
   2) 玻璃移到 ::before，避免困住 fixed 元素
   3) 顶栏/卡片/弹窗一致的粉蓝霓虹质感
   ======================================================= */

/* 主题变量微调：深底+高对比粉蓝霓虹 */
:root[data-theme="cyber-sakura"]{
  --bg: radial-gradient(circle at 50% -20%, rgba(255, 128, 191, 0.45) 0%, rgba(3, 7, 18, 1) 58%);
  --text: #ffe4ff;
  --muted: rgba(255,214,255,.70);
  --border: rgba(255,128,191,.28);
  --primary: #ff80bf;
  --primary-2: #80d0ff;

  /* 输入/控件变量（避免黑字） */
  --field-bg: rgba(26,7,25,.55);
  --field-border: rgba(255,128,191,.35);
  --field-text: #ffe4ff;
}

/* 背景两层：底层深空 + 顶层粉蓝雾（被 blur 吃到） */
:root[data-theme="cyber-sakura"] body{
  background: radial-gradient(circle at 48% -12%, rgba(255,128,191,.35) 0%, rgba(3,7,18,1) 60%) !important;
  background-attachment: fixed !important;
  color: var(--text);
  position: relative;
}
:root[data-theme="cyber-sakura"] body::after{
  content:"";
  position:fixed; inset:-10%;
  background:
    radial-gradient(40rem 28rem at 20% 20%, rgba(255,128,191,.28) 0, rgba(255,128,191,0) 60%),
    radial-gradient(36rem 24rem at 80% 10%, rgba(128,208,255,.22) 0, rgba(128,208,255,0) 60%);
  filter: blur(36px) saturate(150%);
  pointer-events:none; z-index:-1;
}

/* 顶部栏：深底半透 + 细粉色底边线 */
:root[data-theme="cyber-sakura"] .headerbar{
  background: linear-gradient(180deg, rgba(10,13,22,.72) 0%, rgba(10,13,22,.28) 100%) !important;
  border-bottom: 1px solid rgba(255,184,222,.28) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.35) !important;
}

/* ===== 关键：容器本体透明，用 ::before 铺玻璃（避免困住 fixed） ===== */
:root[data-theme="cyber-sakura"] #sidebar,
:root[data-theme="cyber-sakura"] #readerPane{
  background: transparent !important;
  position: relative;
  border-radius: 16px !important;
  border: 1px solid transparent !important; /* 视觉边线放到 ::before */
}
:root[data-theme="cyber-sakura"] #sidebar::before,
:root[data-theme="cyber-sakura"] #readerPane::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(10,13,22,.70) 0%, rgba(10,13,22,.22) 100%);
  border: 1px solid rgba(255,184,222,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  pointer-events:none; z-index:-1;
}

/* 中间 listPane 当前就是对的；确保也走 ::before（若你已做可忽略） */
:root[data-theme="cyber-sakura"] #listPane{
  background: transparent !important;
  position: relative;
}
:root[data-theme="cyber-sakura"] #listPane::before{
  content:"";
  position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(160deg, rgba(10,13,22,.65) 0%, rgba(10,13,22,.18) 100%);
  border: 1px solid rgba(255,184,222,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  pointer-events:none; z-index:-1;
}

/* 主题按钮/芯片：默认用“深空胶囊”；高亮时加粉蓝晕光 */
:root[data-theme="cyber-sakura"] .headerbar .btn,
:root[data-theme="cyber-sakura"] .toolbar .btn,
:root[data-theme="cyber-sakura"] .segmented .btn{
  background: rgba(10,13,22,.55) !important;
  color:#ffe4ff !important;
  border:1px solid rgba(255,184,222,.28) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}
:root[data-theme="cyber-sakura"] .headerbar .btn.is-active,
:root[data-theme="cyber-sakura"] .toolbar .btn.is-active,
:root[data-theme="cyber-sakura"] .segmented .btn.is-active,
:root[data-theme="cyber-sakura"] .headerbar .btn[aria-pressed="true"]{
  background: radial-gradient(circle at 30% 20%, rgba(255,128,191,.55) 0%, rgba(128,208,255,.30) 90%) !important;
  border-color: rgba(255,184,222,.45) !important;
  box-shadow: 0 0 18px rgba(255,128,191,.45) !important;
}

/* 笔记卡片：更通透、右上角粉晕 */
:root[data-theme="cyber-sakura"] .note-list .note-item{
  background: linear-gradient(160deg, rgba(10,13,22,.70) 0%, rgba(10,13,22,.20) 100%) !important;
  border:1px solid rgba(255,184,222,.28) !important;
  border-radius:14px !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.35) !important;
  position:relative; overflow:hidden;
}
:root[data-theme="cyber-sakura"] .note-list .note-item::after{
  content:""; position:absolute; right:-28px; top:-28px; width:100px; height:100px;
  background: radial-gradient(circle, rgba(255,128,191,.38) 0, rgba(255,128,191,0) 70%);
  filter: blur(14px); pointer-events:none;
}

/* 弹窗：薄玻璃 + 粉蓝内光 */
:root[data-theme="cyber-sakura"] .content-modal__box,
:root[data-theme="cyber-sakura"] #readModal .modal__box{
  background: linear-gradient(160deg, rgba(10,13,22,.76) 0%, rgba(10,13,22,.28) 100%) !important;
  border:1px solid rgba(255,184,222,.30) !important;
  border-radius:18px !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  position:relative; overflow:hidden;
}
:root[data-theme="cyber-sakura"] .content-modal__box::before,
:root[data-theme="cyber-sakura"] #readModal .modal__box::before{
  content:""; position:absolute; inset:-25% -10%;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,128,191,.30) 0, rgba(255,128,191,0) 55%),
    radial-gradient(circle at 90% 80%, rgba(128,208,255,.25) 0, rgba(128,208,255,0) 55%);
  filter: blur(22px); mix-blend-mode: screen; pointer-events:none;
}

/* 侧栏选中态：粉蓝流光，但更薄、更透 */
:root[data-theme="cyber-sakura"] .side-list li.active,
:root[data-theme="cyber-sakura"] .side-list li[aria-current="true"],
:root[data-theme="cyber-sakura"] .side-list li.is-active{
  background: linear-gradient(135deg, rgba(255,128,191,.32), rgba(128,208,255,.18)) !important;
  border-color: rgba(255,184,222,.45) !important;
  color:#fff0ff !important;
}

/* 设置面板里的按钮文字也要浅色（前面你提过的问题） */
:root[data-theme="cyber-sakura"] #contentModalTheme{
  --ui-text: #ffe4ff;
  --ui-muted: rgba(255,214,255,.65);
  --ui-btn-bg: rgba(26,7,25,.55);
  --ui-btn-text: #ffe4ff;
  --ui-btn-border: rgba(255,128,191,.35);
  --ui-btn-bg-hover: rgba(26,7,25,.7);
}
/* =======================================================
   Cyber Sakura 赛博樱 · 通透修复补丁
   放在样式表最后
   目标：
   1) 降低奶白感，提升通透与对比
   2) 玻璃移到 ::before，避免困住 fixed 元素
   3) 顶栏/卡片/弹窗一致的粉蓝霓虹质感
   ======================================================= */

/* 主题变量微调：深底+高对比粉蓝霓虹 */