/* =========================
   主题与全局令牌（去重版）
   ========================= */
:root{
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif: "Ibarra Real Nova","Source Serif Pro","Times New Roman",serif;
  --h1:18px; --h2:16px; --h3:14px; --body:14px; --small:12px;
  --lh:1.6;

  --header-h:64px;
  --sidebar-w:220px;
  --reader-w:40vw;
  --resizer-w:6px;.ui-setting-body.active

  --sticky-top-h:52px;
  --sticky-btm-h:56px;

  --bg:#fafbff;
  --panel:#fff;
  --text:#111827;
  --muted:#6B7280;
  --muted-2:#8A9099;
  --border:#E6E8EF;
  --border-2:#F1F2F6;

  --primary:#4C8EFF;
  --primary-2:#70A6FF;
  --accent:#16a34a;
  --gradient: linear-gradient(135deg,#4C8EFF,#70A6FF);

  --card-radius:16px;
  --soft-shadow: 0 10px 24px rgba(17,24,39,.08);
  --btn-glow: 0 8px 20px rgba(76,142,255,.22);
  --glass: blur(10px) saturate(120%);

  --field-bg:#ffffff;
  --field-text: var(--text);
  --field-border:#dfe4f2;
  --field-placeholder: color-mix(in oklab, var(--text) 45%, #fff);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);

  --scrollbar-track:#eef2ff;
  --scrollbar-thumb:#c9d6ff;
  --scrollbar-thumb-hover:#b2c5ff;

  --hover-lift: translateY(-2px);
  --press: scale(.985);

  /* 抬升面板避免黑底 */
  --panel-elevated: var(--panel);
}

/* ===== 主题集 ===== */

/* 1) Bright Bento */
:root[data-theme="bright-bento"][data-color-scheme="light"]{
  --bg:#FAFBFF; --panel:#FFFFFF; --text:#111827;
  --muted:#6B7280; --muted-2:#8A9099;
  --border:#E6E8EF; --border-2:#F1F2F6;
  --primary:#4C8EFF; --primary-2:#70A6FF; --accent:#16a34a;
  --gradient: linear-gradient(135deg,#4C8EFF,#70A6FF);
  --btn-glow: 0 8px 20px rgba(76,142,255,.22);
  --card-radius:16px; --soft-shadow: 0 10px 24px rgba(17,24,39,.08);
  --glass: blur(10px) saturate(120%);
  --field-bg:#ffffff; --field-border:#dfe4f2;

  --scrollbar-track:#eef2ff;
  --scrollbar-thumb:#c9d6ff;
  --scrollbar-thumb-hover:#b2c5ff;
}

/* 2) Neumorphism */
:root[data-theme="neumorphism"][data-color-scheme="light"]{
  --bg:#EEF2F7; --panel:#EEF2F7; --text:#1F2937;
  --muted:#6B7280; --muted-2:#8B93A1;
  --border:#E3E8F0; --border-2:#DDE3ED;
  --primary:#5C7CFA; --primary-2:#7BA1FF; --accent:#10b981;
  --gradient: linear-gradient(135deg,#5C7CFA,#7BA1FF);
  --btn-glow: 0 12px 26px rgba(92,124,250,.22);
  --card-radius:18px; --soft-shadow: 9px 9px 18px #c9d3e1, -9px -9px 18px #fff;
  --glass: blur(8px) saturate(110%);
  --field-bg:#EEF2F7; --field-border:#d7deea;

  --scrollbar-track:#e5eaf3;
  --scrollbar-thumb:#cfd8ea;
  --scrollbar-thumb-hover:#c1cce5;
}

/* 3) Glass（默认） */
:root[data-theme="glass"][data-color-scheme="light"]{
  --bg: linear-gradient(180deg,#F6F9FF 0%, #FFFFFF 60%);
  --panel: rgba(255,255,255,.72);
  --text:#0F172A; --muted:#64748B; --muted-2:#8A9BB4;
  --border: rgba(15,23,42,.12); --border-2: rgba(15,23,42,.14);
  --primary:#7C5CFF; --primary-2:#00E0FF; --accent:#22c55e;
  --gradient: linear-gradient(135deg,#7C5CFF,#00E0FF);
  --btn-glow: 0 10px 28px rgba(124,92,255,.25), 0 6px 18px rgba(0,224,255,.18);
  --card-radius:16px; --soft-shadow: 0 20px 40px rgba(36,38,45,.10);
  --glass: blur(18px) saturate(130%);
  --field-bg: rgba(255,255,255,.9); --field-border: rgba(15,23,42,.15);

  --scrollbar-track: rgba(0,0,0,.06);
  --scrollbar-thumb: rgba(124,92,255,.35);
  --scrollbar-thumb-hover: rgba(124,92,255,.55);
}

/* 4) Editorial Pro */
:root[data-theme="editorial"][data-color-scheme="light"]{
  --bg:#FFFFFF; --panel:#FFFFFF; --text:#111111;
  --muted:#5B5F68; --muted-2:#7A7F89;
  --border:#EDEFF3; --border-2:#F5F6F8;
  --primary:#111111; --primary-2:#3E63DD; --accent:#111111;
  --gradient: linear-gradient(135deg,#111,#3E63DD);
  --btn-glow: 0 10px 24px rgba(17,17,17,.12);
  --card-radius:14px; --soft-shadow: 0 10px 24px rgba(0,0,0,.06);
  --glass: blur(8px) saturate(110%);

  --scrollbar-track:#f2f3f6;
  --scrollbar-thumb:#d6dae4;
  --scrollbar-thumb-hover:#c6cbda;
}

/* 5) Cyber Prism */
:root[data-theme="cyber-prism"][data-color-scheme="light"]{
  --bg: radial-gradient(1200px 600px at 20% -10%, #e6fbff 0, #fff 40%), #ffffff;
  --panel: rgba(255,255,255,.86);
  --text:#0b1020; --muted:#5e6a86; --muted-2:#7b86a3;
  --border: rgba(11,16,32,.12); --border-2: rgba(11,16,32,.16);
  --primary:#00E0FF; --primary-2:#FF00FF; --accent:#38d9a9;
  --gradient: linear-gradient(135deg,#00E0FF,#FF00FF);
  --btn-glow: 0 8px 26px rgba(0,224,255,.26), 0 6px 18px rgba(255,0,255,.18);
  --card-radius:18px; --soft-shadow: 0 18px 40px rgba(20,24,44,.10);
  --glass: blur(16px) saturate(135%);
  --field-bg:#ffffff; --field-border: rgba(11,16,32,.18);

  --scrollbar-track: rgba(0,0,0,.06);
  --scrollbar-thumb: rgba(0,224,255,.45);
  --scrollbar-thumb-hover: rgba(255,0,255,.45);
}

/* 6) Pastel Frost */
:root[data-theme="pastel-frost"][data-color-scheme="light"]{
  --bg: linear-gradient(180deg,#fdf8ff 0%, #f3fcff 60%);
  --panel: rgba(255,255,255,.92);
  --text:#1b2330; --muted:#6c768a; --muted-2:#8b94a9;
  --border:#eaeef6; --border-2:#f3f6fb;
  --primary:#9b87f5; --primary-2:#7cd4ff; --accent:#6ee7b7;
  --gradient: linear-gradient(135deg,#9b87f5,#7cd4ff);
  --btn-glow: 0 10px 24px rgba(155,135,245,.22);
  --card-radius:20px; --soft-shadow: 0 16px 36px rgba(27,35,48,.08);
  --glass: blur(14px) saturate(125%);
  --field-bg:#ffffff; --field-border:#dfe6fb;

  --scrollbar-track:#f2f6ff;
  --scrollbar-thumb:#d9e2ff;
  --scrollbar-thumb-hover:#c9d6ff;
}

/* 7) Mono Ink */
:root[data-theme="mono-ink"][data-color-scheme="light"]{
  --bg:#fafafa; --panel:#ffffff; --text:#111111;
  --muted:#63666d; --muted-2:#7a7f89;
  --border:#e9eaee; --border-2:#f1f2f6;
  --primary:#111111; --primary-2:#6b7280; --accent:#111111;
  --gradient: linear-gradient(135deg,#111,#444);
  --btn-glow: 0 8px 20px rgba(17,17,17,.12);
  --card-radius:14px; --soft-shadow: 0 10px 24px rgba(0,0,0,.06);
  --glass: blur(8px) saturate(110%);
  --field-bg:#fff; --field-border:#d9dadd;

  --scrollbar-track:#f0f0f0;
  --scrollbar-thumb:#d2d2d6;
  --scrollbar-thumb-hover:#bfbfc4;
}

/* 夜间模式覆盖 */
:root[data-color-scheme="dark"]{
  --bg:#0E1116; --panel:#12161D; --text:#E9EDF5;
  --muted:#A5ADBB; --muted-2:#96A0B2;
  --border:#1C2230; --border-2:#171C26;
  --field-bg:#12161D; --field-border:#2a3344; --field-text:#E9EDF5;
  --field-placeholder: color-mix(in oklab, #E9EDF5 45%, transparent);
  --scrollbar-track:#0f141c; --scrollbar-thumb:#2b3342; --scrollbar-thumb-hover:#394154;

  --panel-elevated:#1b2230;
}

/* =============== 全局基础 =============== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:var(--body)/var(--lh) var(--font-sans);
  overflow:hidden; position:relative;
  -webkit-tap-highlight-color: transparent;
}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0}
.spacer{flex:1}

#menuButton .icon{ height:40px; }

/* 评论按钮位置 */
.comment-trigger{ left:20px!important; bottom:70px!important; z-index:9!important; }

/* =============== 滚动条（统一为 8px 更纤细） =============== */
#sidebar,#listPane,#readerPane,.read-scroll,.read-modal-body{
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
#sidebar::-webkit-scrollbar,
#listPane::-webkit-scrollbar,
#readerPane::-webkit-scrollbar,
.read-scroll::-webkit-scrollbar,
.read-modal-body::-webkit-scrollbar{ width:8px; height:8px }
#sidebar::-webkit-scrollbar-track,
#listPane::-webkit-scrollbar-track,
#readerPane::-webkit-scrollbar-track,
.read-scroll::-webkit-scrollbar-track,
.read-modal-body::-webkit-scrollbar-track{ background: var(--scrollbar-track); border-radius:10px; }
#sidebar::-webkit-scrollbar-thumb,
#listPane::-webkit-scrollbar-thumb,
#readerPane::-webkit-scrollbar-thumb,
.read-scroll::-webkit-scrollbar-thumb,
.read-modal-body::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb); 
  border-radius:10px; 
  border:2px solid transparent; background-clip:content-box;
}
#sidebar::-webkit-scrollbar-thumb:hover,
#listPane::-webkit-scrollbar-thumb:hover,
#readerPane::-webkit-scrollbar-thumb:hover,
.read-scroll::-webkit-scrollbar-thumb:hover,
.read-modal-body::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover) }

/* =============== 头部栏 =============== */
.headerbar{
  position:relative; z-index:2; height:var(--header-h);
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--border);background: var(--panel);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:40px;height:40px;border-radius:10px;box-shadow:var(--soft-shadow)}
.brand h1{font-size:var(--h1);font-weight:800;white-space:nowrap;letter-spacing:.2px}

/* 顶部工具条输入/选择 */
.toolbar{display:flex;align-items:center;gap:10px;margin-left:auto;width:min(900px,100%);min-width:0}
.search,.quick-add,.sort,.field-input,.template{
  height:38px;padding:0 12px;border:1px solid var(--field-border);
  border-radius:12px;background:var(--field-bg);color:var(--field-text);min-width:0;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.search::placeholder,.quick-add::placeholder,.field-input::placeholder{ color: var(--field-placeholder) }
.search:focus,.quick-add:focus,.sort:focus,.field-input:focus,.template:focus{
  outline: none; box-shadow: var(--focus-ring); border-color: color-mix(in oklab, var(--primary) 36%, var(--field-border));
}
.search:hover,.quick-add:hover,.sort:hover,.field-input:hover,.template:hover{ transform: var(--hover-lift); }

/* 新拟态主题：输入默认凹陷 */
:root[data-theme="neumorphism"] .search,
:root[data-theme="neumorphism"] .quick-add,
:root[data-theme="neumorphism"] .sort,
:root[data-theme="neumorphism"] .field-input,
:root[data-theme="neumorphism"] .template{
  border-color: transparent;
  box-shadow: inset 6px 6px 12px #d1d9e6, inset -6px -6px 12px #ffffff;
}

/* 按钮 */
.btn{
  height:36px;padding:0 12px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel);color:var(--text);
  cursor:pointer;font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .2s ease;
}
.btn:hover{transform: var(--hover-lift);box-shadow:var(--soft-shadow)}
.btn:active{transform: var(--press)}
.btn.primary{ background:none;color:#fff;border-color:transparent;
    /*box-shadow:var(--btn-glow), inset 0 0 12px rgba(255,255,255,.25) */
}
.btn.secondary{     background: transparent;border: none; }
.btn.danger{ color:#b00020;border-color:#f1c7cd;background:var(--panel) }

/* 新拟态按钮调和 */
:root[data-theme="neumorphism"] .btn{ border-color: transparent; background:#EEF2F7; color:#1F2937; box-shadow: 9px 9px 18px #c9d3e1, -9px -9px 18px #fff; }
:root[data-theme="neumorphism"] .btn:hover{ filter: saturate(1.05) brightness(1.02); }
:root[data-theme="neumorphism"] .btn:active{ box-shadow: inset 6px 6px 12px #d1d9e6, inset -6px -6px 12px #ffffff; transform:none; }

/* 视图切换按钮高亮（修正非法 alpha） */
.view-switch .btn{height:32px}
.view-switch .btn.current{
  background: linear-gradient(45deg, #e5f3ff, #e9c3e2);
  box-shadow: var(--btn-glow), inset 0 0 12px rgba(240,233,223,.25);
  color:#111;
}

/* 左下角菜单 + 弹出菜单 */
.menu-btn{
  position:fixed;left:16px;bottom:16px;z-index:36;
  width:48px;height:48px;border-radius:14px;border:1px solid var(--border);
  background:var(--panel);display:flex;align-items:center;justify-content:center;box-shadow:var(--soft-shadow);
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer;
}
.menu-btn:hover{transform: var(--hover-lift); box-shadow: var(--soft-shadow)}
.menu-list{
  position:fixed;left:16px;bottom:72px;z-index:37;
  width:240px;background:var(--panel);border:1px solid var(--border);border-radius:16px;display:none;box-shadow:var(--soft-shadow);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.menu-list ul{list-style:none;margin:6px;padding:6px}
.menu-item{
  padding:10px 12px;border-radius:12px;cursor:pointer;color:var(--text);display:flex;align-items:center;gap:8px;
  border:1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.menu-item:hover{ background: color-mix(in oklab, var(--panel) 86%, var(--text) 14%); transform: translateX(4px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.menu-item:active{ transform: translateX(2px) }
.menu-mask{ position:fixed;inset:0;background:rgba(0,0,0,.15);backdrop-filter: blur(1px); z-index:36; display:none }

/* 主体布局 */
main.app{
  position:relative; z-index:1;
  height:clamp(70vh, calc(100vh - var(--header-h)), 93vh);
  display:grid;
  grid-template-columns:
    minmax(160px,var(--sidebar-w))
    var(--resizer-w)
    minmax(0,1fr)
    var(--resizer-w)
    minmax(320px,var(--reader-w));
  grid-template-areas:"sidebar resL list resR reader";
  overflow:hidden;
}
#sidebar,#listPane,#readerPane{min-width:0;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}

/* 左栏 */
#sidebar{grid-area:sidebar;padding:12px}
.side-section + .side-section{margin-top:18px}
.side-section h3{font-size:var(--h3);color:var(--muted);margin-bottom:8px;font-weight:800;letter-spacing:.2px}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{
  padding:8px 10px;border-radius:12px;cursor:pointer;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;border:1px solid transparent;background:var(--panel);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.side-list li+li{margin-top:8px}
.side-list li:hover{background: color-mix(in oklab, var(--panel) 86%, var(--text) 14%); transform: var(--hover-lift)}
.side-list li.active{ background:#EEF4FF;border-color: color-mix(in oklab, var(--primary) 20%, var(--border)) }

/* 新拟态列表 */
:root[data-theme="neumorphism"] .side-list li{ border-color: transparent; background:#EEF2F7; box-shadow: 6px 6px 12px #cfd7e4, -6px -6px 12px #fff; }
:root[data-theme="neumorphism"] .side-list li:hover{ box-shadow: 8px 8px 16px #c8d0e1, -8px -8px 16px #fff; }

/* 分割条 */
.resizer{width:var(--resizer-w);cursor:col-resize;background:
  linear-gradient(to right,transparent 0,var(--border-2) 40%,var(--border) 50%,var(--border-2) 60%,transparent 100%)}
.resizer:hover{background:
  linear-gradient(to right,transparent 0,var(--border) 40%,color-mix(in oklab, var(--border) 80%, #000) 50%,var(--border) 60%,transparent 100%)}

/* 列表/卡片容器 */
#listPane{grid-area:list;padding:12px}

/* 列表视图 */
/* 列表视图 */
.note-list.list .note-item{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(8px * var(--ui-density));
  padding: calc(14px * var(--ui-density));
  cursor: pointer;
  background: var(--panel-elevated);
  border-radius: var(--card-radius);
  margin-bottom: calc(10px * var(--ui-density));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  color: var(--text);
}

.note-list.list .note-item::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--card-radius) var(--card-radius) 0 0;background:var(--gradient);opacity:.22;
}
.note-list.list .note-item:hover{transform: var(--hover-lift);box-shadow:var(--soft-shadow);border-color: color-mix(in oklab, var(--primary) 16%, var(--border))}

/* 卡片视图 */
 
 /* 卡片视图：容器 */
.note-list.card{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(12px * var(--ui-density));
}



/* 卡片视图：卡片本体 */
.note-list.card .note-item{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: calc(14px * var(--ui-density));
  background: var(--panel-elevated);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  color: var(--text);
  display: flex; /* 按你的要求保持行内布局 */
  gap: calc(8px * var(--ui-density));
}

/*每个元素上方的横线装饰UI*/
/*.note-list.card .note-item::after{*/
/*  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--card-radius) var(--card-radius) 0 0;background:var(--gradient);opacity:.2;*/
/*}*/
.note-list.card .note-item:hover{transform: translateY(-3px);box-shadow:var(--soft-shadow);border-color: color-mix(in oklab, var(--primary) 16%, var(--border))}

.note-item .title{font-weight:800;font-size:var(--h2);letter-spacing:.2px;color: var(--text)}
.note-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  color: var(--muted-2);
  font-size: var(--ui-meta-font-size);
  line-height: var(--ui-card-line-height);
  margin-top:8px;
}


/* 新拟态卡片 */
:root[data-theme="neumorphism"] .note-item{ border-color: transparent; background:#EEF2F7; box-shadow: 10px 10px 20px #c7d0df, -10px -10px 20px #ffffff; }
:root[data-theme="neumorphism"] .note-item:hover{ box-shadow: 12px 12px 24px #c3ccdc, -12px -12px 24px #ffffff; }

/* 置顶按钮 */
.pin-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel);transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  position:relative; cursor:pointer; color: var(--text);
}
.pin-btn:hover{transform: scale(1.06);box-shadow:var(--soft-shadow);border-color: color-mix(in oklab, var(--primary) 35%, var(--border))}
.pin-btn.pinned{color:#ff7a00;border-color:#ffd2b0;background: color-mix(in oklab, var(--panel) 90%, #ff7a00 10%)}
.pin-btn[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:120%;left:50%;transform:translateX(-50%);
  background:#111827;color:#fff;font-size:12px;line-height:1;padding:6px 8px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;box-shadow:var(--soft-shadow)
}
.pin-btn[data-tip]::before{
  content:'';position:absolute;bottom:110%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#111827;opacity:0;transition:opacity .15s ease;
}
.pin-btn:hover::after,.pin-btn:hover::before{opacity:1}
.pin-icon{ height:100%; }

/* 阅读区 */
#readerPane{grid-area:reader;border-left:1px solid var(--border);padding:0 8px 0 0;background:var(--panel);backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass)}
.reader-box{min-height:0;display:flex;flex-direction:column;height:100%}
.read-header{
  position:sticky;top:0;z-index:2;background:var(--panel);border-bottom:1px solid var(--border);
  padding:10px 12px;height:var(--sticky-top-h);display:flex;align-items:center;backdrop-filter: var(--glass)
}
.read-header h1{font-size:20px;font-weight:850;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: var(--text)}

.read-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  color: var(--muted);
  font-size: var(--ui-meta-font-size);
  line-height: var(--ui-line-height);
  margin:0; padding:8px 12px;
}

.read-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 8px 12px 12px}

.read-content pre{ background: color-mix(in oklab, var(--panel) 70%, var(--text) 30%); padding:12px;border-radius:12px;overflow:auto; color: var(--text) }
.read-content blockquote{
  margin:12px 0;padding:12px 14px;border-left:4px solid color-mix(in oklab, var(--primary) 50%, var(--border));
  background: color-mix(in oklab, var(--panel) 88%, var(--primary) 12%);border-radius:8px
}
.note-actions{
  position:sticky;bottom:0;z-index:2;background:linear-gradient(180deg,var(--panel) 0%, var(--panel) 70%);
  border-top:1px solid var(--border);padding:8px 12px;display:flex;gap:8px;align-items:center;min-height:var(--sticky-btm-h)
}

/* 骨架/空状态 */
.skeleton{animation:pulse 1.2s infinite ease-in-out}
.skeleton-title,.skeleton-line{height:14px;background: color-mix(in oklab, var(--panel) 80%, var(--text) 20%);border-radius:6px;margin:8px 0}
.skeleton-title{width:40%;height:16px}
.skeleton-line.w-60{width:60%}
@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.empty{text-align:center;color:var(--muted);padding:24px}
.empty .btn{margin-top:8px}

/* 模态与抽屉 */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);backdrop-filter: var(--glass);-webkit-backdrop-filter: var(--glass);z-index:40;
}
.modal.show{display:flex}
.modal__box{
  width:min(920px,92vw);max-height:95vh;    width: min(1080px,97vw);
    height: min(95vh,800px);overflow:auto;background:var(--panel);border-radius:18px;padding:14px 4px;
  box-shadow:0 24px 48px rgba(0,0,0,.18);border:1px solid var(--border)
}
.modal__header{display:flex;align-items:center;gap:10px}

/* 阅读模态 */
#readModal .modal__box{
  width: min(1080px,97vw);height: min(95vh,800px);
  overflow:hidden;display:flex;flex-direction:column;padding:0;background: var(--panel)
}
.read-modal-header{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel);color: var(--text)}

.read-modal-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  color: var(--muted);
  font-size: var(--ui-meta-font-size);
  line-height: var(--ui-line-height);
  padding:6px 14px 0 14px;
}


.read-modal-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 14px 12px 14px;background: var(--panel); color: var(--text)}

/* 顶部内容弹窗 */
.content-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.15);z-index:35;backdrop-filter:var(--glass)}
.content-modal__box{width:min(680px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:10px 5px;box-shadow:0 20px 40px rgba(0,0,0,.18);color: var(--text)}
.contentTextLog p{margin:8px 0}

/* 过滤抽屉 */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:44}
.filter-drawer{
  position:fixed;right:0;top:0;width:320px;height:100vh;background:var(--panel);border-left:1px solid var(--border);
  box-shadow:-8px 0 20px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .25s ease,padding .15s ease; padding:16px;overflow:auto;z-index:45;color: var(--text)
}
.filter-drawer.open{transform:translateX(0)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:6px 10px;background: color-mix(in oklab, var(--panel) 86%, var(--text) 14%);border-radius:999px;cursor:pointer;border:1px solid var(--border);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.chip:hover{border-color:color-mix(in oklab, var(--border) 70%, var(--text)); transform: var(--hover-lift)}
.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.filter-actions{display:flex;gap:8px;margin-top:12px}



/* 小屏隐藏 reader/侧栏 */
@media (max-width:1080px){
  main.app{grid-template-columns:1fr;grid-template-areas:"list"}
  #sidebar,#readerPane,#resizerLeft,#resizerRight{display:none}
  .toolbar{width:100%}
  .note-list.card{grid-template-columns:1fr}
}

/* 文本换行健壮性 + 颜色兜底 */
.note-item .title,.note-item .excerpt{white-space: normal; overflow-wrap: anywhere; word-break: break-word;}

.note-item .excerpt{
  color: var(--muted);
  font-size: var(--ui-card-font-size);
  line-height: var(--ui-card-line-height);
  margin-top: 6px;
  /* 如果你用了行数裁剪，也一起保留 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-excerpt-lines, 3);
  overflow: hidden;
}


.note-list .note-item{ background: var(--panel-elevated) !important; color: var(--text) !important; }
.note-list .note-item:hover{ background: color-mix(in oklab, var(--panel-elevated) 92%, var(--primary) 8%) !important; }
:root[data-color-scheme="dark"]{ --text:#E9EDF5; --muted:#A5ADBB; --muted-2:#96A0B2; }

/* 全文阅读快捷按钮 */
.quick-read-btn{
  position:absolute; right:10px; bottom:10px; z-index:2;padding: 2px;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.quick-read-btn:hover{ transform: scale(1.06); box-shadow: var(--soft-shadow); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }

/* 夜间切换按钮：固定 36x36，去掉水平内边距，居中对齐 */
#themeModeToggle{
  width:36px;
  min-width:36px;
  height:36px;
  border: none;
  padding:0;                 /* 覆盖 .btn 的 padding: 0 12px; */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;           /* 保持透明，不要额外背景 */
  line-height:0;
}
#themeModeToggle .icon,
#themeModeToggle svg{ display:block; }

/* 卡片视图：把置顶按钮固定在右上角 */
.note-list.card .note-item{ position:relative; min-height:82px;} /* 确保定位参照 */
.note-list.card .note-item .pin-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
}

/* 列表视图：置顶按钮靠右对齐（不强制换行） */
.note-list.list .note-item{
  grid-template-columns: 1fr auto; /* 已有，但确保存在 */
}
.note-list.list .note-item .pin-btn{
  justify-self: end;
  align-self: start;
}

.ql-editor img{ max-width:100%; height:auto; }

/* 让对齐工具栏对“图片所在行”生效 */
.ql-editor .ql-align-center img{
  display:block;
  margin: 0 auto;     /* 居中 */
}
.ql-editor .ql-align-right img{
  display:block;
  margin-left:auto;   /* 靠右 */
}
.ql-editor .ql-align-left img{
  display:block;
  margin-right:auto;  /* 靠左（默认其实就是左对齐，这里确保是 block）*/
}

#bkNotePreview .row {
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border-2); padding:6px 0;
}
#bkNotePreview .row:last-child { border-bottom:none; }
#bkNotePreview .title { font-weight:700 }

#qrContainer, #shareCardQR {
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(17, 24, 39, .12);
}

/* 通用：仅图标按钮 */
.icon-btn{
  width:36px;height:36px;min-width:36px;
  padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);     border: none; border-radius:12px;
  background:var(--panel); color:var(--text); cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover{ transform: var(--hover-lift); box-shadow: var(--soft-shadow); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.icon-btn:active{ transform: var(--press); }
.icon-btn .icon{ width:28px; height:28px; display:block; }

/* 悬浮提示：与 pin-btn 保持视觉一致 */
.tip-btn[data-tip]{
  /*position:relative;*/
}
.tip-btn[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:120%;left:50%;transform:translateX(-50%);
  background:#111827;color:#fff;font-size:12px;line-height:1;padding:6px 8px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;box-shadow:var(--soft-shadow);z-index:5;
}
.tip-btn[data-tip]::before{
  content:'';position:absolute;bottom:110%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#111827;opacity:0;transition:opacity .15s ease;z-index:5;
}
.tip-btn:hover::after,.tip-btn:hover::before{opacity:1}

/* 无障碍隐藏文本（仅供读屏）*/
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

#cardIntroInput{
    height: 150px;
    width: 240px;
}

/* 移动端 */
@media (max-width: 768px){
  .brand h1{display:none}
  .headerbar{height:auto;min-height:56px;align-items:stretch;padding:8px}
  .brand img{width:32px;height:32px}
  .toolbar{
    width:100%;
    display:grid;grid-template-columns: 1fr auto auto auto;grid-auto-rows:36px;gap:8px;
  }
  
  .quick-read-btn{
      display: none;
  }
  
  .quick-read-btn .icon{
      display: none;
  }
  #searchInput{grid-column:1 / 2;}
  #toggleFilter{grid-column:2 / 3;}
  #themeModeToggle{grid-column:3 / 4;}
  #mobileNewBtn{grid-column:4 / 5;}
  #quickAdd{display:none}
  .view-switch, #sortSelect{display:none}
  #mobileNewBtn{
    height:36px;padding:0 14px;border-radius:12px;border:none;color:#fff;font-weight:850;cursor:pointer;
    box-shadow:var(--btn-glow);
  }
}

.read-content p{
    margin: 0px;
}

.read-content{ margin:0 auto;padding:10px 2px 26px;word-break:break-word; font-family: var(--font-serif); line-height: 1.72; color:var(--text); }


/* === 阅读可读性增强（覆盖） === */
.read-content{
  font-family: var(--font-sans);           /* 改成无衬线，屏显更清爽 */
  /*font-size: 14px;          */
  /*line-height: 1.5;               */
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
  color: color-mix(in oklab, var(--text) 96%, #000);  /* 略加深 */
}
.read-content h1, .read-content h2, .read-content h3{
  font-weight: 800; color: var(--text);
  margin: 1.2em 0 0.6em;
}
.read-content blockquote{
  color: color-mix(in oklab, var(--text) 90%, #000);  /* 引文也更清晰 */
  border-left-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}
/* 夜间模式下也保持足够对比 */
:root[data-color-scheme="dark"] .read-content{
  color: #E9EDF5;
}

/* === 待办清单样式 === */
.ql-editor .todo-item { display:inline-flex; align-items:center; gap:.4em; }
.ql-editor .todo-item.done { text-decoration: line-through; opacity:.7; }
.ql-editor input.todo-box { inline-size: 1.05em; block-size: 1.05em; }
/* 待办行的显示效果（编辑器内/阅读区通用） */
.ql-editor .xzz-check{ display:inline-flex; align-items:center; gap:.4em; }
.ql-editor .xzz-check .todo-box{ inline-size:1.05em; block-size:1.05em; }

/* 若想勾选后加删除线（仅视觉，不改内容） */
.todo-box:checked ~ * { text-decoration: line-through; opacity:.75; }

/* 顶部阅读栏：仿 Mac 顶栏布局（但按钮放右侧） */
.read-modal-header.mac-like{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;        /* 左标题/信息，右操作 */
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: var(--glass);
}

/* 标题与元信息 */
.read-modal-titlewrap{
  min-width: 0;                           /* 防止溢出 */
}
.read-modal-title{
  font-size: 18px;
  font-weight: 850;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.read-modal-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;                        /* 与标题间距 */
  padding: 0;
}

/* 右侧操作按钮区 */
.read-modal-controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

/* 旧的底部动作条：隐藏（可选） */
.read-modal-actions{ display: none !important; }

/* 小屏优化：紧凑化顶栏 */
@media (max-width: 768px){
  .read-modal-header.mac-like{
    padding: 10px 12px;
    gap: 8px;
  }
  .read-modal-title{ font-size: 16px; }
  .read-modal-controls .icon-btn{
    width: 34px; height: 34px; min-width: 34px;
  }
}

/* 只对“阅读模态”放宽裁剪，其它模态不动 */
#readModal .modal__box{
  overflow: visible;     /* 从 hidden 改为 visible */
}
.read-modal-body{
  overflow: auto;        /* 保持正文区域滚动 */
}

/* 顶部 header 里的按钮，提示改为向下 */
.read-modal-header .tip-btn[data-tip]::after{
  bottom: auto;   top: calc(100% + 10px);
}
.read-modal-header .tip-btn[data-tip]::before{
  bottom: auto;   top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #111827;   /* 箭头朝下 */
}

/* 保险：让 header 可以溢出显示 tip（即使以后你又加了装饰） */
.read-modal-header{ overflow: visible; }

/* ✅ 新增：把编辑器也纳入美化范围 */
.editor, .ql-editor{
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
.editor::-webkit-scrollbar,
.ql-editor::-webkit-scrollbar{
  width: 8px; height: 8px;
}
.editor::-webkit-scrollbar-track,
.ql-editor::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
  border-radius: 10px;
}
.editor::-webkit-scrollbar-thumb,
.ql-editor::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;         /* 中空质感 */
  background-clip: content-box;
}
.editor::-webkit-scrollbar-thumb:hover,
.ql-editor::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}

/* 细节增强：滚动时出现，不滚时更淡（WebKit系支持） */
.editor::-webkit-scrollbar-thumb,
.ql-editor::-webkit-scrollbar-thumb{
  transition: background-color .2s ease, opacity .2s ease;
  opacity: .8;
}
.editor:hover::-webkit-scrollbar-thumb,
.ql-editor:hover::-webkit-scrollbar-thumb{
  opacity: 1;
}

/* 右侧阅读栏也再统一一下（若想更纤细可调为 6px） */
.read-scroll::-webkit-scrollbar,
.read-modal-body::-webkit-scrollbar{
  width: 8px; height: 8px;
}

/* 可选：默认几乎看不见，悬停容器时才变清晰 */
.read-scroll::-webkit-scrollbar-thumb,
.read-modal-body::-webkit-scrollbar-thumb,
.editor::-webkit-scrollbar-thumb,
.ql-editor::-webkit-scrollbar-thumb{
  opacity: .35;
}
.read-scroll:hover::-webkit-scrollbar-thumb,
.read-modal-body:hover::-webkit-scrollbar-thumb,
.editor:hover::-webkit-scrollbar-thumb,
.ql-editor:hover::-webkit-scrollbar-thumb{
  opacity: 1;
}
/* 外层盒子：统一加圆角 */
#readModal .modal__box{
  border-radius: 12px;       /* 整个弹窗圆角 */
  overflow: hidden;          /* 内部子元素不会溢出 */
  background: var(--panel);
  display: flex;
  flex-direction: column;
}

/* 顶部 header：去掉圆角，只留底部分隔线 */
.read-modal-header.mac-like{
  border-bottom: 1px solid var(--border);
  border-radius: 0;          /* ← 不要再单独圆角 */
  background: var(--panel);
}

/* 正文 body：去掉圆角，只留填充 */
.read-modal-body{
  border-radius: 0;          /* ← 不要再单独圆角 */
  background: var(--panel);
  flex: 1;                   /* 占满剩余空间 */
  overflow: auto;
}

/* 让自定义按钮看起来跟 Quill 默认按钮一致 */
.ql-toolbar .ql-undo,
.ql-toolbar .ql-redo{
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; outline: none; cursor: pointer;
  border-radius: 6px;
  font-size: 16px; line-height: 1;
  transition: background-color .2s ease, transform .05s ease;
}
.ql-toolbar .ql-undo:hover,
.ql-toolbar .ql-redo:hover{ background: rgba(0,0,0,.06); }
.ql-toolbar .ql-undo:active,
.ql-toolbar .ql-redo:active{ transform: translateY(1px); }

/* 若你用的是阿里iconfont，确保 svg 尺寸合适 */
.ql-toolbar .ql-undo .icon,
.ql-toolbar .ql-redo .icon{ width: 18px; height: 18px; }
/* 让弹窗内容（盒子）有非常短的过渡动画 */
.modal .modal__box{
  transition: opacity .12s ease, transform .12s ease;
}

/* 编辑弹窗“淡入”入场的小准备状态 */
.modal.fade-in .modal__box{
  opacity: 0;
  transform: translateY(6px) scale(.995);
}
.modal.fade-in.show .modal__box{
  opacity: 1;
  transform: none;
}

/* 阅读弹窗“淡出”离场 */
.modal.fade-out .modal__box{
  opacity: 0;
  transform: translateY(6px) scale(.995);
}


/* ====== 历史版本 Modal 增强 ====== */
#historyModal .modal__content{
  width: min(860px, 92vw);
  max-height: 85vh;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
}

#historyModal .modal__header{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
  background: var(--panel);
}
#historyModal .modal__body{
  display:grid; grid-template-columns: 280px 1fr;
  gap:12px; padding:12px; min-height: 48vh;
}
@media (max-width: 860px){
  #historyModal .modal__body{ grid-template-columns: 1fr; }
}

/* 左侧列表 */
#historyList{
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  padding:8px;
  overflow:auto;
}
.history-item{
  width:100%;
  text-align:left;
  display:flex; flex-direction:column; gap:6px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
  transition:.15s ease;
  margin-bottom:6px;
}
.history-item:hover{
  background: color-mix(in oklab, var(--panel) 88%, var(--primary) 12%);
}
.history-item.active{
  background: color-mix(in oklab, var(--panel) 82%, var(--primary) 18%);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}
.history-item__line{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px;
}
.history-item__ver{ font-weight:800; color: var(--text); }
.history-item__time{ color: var(--muted); font-variant-numeric: tabular-nums; }
.history-item__ops{ display:flex; gap:10px; font-size:12px; color: var(--muted-2); }
.history-item__ops .op{ text-decoration: underline; cursor:pointer; }

/* 右侧预览 */
#historyPreview{
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  padding:12px;
  overflow:auto;
  line-height:1.65;
}
#historyPreview .history-head{
  display:flex; align-items:baseline; gap:10px;
  border-bottom:1px dashed var(--border);
  padding-bottom:6px; margin-bottom:8px;
}
#historyPreview .history-head__title{ font-weight:800; }
#historyPreview .history-head__time{ color: var(--muted); font-size:12px; }

.history-empty{
  padding:12px; text-align:center; color: var(--muted);
}
.history-empty.error{ color:#dc2626; }

/* === Toast 消息浮窗 === */
/* === Toast 消息浮窗（浅色卡片风） === */
.toast-message {
  min-width: 220px;
  max-width: 360px;

  /* 半透明白 + 毛玻璃，跟你的面板风格靠拢 */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  /* 1px 细描边，接近你界面的卡片边线风格 */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;

  /* 柔和阴影，避免“黑一坨”，更接近浮层卡片 */
  box-shadow:
    0 24px 48px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.04);

  color: #1f2937;            /* 中深灰，易读 */
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;

  padding: 10px 12px 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity .18s ease, transform .18s ease;

  pointer-events: auto;
  position: relative;
}

/* 出现动画 */
.toast-message.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 左侧色条：用伪元素做成细节，而不是生硬大块底色 */
.toast-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: #6B7280; /* 默认灰（info） */
}

/* 成功：绿色微亮，但不是荧光绿 */
.toast-message.success::before {
  background: linear-gradient(
    180deg,
    #34d399 0%,
    #10b981 100%
  );
}

/* 失败：柔和红 */
.toast-message.error::before {
  background: linear-gradient(
    180deg,
    #fb7185 0%,
    #ef4444 100%
  );
}

/* 信息：淡蓝，用作一般提示 */
.toast-message.info::before {
  background: linear-gradient(
    180deg,
    #93c5fd 0%,
    #3b82f6 100%
  );
}

/* 图标（用 emoji 也可以换成 SVG） */
.toast-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  opacity: 0.8;
  /* 让图标和正文有同样的主色，不要高对比夺目 */
  color: inherit;
}

/* 文本内容 */
.toast-text {
  flex: 1;
  word-break: break-word;
  white-space: pre-line;
  color: #1f2937; /* 确保在半透明白底上足够清晰 */
  font-weight: 500;
}

/* 关闭按钮：轻一点，不用杀气腾腾的叉 */
.toast-close {
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: .4;
  user-select: none;
  color: #1f2937;
  padding-left: 4px;
}
.toast-close:hover {
  opacity: .75;
}

/* === 自适应调整 noteModal 高度 === */
#noteModal .modal__box {
  max-height: 90vh; /* 设置最大高度为 90% 的视口高度 */
  overflow-y: auto; /* 如果内容超出，启用滚动条 */
  display: flex;
  flex-direction: column;
}

/* === 对于小屏设备（手机端）进行优化 === */
@media (max-width: 768px) {
  #noteModal .modal__box {
    max-height: 90vh;  /* 手机端时，设置最大高度为视口的 85% */
    padding: 12px; /* 内边距调整 */
  }

  .note-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel) 70%);
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: var(--sticky-btm-h);
    /* 保证保存和关闭按钮在底部固定显示 */
  }

  .note-actions button {
    width: 100%;  /* 手机端按钮宽度占满 */
    font-size: 16px;  /* 增大按钮字体 */
    padding: 10px;
  }
}

/* === 基础样式重置 === */
.editor-toolbar {
  margin: 0;
  padding: 8px 12px;
  border: none;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 轻微阴影增强层次感 */
}

/* === 菜单布局优化 === */
.editor-toolbar {
  display: flex;
  flex-wrap: nowrap; /* 禁止菜单换行 */
  gap: 8px; /* 按钮间距统一 */
  overflow-x: auto; /* 横向滚动（适配小屏） */
  white-space: nowrap; /* 防止子元素换行 */
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
}
/* 隐藏滚动条（可选） */
.editor-toolbar::-webkit-scrollbar {
  display: none;
}

/* === 按钮基础样式 === */
.toolbar-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 16px; /* 图标/文字大小 */
}
.toolbar-btn:hover {
  background: #e9f5ff;
  transform: translateY(-1px); /* 轻微上浮效果 */
}
.toolbar-btn:active {
  transform: translateY(0);
}

/* === 撤销/反撤销按钮专项优化 === */
.toolbar-btn.undo, 
.toolbar-btn.redo {
  background: #007bff; /* 蓝色主色调突出 */
  color: white;
}
.toolbar-btn.undo:hover, 
.toolbar-btn.redo:hover {
  background: #0056b3; /* 加深hover颜色 */
}
/* 调整位置到最左侧（根据实际DOM结构调整顺序） */
.toolbar-btn.undo {
  order: -2; /* 排在所有按钮之前 */
}
.toolbar-btn.redo {
  order: -1;
}

.ql-formats{
    margin-right: 0px!important;
}

.ql-formats button{
    margin-right: 5px;
}

/* 工具栏中的复选框按钮样式 */
.ql-xzz-todo {
  font-size: 18px;  /* 增加字体大小 */
  cursor: pointer;  /* 鼠标指针 */
  width: 32px;   /* 增加按钮宽度 */
  display: flex!important;
  justify-content: center;
  align-items: center;
}


/* 正文中的复选框样式（圆圈样式） */
.todo-box {
  width: 24px;         /* 设置复选框宽度 */
  height: 24px;        /* 设置复选框高度 */
  border-radius: 50%;  /* 圆形边框 */
  border: 2px solid #ced9e7;  /* 边框颜色 */
  background-color: white;  /* 背景颜色 */
  display: inline-block; /* 设置为内联块元素 */
  vertical-align: middle;  /* 垂直居中对齐 */
  cursor: pointer;     /* 添加指针，提示可点击 */
  position: relative;  /* 用于定位选中图标 */
  margin: 3px 3px 3px 0px;
  /* 移除浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 当复选框被选中时，改变其背景颜色，并添加钩子图标 */
.todo-box[checked] {
  background-color: #d6dbe0;  /* 选中时的背景颜色 */
  border-color: #ecd59e;      /* 选中时的边框颜色 */
}

.todo-box[checked]::after {
  content: '✓';               /* 钩子图标 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #333;                /* 钩子颜色 */
}

/* 增加字体大小，确保与正文一致 */
.ql-editor {
  font-size: 14px;  /* 确保正文文本和复选框的字体大小一致 */
}

.ql-editor .todo-box {
  vertical-align: middle; /* 保证复选框与文本垂直居中 */
}

.ql-editor .xzz-check {
  gap: 0px !important;
  display: flex;
  align-items: center;
}

.ql-editor .xzz-check .todo-box {
  width: 24px; 
  height: 24px;
}

/* 新增：待办文本样式，当选中时划线 */
.ql-editor .xzz-check .todo-text {
  flex: 1;                    /* 占满剩余空间 */
}

/* 关键：选中时划线 + 灰色淡化 */
.ql-editor .xzz-check .todo-box[checked] ~ .todo-text {
  text-decoration: line-through;
  color: #9ca3af;             /* 灰色 */
  opacity: 0.7;               /* 淡化 */
  transition: all 0.2s ease;  /* 平滑过渡 */
}


.secondary .icon{
    width: 32px;
    height: 32px;
}

.primary .icon{
    width: 32px;
    height: 32px;
}

#closeModalBtn .icon{
    width: 32px;
    height: 32px;
}


.themeModeToggle .icon{
    width: 32px;
    height: 32px;
}

#saveNoteBtn{
    padding: 0px;
}

#closeModalBtn{
    padding: 0px;
    border: none;
}

#mobileNewBtn{
    padding: 0px;
}

#toggleFilter{
    padding: 0px;
}

#themeModeToggle{
    height: 32px;
}

.ql-toolbar.ql-snow{
    border: none;
    border-bottom: 1px solid #d1eae7;
    border-bottom: 2px solid #eab9ef;
    border: 2px solid #cebdcf;
    border-radius: 10px;
    margin-top: 5px;
}

.ql-container.ql-snow{
    border: none!important;
}

/* === 回到顶部图标样式（仅图标 + 提示文字） === */
/* === 回到顶部图标样式（仅图标 + 提示文字） === */
/* === 回到顶部图标样式（仅图标 + 提示文字） === */
#scrollToTopBtn {
  position: fixed; /* 固定在视口的右下角 */
  bottom: 20px; /* 距离视口底部20px */
  right: 20px;  /* 距离视口右侧20px */
  width: 36px;
  height: 36px;
  display: none;  /* 默认隐藏 */
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.25s ease;
  z-index: 5;  /* 保证按钮位于其他元素之上 */
  align-items: center;
  justify-content: center;
}

#scrollToTopBtn .icon {
  width: 34px;
  height: 34px;
  fill: var(--muted-icon, #888);
}

#scrollToTopBtn:hover {
  opacity: 1;
  transform: translateY(-2px);
}

#scrollToTopBtn:hover .icon {
  fill: var(--accent, #007bff);
}

/* === Tooltip 提示样式（复用 tip-btn 逻辑）=== */
/* 备用：Tooltip 在上方显示（窄屏时） */
.tip-btn.tooltip-top[data-tip]:hover::after {
  right: 50%;
  top: auto;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
}
.tip-btn.tooltip-top[data-tip]:hover::before {
  top: -6px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(45deg);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.modal__header{
    padding: 0px 10px;
}



/* 在大屏设备上使用 grid 布局，三列显示 */
@media (min-width: 768px) {
  .tagcate {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 三列显示 */
    gap: 10px;
  }
}

/* 在小屏设备上垂直排列 */
@media (max-width: 767px) {
  .tagcate {
    display: grid;
    grid-template-columns: 1fr; /* 一列显示 */
    gap: 10px;
  }
  
  .modal__header {
    padding: 0px 0px;
}

   .btn{
       padding: 0px 5px;
   }
   
   .ui-setting-body.active{
       overflow-y: auto;
       max-height: 300px;
   }
  
}


.tagcate{
    border-top: 2px solid #cebdcf;
    padding-top: 5px;
    border-radius: 10px;
    margin-top: 5px;
    gap: 5px;
}


/* 让编辑弹窗成为竖向布局，整体不超过视口 */
#noteModal .modal__box {
  display: flex;
  flex-direction: column;
  max-height: 95vh;     /* 你原来是 90vh 也行 */
  height: auto;         /* 不要写死 800px 了 */
  overflow: hidden;     /* 外层隐藏，滚动交给中间的内容区 */
      height: 95vh;
}

/* 头部和上面的输入区都是内容高度 */
#noteModal .modal__header {
  flex: 0 0 auto;
}

#noteModal .tagcate {
  flex: 0 0 auto;
}

/* ✅ 核心：编辑器要吃掉剩余的所有高度 */
#noteModal .editor {
  flex: 1 1 auto;
  min-height: 0;        /* 没有这个的话，子元素可能撑开父容器 */
  overflow: auto;       /* 在这里滚动 */
  /* 可选：如果你想限制最小高度 */
  /* min-height: 240px; */
}

/* 底部状态条 */
#noteModal .modal__actions {
  flex: 0 0 auto;
}


/* 给非弹窗里的编辑器一个默认高度 */
.editor {
  min-height: 260px;
}

/* 但弹窗里的用 flex 规则，别写死 */
#noteModal .editor {
  height: auto;
}


/* 阅读弹窗外层：只限制最大高度，不写死高度 */
#readModal .modal__box{
  width: min(1080px,97vw);
  max-height: 95vh;     /* ✅ 用 max-height */
  height: 95vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 标题区自高 */
#readModal .read-modal-header {
  flex: 0 0 auto;
}

/* ✅ 正文吃剩余，内部滚动 */
#readModal .read-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#themeModeToggle icon{
    height: 28px;
    width: 28px;
}



/* === 移动端适配 === */
@media (max-width: 768px) {
  .editor-toolbar {
    padding: 4px 8px; /* 减少内边距 */
    gap: 4px; /* 缩小按钮间距 */
  }
  
  .toolbar{
      display: flex;
  }
  
  #searchInput{
      width: 100%;
  }
  
  .toolbar-btn {
    width: 32px;
    height: 32px; /* 缩小按钮尺寸 */
    font-size: 14px;
  }
  /* 隐藏次要按钮（根据实际功能调整类名） */
  .toolbar-btn.secondary {
    display: none;
  }
  
  .secondary .icon{
    width: 28px;
    height: 28px;
  }

    .primary .icon{
        width: 28px;
        height: 28px;
    }
    
    #closeModalBtn .icon{
        width: 28px;
        height: 28px;
    }
    
    
    .themeModeToggle .icon{
        width: 28px;
        height: 28px;
    }
    
    #themeModeToggle .icon, #themeModeToggle svg{
        height: 28px;
    }
    
    #mobileNewBtn{
        height: 28px;
    }
    
    #toggleFilter{
        height: 26px;
    }
    
    #closeModalBtn{
        height: 28px;
        margin-right: 5px;
    }
  
}






/*主题*/

/*菜单*/
/* ==== 左下角菜单：用户块 ==== */
.menu-list {
  /* 你原来应该已经有位置/宽度了，这里只是兜底 */
  width: 240px;
  background: var(--panel, rgba(255,255,255,.55));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  overflow: hidden;
}

.menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.menu-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  overflow: hidden;
  flex: 0 0 44px;
  background: rgba(255,255,255,.3);
}
.menu-user__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-user__info {
  min-width: 0;
}
.menu-user__name {
  font-weight: 600;
  line-height: 1.2;
}
.menu-user__meta {
  font-size: 12px;
  color: var(--muted,#6b7280);
  line-height: 1.2;
  margin-top: 2px;
}

.menu-section {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.menu-section:last-of-type {
  border-bottom: none;
}

.menu-footer {
  padding: 10px 12px 12px;
  display: flex;
  gap: 8px;
}
.menu-link {
  flex: 1 1 auto;
  background: rgba(255,255,255,.35);
  border: 0;
  border-radius: 8px;
  height: 32px;
  font-size: 13px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #1f2937;
}
.menu-link.danger {
  background: rgba(244,63,94,.12);
  color: #f43f5e;
}
.menu-link:hover {
  background: rgba(255,255,255,.55);
}

/*菜单*/

/*更新日志*/
/* 更新日志专业版 */
.content-modal__box .changelog {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.changelog-group {
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 12px 14px 10px;
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .changelog-group {
  background: rgba(15,23,42,.25);
  border-color: rgba(255,255,255,.03);
}

.changelog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.changelog-date {
  font-weight: 600;
}
.changelog-ver {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: #0f172a;
}
.changelog-ver.warn {
  background: rgba(244,63,94,.16);
  color: #f43f5e;
}

.changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.changelog-list li {
  font-size: 13.5px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  line-height: 1.5;
}

.cg-tag {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 6px 1px;
  border-radius: 999px;
  background: rgba(15,118,110,.14);
  color: #0f766e;
  font-weight: 500;
  transform: translateY(1px);
}
.cg-tag.new {
  background: rgba(59,130,246,.16);
  color: #1d4ed8;
}
.cg-tag.improve {
  background: rgba(236, 72, 153, .12);
  color: #db2777;
}
.cg-tag.fix {
  background: rgba(248,113,113,.14);
  color: #b91c1c;
}
.cg-tag + span,
.changelog-list li > span:last-child {
  flex: 1 1 auto;
}

/*更新日志*/


#exportMD,#exportHTML,#exportJSON{
    font-size: 12px;
    font-weight: 500;
}

#bkTag,#bkTimeRange{
    max-width: 70px;
}

/* === 外观弹窗的 tabs === */
.appearance-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.appearance-tab-btn {
  flex: 0 0 auto;
  border: 0;
  background: rgba(255,255,255,.15);
  color: inherit;
  border-radius: 999px;
  padding: 4px 12px 5px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
[data-color-scheme="dark"] .appearance-tab-btn {
  background: rgba(15,23,42,.15);
}
.appearance-tab-btn.is-active {
  background: rgba(255,255,255,.55);
  color: #0f172a;
}
[data-color-scheme="dark"] .appearance-tab-btn.is-active {
  background: rgba(255,255,255,.15);
  color: #e2e8f0;
}
.appearance-panel {
  display: none;
}
.appearance-panel.is-active {
  display: block;
}

.ui-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-setting-group {
  border: 1px solid var(--border, rgba(148,163,184,.25));
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.ui-setting-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
}
.ui-setting-head:hover {
  background: rgba(255,255,255,0.02);
}
.ui-setting-body {
  display: none;
  padding: 10px 12px 12px;
  background: rgba(248,250,252,0.02);
}
.ui-setting-body.active {
  display: block;
}
.ui-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ui-setting-row span:first-child {
  flex: 0 0 96px;
  font-size: 13px;
}
.ui-setting-row input[type="range"] {
  flex: 1;
}
.ui-setting-value {
  font-size: 12px;
  color: var(--muted);
  min-width: 48px;
  text-align: right;
}
.ui-setting-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 540px) {
  .theme-grid {
    grid-template-columns: 1fr;
  }
}

/* ✅ UI 设置兜底，必须放在所有样式的最后 */
body,
.read-content,
.ql-editor,
.read-modal-body,
.note-list,
.contentTextLog {
  font-size: var(--ui-font-size) !important;
  line-height: var(--ui-line-height) !important;
}

/* UI设置：卡片精简模式 */
:root[data-card-style="simple"] .note-item .note-meta,
:root[data-card-style="simple"] .note-card .note-meta,
:root[data-card-style="simple"] .note-item .note-footer {
  display: none !important;
}

/* 精简模式下可以把卡片的 padding 稍微拉开点，别太空 */
:root[data-card-style="simple"] .note-item,
:root[data-card-style="simple"] .note-card {
  padding-bottom: 10px;
}

:root[data-density="comfortable"] {
  --ui-density: 1;
}
:root[data-density="compact"] {
  --ui-density: 0.88;
}
:root[data-density="super-compact"] {
  --ui-density: 0.78;
}




/*富文本图片编辑功能*/
/* 图片样式编辑面板：高层级 & 基础样式 */
.xzz-image-panel{
  position: absolute;
  display: none;
  z-index: 2147483647; /* 顶到天花板，防止被任何蒙层/弹窗遮住 */
  min-width: 320px;
  max-width: 360px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 22px 60px rgba(15,23,42,.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(15,23,42,.06);
  font-size: 13px;
  color: #111;
}
.xzz-image-panel .xzz-row{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.xzz-image-panel .xzz-label{ width:52px; opacity:.75; }
.xzz-image-panel .xzz-range{ flex:1; }
.xzz-image-panel .xzz-num{ width:64px; }
.xzz-image-panel .xzz-note{ opacity:.6; }
.xzz-image-panel .xzz-color{ width:32px; height:32px; padding:0; border:none; background:transparent; }
.xzz-image-panel .xzz-btn-group{ display:flex; gap:6px; }
.xzz-image-panel .xzz-icon-btn,
.xzz-image-panel button{
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
  line-height:1;
  font-size:12px;
}

/*富文本图片编辑功能*/
html[data-card-style="simple"] .note-meta { display: none !important; }


/* 默认变量（JS 会覆盖这些值） */
:root{
  --ui-font-size: 14px;     /* JS: root.style.setProperty('--ui-font-size', fontSize + 'px') */
  --ui-line-height: 1.6;    /* JS: root.style.setProperty('--ui-line-height', lineHeight)     */
}

/* 全局正文采用变量 */
html, body{
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
}

/* 内容区（如果你有专门的容器，用相同变量） */
.note-list,
.note-item .note-content,
.read-modal .content,
#editor, .ql-editor{
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
}



/* 默认密度倍率（JS 会覆盖） */
:root{ --ui-density: 1; }

/* 常见空间统一乘以密度倍率 */
.note-item{
  padding: calc(12px * var(--ui-density));
  margin-bottom: calc(10px * var(--ui-density));
}

.note-item .note-title{
  margin-bottom: calc(6px * var(--ui-density));
}

.list-toolbar,
.note-modal-header,
.note-modal-footer{
  padding: calc(12px * var(--ui-density)) calc(14px * var(--ui-density));
}

/* 图标/按钮尺寸也可随密度变化 */
.btn, .icon-btn{
  /*height: calc(32px * var(--ui-density));*/
  /*padding: 0 calc(10px * var(--ui-density));*/
}

/* 如果你有网格/间距 */
.grid{ gap: calc(12px * var(--ui-density)); }



/* 默认值（JS 会覆盖） */
:root{ --ui-glass-blur: 26px; }

/* 玻璃容器（举例，根据你页面实际的类名替换/增减） */
.glass, 
.header-bar,
.sidebar,
.note-modal,
.list-pane{
  background: rgba(255,255,255,0.5);         /* 或你原来的半透明底色 */
  backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(1.2);
}

/* 深色主题下可稍微调底色 */
[data-theme="glass"][data-color-scheme="dark"] .glass,
[data-theme="glass"][data-color-scheme="dark"] .note-modal{
  background: rgba(24,24,27,0.42);
}


:root{
  --ui-transition-speed: 0.25s;
  --ui-scroll-behavior: smooth;
  --card-excerpt-lines: 3; /* 默认显示3行 */
  
  /* 新增：UI 可调的全局默认（JS 会覆盖它们） */
    --ui-font-size: 14px;
    --ui-line-height: 1.6;
    
    /* 新增：卡片与元信息字号，默认跟随全局 */
    --ui-card-font-size: var(--ui-font-size);
    --ui-card-line-height: var(--ui-line-height);
    /* 元信息字号：默认比正文字号小 2px，你也可以按需改 */
    --ui-meta-font-size: calc(var(--ui-font-size) - 2px);

}

*{
  transition-duration: var(--ui-transition-speed);
}

/* 彻底关掉动效 */
[data-transition="off"] *{
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* 慢速（JS 已经把变量设成 0.35s，这里主要是给没有用变量的地方兜底） */
[data-motion="slow"] *{
  transition-duration: var(--ui-transition-speed);
}

/* 全局滚动行为 */
html{ scroll-behavior: var(--ui-scroll-behavior); }

/* ==== UI 控制的毛玻璃强度（覆盖主题的默认值） ==== */
/* 放在 styles.css 最末尾，确保覆盖同优先级的前面声明 */
:root{
  /* 滑块的兜底默认值（JS 会覆盖它们） */
  --ui-glass-blur: 12px;      /* 0px ~ 40px 之间效果明显 */
  --ui-glass-saturate: 120%;  /* 可选项：100%~180% */

  /* 用 UI 变量重算 --glass，所有使用 var(--glass) 的地方自动生效 */
  --glass: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
  --glass: blur(var(--ui-glass-blur, 12px)) saturate(var(--ui-glass-saturate, 120%));
}

/* 可选：在“玻璃主题”下，确保面板有透明度以增强效果 */
:root[data-theme="glass"][data-color-scheme="light"]{
  --panel: rgba(255,255,255,.72);
}