/* ============ 交互组件（点赞/评论/弹层/通知） ============ */
.zh-dim{color:var(--ink-3);font-size:13.5px;line-height:1.7;margin:0 0 12px}

.zh-actbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.zh-act{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:7px 13px;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);cursor:pointer;border-radius:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.zh-act:hover{border-color:var(--ink-3);color:var(--ink)}
.zh-act.on{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.zh-act.ghost{border-color:transparent;color:var(--ink-4);margin-left:auto}
.zh-act.ghost:hover{color:var(--red);border-color:var(--line-2)}
.zh-act svg{flex:none}

/* 评论 */
.zh-cmt-wrap{margin-top:46px;padding-top:30px;border-top:1px solid var(--line-2)}
.zh-cmt-form{background:var(--paper-2);border:1px solid var(--line-2);padding:14px;margin-bottom:22px}
.zh-cmt-act{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.zh-cmt-act .zh-mono{font-size:10.5px;color:var(--ink-4)}
.zh-cmt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.zh-cmt{display:flex;gap:12px}
.zh-cmt-av{width:32px;height:32px;border-radius:50%;flex:none;background:var(--paper-3);object-fit:cover}
.zh-cmt-b{min-width:0;flex:1}
.zh-cmt-h{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.zh-cmt-h b{font-size:13.5px;font-weight:600}
.zh-cmt-h .zh-mono{font-size:10px;color:var(--ink-4)}
.zh-cmt-x{font-size:14px;line-height:1.72;color:var(--ink-2);word-break:break-word}

/* 弹层 */
.zh-mask{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,9,7,.55);backdrop-filter:blur(3px);padding:20px;
  animation:zhFade .18s var(--ease);
}
@keyframes zhFade{from{opacity:0}to{opacity:1}}
.zh-modal{
  width:min(520px,100%);max-height:86vh;overflow:auto;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 28px 70px rgba(0,0,0,.32);
  animation:zhRise .2s var(--ease);
}
@keyframes zhRise{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.zh-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.zh-modal-h b{font-family:var(--serif);font-size:17px;font-weight:400}
.zh-x{border:0;background:none;font-size:22px;line-height:1;color:var(--ink-4);cursor:pointer;padding:0 2px}
.zh-x:hover{color:var(--ink)}
.zh-modal-b{padding:20px}
.zh-modal-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line-2);background:var(--paper-2)}
.zh-modal-b .zh-input+.zh-input{margin-top:10px}

/* 提示 */
.zh-toast-box{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:9500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.zh-toast{
  background:var(--ink);color:var(--paper);font-size:13.5px;padding:9px 18px;border-radius:2px;
  box-shadow:0 10px 28px rgba(0,0,0,.24);animation:zhRise .18s var(--ease);transition:opacity .4s,transform .4s;
}
.zh-toast.err{background:var(--red);color:#fff}
.zh-toast.out{opacity:0;transform:translateY(6px)}

/* 通知面板 */
.zh-bell{position:relative}
.zh-bell-dot{
  position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--paper);
}
.zh-notif-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:min(340px,86vw);z-index:8000;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.2);
}
.zh-notif-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.zh-notif-h b{font-family:var(--serif);font-size:15px;font-weight:400}
.zh-notif-h button{border:0;background:none;font-family:var(--mono);font-size:10.5px;color:var(--blue);cursor:pointer}
.zh-notif-b{max-height:min(60vh,420px);overflow:auto}
.zh-notif{display:block;padding:11px 14px;border-bottom:1px solid var(--line-2);transition:background .15s}
.zh-notif:hover{background:var(--paper-2)}
.zh-notif b{display:block;font-size:13px;font-weight:600;line-height:1.5}
.zh-notif span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zh-notif i{display:block;font-size:10px;color:var(--ink-4);margin-top:4px;font-style:normal}
.zh-notif.unread{background:var(--blue-soft)}
.zh-notif.unread b::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-left:6px;vertical-align:middle}

/* 搜索浮层结果 */
.zh-qout{margin-top:12px;max-height:min(50vh,360px);overflow:auto}
.zh-qout a{display:block;padding:9px 10px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.zh-qout a:hover{background:var(--paper-2)}
.zh-qout i{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-4);font-style:normal;
  display:inline-block;min-width:44px}

/* 头像与作者行 */
.zh-author{display:flex;align-items:center;gap:10px}
.zh-author img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--paper-3)}
.zh-author b{font-size:13.5px;font-weight:600;display:block;line-height:1.4}
.zh-author span{font-family:var(--mono);font-size:10px;color:var(--ink-4)}

@media (max-width:640px){
  .zh-toast-box{bottom:20px;width:calc(100% - 32px)}
  .zh-toast{width:100%;text-align:center}
  .zh-actbar{gap:6px}
  .zh-act{padding:6px 10px}
  .zh-act.ghost{margin-left:0}
}