/* =========================================================
   栖居 · 个人博客 外部样式表
   补充内联 CSS 未包含的细节与扩展
   ========================================================= */

/* ====== 滚动条美化 ====== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(194,104,63,.3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(194,104,63,.5)}

[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

/* ====== 选中文字 ====== */
::selection{background:rgba(194,104,63,.22);color:#2b2722}
[data-theme="dark"] ::selection{background:rgba(194,104,63,.35);color:#ece7dc}

/* ====== Focus 样式 ====== */
:focus-visible{outline:2px solid #c2683f;outline-offset:3px;border-radius:4px}

/* ====== 文章内图片 ====== */
.article img{border-radius:14px;margin:16px 0 24px;transition:transform .3s ease}
.article img:hover{transform:scale(1.01)}

/* ====== 文章表格 ====== */
.article table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.95rem}
.article th,.article td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(200,185,165,.25)}
[data-theme="dark"] .article th,[data-theme="dark"] .article td{border-bottom-color:rgba(255,255,255,.08)}
.article th{font-weight:700;color:#c2683f;background:rgba(194,104,63,.04);border-top:none}
[data-theme="dark"] .article th{background:rgba(194,104,63,.08)}
.article tr:hover td{background:rgba(194,104,63,.03)}
[data-theme="dark"] .article tr:hover td{background:rgba(255,255,255,.02)}

/* ====== 分隔线 ====== */
.article hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(200,185,165,.5),transparent);margin:36px 0}

/* ====== 页面切换过渡（给 main 容器） ====== */
.main{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ====== 卡片交错入场 ====== */
.post-card:nth-child(1){animation-delay:0s!important}
.post-card:nth-child(2){animation-delay:.08s!important}
.post-card:nth-child(3){animation-delay:.16s!important}
.post-card:nth-child(4){animation-delay:.24s!important}
.post-card:nth-child(5){animation-delay:.32s!important}
.post-card:nth-child(6){animation-delay:.4s!important}

/* ====== 标签云动画 ====== */
.tags-cloud a:nth-child(odd){animation-duration:.55s}
.tags-cloud a:nth-child(even){animation-duration:.7s}

/* ====== 写作页面 ====== */
.write-wrap{max-width:1000px;margin:0 auto}
.write-tip{background:rgba(194,104,63,.07);border:1px solid rgba(194,104,63,.18);border-radius:12px;padding:12px 18px;font-size:.9rem;color:#8a5a3c;margin:0 0 24px;line-height:1.7}
[data-theme="dark"] .write-tip{background:rgba(194,104,63,.1);color:#e0b394}
.write-tip code{background:rgba(194,104,63,.15);padding:1px 7px;border-radius:5px;font-family:"SFMono-Regular",Consolas,monospace;font-size:.85em}
.write-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.write-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.85rem;font-weight:600;color:#7a7066}
[data-theme="dark"] .field label{color:#a89b8c}
.field input,.field textarea{font-family:inherit;font-size:.95rem;padding:11px 15px;border:1.5px solid rgba(200,185,165,.45);border-radius:12px;background:rgba(0,0,0,.02);color:inherit;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:#c2683f;box-shadow:0 0 0 3px rgba(194,104,63,.1)}
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.emoji-picker{display:flex;gap:8px;flex-wrap:wrap}
.emoji-picker button{font-size:1.35rem;width:44px;height:44px;border-radius:11px;border:1.5px solid rgba(200,185,165,.45);background:transparent;cursor:pointer;transition:all .2s ease;line-height:1}
.emoji-picker button:hover{transform:translateY(-2px);border-color:#c2683f}
.emoji-picker button.active{border-color:#c2683f;background:rgba(194,104,63,.12);box-shadow:0 0 0 3px rgba(194,104,63,.1)}
[data-theme="dark"] .emoji-picker button{border-color:rgba(255,255,255,.16)}
.write-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.btn{border:none;padding:12px 26px;border-radius:99px;font-weight:700;font-size:.92rem;cursor:pointer;transition:all .25s ease;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,#c2683f,#e09a68);color:#fff;box-shadow:0 6px 18px rgba(194,104,63,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(194,104,63,.35)}
.btn-ghost{background:rgba(194,104,63,.1);color:#c2683f}
.btn-ghost:hover{background:rgba(194,104,63,.18);transform:translateY(-2px)}
.code-output{margin-top:8px;background:#2b2722;color:#e8e2d8;padding:18px 20px;border-radius:12px;white-space:pre-wrap;word-break:break-all;font-family:"SFMono-Regular",Consolas,monospace;font-size:.8rem;max-height:320px;overflow:auto;border:1px solid rgba(255,255,255,.08)}
[data-theme="dark"] .code-output{background:rgba(0,0,0,.4)}
.preview-pane{background:#fff;border:1px solid rgba(200,185,165,.35);border-radius:18px;padding:30px;min-height:420px;position:sticky;top:84px}
[data-theme="dark"] .preview-pane{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.ph-empty{color:#a89b8c;text-align:center;padding:80px 0;font-size:.95rem}
@media(max-width:820px){
  .write-grid{grid-template-columns:1fr}
  .preview-pane{position:static;min-height:auto;margin-top:8px}
}

/* ====== 打印样式 ====== */
@media print{
  .site-header,.reading-progress,.theme-toggle,.search,.menu-toggle,.site-footer,.post-footer{display:none!important}
  body{background:#fff;color:#000}
  .main{padding-top:0}
  .post-card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
}