/* 家音 · 回忆录原型 v0.1 — 温暖纸质风 */
:root { --ink: #2c2c2c; --paper: #faf7f0; --accent: #a5673f; --line: #e5ddcf; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
       font-family: "Noto Serif SC", "Songti SC", serif; line-height: 1.8; }
.topbar { display: flex; justify-content: space-between; align-items: center;
          padding: 12px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.brand { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; }
.navlinks a { margin-left: 16px; color: var(--ink); text-decoration: none; }
.navlinks a:hover { color: var(--accent); }
.container { max-width: 860px; margin: 0 auto; padding: 24px; }
.footer { text-align: center; color: #999; font-size: 12px; padding: 24px; }
h1 { font-size: 28px; } h2 { font-size: 21px; margin-top: 36px;
    border-bottom: 2px solid var(--line); padding-bottom: 6px; }
h3.year { color: var(--accent); margin-bottom: 4px; }
.hint { color: #888; font-size: 14px; }
.error { color: #c0392b; }
.prose { white-space: pre-wrap; background: #fff; border: 1px solid var(--line);
         border-radius: 8px; padding: 20px; }
.stats span { margin-right: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px;
        padding: 18px; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--accent); }
.card-title { font-size: 18px; font-weight: 700; }
.card-sub { color: #888; font-size: 13px; margin-top: 6px; }
.tree-box { width: 100%; height: 480px; background: #fff;
            border: 1px solid var(--line); border-radius: 10px; }
.photos { display: flex; gap: 16px; flex-wrap: wrap; }
.photo { width: 160px; }
.photo-ph { height: 120px; background: #eee5d3; border-radius: 8px;
            display: flex; align-items: center; justify-content: center; font-size: 36px; }
.photo-cap { font-size: 13px; color: #666; margin-top: 6px; }
.timeline { list-style: none; padding-left: 0; }
.timeline li { background: #fff; border-left: 3px solid var(--accent);
               margin: 10px 0; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.prec { color: #999; font-size: 12px; }
.quotes { list-style: none; padding: 0; }
.quotes li { background: #fff8ea; border: 1px dashed var(--accent);
             border-radius: 8px; padding: 12px 16px; margin: 10px 0; font-style: italic; }
.correction { color: #1e7e34; }
.badge { background: #c0392b; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.pwdform input { padding: 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 6px; }
.pwdform button { padding: 10px 20px; font-size: 16px; background: var(--accent);
                  color: #fff; border: none; border-radius: 6px; cursor: pointer; }
a { color: var(--accent); }
code { background: #f0ebe0; padding: 2px 6px; border-radius: 4px; }

/* ===== 互动：观看/点赞/评论/登录 ===== */
.topright { display: flex; align-items: center; gap: 16px; }
.auth { font-size: 14px; }
.auth a { margin-left: 8px; }
.engagement { display: flex; align-items: center; gap: 16px; margin: 8px 0 4px; color: #666; }
.meta-line { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 8px; color: #666; font-size: 14px; }
.likebtn { border: 1px solid var(--line); background: #fff; border-radius: 20px;
           padding: 6px 16px; font-size: 15px; cursor: pointer; }
.likebtn.liked { background: #ffe9e9; border-color: #e88; }
.likebtn.small { font-size: 13px; padding: 3px 10px; }
.comments { margin-top: 8px; }
.comment { background: #fff; border: 1px solid var(--line); border-radius: 8px;
           padding: 10px 14px; margin: 10px 0; }
.comment-head { font-size: 14px; }
.comment-body { margin: 6px 0; white-space: pre-wrap; }
.comment-actions { font-size: 13px; }
.replybtn { border: none; background: none; color: var(--accent); cursor: pointer; font-size: 13px; }
.commentform { margin-top: 16px; }
.commentform textarea { width: 100%; padding: 10px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.commentform button { margin-top: 8px; padding: 10px 24px; font-size: 15px;
  background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.authform { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.authform input { padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; }
.authform button { padding: 12px; font-size: 16px; background: var(--accent);
  color: #fff; border: none; border-radius: 8px; cursor: pointer; }

/* ===== 朗读功能 ===== */
.readbar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.read-btn { flex: 1; padding: 14px; font-size: 18px; background: var(--accent);
            color: #fff; border: none; border-radius: 10px; cursor: pointer; }
.read-btn:disabled { background: #ccc; cursor: default; }
.speed { font-size: 14px; color: #666; white-space: nowrap; }
.speed select { padding: 8px; font-size: 15px; border-radius: 6px; border: 1px solid var(--line); }
#articleBody [data-para].reading { background: #fff3d6; border-radius: 6px; }

/* ===== 响应式：手机端（≤768px）===== */
@media (max-width: 768px) {
  .container { padding: 16px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; margin-top: 28px; }
  .topbar { flex-wrap: wrap; padding: 10px 16px; }
  .brand { font-size: 17px; }
  .navlinks { margin-top: 6px; }
  .navlinks a { margin-left: 0; margin-right: 14px; font-size: 15px; }
  .cards { grid-template-columns: 1fr; }
  .tree-box { height: 360px; }
  .photos { gap: 12px; }
  .photo { width: calc(50% - 6px); }
  .photo-ph { height: 100px; font-size: 28px; }
  .photo-cap { font-size: 12px; }
  .stats span { display: inline-block; margin: 0 12px 6px 0; font-size: 14px; }
  .pwdform input { width: 100%; margin-bottom: 10px; }
  .pwdform button { width: 100%; }
  .prose { padding: 14px; font-size: 15px; }
  .timeline li { padding: 8px 12px; font-size: 15px; }
}

/* ---- 写文章 ---- */
#editor { background:#fff; min-height:280px; }
#editor .ql-editor { font-size:17px; line-height:1.9; font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
.editor-toolbar-row { display:flex; align-items:center; gap:10px; margin:14px 0 6px; }
.editor-label { font-weight:bold; }
.voice-btn { padding:8px 14px; font-size:15px; border:1px solid #b7d7a8; background:#eef7ea; border-radius:8px; cursor:pointer; }
.voice-btn:disabled { opacity:.5; cursor:default; }
.voice-status { color:#888; font-size:13px; }
.form-row { display:flex; gap:16px; flex-wrap:wrap; margin:10px 0; }
.form-row label { flex:1; min-width:150px; }
input.full, select, input[type=date] { font-size:16px; padding:8px; border:1px solid #ccc; border-radius:8px; width:100%; max-width:420px; box-sizing:border-box; }
.related-box { border:1px solid #ddd; border-radius:8px; padding:10px 14px; margin:12px 0; }
.related-box legend { padding:0 6px; }
.checkbox-grid { display:flex; flex-wrap:wrap; gap:8px 18px; }
.check { font-size:16px; white-space:nowrap; }
.form-actions { margin:18px 0 6px; display:flex; gap:12px; }
.btn-primary { background:#2f7d2f; color:#fff; border:none; border-radius:8px; padding:10px 28px; font-size:16px; cursor:pointer; }
.btn-secondary { background:#f0f0f0; border:1px solid #ccc; border-radius:8px; padding:10px 20px; font-size:16px; cursor:pointer; }
.btn-small { background:#2f7d2f; color:#fff; border:none; border-radius:6px; padding:4px 12px; font-size:13px; cursor:pointer; margin-left:8px; }
.error { color:#c00; }
.hint { color:#888; font-size:14px; }
.muted { color:#888; font-size:13px; }
.badge-draft { background:#f5c542; color:#5a3d00; font-size:12px; border-radius:6px; padding:2px 8px; }
.card-list { list-style:none; padding:0; }
/* 富文本正文 */
.article-body h1 { font-size:1.5em; } .article-body h2 { font-size:1.3em; } .article-body h3 { font-size:1.15em; }
.article-body blockquote { border-left:4px solid #b7d7a8; margin:12px 0; padding:6px 14px; color:#555; background:#f7faf5; }
.article-body pre { background:#f4f4f4; padding:10px; border-radius:6px; overflow:auto; }
.article-body ul, .article-body ol { padding-left:24px; }
.btn-danger { background:#c0392b; color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:15px; cursor:pointer; }
.kinship { background:#eef4fb; border-left:4px solid #5a7d9a; padding:8px 12px; border-radius:0 8px 8px 0; }
textarea.full { font-size:16px; padding:8px; border:1px solid #ccc; border-radius:8px; width:100%; max-width:640px; box-sizing:border-box; font-family:inherit; line-height:1.8; }
.photo-img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#eee; }
.upload-row { display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.filebtn { display:inline-block; padding:10px 18px; cursor:pointer; }
.steps { line-height:2; font-size:16px; }
.steps li { margin-bottom:10px; }
.guide-list { line-height:2; font-size:16px; }
.guide-list li { margin-bottom:8px; }
.share-item { border:1px solid #e2ddd2; border-radius:8px; padding:12px; margin-bottom:12px; background:#fff; }
.share-actions { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.success { color:#1e7e34; background:#e6f4ea; border:1px solid #b7dfc0; padding:8px 12px; border-radius:6px; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td { border:1px solid #e2ddd2; padding:6px 8px; text-align:left; }
.table th { background:#f7f3ea; }
.reading { background: #fff3d6; border-radius: 6px; }
.chatlog { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.chat-msg { max-width:85%; padding:10px 14px; border-radius:12px; line-height:1.7; }
.chat-msg.user { align-self:flex-end; background:#e3f0ff; }
.chat-msg.assistant { align-self:flex-start; background:#f7f3ea; }
.chat-role { font-size:12px; color:#888; margin-bottom:4px; }
.chat-body { white-space:pre-wrap; }
.chatform { display:flex; gap:8px; margin-top:12px; }
.chatform input { flex:1; }
.badge { display:inline-block; background:#e8f4e8; color:#2a7a2a; font-size:12px; padding:2px 8px; border-radius:10px; margin-left:6px; }