:root{
  --paper:#fdfcf8;
  --line:#dfe5ee;
  --red:rgba(200,84,74,.45);
  --ink:#333a45;
  --ink-light:#8b95a5;
  --accent:#d9633c;
  --accent-dark:#b94f2c;
  --cover1:#35674e;
  --cover2:#274f3b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:radial-gradient(1300px 900px at 50% -10%, #4d5a66 0%, #37414c 55%, #272f38 100%) fixed;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{max-width:800px;margin:0 auto;padding:34px 16px 0}

/* ===== 笔记本封皮 ===== */
.book{
  position:relative;
  border-radius:10px 14px 14px 10px;
  background:linear-gradient(135deg, var(--cover1), var(--cover2) 70%);
  padding:22px 26px 32px 58px;   /* 左边留出钢圈装订区 */
  box-shadow:
    0 34px 60px rgba(5,10,16,.5),
    0 10px 22px rgba(5,10,16,.35),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset -2px 0 0 rgba(0,0,0,.18);
  perspective:1800px;
}
/* 封皮纸纹 */
.book::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(105deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px);
}

/* ===== 钢圈装订（金属螺旋环） ===== */
.coil{
  position:absolute;left:12px;top:10px;bottom:10px;width:56px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='38' viewBox='0 0 32 38'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0f3f6'/%3E%3Cstop offset='.45' stop-color='%23aeb6bf'/%3E%3Cstop offset='1' stop-color='%236b737d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='4' y='15.5' width='27' height='7.5' rx='3.75' transform='rotate(-24 17.5 19.25)' fill='url(%23m)'/%3E%3C/svg%3E") repeat-y;
  background-size:32px 38px;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35));
  z-index:3;
  pointer-events:none;
}

/* ===== 内页纸（层叠纸边） ===== */
.sheet{
  position:relative;z-index:1;
  background:
    linear-gradient(to right, transparent 84px, var(--red) 84px, var(--red) 85px, transparent 85px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px),
    linear-gradient(#fffef9, #faf7f0);
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
  border-radius:2px;
  padding:26px 40px 34px 110px;
  min-height:620px;
  box-shadow:
    1px 1px 0 #f3f0e6,
    2px 2px 0 #edeadf,
    4px 4px 0 #e6e2d4,
    6px 6px 0 #dfdacc,
    8px 8px 0 #d8d3c4,
    10px 12px 24px rgba(5,10,16,.42);
  animation:sheetIn .55s cubic-bezier(.22,.7,.35,1) both;
  transform-origin:16% 50%;
}
.sheet.flip-out{animation:sheetOut .38s ease-in both;transform-origin:8% 50%}
@keyframes sheetIn{
  from{transform:rotateY(-26deg) translateX(-16px);opacity:.2}
  to{transform:none;opacity:1}
}
@keyframes sheetOut{
  to{transform:rotateY(46deg) translateX(110px);opacity:0}
}
/* 纸页左缘装订孔 */
.sheet::before{
  content:"";position:absolute;left:5px;top:0;bottom:0;width:12px;
  background:radial-gradient(circle at 6px 19px, #2a523f 2.4px, rgba(0,0,0,.22) 2.9px, transparent 3.4px) repeat-y;
  background-size:12px 38px;
}

/* ===== 纸页页眉：填空查找 + 分类 ===== */
.page-head{line-height:32px;margin-bottom:6px}
.find{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.find-label{font-size:14px;color:var(--accent);letter-spacing:2px;flex:none}
.find input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  border-bottom:1px dashed #b9c2cf;
  font-size:14px;color:var(--ink);line-height:32px;font-family:inherit;
}
.find input:focus{border-bottom-color:var(--accent)}
.find input::placeholder{color:#c2cad6}
.find button{
  border:none;background:none;cursor:pointer;flex:none;
  font-size:16px;color:var(--ink-light);line-height:32px;padding:0 4px;
}
.find button:hover{color:var(--accent)}
.cat-bar{display:flex;gap:6px 20px;flex-wrap:wrap}
.cat-bar a{
  font-size:13px;color:var(--ink-light);line-height:32px;
  border-bottom:2px solid transparent;
}
.cat-bar a:hover{color:var(--ink)}
.cat-bar a.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ===== 页面主体（目录 / 正文共用） ===== */
.page-body{position:relative}

/* ===== 目录页 ===== */
.toc-title{
  text-align:center;font-size:19px;font-weight:600;color:var(--ink);
  letter-spacing:12px;text-indent:12px;line-height:32px;margin-bottom:10px;
}
.toc-row{
  display:flex;align-items:baseline;gap:10px;
  padding:1px 0;line-height:32px;font-size:15px;
}
.toc-num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;color:var(--accent);min-width:24px;
}
.toc-name{
  font-weight:500;max-width:56%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toc-row:hover .toc-name{color:var(--accent)}
.toc-cat{font-size:11px;color:#7d9a85;background:#e8f0e2;padding:1px 8px;border-radius:3px;line-height:18px;flex:none}
.toc-dots{flex:1;border-bottom:2px dotted #c5ccd8;transform:translateY(-5px);min-width:20px}
.toc-date{
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;color:var(--ink-light);flex:none;
}

/* ===== 空状态 ===== */
.empty{padding:60px 0;text-align:center;color:var(--ink-light);font-size:14px}

/* ===== 笔记正文页 ===== */
.note-title{font-size:22px;line-height:1.6;font-weight:700;margin-bottom:4px;word-break:break-word}
.note-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-light);line-height:32px;
}
.note-content{margin-top:14px;font-size:15px;line-height:32px;word-break:break-word}
.note-content h1,.note-content h2,.note-content h3,.note-content h4,.note-content h5,.note-content h6{
  margin:16px 0 8px;font-weight:700;line-height:1.5;
}
.note-content h1{font-size:20px}
.note-content h2{font-size:18px}
.note-content h3{font-size:16px}
.note-content h4,.note-content h5,.note-content h6{font-size:15px}
.note-content ul,.note-content ol{padding-left:26px;margin:6px 0}
.note-content li{margin:2px 0}
.note-content blockquote{border-left:3px solid rgba(217,99,60,.5);padding:2px 14px;color:var(--ink-light);margin:8px 0}
.note-content hr{border:none;border-top:1px dashed #cfd6e0;margin:14px 0}
.note-content a{color:var(--accent);border-bottom:1px dashed var(--accent)}
.note-content img{max-width:100%;border-radius:4px;margin:4px 0}
.note-content pre{background:#2f3542;color:#e8ecf3;padding:14px 16px;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;margin:10px 0}
.note-content code{background:#eef1ec;padding:2px 6px;border-radius:3px;font-size:13px}
.note-content pre code{background:none;padding:0}
.toc-sub{font-size:12px;color:var(--ink-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%;flex:none}
.back{margin-top:26px;font-size:13px;line-height:32px}
.back a{color:var(--ink-light)}
.back a:hover{color:var(--accent)}

/* ===== 分页（纸页内的翻页） ===== */
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:24px 0 6px}
.pager a,.pager span,.pager .cur{
  min-width:32px;text-align:center;padding:4px 10px;border-radius:4px;
  font-size:13px;background:#fbf9f2;border:1px solid #d8d3c4;color:var(--ink-light);
  box-shadow:0 2px 4px rgba(60,55,40,.18);
  font-family:Georgia,"Times New Roman",serif;
}
.pager .cur{background:var(--accent);border-color:var(--accent);color:#fff}
.pager a:hover{color:var(--accent-dark);border-color:var(--accent)}

/* ===== 页脚 ===== */
.site-footer{padding:30px 0 46px;text-align:center;color:rgba(255,255,255,.45);font-size:12px}
.site-footer a{color:rgba(255,255,255,.6)}
.site-footer a:hover{color:#e8916f}

/* ===== 页眉站点名 + 副标题 ===== */
.site-line{line-height:32px;font-size:15px;font-weight:600;letter-spacing:1px}
.site-line-name:hover{color:var(--accent)}
.site-line-sub{font-size:12px;font-weight:400;color:var(--ink-light);margin-left:10px;letter-spacing:0}

/* ===== 笔记页内加密锁 ===== */
.note-lock{padding:90px 0;text-align:center}
.note-lock .lock-icon{font-size:30px}
.note-lock h1{font-size:18px;letter-spacing:8px;text-indent:8px;margin:8px 0 4px}
.note-lock p{font-size:12px;color:var(--ink-light);margin-bottom:20px}
.note-lock input{
  width:70%;border:none;border-bottom:2px solid #b9c2cf;outline:none;background:transparent;
  text-align:center;font-size:17px;letter-spacing:4px;padding:7px 0;font-family:inherit;
}
.note-lock input:focus{border-bottom-color:var(--accent)}
.note-lock button{
  display:block;margin:24px auto 0;border:none;background:var(--accent);color:#fff;
  padding:9px 40px;border-radius:4px;font-size:14px;cursor:pointer;letter-spacing:6px;text-indent:6px;
}
.note-lock button:hover{background:var(--accent-dark)}
.lock-err{color:#c8544a;font-size:12px;margin-top:12px}
.note-locked-tag{color:#c8544a;border:1px solid rgba(200,84,74,.4);padding:0 8px;border-radius:3px;line-height:20px}

/* ===== 评论（页边批注） ===== */
.comments{margin-top:40px;border-top:1px dashed #d8d3c4;padding-top:6px}
.comments-title{font-size:15px;line-height:32px;font-weight:600;margin-bottom:6px}
.comment-tip{font-size:12px;padding:6px 12px;border-radius:4px;margin:6px 0}
.comment-tip.ok{background:#e8f0e2;color:#4d7a58}
.comment-tip.err{background:#f8e7e5;color:#c8544a}
.comment-form{display:flex;flex-direction:column;gap:8px;margin:12px 0 20px}
.comment-form input,.comment-form textarea{
  border:1px solid #d8d3c4;border-radius:4px;background:#fbf9f2;
  padding:8px 12px;font-size:13px;font-family:inherit;outline:none;color:var(--ink);
  resize:vertical;
}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent)}
.comment-form button{
  align-self:flex-end;border:none;background:var(--accent);color:#fff;
  padding:8px 24px;border-radius:4px;font-size:13px;cursor:pointer;
}
.comment-form button:hover{background:var(--accent-dark)}
.comment-list{list-style:none}
.comment-item{padding:12px 2px;border-bottom:1px dashed #e3ddce}
.comment-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:20px}
.comment-head b{color:var(--accent-dark)}
.comment-head time{color:var(--ink-light)}
.comment-body{font-size:13.5px;line-height:1.8;margin-top:4px;word-break:break-word}
.comment-empty{font-size:12px;color:var(--ink-light);padding:10px 0}

/* ===== 移动端 ===== */
@media (max-width:640px){
  .container{padding-top:22px}
  .book{padding:12px 10px 18px 44px;border-radius:8px 10px 10px 8px}
  .coil{left:4px;width:40px;background-size:28px 34px}
  .sheet{padding:18px 16px 24px 78px;min-height:380px}
  .sheet::before{background-size:10px 34px;background-position:0 2px}
  .toc-name{max-width:100%;white-space:normal;line-height:26px}
  .toc-row{flex-wrap:wrap;line-height:28px;row-gap:2px}
  .toc-dots{display:none}
  .toc-date{margin-left:auto}
}