/* ═════════ 随心记：无限画板 + 真实感便签纸 ═════════ */
.content.full { padding: 0; overflow: hidden; }
.nb { position: absolute; inset: 0; }
.nb-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-color: rgba(255,255,255,.28);
  background-image: radial-gradient(circle, rgba(16,42,28,.17) 1.2px, transparent 1.6px); background-size: 26px 26px; }
.nb-stage.panning { cursor: grabbing; }
.nb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.nb-world.glide { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb-stage { background-color: rgba(0,0,0,.18); background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.2px, transparent 1.6px); }
}

/* 顶部工具条 + 左侧标签（悬浮玻璃） */
.nb-top { position: absolute; top: 62px; left: 196px; right: 22px; z-index: 5; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.nb-top > * { pointer-events: auto; }
.nb-search { width: 300px; }
.nb-hits { font-size: 13px; }
.nb-zoom { display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-glass); }
.nb-zoom span { min-width: 46px; text-align: center; font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; cursor: default; }
.nb-zoom .btn.icon { width: 26px; font-size: 15px; }
.nb-tags { position: absolute; top: 62px; left: 18px; z-index: 5; width: 160px; padding: 8px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow-glass), var(--inner-hi); }
.nb-tags-h { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 6px; font-weight: 600; }
.nb-tag { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 14px; cursor: default; }
.nb-tag i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.2); }
.nb-tag span { margin-left: auto; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.nb-tag:hover { background: var(--hover); }
.nb-tag.on { background: var(--sel); font-weight: 600; box-shadow: 0 0 0 .5px var(--hair), 0 1px 3px rgba(16,42,28,.08); }

.nb-empty { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--sub); pointer-events: none; text-align: center; }
.nb-empty svg.i { width: 54px; height: 54px; stroke-width: 1.2; color: #e0a800; margin-bottom: 6px; }
.nb-empty b { font-size: 17px; color: var(--fg); }
.nb-empty span { font-size: 13px; }

/* 便签纸 */
.note { position: absolute; padding: 26px 16px 10px; border-radius: 3px 3px 4px 4px; cursor: grab; user-select: none; -webkit-user-select: none;
  background: linear-gradient(172deg, var(--p0) 0%, var(--p1) 100%);
  box-shadow: 0 1px 1px rgba(60,40,0,.10), 0 2px 4px rgba(60,40,0,.06), 0 14px 22px -12px rgba(40,30,0,.38);
  transform: rotate(var(--rot)); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .2s, filter .2s; }
/* 纸张纹理与右下卷角 */
.note::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px); }
.note::after { content: ""; position: absolute; right: 2px; bottom: 6px; width: 46%; height: 16px; z-index: -1; pointer-events: none;
  box-shadow: 0 12px 10px rgba(40,30,0,.30); transform: rotate(4deg) skewX(-12deg); }
.note:hover { box-shadow: 0 1px 1px rgba(60,40,0,.10), 0 4px 8px rgba(60,40,0,.08), 0 20px 30px -14px rgba(40,30,0,.42); }
.note.lift { cursor: grabbing; transform: rotate(0deg) scale(1.04); box-shadow: 0 2px 4px rgba(60,40,0,.10), 0 34px 44px -18px rgba(40,30,0,.48); transition: transform .18s, box-shadow .18s; }
.note.settle { animation: settle .38s cubic-bezier(.2,.8,.2,1); }
@keyframes settle { 0% { transform: rotate(0) scale(1.04); } 60% { transform: rotate(var(--rot)) scale(.985); } 100% { transform: rotate(var(--rot)) scale(1); } }
.note.pinning { animation: pinIn .55s cubic-bezier(.2,.9,.25,1.2); }
@keyframes pinIn { 0% { opacity: 0; transform: rotate(calc(var(--rot) * 4)) scale(1.18) translateY(-18px); } 70% { opacity: 1; transform: rotate(var(--rot)) scale(.97); } 100% { transform: rotate(var(--rot)) scale(1); } }
.note.tear { animation: tear .26s ease-in forwards; }
@keyframes tear { to { opacity: 0; transform: rotate(calc(var(--rot) + 12deg)) translateY(30px) scale(.9); } }

/* 图钉 */
.pin { position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.95) 0 9%, color-mix(in srgb, var(--pc) 75%, #fff) 10% 32%, var(--pc) 58%, color-mix(in srgb, var(--pc) 70%, #000) 100%);
  box-shadow: 0 4px 5px -1px rgba(0,0,0,.35), inset 0 -1px 2px rgba(0,0,0,.25); }
.pin::after { content: ""; position: absolute; left: 9px; top: 16px; width: 3px; height: 7px; border-radius: 2px; background: rgba(0,0,0,.18); filter: blur(1px); transform: rotate(18deg); }

/* 文字：手写感 */
.note-txt { display: block; width: 100%; min-height: 110px; border: 0; outline: 0; resize: none; background: transparent; padding: 0; overflow: hidden;
  font: 16.5px/1.65 "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", cursive; color: #2b2410; cursor: grab;
  background-image: linear-gradient(transparent calc(1.65em - 1px), rgba(80,60,0,.10) calc(1.65em - 1px), rgba(80,60,0,.10) 1.65em, transparent 1.65em);
  background-size: 100% 1.65em; }
.note-txt:focus { cursor: text; user-select: text; -webkit-user-select: text; }
.note-txt::placeholder { color: rgba(60,45,0,.38); }
.note.t-done .note-txt { color: rgba(30,60,40,.62); }

.note-ft { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(80,60,0,.18); }
.note-tag { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--pc) 80%, #000); background: rgba(255,255,255,.55); cursor: default; }
.note-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); }
.note-time { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: rgba(60,45,0,.45); margin-left: 4px; white-space: nowrap; }
.note-act { flex: none; margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: rgba(60,45,0,.45); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.note-act + .note-act { margin-left: 0; }
.note-act svg.i { width: 14px; height: 14px; }
.note:hover .note-act, .note:focus-within .note-act { opacity: 1; }
.note-act:hover { background: rgba(255,255,255,.6); color: #2b2410; }
.note-done:hover { color: #16a34a; }
.note-del:hover { color: #e5352b; }
.note.t-done .note-done { opacity: 1; color: #16a34a; }
.note { display: flex; flex-direction: column; }
.note-txt { flex: 1 0 auto; }
.note-ft { flex: none; }
/* 拉伸：右边缘 = 横向，下边缘 = 纵向，右下角 = 45° 斜向 */
.note-rx { position: absolute; top: 14px; right: -5px; bottom: 18px; width: 10px; cursor: ew-resize; z-index: 3; }
.note-ry { position: absolute; left: 14px; right: 18px; bottom: -5px; height: 10px; cursor: ns-resize; z-index: 3; }
.note-rx::after, .note-ry::after { content: ""; position: absolute; border-radius: 2px; background: color-mix(in srgb, var(--pc) 70%, transparent); opacity: 0; transition: opacity .15s; }
.note-rx::after { top: 30%; bottom: 30%; left: 4px; width: 3px; }
.note-ry::after { left: 35%; right: 35%; top: 4px; height: 3px; }
.note-rx:hover::after, .note-ry:hover::after, .note.resizing .note-rx::after, .note.resizing .note-ry::after { opacity: 1; }
.note-rs { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; cursor: nwse-resize; z-index: 4; opacity: 0; transition: opacity .15s;
  background: linear-gradient(135deg, transparent 46%, rgba(80,60,0,.32) 46% 54%, transparent 54% 64%, rgba(80,60,0,.32) 64% 72%, transparent 72% 82%, rgba(80,60,0,.32) 82% 90%, transparent 90%); }
.note:hover .note-rs, .note.resizing .note-rs { opacity: 1; }
.note.resizing { transition: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 55%, transparent), 0 14px 22px -12px rgba(40,30,0,.38); }

/* 已完成印章 */
.note-stamp { position: absolute; right: 12px; bottom: 44px; padding: 2px 8px; border: 2px solid rgba(22,163,74,.55); border-radius: 6px;
  color: rgba(22,163,74,.7); font-size: 13px; font-weight: 800; letter-spacing: .1em; transform: rotate(-12deg); pointer-events: none; }
.note.stamp-in .note-stamp { animation: stamp .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* 搜索 / 筛选 */
.note.hide { display: none; }
.note.dim { opacity: .18; filter: saturate(.4); }
.note.hit { box-shadow: 0 0 0 3px rgba(21,135,74,.55), 0 14px 22px -12px rgba(40,30,0,.38); }

/* 概览入口卡 */
.ov-notes .ov-stickies { display: flex; gap: 10px; margin-top: 14px; min-height: 64px; align-items: flex-start; }
.mini-note { flex: 1; min-width: 0; padding: 12px 10px 10px; font: 13px/1.45 "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", cursive; color: #2b2410;
  background: linear-gradient(172deg, var(--p0), var(--p1)); border-radius: 2px; position: relative; transform: rotate(var(--r));
  box-shadow: 0 8px 12px -8px rgba(40,30,0,.4); max-height: 64px; overflow: hidden; }
.mini-note::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--pc) 40%, color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
@media (max-width: 860px) { .nb-tags { display: none; } .nb-top { left: 14px; } .nb-search { width: 180px; } }

/* 微信来源角标 */
.note-src { flex: none; font-size: 10.5px; font-weight: 700; color: #fff; background: #07c160; border-radius: 4px; padding: 0 5px; line-height: 16px; margin-left: 4px; }
/* 微信记便签窗口 */
.wx-intro { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.wx-chat { background: #ededed; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.wx-chat .b { max-width: 88%; padding: 8px 11px; border-radius: 8px; line-height: 1.5; color: #111; }
.wx-chat .me { align-self: flex-end; background: #95ec69; }
.wx-chat .bot { align-self: flex-start; background: #fff; }
.tk-line { display: flex; gap: 8px; align-items: center; }
.tk-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 13px var(--mono); background: var(--glass-3); border: 1px solid var(--hair-2); border-radius: 8px; padding: 8px 10px; -webkit-user-select: all; user-select: all; }
@media (max-width: 860px) { .wx-intro { grid-template-columns: 1fr; } }