:root{
  --paper:#F7F4EC; --side:#EDE7D8; --ink:#2B261C; --ink2:#6F6759; --ink3:#A79D8A;
  --line:#DCD2BC; --line-soft:#E5DDC9;
  --accent:#166558; --accent-deep:#0E4E44; --accent-soft:#E0EAE0;
  --bubble:#E3EDE3; --white:#FFFDF8; --danger:#B2402C;
  --shadow:0 1px 2px rgba(43,38,28,.06),0 5px 18px rgba(43,38,28,.08);
  --serif:'Noto Serif SC',serif; --sans:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);overflow:hidden}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:12px;height:9px}
::-webkit-scrollbar-thumb{background:#CFC5AD;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
mark{background:#E8D98F;color:inherit;border-radius:2px;padding:0 1px}
.hidden{display:none!important}

#app{display:flex;height:100vh;position:relative;z-index:1}

/* ============ 左栏 ============ */
#sidebar{width:322px;flex:none;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative}
.side-head{padding:20px 18px 12px;display:flex;align-items:center;gap:11px}
.side-head-text{min-width:0;flex:1}
.head-btn{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink3);transition:.15s;
}
.head-btn:hover{color:var(--accent);background:var(--accent-soft)}
.logo{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#F5F1E4;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(22,101,88,.28);flex:none}
.side-head h1{font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:2px;line-height:1.1}
.side-head small{display:block;font-family:var(--sans);font-weight:500;font-size:11px;color:var(--ink3);letter-spacing:1.5px;margin-top:2px}

.search-box{margin:2px 14px 10px;display:flex;align-items:center;gap:8px;background:rgba(255,253,248,.7);
  border:1px solid var(--line-soft);border-radius:10px;padding:8px 11px;color:var(--ink3)}
.search-box:focus-within{border-color:var(--accent);color:var(--accent)}
.search-box input{border:0;outline:0;background:none;flex:1;font-size:13.5px;color:var(--ink)}
.search-box input::placeholder{color:var(--ink3)}


/* ---- 置顶条（单 chip 固定宽 + 固定按钮） ---- */
.pin-bar{display:flex;align-items:center;gap:8px;padding:10px 22px;overflow-x:auto;
  scrollbar-width:none;flex:none;border-bottom:1px solid var(--line);background:var(--side)}
.pin-chip{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;min-height:44px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:12px;
  padding:8px 14px;font-size:13.5px;transition:.15s;text-align:left;
  box-shadow:0 1px 3px rgba(43,38,28,.06)}
.pin-bar::-webkit-scrollbar{display:flex}
.pin-sep{flex:none;color:var(--ink3);font-size:14px;user-select:none;padding:0 2px}
.pin-cnt{flex:none;min-height:46px;display:flex;align-items:center;
  font-size:13px;font-weight:700;color:var(--accent);transition:.15s;padding:0 6px;border-radius:10px}
.pin-cnt:hover{background:var(--accent-soft)}
.pin-more{display:flex;align-items:center;gap:7px;flex:none;min-height:46px;
  padding:8px 16px;border-radius:12px;border:1px dashed rgba(22,101,88,.4);
  color:var(--accent);font-size:13px;font-weight:700;transition:.15s;white-space:nowrap}
.pin-more:hover{background:var(--accent-soft);border-style:solid}
.pin-more svg{width:15px;height:15px}

/* ---- 置顶消息页（全屏，上下滚动） ---- */
.pin-page{position:fixed;inset:0;z-index:850;background:var(--paper);display:flex;
  flex-direction:column;animation:fade .18s}
.pp-head{display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line);background:var(--side);flex:none}
.pp-head h3{font-family:var(--serif);font-size:16px;font-weight:900;letter-spacing:.5px}
.pp-back{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--accent);padding:6px 12px;border-radius:9px;border:1px solid rgba(22,101,88,.35)}
.pp-back:hover{background:var(--accent-soft)}
.pp-list{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.pp-card{width:min(680px,94vw);background:var(--bubble);border-radius:14px;padding:12px 16px 8px;
  font-size:14px;line-height:1.75;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 1px 3px rgba(43,38,28,.08)}
.pp-card .meta{display:block;text-align:right;font-size:10.5px;color:#4E8172;margin-top:4px}
.pp-acts{display:flex;gap:8px;justify-content:flex-end;padding:7px 0 2px;
  border-top:1px solid rgba(43,38,28,.08);margin-top:6px}
.pp-acts button{font-size:12px;font-weight:700;padding:5px 12px;border-radius:8px;color:var(--ink2)}
.pp-acts button:hover{background:rgba(43,38,28,.08)}
.pp-acts button:last-child:hover{color:var(--danger);background:#F6E7E2}
.pp-empty{padding:70px 20px;color:var(--ink3);font-size:13.5px}

#treeScroll{flex:1;overflow-y:auto;padding:4px 8px 14px}
.tree{padding-bottom:6px}
.tree.stagger .branch>.node-row{animation:rowIn .4s both;animation-delay:calc(var(--i)*22ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}

.branch>.kids-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s ease}
.branch.collapsed>.kids-wrap{grid-template-rows:0fr}
.kids{overflow:hidden;min-height:0;position:relative}
.kids.has-line::before{content:'';position:absolute;left:calc(var(--d)*18px + 15px);top:0;bottom:0;width:1px;background:var(--line-soft)}

.node-row{display:flex;align-items:center;gap:2px;height:41px;border-radius:9px;position:relative;
  padding-left:calc(8px + var(--d)*18px);padding-right:6px;cursor:pointer;user-select:none}
.node-row:hover{background:rgba(43,38,28,.05)}
.node-row.selected{background:#E2E8D8}
.node-row.selected::before{content:'';position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
.node-row.drag-src{opacity:.35}
.node-row.drop-inside{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}

.handle{width:17px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--ink3);opacity:0;border-radius:6px;cursor:grab;touch-action:none}
.node-row:hover .handle,.node-row.selected .handle{opacity:.75}
.handle:hover{color:var(--ink);background:rgba(43,38,28,.07)}
.handle:active{cursor:grabbing}
.chev{width:20px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--ink3);border-radius:6px}
.chev svg{transition:transform .2s}
.branch:not(.collapsed)>.node-row .chev svg{transform:rotate(90deg)}
.chev:hover{background:rgba(43,38,28,.07);color:var(--ink)}
.badge{width:25px;height:25px;flex:none;border-radius:50%;background:var(--bc,#999);color:#FBF8EF;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 7px 0 3px}
.row-title{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-row.selected .row-title{font-weight:700;color:var(--accent-deep)}
.row-count{font-size:11.5px;color:var(--ink3);margin-right:2px}
.rbtn{width:25px;height:25px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:7px;
  color:var(--ink3);opacity:0;transition:opacity .12s}
.node-row:hover .rbtn,.node-row.selected .rbtn{opacity:1}
.rbtn:hover{background:rgba(43,38,28,.09);color:var(--ink)}

.rename,.create-input{flex:1;min-width:0;border:1px solid var(--accent);border-radius:7px;background:var(--white);
  font-size:13.5px;padding:4px 8px;outline:none;box-shadow:0 0 0 3px rgba(22,101,88,.12);
  user-select:text;-webkit-user-select:text}

.hint{padding:26px 18px;text-align:center;color:var(--ink3);font-size:13px;line-height:1.9}
.res-head{font-size:11px;letter-spacing:2px;color:var(--ink3);padding:14px 12px 6px;font-weight:700}
.res-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 12px;border-radius:9px;font-size:13px}
.res-row:hover{background:rgba(43,38,28,.05)}
.res-row .path{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .txt{display:block;color:var(--ink2);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.res-row .main{flex:1;min-width:0}
.res-row .badge{width:22px;height:22px;font-size:11px;margin:0}

.side-foot{border-top:1px solid var(--line);padding:12px 14px 10px;display:flex;flex-direction:column;gap:8px}
.new-root{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:#F5F1E4;
  padding:10px;border-radius:10px;font-size:13.5px;font-weight:700;letter-spacing:1px;transition:background .15s}
.new-root:hover{background:var(--accent-deep)}
.foot-row{display:flex;align-items:center;justify-content:space-between}
.export-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3);padding:4px 6px;border-radius:7px;
  max-width:170px;overflow:hidden;white-space:nowrap}
.export-btn:hover{color:var(--accent);background:rgba(22,101,88,.08)}
.export-btn span{overflow:hidden;text-overflow:ellipsis}
.save-state{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--ink3);
  letter-spacing:.3px;padding-top:2px}
.save-state .dot{width:7px;height:7px;border-radius:50%;background:#B9B09B;flex:none;transition:background .3s;cursor:pointer}

/* ============ 右栏 ============ */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{display:flex;align-items:center;gap:8px;padding:13px 20px;border-bottom:1px solid var(--line);
  background:rgba(247,244,236,.9);backdrop-filter:blur(6px);min-height:60px}
#hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border-radius:9px;color:var(--ink2)}
#hamburger:hover{background:rgba(43,38,28,.07)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0;flex:1}
.crumb{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink2);padding:4px 6px;border-radius:6px;
  white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.crumb:hover{background:rgba(43,38,28,.06);color:var(--ink)}
.crumb.cur{color:var(--accent-deep);font-weight:900}
.crumbs .sep{color:var(--ink3);font-size:13px}
.top-right{display:flex;align-items:center;gap:10px;flex:none}
.top-count{font-size:12px;color:var(--ink3);letter-spacing:.5px}
.sub-add{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent);
  border:1px solid rgba(22,101,88,.35);padding:6px 11px;border-radius:9px;transition:.15s}
.sub-add:hover{background:var(--accent-soft)}

#entriesScroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
#entries{max-width:860px;margin:0 auto;padding:26px 28px 20px;display:flex;flex-direction:column;gap:10px}
#entries.stagger>*{animation:rise .4s both;animation-delay:calc(var(--i)*35ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.day-chip{align-self:center;background:#E9E2CF;color:var(--ink2);font-size:11.5px;font-weight:700;
  letter-spacing:1.5px;padding:5px 14px;border-radius:99px;margin:14px 0 8px}

.entry-row{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;position:relative}
.entry-row.new{animation:rise .35s both}
.entry-row.flash .entry{animation:flash 1.6s}
@keyframes flash{0%,55%{box-shadow:0 0 0 3px rgba(22,101,88,.35)}100%{box-shadow:0 0 0 3px transparent}}
.tools{display:flex;gap:2px;margin-top:8px;opacity:0;transition:opacity .15s}
.entry-row:hover .tools{opacity:1}
@media(hover:none){.tools{opacity:.9}}
.tool{width:27px;height:27px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;
  color:var(--ink3);background:rgba(255,253,248,.8);border:1px solid var(--line-soft)}
.tool:hover{color:var(--accent);border-color:var(--accent)}
.tool.danger:hover{color:var(--danger);border-color:var(--danger)}
.entry{max-width:74%;background:var(--bubble);border-radius:14px 14px 4px 14px;padding:9px 13px 8px;
  font-size:14px;line-height:1.75;box-shadow:0 1px 2px rgba(43,38,28,.05);white-space:pre-wrap;word-break:break-word;
  border:1px solid hsl(var(--th,166) 30% 60% / var(--bubble-bd,.28))}
.entry .meta{display:block;text-align:right;font-size:10.5px;color:#4E8172;margin-top:3px;letter-spacing:.5px;user-select:none}
.entry.editing{background:var(--white);padding:9px 13px 8px;box-shadow:0 0 0 2px var(--accent);
  flex:1 1 auto;max-width:74%;border-color:transparent}
  .entry.editing textarea{width:100%;border:0;outline:0;resize:none;font-size:14px;line-height:1.75;
    background:none;display:block;max-height:70vh;overflow-y:auto;
    padding:0;font-family:inherit;white-space:pre-wrap;word-break:break-word}
.entry.confirming{background:#F6E7E2;color:#7A3122;font-size:13.5px}
.confirm-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.confirm-btns button{font-size:12px;font-weight:700;padding:4px 12px;border-radius:7px}
.c-yes{background:var(--danger);color:#fff}
.c-no{background:rgba(43,38,28,.08);color:var(--ink2)}

/* ---- 气泡内的图片 ---- */
.entry.has-img{padding:5px 5px 6px}
.entry.has-img .etext{padding:4px 9px 0;display:block}
.entry.has-img .meta{padding-right:6px}
.eimg{display:block;max-width:min(100%,380px);max-height:320px;width:auto;height:auto;
  border-radius:10px;margin:2px;cursor:zoom-in;background:var(--white);object-fit:contain;
  min-height:56px;min-width:120px}
.eimg.ok{min-height:0;min-width:0}
.img-missing{display:inline-flex;align-items:center;font-size:12px;color:var(--danger);
  background:#F6E7E2;border-radius:8px;padding:6px 10px;margin:2px}
.lightbox{position:fixed;inset:0;z-index:800;background:rgba(24,21,15,.85);display:flex;
  align-items:center;justify-content:center;cursor:zoom-out;animation:fade .18s}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.5)}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:60px 30px;text-align:center;color:var(--ink3)}
.empty .q{font-family:var(--serif);font-size:88px;line-height:.6;color:#D8CFB8;font-weight:900}
.empty h3{font-family:var(--serif);font-size:19px;color:var(--ink2);font-weight:700;letter-spacing:1px}
.empty p{font-size:13px;line-height:2}
.empty kbd{background:var(--white);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  padding:1px 7px;font-size:11px;font-family:var(--sans);color:var(--ink2)}

#composer{padding:12px 20px 18px}
.composer-inner{max-width:860px;margin:0 auto;display:flex;align-items:flex-end;gap:6px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:9px 10px 9px 12px;box-shadow:var(--shadow)}
.composer-inner:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,101,88,.1),var(--shadow)}
#attachBtn{width:34px;height:34px;flex:none;border-radius:10px;color:var(--ink3);
  display:flex;align-items:center;justify-content:center;transition:.15s}
#attachBtn:hover{color:var(--accent);background:var(--accent-soft)}
body.file-drag .composer-inner{border-color:var(--accent);box-shadow:0 0 0 4px rgba(22,101,88,.16),var(--shadow)}
body.file-drag #attachBtn{color:var(--accent);background:var(--accent-soft)}
#inputArea{flex:1;border:0;outline:0;resize:none;font-size:14px;line-height:1.6;max-height:132px;
  background:none;padding:5px 0}
#inputArea::placeholder{color:var(--ink3)}
#sendBtn{width:38px;height:38px;flex:none;border-radius:12px;background:var(--accent);color:#F5F1E4;
  display:flex;align-items:center;justify-content:center;transition:.15s}
#sendBtn:hover{background:var(--accent-deep);transform:translateY(-1px)}
.composer-hint{max-width:860px;margin:6px auto 0;text-align:right;font-size:10.5px;color:var(--ink3);letter-spacing:.5px}

/* ============ 浮层 ============ */
.drag-ghost{position:fixed;z-index:300;pointer-events:none;display:flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 14px 8px 8px;
  box-shadow:0 12px 30px rgba(43,38,28,.22);transform:rotate(-2deg);font-size:13.5px;font-weight:500}
.drag-ghost.nodrop{opacity:.45}
#dropLine{position:fixed;z-index:290;height:3px;border-radius:3px;background:var(--accent);display:none;
  box-shadow:0 0 0 3px rgba(22,101,88,.18)}
body.dragging{cursor:grabbing}
body.dragging *{cursor:grabbing!important}

.mask{position:fixed;inset:0;background:rgba(43,38,28,.35);z-index:200;display:flex;
  align-items:center;justify-content:center;animation:fade .18s;backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}}
.modal{background:var(--paper);border-radius:16px;padding:24px 26px;width:min(400px,calc(100vw - 40px));
  box-shadow:0 24px 60px rgba(43,38,28,.3);animation:pop .2s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}}
.modal h3{font-family:var(--serif);font-size:17px;font-weight:900;letter-spacing:.5px}
.modal .sub{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.8}
.modal .sub b{color:var(--accent-deep)}
.modal-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.m-btn{font-size:13px;font-weight:700;padding:8px 18px;border-radius:9px}
.m-btn.ghost{background:rgba(43,38,28,.08);color:var(--ink2)}
.m-btn.ghost:hover{background:rgba(43,38,28,.14)}
.m-btn.danger{background:var(--danger);color:#fff}
.m-btn.danger:hover{background:#93331F}
.picker{max-height:320px;overflow-y:auto;margin-top:14px;border:1px solid var(--line-soft);
  border-radius:11px;background:var(--white);padding:6px}
.pick-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;
  padding-left:calc(10px + var(--d)*18px);font-size:13.5px;font-weight:500}
.pick-row:hover{background:var(--accent-soft)}
.pick-row .cnt{margin-left:auto;font-size:11px;color:var(--ink3)}
.picker-empty{padding:24px;text-align:center;color:var(--ink3);font-size:13px}

.menu{position:fixed;z-index:950;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:5px;min-width:172px;box-shadow:0 10px 34px rgba(43,38,28,.18);animation:pop .15s cubic-bezier(.3,1.4,.5,1)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:13px;font-weight:500;
  padding:8px 11px;border-radius:8px;color:var(--ink)}
.menu-item:hover{background:var(--paper)}
.menu-item.danger{color:var(--danger)}
.menu-item.danger:hover{background:#F6E7E2}
.menu-item svg{color:var(--ink3);flex:none}
.menu-item.danger svg{color:var(--danger)}
.menu-sep{height:1px;background:var(--line-soft);margin:5px 8px}
.menu-split{display:flex;align-items:center;padding:0;gap:0}
.menu-half{display:flex;align-items:center;gap:10px;flex:1;
  padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;
  color:var(--ink);text-align:left;transition:.15s}
.menu-half:hover{background:var(--paper)}
.menu-split-sep{color:var(--line);font-size:11px;flex:none;padding:0 1px;user-select:none}
.menu-split .menu-half:last-child{justify-content:flex-start}
.menu-item.menu-split:hover{background:transparent}

#toastRoot{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:#F3EFE3;font-size:13px;padding:10px 20px;border-radius:99px;
  box-shadow:0 8px 24px rgba(43,38,28,.3);animation:toastIn .3s cubic-bezier(.3,1.3,.5,1)}
.toast.out{transition:.35s;opacity:0;transform:translateY(8px)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}}

/* ============ 启动页 ============ */
#gate{position:fixed;inset:0;background:var(--paper);z-index:600;display:flex;align-items:center;
  justify-content:center;padding:24px;overflow:auto}
.gate-card{max-width:440px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.gate-card .logo{width:54px;height:54px;border-radius:15px;margin-bottom:14px}
.gate-title{font-family:var(--serif);font-size:26px;font-weight:900;letter-spacing:3px}
.gate-sub{font-size:13px;color:var(--ink2);margin:8px 0 18px;line-height:1.8}
.gate-tree{font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.9;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;
  color:var(--ink2);margin-bottom:20px;width:100%}
.gate-card .new-root{width:100%;padding:12px;border-radius:11px}
.ghost-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;
  padding:10px;border-radius:11px;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink2)}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}
.gate-note{font-size:11.5px;color:var(--ink3);margin-top:16px;line-height:1.8}

#scrim{display:none}

/* ============ 移动端 ============ */
@media(max-width:860px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-102%);
    transition:transform .3s cubic-bezier(.3,.9,.4,1);box-shadow:8px 0 30px rgba(43,38,28,.15)}
  body.side-open #sidebar{transform:none}
  #scrim{display:block;position:fixed;inset:0;background:rgba(43,38,28,.3);z-index:55;opacity:0;
    pointer-events:none;transition:.3s}
  body.side-open #scrim{opacity:1;pointer-events:auto}
  #hamburger{display:flex}
  #entries{padding:18px 14px 12px}
  .entry,.entry.editing{max-width:86%}
  #composer{padding:10px 12px 14px}
  .top-count{display:none}
}
/* ---- 主题设置 ---- */
#themeBtn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3);
  padding:4px 6px;border-radius:7px}
#themeBtn:hover{color:var(--accent);background:rgba(22,101,88,.08)}
.theme-pop{position:fixed;z-index:950;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:16px;width:280px;box-shadow:0 14px 40px rgba(43,38,28,.22)}
.theme-pop h4{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--ink)}
/* ---- HSB 三滑条竖排 ---- */

.hs-row{display:flex;align-items:center;gap:10px}
.hs-row label{width:34px;flex:none;font-size:12px;color:var(--ink2)}
.hs-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:10px;
  border-radius:99px;outline:none}
.hs-row span{width:34px;flex:none;font-size:12px;color:var(--ink3);text-align:right}
.hs-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}

.theme-btns{display:flex;gap:8px}
.theme-btns button{flex:1;font-size:12px;font-weight:700;padding:8px;border-radius:9px;
  border:1px solid var(--line);color:var(--ink2);transition:.15s}
.theme-btns button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.theme-note{font-size:11px;color:var(--ink3);margin-top:10px;line-height:1.7}
body.has-bg #app{background:transparent}
body.has-bg #sidebar{background:rgba(237,231,216,.88);backdrop-filter:blur(8px)}
body.has-bg #topbar{background:rgba(247,244,236,.85)}
body.has-bg .pin-bar{background:rgba(237,231,216,.8)}
body.has-bg .entry{box-shadow:0 1px 3px rgba(43,38,28,.12)}
#bgLayer{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
#bgLayer::after{content:'';position:absolute;inset:0;
  background:var(--paper);opacity:var(--bg-mask,.45);transition:opacity .2s}
/* ---- 背景裁剪 ---- */
.crop-mask{position:fixed;inset:0;z-index:950;background:rgba(24,21,15,.9);
  display:flex;align-items:center;justify-content:center;animation:fade .18s}
.crop-box{background:var(--paper);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.crop-box h3{font-family:var(--serif);font-size:15px;font-weight:900}
.crop-main{position:relative;width:min(70vw,640px);height:min(52vh,420px);
  background:#222;border-radius:10px;overflow:hidden;cursor:grab;touch-action:none}
.crop-main.dragging{cursor:grabbing}
.crop-canvas{position:absolute;inset:0;width:100%;height:100%}
.crop-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-size:11.5px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);
  padding:4px 12px;border-radius:99px;pointer-events:none;white-space:nowrap}
.crop-foot{display:flex;align-items:center;gap:10px}
.crop-foot .spacer{flex:1}
.crop-foot button{font-size:13px;font-weight:700;padding:8px 18px;border-radius:9px}
.crop-foot .c-ok{background:var(--accent);color:#F5F1E4}
.crop-foot .c-ok:hover{background:var(--accent-deep)}
.crop-foot .c-cancel{background:rgba(43,38,28,.08);color:var(--ink2)}
.crop-foot .c-cancel:hover{background:rgba(43,38,28,.14)}
.crop-zoom{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}
.crop-zoom input{width:140px}
/* ---- Markdown ---- */
.md-quote{display:block;border-left:3px solid var(--accent);background:rgba(22,101,88,.06);
  border-radius:4px;padding:2px 10px;margin:1px 0;color:var(--ink2)}
.md-code{background:rgba(43,38,28,.08);border-radius:4px;padding:1px 5px;
  font-family:ui-monospace,Consolas,monospace;font-size:13px}
.md-pre{background:#2B261C;color:#E8E2D2;border-radius:8px;padding:10px 12px;
  margin:4px 0;overflow-x:auto;font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.6}
.md-pre code{background:none;padding:0;color:inherit}
.md-link{color:var(--accent);text-decoration:none;cursor:pointer;
  border-bottom:1px solid rgba(22,101,88,.35);transition:.15s}
.md-link:hover{background:rgba(22,101,88,.08);border-bottom-color:var(--accent)}
.md-li{display:block;padding-left:6px}
#mdBtn{width:34px;height:34px;flex:none;border-radius:10px;color:var(--ink3);
  display:flex;align-items:center;justify-content:center;transition:.15s;position:relative}
#mdBtn:hover{color:var(--accent);background:var(--accent-soft)}
.md-menu{position:fixed;z-index:950;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:5px;min-width:150px;box-shadow:0 10px 34px rgba(43,38,28,.18)}
.md-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:7px 11px;border-radius:8px;font-size:13px;font-weight:500}
.md-menu button:hover{background:var(--paper)}
.md-menu button code{color:var(--accent);font-size:12px;background:var(--accent-soft);
  padding:1px 6px;border-radius:4px}

  .reply-bar{max-width:860px;margin:0 auto 6px;display:none;align-items:center;gap:8px;
    background:var(--white);border-left:3px solid var(--accent);border-radius:8px;
    padding:6px 12px;font-size:12.5px}
  .reply-bar.on{display:flex}
  .reply-bar .r-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
  .reply-bar .r-x{flex:none;color:var(--ink3);padding:2px 4px;border-radius:4px}
  .reply-bar .r-x:hover{color:var(--danger);background:#F6E7E2}


    /* ================= 合并视图 ================= */
#main{position:relative}
.merge-btn{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--ink3);border:1px solid var(--line);padding:6px 11px;border-radius:9px;transition:.15s}
.merge-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.merge-btn.on{color:#F5F1E4;background:var(--accent);border-color:var(--accent)}

.src-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--accent);background:rgba(22,101,88,.08);border-radius:6px;
  padding:2px 9px 2px 3px;margin-bottom:6px;cursor:pointer;transition:.15s}
.src-tag:hover{background:rgba(22,101,88,.18)}
.src-tag .badge{width:16px;height:16px;font-size:10px;margin:0 0 0 1px}

/* ================= 日期跳转 ================= */
.date-jump{position:absolute;right:28px;top:50%;transform:translateY(-50%);
  background:rgba(43,38,28,.78);color:#F3EFE3;font-size:11.5px;font-weight:600;
  padding:6px 12px;border-radius:99px;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .22s,background .15s;z-index:12;white-space:nowrap;
  box-shadow:0 4px 16px rgba(43,38,28,.28);letter-spacing:.5px}
.date-jump.on{opacity:1;pointer-events:auto}
.date-jump:hover{background:rgba(43,38,28,.92)}

.date-menu{position:fixed;right:14px;top:50%;transform:translateY(-50%);
  z-index:950;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:6px;min-width:150px;max-height:min(60vh,420px);overflow-y:auto;
  box-shadow:0 10px 34px rgba(43,38,28,.2);animation:pop .15s cubic-bezier(.3,1.4,.5,1)}
.date-menu button{display:block;width:100%;text-align:left;font-size:13px;font-weight:500;
  padding:8px 12px;border-radius:8px;white-space:nowrap}
.date-menu button:hover{background:var(--paper);color:var(--accent)}
.date-menu button.cur{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* picker 里允许 label 复用 */
label.pick-row{cursor:pointer}
label.pick-row input[type=checkbox]{flex:none;accent-color:var(--accent);width:15px;height:15px}


.md-tag{
  color:var(--accent);font-weight:600;cursor:pointer;
  border-radius:4px;padding:0 2px;transition:.15s;
}
.md-tag:hover{background:var(--accent-soft);text-decoration:none}


.load-earlier{
  text-align:center;font-size:12px;color:var(--ink3);
  padding:14px 0;cursor:pointer;letter-spacing:.5px;
}
.load-earlier:hover{color:var(--accent)}


.md-ref{
  color:var(--accent);font-weight:600;cursor:pointer;
  background:rgba(22,101,88,.07);border-radius:5px;
  padding:0 5px;text-decoration:none;transition:.15s;
}
.md-ref:hover{background:rgba(22,101,88,.16)}


.theme-tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--paper);
  padding:3px;border-radius:9px}
.theme-tab{flex:1;font-size:12px;font-weight:600;padding:6px 8px;border-radius:7px;
  color:var(--ink2);transition:.15s}
.theme-tab:hover{color:var(--accent)}
.theme-tab.on{background:var(--white);color:var(--accent);box-shadow:0 1px 3px rgba(43,38,28,.1)}
.theme-reset{width:100%;margin-top:10px;font-size:12px;font-weight:600;
  padding:7px;border-radius:9px;color:var(--ink2);border:1px dashed var(--line)}
.theme-reset:hover{color:var(--accent);border-color:var(--accent);border-style:solid}


/* ---- 主题面板的三条滑条 ---- */
#thH{background:linear-gradient(90deg,#c0392b,#e67e22,#f1c40f,#2ecc71,#16a085,#3498db,#9b59b6,#e74c3c)}
#thS{background:linear-gradient(90deg,hsl(var(--th,166) 8% 35%),hsl(var(--th,166) 90% 35%))}
#thB{background:linear-gradient(90deg,hsl(var(--th,166) 62% 10%),hsl(var(--th,166) 62% 60%))}
#thH,#thS,#thB{
  -webkit-appearance:none;appearance:none;
  height:10px;border-radius:99px;outline:none;
}
#thH::-webkit-slider-thumb,#thS::-webkit-slider-thumb,#thB::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* 就地替换时禁止一切动画，避免视觉跳动 */
.entry-row.quiet{animation:none!important;transition:none!important;
  opacity:1!important;transform:none!important}


  .scroll-bottom{
    position:absolute;right:22px;bottom:148px;
    width:42px;height:42px;border-radius:50%;
    background:var(--accent);color:#F5F1E4;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 20px rgba(22,101,88,.35);
    opacity:0;pointer-events:none;transition:.2s;
    z-index:15;
  }
  .scroll-bottom.on{opacity:1;pointer-events:auto}
  .scroll-bottom:hover{background:var(--accent-deep);transform:translateY(-2px)}

  /* ---- 多选折叠 ---- */
.multi-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:#F3EFE3;padding:8px 16px;border-radius:99px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 30px rgba(43,38,28,.35);z-index:400;
  opacity:0;pointer-events:none;transition:.22s}
.multi-bar.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.multi-bar .mb-count{font-size:13px;letter-spacing:.5px}
.multi-bar button{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:99px;transition:.15s}
.multi-bar .mb-fold{background:var(--accent);color:#F5F1E4}
.multi-bar .mb-fold:hover{background:var(--accent-deep)}
.multi-bar .mb-cancel{color:#F3EFE3}
.multi-bar .mb-cancel:hover{background:rgba(255,255,255,.15)}

.entry-row.multi-selected{background:rgba(22,101,88,.1);border-radius:10px}
.entry-row.multi-selected .entry{box-shadow:0 0 0 2px var(--accent)}



/* ---- 折叠控制器（紧贴气泡右侧） ---- */
.fold-ctrl{display:flex;flex-direction:column;gap:2px;align-self:flex-start;
  margin-top:6px;flex:none}
.fold-toggle,.fold-cancel{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--ink3);
  background:rgba(255,253,248,.7);border:1px solid var(--line-soft);
  transition:.15s;
}
.fold-toggle{color:var(--accent)}
.fold-toggle:hover{background:var(--accent-soft);border-color:var(--accent)}
.fold-cancel:hover{color:var(--danger);border-color:var(--danger);background:#F6E7E2}

/* 气泡边框加深 */
.entry{border-color:var(--bubble-bd-color);
  box-shadow:0 1px 2px rgba(43,38,28,.08), 0 0 0 1px rgba(43,38,28,.03)}

/* 时间戳：独占一行，右对齐，带淡底 */
.entry .meta{display:block;text-align:right;
  background:rgba(255,253,248,.55);border-radius:4px;
  padding:1px 5px;margin-left:auto;width:fit-content}

/* 工具条按钮加强 */
body.has-bg .tool{background:rgba(255,253,248,.92)}

/* 侧栏上按钮加强（本来已经有 blur） */
body.has-bg .pin-chip{background:rgba(255,253,248,.92)}

/* ---- 搜索框下的快捷标记 ---- */
.quick-tags{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap}
.quick-tag{font-size:11.5px;font-weight:600;color:var(--accent);
  background:rgba(22,101,88,.07);border:1px solid transparent;
  padding:3px 11px;border-radius:99px;transition:.15s}
.quick-tag:hover{border-color:var(--accent);background:var(--accent-soft)}

.trash-btn{margin-left:auto;width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink3);transition:.15s}
.trash-btn:hover{color:var(--accent);background:var(--accent-soft)}
.save-state{padding-right:6px}

.tp-card{width:min(680px,94vw)}
.tp-meta{font-size:11.5px;color:var(--ink3);margin-bottom:6px;letter-spacing:.3px}
.tp-text{font-size:13.5px;color:var(--ink2);line-height:1.7;white-space:pre-wrap;
  word-break:break-word;max-height:180px;overflow:hidden}
.tp-clear{margin-left:auto;font-size:12px;font-weight:700;color:var(--danger);
  padding:6px 12px;border-radius:9px;border:1px solid rgba(178,64,44,.35)}
.tp-clear:hover{background:#F6E7E2}


/* 垃圾桶 */
.trash-tabs{display:flex;gap:4px;background:var(--paper);padding:3px;
  border-radius:9px;margin-left:auto}
.trash-tab{font-size:12px;font-weight:600;padding:5px 12px;border-radius:7px;
  color:var(--ink2);transition:.15s}
.trash-tab:hover{color:var(--accent)}
.trash-tab.on{background:var(--white);color:var(--accent);
  box-shadow:0 1px 3px rgba(43,38,28,.1)}
.trash-tabs+.tp-clear{margin-left:10px}



.entry-row{content-visibility:auto;contain-intrinsic-size:auto 80px}


/* ---- 代码块：复制按钮 + 语言标签 ---- */
.md-pre-wrap{margin:4px 0;border-radius:8px;overflow:hidden}
.md-pre-head{display:flex;justify-content:space-between;align-items:center;
  padding:4px 10px;background:rgba(43,38,28,.92);color:rgba(232,226,210,.65);
  font-size:11px;font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
.md-pre-lang{font-weight:600}
.md-pre-copy{font-size:11px;padding:2px 8px;border-radius:5px;
  color:rgba(232,226,210,.9);transition:.15s}
.md-pre-copy:hover{background:rgba(255,255,255,.14);color:#fff}
.md-pre-wrap .md-pre{margin:0;border-radius:0}

/* ---- 引用块折叠 ---- */
.md-quote.collapsible{
  position:relative;max-height:6em;overflow:hidden;cursor:pointer;
}
.md-quote.collapsible::after{
  content:'⋯ 点击展开';
  position:absolute;bottom:0;left:0;right:0;
  text-align:center;font-size:11px;color:var(--accent);
  padding:20px 0 3px;letter-spacing:.5px;
  background:linear-gradient(transparent,rgba(22,101,88,.06) 55%);
  pointer-events:none;
}
.md-quote.collapsible.expanded{max-height:none}
.md-quote.collapsible.expanded::after{display:none}

.entry .meta[title]{cursor:help}
.entry .meta[title]::after{
  content:'';display:inline-block;width:0;
}
.entry .meta[title]:hover{background:rgba(22,101,88,.1)}


/* ---- 搜索范围切换 ---- */
.scope-btn{flex:none;font-size:11px;font-weight:600;color:var(--accent);
  background:rgba(22,101,88,.08);border:1px solid transparent;
  padding:2px 8px;border-radius:6px;transition:.15s;white-space:nowrap}
.scope-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.scope-btn.global{color:var(--danger);background:rgba(178,64,44,.08)}
.scope-btn.global:hover{border-color:var(--danger);background:rgba(178,64,44,.15)}

/* ---- 搜索结果"显示更多" ---- */
.res-more{display:block;width:100%;text-align:center;font-size:12px;font-weight:600;
  color:var(--accent);padding:10px;border-radius:9px;margin-top:6px;transition:.15s}
.res-more:hover{background:var(--accent-soft)}

/* ---- 内联链接按钮（空状态里用） ---- */
.link-btn{color:var(--accent);font-weight:700;text-decoration:underline}


.attach-preview{
  max-width:860px;margin:0 auto 6px;gap:8px;flex-wrap:wrap;
}

.attach-chip{
  position:relative;width:64px;height:64px;flex:none;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--white);
  box-shadow:0 1px 3px rgba(43,38,28,.08);
}
.attach-chip img{width:100%;height:100%;object-fit:cover;display:block}

.attach-chip .ac-x{
  position:absolute;top:3px;right:3px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(43,38,28,.72);color:#F3EFE3;
  font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .15s;
}
.attach-chip:hover .ac-x{opacity:1}
@media(hover:none){.attach-chip .ac-x{opacity:1}}

/* 加载中骨架屏 */
.attach-chip.loading{
  background:linear-gradient(90deg,#EDE7D8 25%,#E0D9C6 37%,#EDE7D8 63%);
  background-size:400% 100%;animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}