/* ============================================================
   斌的工具箱 · 首页样式（方案 A · 索引）
   独立文件，不影响其他页面使用的 /style.css
   ============================================================ */
:root{
  --paper:#FAF8F5; --card:#fff; --ink:#221C16; --ink2:#5C5348; --ink3:#8A8177;
  --line:#E9E2D7; --line2:#F3EEE7; --red:#B5343A; --redbg:#F7EBE9;
  --navy:#22384A; --olive:#52603F; --r:12px;
  --sh:0 1px 2px rgba(40,30,20,.04),0 10px 28px -16px rgba(40,30,20,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 顶栏 ── */
.bar{position:sticky;top:var(--ann-h,0px);z-index:50;background:rgba(250,248,245,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:30px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;flex:none}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#FAF8F5;
  display:grid;place-items:center;font-size:15px;font-family:"Noto Serif SC","Songti SC",serif}
.nav{display:flex;gap:24px;font-size:14px;color:var(--ink2)}
.nav a{transition:color .15s}
.nav a:hover{color:var(--red)}
.search{margin-left:auto;position:relative}
.search input{width:248px;height:36px;border:1px solid var(--line);background:#fff;
  border-radius:9px;padding:0 12px 0 34px;font-size:13.5px;color:var(--ink);
  outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:#ADA69E}
.search input:focus{border-color:#DCBEBA;box-shadow:0 0 0 3px var(--redbg)}
.search .mag{position:absolute;left:11px;top:10px;width:16px;height:16px;color:#ADA69E}

/* ── Hero ── */
.hero{padding:60px 0 34px}
.hero .wrap{display:flex;align-items:flex-end;gap:48px;flex-wrap:wrap}
.hero-main{flex:1;min-width:320px}
h1{font-size:38px;line-height:1.25;letter-spacing:-.5px;font-weight:800}
h1 em{font-style:normal;color:var(--red)}
.lede{margin-top:14px;font-size:15.5px;color:var(--ink2);max-width:46ch;line-height:1.75}
.greet{margin-top:10px;font-size:13.5px;color:var(--ink3)}
.stats{display:flex;border-left:1px solid var(--line);padding-left:36px}
.stats div{padding-right:34px}
.stats dt{font-size:12px;color:var(--ink3);letter-spacing:1.5px}
.stats dd{font-family:"Noto Serif SC","Songti SC",serif;font-size:30px;font-weight:700;
  line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}

/* ── 筛选 ── */
.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.5);position:relative}
.filters .wrap{display:flex;gap:8px;height:56px;align-items:center;overflow-x:auto;scrollbar-width:none}
.filters .wrap::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:16px;
  font-size:13.5px;color:var(--ink2);border:1px solid transparent;white-space:nowrap;
  background:none;transition:.15s}
.chip b{font-weight:600;color:var(--ink3);font-size:12px}
.chip:hover{background:#fff;border-color:var(--line)}
.chip.on{background:var(--ink);color:#fff}
.chip.on b{color:rgba(255,255,255,.6)}

/* ── 推荐卡 ── */
.recs{padding:36px 0 8px}
.recs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rec{display:flex;flex-direction:column;padding:24px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .18s ease,box-shadow .18s ease}
.rec:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(40,30,20,.05),0 18px 40px -20px rgba(40,30,20,.3)}
.rec-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tile{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:var(--line2);flex:none}
.rec-tag{font-size:11.5px;letter-spacing:1.5px;color:var(--ink3);font-weight:600}
.rec h2{font-size:21px;font-weight:700;letter-spacing:.2px}
.rec p{margin-top:8px;font-size:13.5px;color:var(--ink2);line-height:1.7}
.rec-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rec-meta span{font-size:11.5px;color:var(--ink2);background:var(--line2);
  padding:3px 9px;border-radius:5px;line-height:1.5}
.rec-cta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line2);
  font-size:14px;font-weight:600;color:var(--red);display:flex;justify-content:space-between}
.rec--dark{background:linear-gradient(160deg,#2A231B,#191410);border-color:#2A231B;color:#F7F2EA}
.rec--dark .rec-tag{color:rgba(247,242,234,.5)}
.rec--dark .tile{background:rgba(255,255,255,.12)}
.rec--dark p{color:rgba(247,242,234,.72)}
.rec--dark .rec-meta span{background:rgba(255,255,255,.09);color:rgba(247,242,234,.8)}
.rec--dark .rec-cta{color:#F3B7AC;border-top-color:rgba(255,255,255,.12)}
.rec--wine{background:linear-gradient(160deg,#7E2A2A,#541717);border-color:#7E2A2A;color:#FBEFEF}
.rec--wine .rec-tag{color:rgba(251,239,239,.55)}
.rec--wine .tile{background:rgba(255,255,255,.15)}
.rec--wine h2{color:#FFD9D9}
.rec--wine p{color:rgba(251,239,239,.8)}
.rec--wine .rec-meta span{background:rgba(255,255,255,.12);color:rgba(251,239,239,.88)}
.rec--wine .rec-cta{color:#FFD9D9;border-top-color:rgba(255,255,255,.16)}
.rec--red .tile{background:var(--redbg)}
.rec--red h2{color:var(--red)}
.rec--navy .tile{background:#E7EDF1}
.rec--navy .rec-cta{color:var(--navy)}

/* ── 区块标题 ── */
.sec-head{display:flex;align-items:baseline;gap:12px;margin:52px 0 18px}
.sec-head h2{font-size:19px;font-weight:700;letter-spacing:.3px}
.sec-head .n{font-size:12.5px;color:var(--ink3);font-family:"Noto Serif SC",serif}
.sec-head .more{margin-left:auto;font-size:13px;color:var(--red)}

/* ── 工具网格 ── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:8px}
.tool{display:flex;flex-direction:column;padding:18px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.tool:hover{transform:translateY(-2px);border-color:#DFD5C6;box-shadow:0 10px 24px -18px rgba(40,30,20,.5)}
.tool-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tool-h .tile{width:32px;height:32px;border-radius:9px;font-size:16px}
.tool h3{font-size:15px;font-weight:600;letter-spacing:.2px}
.tool p{font-size:12.5px;color:var(--ink2);line-height:1.65;flex:1}
.cat{align-self:flex-start;margin-top:14px;font-size:11px;color:var(--ink3);
  border:1px solid var(--line);padding:2px 8px;border-radius:5px;letter-spacing:.5px}
.t1{background:#FBF1E8}.t2{background:#EAF0F4}.t3{background:#F2EFF6}
.t4{background:#EDF2EA}.t5{background:#FBF4E4}
.empty-hit{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--ink3);font-size:14px}

/* ── 便签墙 ── */
.wall-head{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin:56px 0 20px}
.wall-head h2{font-size:20px;font-weight:700;letter-spacing:.3px}
.wall-sub{font-size:13px;color:var(--ink3);margin-top:6px}
.wall-sub b{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.quick{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.quick button{font-size:13px;padding:8px 15px;border-radius:20px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);transition:.15s;white-space:nowrap;line-height:1.4}
.quick button:hover{border-color:#DCBEBA;color:var(--red);transform:translateY(-1px)}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:start;
  padding:18px 10px 14px}
.note{margin:0;display:flex;flex-direction:column;min-height:178px;position:relative;
  padding:0;border-radius:2px 11px 3px 7px;overflow:hidden;
  background-color:#FBF3C4;
  box-shadow:0 7px 16px -7px rgba(60,40,20,.32),0 2px 4px rgba(60,40,20,.10);
  transform:rotate(var(--rot,0deg)) translate(var(--dx,0px),var(--dy,0px));
  z-index:var(--z,1);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.note:hover{transform:rotate(0deg) translate(var(--dx,0px),var(--dy,0px)) scale(1.045);
  z-index:99;box-shadow:0 18px 32px -12px rgba(60,40,20,.44),0 3px 8px rgba(60,40,20,.14)}

/* 纸纤维颗粒 */
.note .grain{position:absolute;inset:0;pointer-events:none;opacity:.38;mix-blend-mode:multiply;
  z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.3'/></svg>")}
/* 折痕：窄的亮线 + 紧贴一条暗线，像真的折过一道 */
.note::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:var(--co,.5);
  background:linear-gradient(var(--ca,96deg),
    transparent calc(var(--cp,50%) - var(--cw,.9%)),
    rgba(255,255,255,var(--ch,.6)) calc(var(--cp,50%) - var(--cw,.9%)),
    rgba(255,255,255,var(--ch,.6)) var(--cp,50%),
    rgba(0,0,0,var(--cd,.055)) calc(var(--cp,50%) + .3%),
    transparent calc(var(--cp,50%) + var(--cw,.9%)))}
.note.c-n::before{display:none}

.note .pin{position:absolute;top:8px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;z-index:4;
  background:radial-gradient(circle at 38% 32%,#fff 0%,#d3702a 55%,#9b4400 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.28),inset 0 -1px 1px rgba(0,0,0,.2)}

/* 正文：垂直+水平居中，手写体 */
.note .nb{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:8px;padding:30px 18px 30px;text-align:center}
.note p{font-family:"Kaiti SC","STKaiti","KaiTi","楷体","Kaiti TC","FangSong",cursive;
  font-size:15px;line-height:1.85;letter-spacing:.5px;color:#332C24;word-break:break-word}
.note .who{position:absolute;left:16px;right:16px;bottom:13px;z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif}
.note .nm{font-size:11px;color:#8A5A48;font-weight:600}
.note .dt{font-size:10.5px;color:#9A8A72;font-variant-numeric:tabular-nums}
.note .reply{width:100%;text-align:left;padding:8px 10px;border-radius:6px;
  background:rgba(255,255,255,.66);font-size:11px;line-height:1.65;color:#5B5044;
  font-family:"Noto Sans SC",sans-serif}
.note .reply b{color:var(--red);font-weight:700;margin-right:5px}
.note .seen{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:#5E7A56;
  background:rgba(255,255,255,.66);border-radius:5px;padding:2px 8px}
.note .done-link{font-size:11px;font-weight:600;color:#2F5C41;
  background:rgba(255,255,255,.72);padding:3px 8px;border-radius:5px}
.note.pinned{box-shadow:0 0 0 2px rgba(181,82,58,.35),0 7px 16px -7px rgba(60,40,20,.32)}

/* 底纹 */
.note.p-ruled{background-image:repeating-linear-gradient(180deg,transparent 0 26px,rgba(0,0,0,.075) 26px 27px)}
.note.p-grid{background-image:
  repeating-linear-gradient(180deg,transparent 0 22px,rgba(0,0,0,.06) 22px 23px),
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.06) 22px 23px)}
.note.p-dots{background-image:radial-gradient(rgba(0,0,0,.13) 1px,transparent 1.3px);
  background-size:15px 15px}

/* 形状 */
.note.s-round{border-radius:2px 11px 3px 7px}
.note.s-fold{border-radius:2px 10px 0 6px}
.note.s-fold .who{right:44px}
.note.s-fold::after{content:'';position:absolute;right:0;bottom:0;width:34px;height:34px;z-index:4;
  background:linear-gradient(315deg,rgba(0,0,0,.18) 0 52%,rgba(255,255,255,.9) 52%);
  box-shadow:-2px -2px 5px rgba(0,0,0,.10);border-top-left-radius:4px}
.note.s-torn{border-radius:0;filter:drop-shadow(0 6px 11px rgba(60,40,20,.24));
  clip-path:polygon(0 2%,12% .4%,26% 1.8%,40% .2%,55% 1.6%,70% .4%,85% 2%,100% .6%,
  99% 15%,100% 31%,98.4% 47%,100% 63%,99% 79%,100% 93%,99% 98.4%,
  86% 97.2%,72% 99%,58% 97.4%,44% 99.2%,30% 97.6%,16% 99.4%,2% 97.8%,
  1% 84%,0 68%,1.6% 52%,0 36%,1% 18%)}
.note.s-torn::before{opacity:calc(var(--co,.4) * 1.06)}

.badge-new{position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:1px;z-index:5;
  background:var(--red);color:#fff;border-radius:4px;padding:1px 6px}
.note.new .nb{padding-top:36px}
@keyframes noteDrop{0%{opacity:0;transform:rotate(var(--rot,0deg)) translate(var(--dx,0px),calc(var(--dy,0px) - 16px)) scale(.94)}
  60%{opacity:1;transform:rotate(var(--rot,0deg)) translate(var(--dx,0px),calc(var(--dy,0px) + 2px)) scale(1.02)}
  100%{transform:rotate(var(--rot,0deg)) translate(var(--dx,0px),var(--dy,0px)) scale(1)}}
.note.new{animation:noteDrop .45s cubic-bezier(.2,.9,.3,1.2)}

.slot{border:1.5px dashed #CFC3AF;border-radius:4px 14px 5px 10px;background:rgba(255,255,255,.28);
  min-height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#A2967F;transition:.18s;transform:rotate(.6deg)}
.slot:hover{background:#fff;border-color:var(--red);color:var(--red);transform:none}
.slot .plus{font-size:26px;line-height:1;font-weight:300}
.slot .st{font-size:12.5px;letter-spacing:.5px;line-height:1.6;text-align:center}
.slot .st b{font-weight:700;font-variant-numeric:tabular-nums}

.composer{display:none;margin-bottom:18px;padding:22px 24px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 12px 32px -22px rgba(40,30,20,.5)}
.composer.on{display:flex;gap:28px;align-items:flex-start}
.composer .c-left{flex:none;width:196px}
.composer .c-title{font-size:15px;font-weight:700}
.composer .c-hint{font-size:12px;color:var(--ink3);line-height:1.7;margin-top:8px}
.composer .c-right{flex:1;min-width:0}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:13.5px;line-height:1.7;color:var(--ink);background:#FDFCFA;resize:none;
  outline:none;transition:border-color .15s,box-shadow .15s}
.composer textarea:focus{border-color:#DCBEBA;box-shadow:0 0 0 3px var(--redbg)}
.composer .c-row{display:flex;gap:10px;margin-top:10px;align-items:center}
.composer input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 13px;
  font-size:13px;background:#FDFCFA;outline:none;font-family:inherit}
.composer input:focus{border-color:#DCBEBA}
.composer .c-send{flex:none;padding:10px 22px;border:0;border-radius:10px;background:var(--red);
  color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.5px;transition:.15s}
.composer .c-send:hover{background:#9A2A30}
.composer .c-send:disabled{opacity:.6;cursor:not-allowed}

.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,18px);opacity:0;
  pointer-events:none;background:#241E17;color:#FAF8F5;font-size:13.5px;padding:11px 22px;
  border-radius:24px;transition:opacity .25s,transform .25s;z-index:99;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── 页脚 ── */
footer{margin-top:64px;border-top:1px solid var(--line);background:rgba(255,255,255,.45)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;padding:48px 0 40px}
.fcol h4{font-size:12px;letter-spacing:2px;color:var(--ink3);font-weight:600;margin-bottom:16px}
.artlist,.loglist{list-style:none}
.artlist li{padding:9px 0;border-bottom:1px solid var(--line2);display:flex;gap:12px;
  align-items:baseline;font-size:13.5px}
.artlist li:last-child{border-bottom:0}
.artlist time{font-size:11.5px;color:var(--ink3);flex:none;font-variant-numeric:tabular-nums}
.artlist a:hover{color:var(--red)}
.loglist li{padding:8px 0;font-size:13px;color:var(--ink2);display:flex;gap:10px}
.loglist b{font-size:11.5px;color:var(--red);flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.bio-f{font-size:13.5px;color:var(--ink2);line-height:1.8;white-space:pre-line}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.socials a{font-size:12.5px;border:1px solid var(--line);background:#fff;padding:5px 11px;
  border-radius:7px;color:var(--ink2);transition:.15s}
.socials a:hover{border-color:var(--red);color:var(--red)}
.legal{margin-top:18px;font-size:11.5px;color:#A9A29A;letter-spacing:.5px;display:flex;
  gap:12px;align-items:center;flex-wrap:wrap}
.legal a:hover{color:var(--red)}

/* ── 响应式 ── */
@media(max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .recs-grid{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr;gap:36px}
  h1{font-size:32px}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .nav{display:none}
  .hero .wrap{display:block}
  .hero-main{min-width:0;width:100%}
  .search input{width:132px;font-size:12.5px}
  .bar .wrap{gap:14px}
  .hero{padding:38px 0 24px}
  h1{font-size:27px}
  .stats{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px;
    margin-top:22px;display:flex}
  .stats div{padding-right:28px}
  .stats dd{font-size:24px}
  .grid4{grid-template-columns:1fr}
  .wall{grid-template-columns:1fr}
  .note{transform:rotate(var(--rot,0deg));min-height:120px}
  .foot{grid-template-columns:1fr;gap:32px}
  .wall-head{align-items:flex-start}
  .quick{margin-left:0;width:100%}
  .composer.on{flex-direction:column;gap:14px}
  .composer .c-left{width:100%}
  .composer{padding:18px}
  .filters::after{content:"";position:absolute;right:0;top:0;bottom:0;width:44px;
    pointer-events:none;background:linear-gradient(90deg,rgba(252,250,247,0),rgba(252,250,247,.95))}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ───── 右上角滚动通知 ───── */
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:20px;flex:none}
.notice{display:flex;flex-direction:column;gap:7px;width:326px;padding:13px 16px;
  border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden}
.notice:hover{transform:translateY(-2px);border-color:#DFD5C6;
  box-shadow:0 1px 2px rgba(40,30,20,.05),0 16px 30px -20px rgba(40,30,20,.45)}
.notice-label{display:flex;align-items:center;font-size:11px;letter-spacing:1.6px;
  color:var(--ink3);font-weight:600}
.notice-label b{margin-left:auto;font-weight:400;letter-spacing:0;color:#B0A695;font-size:11px}
.notice-view{height:22px;overflow:hidden;position:relative}
.notice-track{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.notice-line{height:22px;line-height:22px;font-size:13px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1024px){.notice{width:280px}}
@media(max-width:680px){
  .hero-side{align-items:stretch;width:100%;gap:16px}
  .notice{width:100%}
}
@media(prefers-reduced-motion:reduce){.notice-track{transition:none}}

.notice-label i{font-style:normal}
.notice.pinned{background:#FFFAF3;border-color:#F0DFC0}
.notice.pinned .notice-label i{color:var(--red);font-weight:600}

/* ───── 顶部置顶通知横幅 ───── */
.ann-bar{position:sticky;top:0;z-index:60;
  background:linear-gradient(90deg,#FFF4E4 0%,#FFF9F0 55%,#FFF4E4 100%);
  border-bottom:1px solid #F0DEC0}
.ann-bar-in{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;
  gap:12px;height:42px}
.ann-bar-tag{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.5px;color:#fff;background:var(--red);border-radius:20px;padding:3px 10px;line-height:1.6}
.ann-bar-text{flex:1;min-width:0;font-size:13px;color:#6B5636;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:opacity .35s}
.ann-bar-text.fade{opacity:0}
.ann-bar-x{flex:none;border:0;background:none;color:#BFAC8C;font-size:15px;line-height:1;cursor:pointer;
  padding:4px 6px;border-radius:6px;transition:.15s}
.ann-bar-x:hover{color:var(--red);background:rgba(181,52,58,.08)}
@media(max-width:680px){
  .ann-bar-in{padding:0 14px;height:auto;min-height:40px;gap:8px}
  .ann-bar-text{font-size:12.5px;white-space:normal;line-height:1.5;padding:8px 0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ann-bar-tag{font-size:10px;padding:2px 8px}
}

/* 便签上的「作者已看」 */
.note .seen{margin-top:8px;display:inline-flex;align-items:center;gap:4px;font-size:11px;
  color:#5E7A56;background:rgba(255,255,255,.6);border-radius:5px;padding:2px 7px;align-self:flex-start}

/* 发布后的即时回应 */
.wall-ok{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;padding:13px 16px;
  border-radius:10px;background:#EDF4EC;border:1px solid #D7E6D5;font-size:13.5px;color:#2F5C41;line-height:1.6}
.wall-ok[hidden]{display:none}
.wall-ok .ok-ic{width:20px;height:20px;border-radius:50%;background:#3D7A52;color:#fff;
  display:grid;place-items:center;font-size:12px;flex:none;margin-top:1px}
.wall-ok.pending{background:#FDF7EC;border-color:#F0E2C8;color:#7A5A2E}
.wall-ok.pending .ok-ic{background:#C08A2E}

/* ───── 选纸面板（颜色 / 底纹 / 形状）───── */
.paper-pick{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:11px;align-items:center}
.pp-row{display:flex;align-items:center;gap:9px}
.pp-label{font-size:11.5px;color:var(--ink3);letter-spacing:.5px;flex:none}
.pp-colors{display:flex;gap:6px}
.pp-colors button{width:21px;height:21px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(0,0,0,.13);background:var(--c);transition:transform .12s,box-shadow .12s}
.pp-colors button:hover{transform:scale(1.1)}
.pp-colors button.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--red);transform:scale(1.08)}
.pp-chips{display:flex;gap:5px;flex-wrap:wrap}
.pp-chips button{font-size:11.5px;padding:3.5px 10px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);cursor:pointer;font-family:inherit;transition:.12s;line-height:1.4}
.pp-chips button:hover{border-color:#DCBEBA;color:var(--red)}
.pp-chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:680px){.paper-pick{gap:8px 14px}.pp-label{font-size:11px}}

/* ───── 互动：工具点赞 / 便签共鸣 / 许愿池 ───── */
.tool{position:relative}
.tool-like{position:absolute;right:12px;bottom:11px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-family:inherit;font-size:11px;color:var(--ink3);line-height:1.5;transition:.15s;z-index:2}
.tool-like:hover{border-color:#E0B7B4;color:var(--red);transform:translateY(-1px)}
.tool-like .ic{font-size:11px;filter:grayscale(1);opacity:.55;transition:.15s}
.tool-like .n{font-variant-numeric:tabular-nums;margin-left:3px}
.tool-like.on{border-color:#E7BDB8;background:#FDF2F1;color:var(--red)}
.tool-like.on .ic{filter:none;opacity:1}
.tool-like .n:empty{display:none}

.note-like{align-self:center;display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:20px;border:1px solid rgba(0,0,0,.09);
  background:rgba(255,255,255,.55);cursor:pointer;font-family:inherit;font-size:11px;
  color:#8A7A63;line-height:1.6;transition:.15s}
.note-like:hover{background:rgba(255,255,255,.8);border-color:rgba(181,52,58,.3);color:var(--red)}
.note-like .ic{filter:grayscale(1);opacity:.55;transition:.15s}
.note-like.on{background:rgba(255,255,255,.85);border-color:rgba(181,52,58,.35);color:var(--red)}
.note-like.on .ic{filter:none;opacity:1}
.note-like .n{margin-left:3px}
.note-like .n:empty{display:none}

.wishpool{margin-bottom:16px;padding:14px 16px;border-radius:12px;background:#FFFDF7;
  border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.wishpool[hidden]{display:none}
.wishpool .wp-h{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.5px;flex:none}
.wishpool a{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;
  background:#fff;border:1px solid var(--line);font-size:12px;color:var(--ink2);
  text-decoration:none;transition:.15s;max-width:260px}
.wishpool a:hover{border-color:var(--red);color:var(--red)}
.wishpool a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wishpool a b{flex:none;font-size:11px;color:var(--red);background:var(--redbg);
  border-radius:10px;padding:0 6px;font-weight:600}
@media(max-width:680px){.tool-like{font-size:10.5px;padding:2px 8px;right:10px;bottom:9px}}

/* 特色卡上的「有用」：跟 meta 标签同款，但可点 */
.rec-like{font-family:inherit;font-size:11.5px;line-height:1.5;color:var(--ink2);margin-left:auto;margin-right:10px;align-self:center;
  background:var(--line2);border:1px solid transparent;border-radius:5px;padding:3px 9px;
  cursor:pointer;transition:.15s}
.rec-like:hover{background:#fff;border-color:#E0B7B4;color:var(--red)}
.rec-like.on{background:#FDF2F1;border-color:#E7BDB8;color:var(--red)}
.rec-like .n:empty{display:none}
.rec-like .n{margin-left:3px}
.rec--dark .rec-like{background:rgba(255,255,255,.09);color:rgba(247,242,234,.8)}
.rec--dark .rec-like:hover{background:rgba(255,255,255,.16);border-color:rgba(243,183,172,.45);color:#F3B7AC}
.rec--dark .rec-like.on{background:rgba(243,140,124,.2);border-color:rgba(243,183,172,.55);color:#F3B7AC}

/* PDF 合集页的「有用」 */
.ph-like{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;
  padding:3px 11px;border-radius:6px;border:1px solid #E7BDB8;background:#FDF2F1;color:var(--red);
  cursor:pointer;transition:.15s;line-height:1.5}
.ph-like:hover{background:#FBEAE8}
.ph-like.on{background:var(--red);color:#fff;border-color:var(--red)}
.ph-like .n:empty{display:none}
.ph-like .n{margin-left:2px;font-variant-numeric:tabular-nums}

/* PDF 合集页：每张工具卡上的「有用」 */
.pc-like{font-family:inherit;font-size:11.5px;line-height:1.5;color:#8A8177;
  background:#F4F0E9;border:1px solid transparent;border-radius:5px;padding:2px 8px;
  cursor:pointer;transition:.15s;margin-left:auto;margin-right:9px;align-self:center}
.pc-like:hover{background:#fff;border-color:#E0B7B4;color:var(--red)}
.pc-like.on{background:#FDF2F1;border-color:#E7BDB8;color:var(--red)}
.pc-like .n{margin-left:3px;font-variant-numeric:tabular-nums}
.pc-like .n:empty{display:none}

/* 首页 PDF 卡：9 个工具的汇总，只显示不可点 */
.rec-like.agg{cursor:default;text-decoration:none}
.rec-like.agg:hover{background:var(--line2);border-color:transparent;color:var(--ink2)}
.rec--red .rec-like.agg:hover{background:var(--line2);border-color:transparent;color:var(--ink2)}

/* 页脚更新日志：和公告同源，文字最多两行 */
.loglist li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.6}

/* ───── 移动端把过小的点击区撑大（苹果建议 ≥40px）───── */
@media(max-width:680px){
  .tool-like,.note-like,.rec-like,.pc-like{
    min-height:34px;display:inline-flex;align-items:center;padding:7px 12px;font-size:12px}
  .tool-like{right:10px;bottom:9px}
  .note-like{min-height:36px}
  .chip,.filters .chip{min-height:36px;display:inline-flex;align-items:center;padding:8px 14px;font-size:12.5px}
  .quick button{min-height:40px;padding:10px 15px;font-size:13px}
}

/* 页脚「管理」入口：手机上给足点击区（仍保持低调） */
@media(max-width:680px){
  .legal a{display:inline-flex;align-items:center;min-height:34px;padding:0 6px}
}

/* 最近更新卡片加高（2026-10-22） */
.notice{padding:17px 16px 19px;min-height:98px;justify-content:center;gap:9px}
.notice-view{height:24px}
.notice-line{height:24px;line-height:24px}

/* 最近更新改成同时显示 2 条（2026-10-22） */
.notice{min-height:112px}
.notice-view{height:48px}   /* 2 行 × 24px */

/* 许愿投票按钮（2026-10-22） */
.wish-like{align-self:flex-start;min-height:auto;margin-top:8px;padding:4px 11px;
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  border:1px solid #E9E2D7;background:#fff;color:#7E6B53;font-size:12px;
  font-family:inherit;cursor:pointer;transition:.15s;line-height:1.5}
.wish-like:hover{border-color:#DCBEBA;color:var(--red);background:#FFFBFA}
.wish-like.on{background:#FDF2F1;border-color:#E7BDB8;color:var(--red)}
.wish-like .ic{filter:grayscale(1);opacity:.6}
.wish-like.on .ic{filter:none;opacity:1}
.wish-like .n:empty{display:none}

/* 首页「有 N 个许愿还没做」提示 + 新许愿弹出（2026-10-26） */
@keyframes wishPop{
  0%{transform:scale(.9); opacity:.35}
  55%{transform:scale(1.035)}
  100%{transform:scale(1); opacity:1}}
.wish-item.pop{animation:wishPop .55s cubic-bezier(.2,.9,.3,1.25);
  box-shadow:0 0 0 3px rgba(224,140,90,.28), 0 8px 18px -10px rgba(200,110,60,.6)}

.wish-hint{display:flex; align-items:center; gap:8px; width:326px; box-sizing:border-box;
  padding:11px 14px; border-radius:12px; text-decoration:none;
  border:1px solid #F0D8BC; background:#FFF8EF; color:#8A5A2E;
  font-size:13px; line-height:1.5; transition:.16s}
.wish-hint[hidden]{display:none}
.wish-hint:hover{border-color:#DFAF7E; background:#FFF2E2; color:#B5543A; transform:translateY(-1px)}
.wish-hint b{color:#C0562A; font-weight:700; font-variant-numeric:tabular-nums}
.wish-hint .wh-tx{flex:1; min-width:0}
.wish-hint .wh-go{font-size:12px; padding:2px 9px; border-radius:99px;
  background:#F7E3CB; color:#9A5A22; white-space:nowrap}
.wish-hint .wh-arw{color:#C08A56; font-size:13px}
.wh-ic{font-size:14px}
@media (max-width:1024px){ .wish-hint{width:100%} }