/* ================= v4：多主题 / 日夜切换 ================= */
[data-theme] { --primary: #0f766e; --primary-dark: #115e59; --primary-light: #ccfbf1; --accent: #2563eb; --danger: #dc2626; --warn: #d97706; --bg: #f1f5f9; --card: #fff; --border: #e2e8f0; --text: #1e293b; --muted: #64748b; --chip-bg: #e0f2fe; --hover: #f0f4f8; --active-bg: #e0f2fe; }
[data-theme="dark"] { --primary: #2dd4bf; --primary-dark: #14b8a6; --primary-light: #134e4a; --accent: #60a5fa; --danger: #f87171; --warn: #fbbf24; --bg: #0f172a; --card: #1e293b; --border: #334155; --text: #e2e8f0; --muted: #94a3b8; --chip-bg: #164e63; --hover: #263449; --active-bg: #164e63; }
[data-theme="ocean"] { --primary: #0284c7; --primary-dark: #0369a1; --primary-light: #e0f2fe; --accent: #0ea5e9; --danger: #dc2626; --warn: #d97706; --bg: #f0f9ff; --card: #ffffff; --border: #bae6fd; --text: #0c4a6e; --muted: #64748b; --chip-bg: #e0f2fe; --hover: #e0f2fe; --active-bg: #bae6fd; }
[data-theme="forest"] { --primary: #16a34a; --primary-dark: #15803d; --primary-light: #dcfce7; --accent: #059669; --danger: #dc2626; --warn: #ca8a04; --bg: #f7fef7; --card: #ffffff; --border: #bbf7d0; --text: #14532d; --muted: #6b7280; --chip-bg: #dcfce7; --hover: #f0fdf4; --active-bg: #dcfce7; }
[data-theme="warm"] { --primary: #d97706; --primary-dark: #b45309; --primary-light: #fef3c7; --accent: #ea580c; --danger: #dc2626; --warn: #ca8a04; --bg: #fffbeb; --card: #ffffff; --border: #fde68a; --text: #451a03; --muted: #92400e; --chip-bg: #fef3c7; --hover: #fffbeb; --active-bg: #fef3c7; }
[data-theme="rose"] { --primary: #db2777; --primary-dark: #be185d; --primary-light: #fce7f3; --accent: #ec4899; --danger: #e11d48; --warn: #d97706; --bg: #fdf2f8; --card: #ffffff; --border: #fbcfe8; --text: #500724; --muted: #9d174d; --chip-bg: #fce7f3; --hover: #fdf2f8; --active-bg: #fce7f3; }
body { background: var(--bg); color: var(--text); transition: background .3s, color .3s; }
/* ★ 输入控件文字颜色跟随主题（修复暗夜/深色主题下输入字体仍为黑色看不清） */
.f-input, .f-select, .f-textarea, .search-input, input[type="text"], input[type="search"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select {
  color: var(--text);
  background-color: var(--card);
}
.f-input::placeholder, .f-textarea::placeholder, .search-input::placeholder,
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* ★ 富文本编辑器：编辑/阅读模式文字颜色与主题底色相反（暗色下为浅色文字） */
.editor, .ed-source textarea, .ed-readonly .editor { color: var(--text); }
.ed-source textarea { background: var(--card); }
/* ★ 编辑模式切换按钮：文字颜色与按钮底色相反（浅主题=深底白字，暗主题=浅底深字） */
.ed-mode-toggle { background: var(--primary); color: var(--card); }
.ed-mode-toggle:hover { background: var(--primary-dark); color: var(--card); }
/* ★ 聊天：会话/好友名称颜色随主题（暗色下为浅色） */
.conv-item, .conv-item b, .chat-friend-item, .chat-friend-item b, #frList b { color: var(--text); }
.theme-btn { border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px; color: var(--text); }
.theme-menu { position: absolute; right: 0; top: 42px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; z-index: 120; min-width: 150px; }
.theme-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.theme-menu button:hover { background: var(--hover); }
.theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }

/* ================= v4：登录页（展示条/背景轮播/日期时间） ================= */
.auth-body { position: relative; overflow-y: auto; }
.auth-bg-layer { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: opacity 1s ease; }
.auth-overlay { position: fixed; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(15,118,110,.82) 0%, rgba(19,78,74,.86) 100%); }
.auth-body.has-bg .auth-overlay { background: rgba(2,6,23,.55); }
.auth-card { position: relative; z-index: 2; margin: auto; max-height: 92vh; overflow-y: auto; }
.auth-banner { background: linear-gradient(90deg, var(--primary), var(--accent)); color: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.auth-clock { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.auth-theme-row { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; }

/* ================= v4：文档树形（左中右）+ 状态行 ================= */
.docs-layout { display: flex; gap: 10px; align-items: stretch; min-height: 460px; height: calc(100vh - 130px); }
.docs-tree { width: 300px; flex: 0 0 300px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; overflow-y: auto; background: var(--card); }
.docs-right { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.docs-right .doc-editor-body { flex: 1; overflow-y: auto; padding: 12px; }
.docs-statusbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--bg); padding: 6px 12px; font-size: 12px; color: var(--muted); }
.docs-statusbar b { color: var(--text); }
.tree-item { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item:hover { background: var(--hover); }
.tree-item.active { background: var(--active-bg); color: var(--primary); font-weight: 600; }
.tree-item .tree-cnt { color: var(--muted); font-size: 11px; margin-left: auto; }
.tree-item .t-arrow { font-size: 10px; width: 14px; flex: 0 0 14px; text-align: center; color: var(--muted); }
.tree-item .t-spacer { width: 14px; flex: 0 0 14px; }
.doc-file-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; font-size: 13px; }
.doc-file-item:hover { background: var(--hover); }
.doc-file-item.active { background: var(--active-bg); border-left-color: var(--primary); }
.doc-file-item .df-code { font-size: 11px; color: var(--muted); }

/* ================= v4：时间线文档栏 ================= */
.tl-docs-layout { display: flex; gap: 10px; align-items: stretch; min-height: 460px; height: calc(100vh - 130px); }
.tl-docs-list { width: 210px; flex: 0 0 210px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; overflow-y: auto; background: var(--card); }
.tl-docs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.tl-docs-main .tl-docs-scroll { flex: 1; overflow-y: auto; padding: 14px; }
.tl-event-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 18px 0; position: relative; background: var(--card); }
.tl-event-card .tl-seq { position: absolute; top: -11px; left: 12px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 12px; font-weight: 700; }
.tl-layout-row .tl-event-card { display: inline-block; vertical-align: top; width: calc(50% - 12px); margin: 8px 6px; }

/* ================= v4：分组/生日/家谱扩展 ================= */
.group-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.group-tag { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; color: var(--text); }
.group-tag.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tx-type-search { margin-bottom: 6px; }
.fam-phone-add { color: var(--primary); cursor: pointer; font-weight: 600; }
.bd-timeline { border-left: 3px solid #ec4899; padding-left: 12px; margin: 6px 0; }
.bd-node { margin: 8px 0; }
.bd-node .bd-time { font-size: 12px; color: var(--muted); }
.person-img-row { display: flex; gap: 6px; flex-wrap: wrap; }
.person-img-row .pi-item { position: relative; }
.person-img-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.person-img-row .pi-del { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; border: 0; font-size: 10px; line-height: 1; cursor: pointer; }
.person-img-row .pi-time { font-size: 10px; color: var(--muted); display: block; text-align: center; }

/* ================= v4：时间表 / 工作经历 ================= */
.tt-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--card); }
.wh-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--card); }
.wh-card .wh-dates { font-size: 12px; color: var(--muted); }
.chat-friend-item .note-preview { font-size: 12px; color: var(--muted); }

/* 时间表/时间线 表格 & 工具 */
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.tl-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pill-on { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* ================= 家谱成员 在世/去世 徽章 ================= */
.life-badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.life-badge.alive { background:rgba(34,197,94,.14); color:#16a34a; border:1px solid rgba(34,197,94,.35); }
.life-badge.dead { background:rgba(220,38,38,.12); color:#dc2626; border:1px solid rgba(220,38,38,.35); }
/* ================= 文档栏：文件夹分组标题 + 重命名按钮 ================= */
.tree-sep { padding: 6px 8px 2px; font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1px dashed var(--border); margin: 4px 0 2px; letter-spacing: .5px; }
.tree-item .tree-act { opacity: 0; border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; flex: 0 0 auto; color: var(--primary); }
.tree-item:hover .tree-act { opacity: .9; }
.tree-item .tree-act:hover { background: var(--hover); opacity: 1; }

/* ================= 教程：步骤时间线（纵向按行显示，覆盖 v3 横向 flex） ================= */
.tu-timeline { display: flex; flex-direction: column; gap: 14px; }
.tu-timeline.horizontal { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.tu-timeline.horizontal .tu-step { width: calc(50% - 10px); box-sizing: border-box; }
.tu-step { display: flex; flex-direction: column; gap: 8px; border-left: 3px solid #0ea5e9; padding-left: 14px; margin: 4px 0; background: transparent; }
.tu-step:first-child { margin-top: 26px; } /* 第一个步骤隔开一点显示 */
.tu-step-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tu-step-head b { flex: 1; min-width: 0; word-break: break-all; }
.tu-step-line { display: flex; gap: 6px; align-items: flex-start; line-height: 1.6; word-break: break-all; }
.tu-step-line > .muted { flex: none; white-space: nowrap; }
.tu-step-line .tu-media { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.tu-edit-step { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 12px 0; background: var(--bg); }
.tu-edit-step:first-child { margin-top: 18px; }
.tu-edit-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }