/* ============================================================
   Garfie Notes — 多巴胺配色 · 抽屉 + 卡片
   ============================================================ */
:root{
  /* 多巴胺色板 */
  --c1:#FF6B6B; --c2:#FFA94D; --c3:#FFD43B; --c4:#51CF66;
  --c5:#4DABF7; --c6:#9775FA; --c7:#F783AC;
  --pride:linear-gradient(100deg,var(--c1),var(--c7) 30%,var(--c6) 55%,var(--c5) 80%,var(--c4));

  --bg:#FAFAFC;
  --card:#FFFFFF;
  --ink:#2B2733;
  --ink-soft:#6E6879;
  --ink-faint:#A7A1B3;
  --line:#ECEAF2;
  --shadow-s:0 1px 2px rgba(43,39,51,.05),0 4px 14px rgba(43,39,51,.06);
  --shadow-m:0 2px 6px rgba(43,39,51,.06),0 14px 40px rgba(43,39,51,.10);
  --shadow-l:0 24px 80px rgba(43,39,51,.24);
  --r-l:20px; --r-m:14px; --r-s:10px;

  --paper:#FFFDF8;
  --paper-line:#EFE9DB;
  --p-ink:#40382E;
  --p-soft:#8a7f6d;
  --p-faint:#b9ad97;
  --accent:#FF6B6B;
  --accent-soft:#FFE3E3;
  --sage:#51CF66;
  --hl:#FFE58F;
  --redpen:#E8590C;
  --bluepen:#4DABF7;

  --font-body:-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-hand:"Kaiti SC","KaiTi","STKaiti",cursive,serif;
  --drawer-w:272px;
}
body.dark{
  --bg:#151319;
  --card:#1F1C26;
  --ink:#F2EFF8;
  --ink-soft:#A9A3B5;
  --ink-faint:#6E6879;
  --line:#2C2836;
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --shadow-m:0 2px 6px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.45);
  --shadow-l:0 24px 80px rgba(0,0,0,.6);
  --paper:#262230;
  --paper-line:#37304A;
  --p-ink:#EDE8DC;
  --p-soft:#a89c88;
  --p-faint:#6f6455;
  --accent:#FF8787;
  --accent-soft:#43282F;
  --hl:#8a6f1f;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  transition:background .25s,color .25s;
}
.hidden{display:none !important}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font-family:inherit;color:inherit}
::selection{background:rgba(255,107,107,.25)}

/* ============================================================
   顶栏
   ============================================================ */
#topbar{
  height:64px;
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
  background:color-mix(in srgb,var(--card) 78%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:40;
}
#btn-drawer{
  width:38px;height:38px;border-radius:12px;font-size:17px;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:.15s;
}
#btn-drawer:hover{background:var(--bg);color:var(--ink)}
body.drawer-open #btn-drawer{background:var(--bg)}

.brand{display:flex;align-items:center;gap:9px;margin-right:6px}
.brand-dot{
  width:14px;height:14px;border-radius:6px 5px 7px 6px;
  background:var(--pride);
  box-shadow:2px 2px 0 rgba(151,117,250,.35);
  transform:rotate(-8deg);
}
.brand-name{
  font-size:15px;font-weight:700;letter-spacing:.6px;color:var(--ink);
}
.brand-name b{
  background:var(--pride);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.top-search{
  flex:1;max-width:460px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  transition:.2s;
}
.top-search:focus-within{border-color:var(--c5);box-shadow:0 0 0 3px rgba(77,171,247,.15)}
.top-search span{color:var(--ink-faint)}
.top-search input{flex:1;border:none;background:none;outline:none;font-size:13.5px}
.top-search input::placeholder{color:var(--ink-faint)}

.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-icon{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-size:15px;
  color:var(--ink-soft);border:1px solid var(--line);
  background:var(--card);
  transition:.15s;
}
.top-icon:hover{color:var(--ink);transform:translateY(-1px)}
.btn-pride{
  height:38px;padding:0 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:linear-gradient(100deg,var(--c1),var(--c7) 45%,var(--c6));
  box-shadow:0 4px 14px rgba(247,131,172,.4);
  transition:transform .15s, box-shadow .15s;
  display:inline-flex;align-items:center;gap:7px;
}
.btn-pride:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(247,131,172,.45)}
.btn-pride:active{transform:none}
.btn-pride.small{height:32px;padding:0 14px;font-size:12.5px}

/* ============================================================
   布局壳
   ============================================================ */
#shell{display:flex;height:calc(100vh - 64px);position:relative}

/* ---- 抽屉 ---- */
#drawer{
  width:var(--drawer-w);min-width:var(--drawer-w);
  background:var(--card);
  border-right:1px solid var(--line);
  z-index:30;
  transition:margin-left .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
body:not(.drawer-open) #drawer{
  margin-left:calc(-1 * var(--drawer-w));
  opacity:0;pointer-events:none;
}
.drawer-inner{height:100%;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:22px}
.drawer-inner::-webkit-scrollbar{width:6px}
.drawer-inner::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.d-section h4{
  font-size:10.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px;padding-left:4px;
}
.d-filters{display:flex;flex-direction:column;gap:4px}
.d-filter{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  font-size:13.5px;color:var(--ink-soft);
  border:1px solid transparent;
  transition:.15s;text-align:left;
}
.d-filter i{font-style:normal;width:20px;text-align:center}
.d-filter:hover{background:var(--bg);color:var(--ink)}
.d-filter.active{
  background:var(--bg);color:var(--ink);font-weight:600;
  border-color:var(--line);
  box-shadow:inset 3px 0 0 0 var(--c1);
}
.d-filter em{
  margin-left:auto;font-style:normal;
  font-size:10.5px;font-weight:700;
  background:var(--line);color:var(--ink-soft);
  border-radius:999px;padding:1.5px 7px;
}
.d-filter.active em{background:var(--accent-soft);color:var(--accent)}

.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag-cloud:empty + .d-hint{display:block}
.d-hint{display:none;font-size:11px;color:var(--ink-faint);line-height:1.6;padding:2px 4px}
.tag-chip-mini{
  font-size:12px;padding:4.5px 11px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-soft);cursor:pointer;transition:.15s;
  font-weight:600;
}
.tag-chip-mini:hover{color:var(--ink);border-color:var(--ink-faint);transform:translateY(-1px)}
.tag-chip-mini.on{color:#fff;border-color:transparent;background:linear-gradient(100deg,var(--c6),var(--c7))}

.d-row select{
  width:100%;padding:8px 12px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);
  font-size:12.5px;outline:none;
}
.storage{display:flex;align-items:center;gap:10px;margin:12px 0 10px;font-size:11px;color:var(--ink-faint)}
.storage-bar-wrapper{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
#storage-fill{display:block;height:100%;width:0;background:var(--pride);border-radius:3px;transition:width .4s}
.d-btns{display:flex;gap:6px}
.d-btns button{
  flex:1;padding:8px 0;font-size:11.5px;font-weight:600;
  border-radius:10px;border:1px solid var(--line);
  color:var(--ink-soft);background:var(--bg);
  transition:.15s;
}
.d-btns button:hover{color:var(--ink);transform:translateY(-1px)}
.d-btns button.danger{color:var(--redpen)}
.d-foot{
  margin-top:auto;padding-top:18px;
  font-size:10.5px;color:var(--ink-faint);text-align:center;letter-spacing:.5px;
}

#scrim{
  position:fixed;inset:64px 0 0 0;z-index:25;
  background:rgba(21,19,25,.4);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:.2s;
}
@media (max-width:820px){
  #scrim.on{opacity:1;pointer-events:auto}
  #drawer{position:fixed;left:0;top:64px;bottom:0;box-shadow:var(--shadow-l)}
}

/* ============================================================
   卡片面板
   ============================================================ */
#board-wrap{flex:1;overflow-y:auto;padding:26px clamp(18px,4vw,52px) 80px;position:relative}
#board-wrap::-webkit-scrollbar{width:10px}
#board-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}

.trash-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:1080px;margin:0 auto 18px;
  padding:12px 18px;border-radius:var(--r-m);
  background:var(--card);border:1px dashed var(--c2);
  font-size:13px;color:var(--ink-soft);
}
.trash-banner button{
  margin-left:auto;font-size:12px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);
  padding:6px 14px;border-radius:999px;
}

.board{
  max-width:1080px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(206px, 232px));
  gap:20px 18px;
  justify-content:center;
}
.note-card{
  position:relative;
  display:flex;flex-direction:column;
  min-height:252px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:0 0 12px;
  cursor:pointer;
  box-shadow:var(--shadow-s);
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
  overflow:hidden;
}
.note-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow-m)}
/* 吊牌穿绳孔 */
.note-card::before{
  content:"";position:absolute;top:18px;left:50%;
  transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--bg);
  box-shadow:inset 0 1px 2px rgba(43,39,51,.25), 0 0 0 2px rgba(255,255,255,.5);
  z-index:2;
}
.note-card .ribbon{
  height:6px;width:100%;flex:none;
  background:linear-gradient(100deg,var(--r1),var(--r2));
}
.nc-body{padding:26px 15px 10px;flex:1;display:flex;flex-direction:column}
.nc-title{
  font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:7px;
}
.nc-row-split{display:flex;gap:9px;align-items:flex-start;flex:1}
.nc-mini-img{
  width:44px;height:44px;border-radius:9px;object-fit:cover;
  border:2.5px solid var(--card);
  outline:1px solid var(--line);
  transform:rotate(3deg);
  box-shadow:var(--shadow-s);
  flex:none;background:var(--bg);
}
.nc-snippet{
  font-size:12px;color:var(--ink-soft);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  white-space:pre-wrap;word-break:break-all;
  flex:1;min-height:56px;
}
.nc-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  margin-top:10px;padding:10px 15px 0;
  border-top:1px dashed var(--line);
  font-size:11px;color:var(--ink-faint);
}
.nc-when{display:flex;align-items:center;gap:4px}
.nc-before{width:3px;height:3px;border-radius:50%;background:var(--ink-faint)}
.nc-tag{
  font-size:10.5px;font-weight:600;padding:2.5px 9px;border-radius:999px;
  color:#fff;background:linear-gradient(100deg,var(--t1),var(--t2));
}
.nc-more{font-weight:600;color:var(--ink-faint)}
.nc-flag{font-size:12px}
.nc-star{color:var(--c3);font-size:13px}
.nc-trashed{opacity:.65}
.nc-trashed .nc-title{text-decoration:line-through;color:var(--ink-faint)}
.nc-trash-btns{display:flex;gap:8px;padding:12px 16px 0}
.nc-trash-btns button{
  flex:1;font-size:12px;font-weight:700;padding:7px 0;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-soft);
}
.nc-trash-btns button.restore{color:#0CA678;border-color:#0CA678;background:rgba(12,166,120,.06)}
.nc-trash-btns button.danger{color:var(--c1);border-color:var(--c1);background:rgba(255,107,107,.06)}
/* 卡片底部删除（移到废纸篓，可恢复） */
.nc-del{
  margin-left:auto;
  border:none;background:none;
  color:var(--ink-faint);
  font-size:14px;line-height:1;
  padding:2px 6px;border-radius:6px;
  opacity:.55;cursor:pointer;
  transition:opacity .15s, background .15s, color .15s;
}
.note-card:hover .nc-del{opacity:1}
.nc-del:hover{background:rgba(255,107,107,.12);color:var(--c1)}

.board-empty{
  text-align:center;padding:48px 0;color:var(--ink-faint);font-size:13px;letter-spacing:1px;
}

/* 空状态 */
#empty-state{
  max-width:560px;margin:12vh auto 0;text-align:center;
  color:var(--ink-soft);
}
#empty-state h2{font-size:22px;letter-spacing:3px;color:var(--ink);margin:22px 0 10px;font-weight:800}
#empty-state p{font-size:13.5px;line-height:2.1}
.empty-orb span{
  display:inline-block;font-size:32px;margin:0 10px;
  animation:float 3.4s ease-in-out infinite;animation-delay:var(--d);
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(5deg)}}

/* ============================================================
   编辑器覆盖层
   ============================================================ */
#editor-overlay{
  position:fixed;inset:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 55%,rgba(21,19,25,.5));
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  padding:22px clamp(10px,3vw,40px);
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.editor-panel{
  width:min(880px,100%);height:100%;
  max-height:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-l);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:riseIn .3s cubic-bezier(.35,0,.2,1.2) ;
}
@keyframes riseIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}

.ed-top{
  display:flex;align-items:center;gap:8px;
  padding:14px 18px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.ed-back{
  font-size:13px;font-weight:700;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-soft);transition:.15s;
}
.ed-back:hover{color:var(--ink);background:var(--bg)}
.ed-date{font-size:12px;color:var(--ink-faint);margin-left:8px;letter-spacing:.5px}
.ed-gap{flex:1}
.ed-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-size:15px;color:var(--ink-soft);
  transition:.15s;
}
.ed-icon:hover{background:var(--bg);color:var(--ink)}
.ed-icon.on{color:var(--c3)}

/* 这一页的大标题 */
.ed-title{
  width:100%;
  border:none;outline:none;background:transparent;
  font-family:var(--font-hand);
  font-size:22px;font-weight:700;letter-spacing:1.5px;
  color:var(--ink);
  padding:18px 20px 12px;
}
.ed-title::placeholder{color:var(--ink-faint);letter-spacing:2px}
.ed-title:focus{
  background:linear-gradient(90deg,rgba(151,117,250,.10),rgba(247,131,172,.08));
}

.ed-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);
}
.mood-pick{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mood-label{font-size:11.5px;color:var(--ink-faint);font-weight:700;letter-spacing:2px}
.mood-split{width:1px;height:22px;background:var(--line)}
.mood-btns{display:flex;gap:2px}
.mood-btns button{
  width:28px;height:28px;border-radius:9px;font-size:15px;
  display:grid;place-items:center;transition:.12s;filter:grayscale(.75);opacity:.55;
}
.mood-btns button:hover{filter:none;opacity:1;transform:scale(1.14)}
.mood-btns button.on{filter:none;opacity:1;background:var(--accent-soft)}

.tag-editor{display:flex;flex-wrap:wrap;gap:5px}
.tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;padding:3.5px 10px;border-radius:999px;color:#fff;
  background:linear-gradient(100deg,var(--t1),var(--t2));
}
.tag-chip button{font-size:12px;color:inherit;opacity:.65}
.tag-chip button:hover{opacity:1}
#tag-input{
  border:none;border-bottom:1.5px dashed var(--ink-faint);
  background:transparent;font-size:12px;padding:4px 2px;width:140px;outline:none;
  color:var(--ink-soft);
}
#tag-input:focus{border-color:var(--c6);color:var(--ink)}

/* 工具栏 */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:3px;
  padding:8px 14px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 60%,var(--bg));
}
.tb{
  min-width:32px;height:30px;padding:0 7px;border-radius:9px;
  font-size:13.5px;color:var(--ink-soft);
  display:grid;place-items:center;transition:.12s;
}
.tb:hover{background:var(--bg);color:var(--ink)}
.tb-sep{width:1px;height:18px;background:var(--line);margin:0 5px}
.tb-red{color:var(--redpen)}
.tb-pen{color:#0CA678}

/* 纸面 */
.paper-scroll{
  flex:1;overflow-y:auto;
  background:
    radial-gradient(circle,rgba(151,117,250,.05) 1px,transparent 1.4px) 0 0/26px 26px,
    var(--bg);
  padding:20px clamp(8px,3vw,32px) 30px;
}
.paper-scroll::-webkit-scrollbar{width:10px}
.paper-scroll::-webkit-scrollbar-thumb{background:var(--paper-line);border-radius:5px}
.paper-wrap{
  position:relative;max-width:760px;margin:0 auto;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:16px;
  box-shadow:var(--shadow-m);
}
.paper{
  position:relative;
  min-height:100%;
  padding:30px 42px 64px;
  font-size:15px;line-height:2;
  outline:none;color:var(--p-ink);
  background:
    radial-gradient(circle,rgba(140,120,90,.14) 1px,transparent 1.4px) 0 8px/24px 24px;
  border-radius:16px;
  word-break:break-word;
}
.paper-hole{
  position:absolute;top;height:11px;width:11px;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.paper-hole.hole-1{top:70px}
.paper-hole.hole-2{top:55%}

.paper[data-blank="1"]::before{
  content:attr(data-placeholder);
  position:absolute;top:30px;left:42px;right:42px;
  color:var(--p-faint);font-family:var(--font-hand);
  letter-spacing:2px;pointer-events:none;
}

/* 编辑器内容样式 */
.paper p{margin:0 0 2px}
.paper h2,.paper h3{
  font-family:var(--font-hand);font-weight:600;letter-spacing:1px;color:var(--p-ink);
  margin:18px 0 6px;line-height:1.4;
}
.paper h2{font-size:21px;display:flex;align-items:center;gap:8px}
.paper h2::before{content:"✿";color:var(--c1);font-size:16px}
.paper h3{font-size:17px}
.paper blockquote{
  margin:10px 0;padding:10px 16px;
  border-left:3px solid var(--c5);
  background:linear-gradient(90deg,rgba(77,171,247,.10),transparent 80%);
  border-radius:0 10px 10px 0;color:var(--p-soft);
  font-family:var(--font-hand);font-size:14.5px;
}
.paper blockquote::before{content:"❝ ";color:var(--c5)}
.paper ul,.paper ol{padding-left:22px;margin:4px 0 8px}
.paper li{margin:2px 0}
.paper ul li::marker{color:var(--c1)}
.paper ol li::marker{color:var(--c7);font-weight:700}
.paper hr{border:none;margin:16px 0}
.paper hr::before{
  content:"· · · · ✂ · · · · · · · · · · · · · · · ·";
  color:var(--p-faint);letter-spacing:2px;font-size:12px;
}
.paper .todo-line{display:flex;align-items:flex-start;gap:8px}
.paper .todo-box{
  flex:none;width:16px;height:16px;margin-top:5px;
  border:1.6px solid #0CA678;border-radius:5px;
  display:inline-grid;place-items:center;
  font-size:11px;line-height:1;color:transparent;cursor:pointer;
  transition:.12s;
}
.paper .todo-line.done .todo-box{background:#0CA678;color:#fff}
.paper .todo-line.done .todo-text{color:var(--p-faint);text-decoration:line-through}
.paper mark{
  background:linear-gradient(transparent 42%,var(--hl) 42%);
  color:inherit;padding:0 1px;border-radius:2px;
}

/* 图片 · 拍立得 */
.paper img{
  display:block;max-width:100%;
  border:7px solid #fff;
  outline:1px solid rgba(43,39,51,.09);
  box-shadow:0 6px 22px rgba(43,39,51,.16);
  margin:12px 0;border-radius:3px;
  cursor:pointer;transition:transform .15s;
}
body.dark .paper img{border-color:#1a171f;outline-color:rgba(255,255,255,.1)}
.paper img.img-w25{max-width:31%}
.paper img.img-w40{max-width:44%}
.paper img.img-w50{max-width:48%}
.paper img.img-w100{max-width:100%}
.paper img.tilt-l{transform:rotate(-2.4deg)}
.paper img.tilt-r{transform:rotate(2.1deg)}

/* 贴纸 & 胶带 */
.paper .sticker{
  display:inline-block;font-size:30px;line-height:1;
  cursor:pointer;vertical-align:middle;margin:0 3px;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.14));
  transition:transform .15s;user-select:none;
}
.paper .sticker:hover{transform:scale(1.18) rotate(4deg)}
.paper .sticker.big{font-size:54px}
.paper .sticker.small{font-size:20px}
.paper .washi{
  display:inline-block;height:22px;border-radius:2px;
  border-left:3px dotted rgba(0,0,0,.12);border-right:3px dotted rgba(0,0,0,.12);
  opacity:.9;vertical-align:middle;cursor:grab;user-select:none;
}
.paper .washi.w-1{background:repeating-linear-gradient(45deg,#FFA8A8 0 6px,#FFD3D3 6px 12px)}
.paper .washi.w-2{background:repeating-linear-gradient(120deg,#96F2D7 0 8px,#C3FAE8 8px 16px)}
.paper .washi.w-3{background:repeating-linear-gradient(90deg,#FFEC99 0 10px,#FFF3BF 10px 13px)}
.paper .washi.w-4{background:repeating-radial-gradient(circle at 5px,#D0BFFF 0 7px,#E5DBFF 7px 14px)}
.paper .washi.w-5{background:linear-gradient(#A5D8FF,#D0EBFF)}
.paper .doodle-rule{
  display:block;text-align:center;color:var(--p-faint);
  letter-spacing:4px;font-size:13px;margin:14px 0;user-select:none;
}
.paper .doodle-rule::before{content:"· · · 🌷 · · · · 🌿 · · ·"}

/* 底部状态 */
.editor-foot{
  display:flex;justify-content:space-between;
  padding:10px 20px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-faint);
}
.save-hint{transition:.2s}
.save-hint.changed{color:var(--c2)}

/* ============================================================
   浮层
   ============================================================ */
.pop{
  position:fixed;z-index:120;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-l);
  padding:7px;display:flex;gap:4px;flex-wrap:wrap;
  animation:popIn .15s ease;
}
@keyframes popIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pop button{font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;color:var(--ink-soft)}
.pop button:hover{background:var(--bg);color:var(--ink)}
.pop button.on{background:var(--accent-soft);color:var(--accent)}
.pop-danger{color:var(--c1) !important}

#sticker-pop{
  left:50%;top:50%;transform:translate(-50%,-50%);
  flex-direction:column;padding:16px;width:300px;
}
.pop-title{font-size:11.5px;color:var(--ink-faint);margin-bottom:10px;letter-spacing:.5px}
.sticker-grid{
  display:grid;grid-template-columns:repeat(6,40px);gap:4px;
  max-height:220px;overflow-y:auto;
}
.sticker-grid button{font-size:23px;height:40px;border-radius:10px;display:grid;place-items:center}
.sticker-grid button:hover{background:var(--bg);transform:scale(1.12)}

.modal-overlay{
  position:fixed;inset:0;z-index:140;
  background:rgba(21,19,25,.45);backdrop-filter:blur(4px);
  display:grid;place-items:center;
}
.modal{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;max-width:340px;
  box-shadow:var(--shadow-l);
  animation:riseIn .25s ease;
}
.modal p{font-size:14px;line-height:1.8;margin-bottom:18px}
.modal-btns{display:flex;justify-content:flex-end;gap:8px}
.btn-soft{
  font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-soft);
}
.btn-soft:hover{color:var(--ink)}
.btn-soft.danger{color:#fff;background:linear-gradient(100deg,var(--c1),var(--c7));border:none}

.toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%);
  z-index:160;background:var(--ink);color:var(--bg);
  font-size:12.5px;font-weight:600;letter-spacing:.5px;
  padding:10px 22px;border-radius:999px;
  box-shadow:var(--shadow-l);
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* 页面锁：整张纸，纸飞机停在右上，便签卡承载密码 */
#lock{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:20px;overflow:hidden;
  background:
    radial-gradient(circle, rgba(120,100,70,.11) 1px, transparent 1.4px) 0 10px/26px 26px,
    linear-gradient(rgba(120,100,70,.035) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(140deg,#FBF7EE 0%,#F7F1E4 55%,#F3E9E9 100%);
  transition:opacity .6s;
}
body.dark #lock{
  background:
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1.4px) 0 10px/26px 26px,
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(140deg,#242030 0%,#1D1A26 60%,#221B26 100%);
}
#lock.unlocking{opacity:0;pointer-events:none}

/* 散落的小涂鸦 */
.lock-doodle{
  position:absolute;font-size:24px;opacity:.42;
  animation:ldb 4.5s ease-in-out infinite;
}
@keyframes ldb{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}

/* 虚线航线 */
.flight-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.flight-path path{
  fill:none;stroke:rgba(151,117,250,.55);stroke-width:.45;
  stroke-dasharray:1 2.2;stroke-linecap:round;
}
body.dark .flight-path path{stroke:rgba(151,117,250,.4)}

/* 纸飞机 */
#lock-plane{
  position:absolute;right:11%;top:47%;
  width:min(250px,26vw);
  filter:drop-shadow(0 16px 26px rgba(90,70,40,.22));
  transform-origin:50% 50%;
  animation:planeBob 3.2s ease-in-out infinite;
}
@keyframes planeBob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-13px) rotate(3deg)}
}
#lock.fly #lock-plane{animation:flyaway 1.2s cubic-bezier(.42,.02,.65,1) forwards}
@keyframes flyaway{
  0%  {transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
  22% {transform:translate(9vw,-7vh) rotate(9deg) scale(.96)}
  55% {transform:translate(30vw,-22vh) rotate(3deg) scale(.84);opacity:1}
  100%{transform:translate(64vw,-58vh) rotate(16deg) scale(.4);opacity:0}
}

/* 便签卡 */
.lock-note{
  position:relative;z-index:2;
  width:min(340px,94%);
  background:#fff;
  border:1px solid #EAE2D4;
  border-radius:16px;
  padding:32px 26px 20px;
  transform:rotate(-.8deg);
  box-shadow:0 18px 50px rgba(90,70,40,.16);
  text-align:center;
}
body.dark .lock-note{
  background:#2B2735;border-color:#3A3448;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.lock-tape{
  position:absolute;top:-12px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:96px;height:24px;
  background:repeating-linear-gradient(45deg,#FFB4C8 0 6px,#FFD3DF 6px 12px);
  opacity:.9;border-radius:2px;
  border-left:3px dotted rgba(0,0,0,.1);border-right:3px dotted rgba(0,0,0,.1);
}
.lock-title{font-size:17px;font-weight:800;color:#2B2733;letter-spacing:1px}
body.dark .lock-title{color:#F2EFF8}
.lock-sub{font-size:11.5px;color:#A79F90;margin:8px 0 16px;letter-spacing:.5px}
body.dark .lock-sub{color:#8A8296}
.lock-row{display:flex;gap:8px}
.lock-row input{
  flex:1;min-width:0;
  padding:12px 10px;border-radius:12px;
  border:1.5px dashed #D8CDB8;
  background:#FAF6EC;
  color:#40382E;font-size:16px;letter-spacing:8px;text-align:center;
  outline:none;transition:.2s;
}
body.dark .lock-row input{background:#231F2B;border-color:#4A4258;color:#EDE8DC}
.lock-row input::placeholder{color:#C4BAA5;letter-spacing:2px}
.lock-row input:focus{border-color:#9775FA;border-style:solid;box-shadow:0 0 0 4px rgba(151,117,250,.14)}
.lock-row button{
  width:72px;border-radius:12px;flex:none;
  background:linear-gradient(100deg,#9775FA,#F783AC);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.5px;
  transition:.15s;
}
.lock-row button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(151,117,250,.4)}
#lock-err{min-height:18px;margin-top:12px;font-size:11.5px;color:#D9704F;letter-spacing:.5px}
.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:rotate(-.8deg) translateX(0)}
  20%{transform:rotate(-.8deg) translateX(-9px)} 40%{transform:rotate(-.8deg) translateX(8px)}
  60%{transform:rotate(-.8deg) translateX(-5px)} 80%{transform:rotate(-.8deg) translateX(3px)}
}

@media (max-width:640px){
  #lock-plane{width:130px;right:5%;top:8%}
  .flight-path path{d:path("M68 14 C 76 10, 86 8, 95 6")}
}

/* 打印 */
@media print{
  #topbar,#drawer,.toolbar,.ed-top,.ed-meta,#scrim,.pop,.toast,.paper-hole{display:none !important}
  body,#app,#shell{overflow:visible;height:auto;background:#fff}
  #editor-overlay{position:static;background:#fff;backdrop-filter:none;padding:0;display:block}
  .editor-panel{width:100%;height:auto;box-shadow:none;border:none;border-radius:0}
  .paper-scroll{overflow:visible;background:#fff;padding:0}
  .paper-wrap{border:none;box-shadow:none;border-radius:0;max-width:100%}
  .paper{background:#fff;min-height:0}
}