/* 人脉模块样式（自包含，全部 rm- 前缀，避免与 timetrack 冲突）
 * V0.3.10：改为与时间记录一致的浅色主题，配色统一走 app.css 的全局变量 */
#mod-renmai {
  --rm-bg: var(--bg);          /* 页面底色 */
  --rm-bg2: var(--card);       /* 卡片 / 面 */
  --rm-bg3: #f6f8fc;           /* 浅填充（输入框、标签、键值块） */
  --rm-border: var(--line);
  --rm-text: var(--ink);
  --rm-text2: var(--ink2);
  --rm-primary: var(--accent); --rm-primary-d: #3b57e0;
  --rm-danger: #dc2626; --rm-danger-b: #fca5a5;
  --rm-warn: #b45309;   --rm-warn-b: #fbbf24;
  --rm-radius: var(--radius); --rm-shadow: var(--shadow);
  color: var(--rm-text); font-size: 14px;
}
/* 顶部视图切换：与时间记录页的「记录 / 统计」分段控件保持一致 */
.rm-nav { display: flex; gap: 6px; background: #eceff7; border-radius: 10px; padding: 3px; margin-bottom: 14px; flex-wrap: wrap; }
.rm-nav-item { background: transparent; border: 0; color: var(--rm-text2); padding: 6px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: inherit; transition: .15s; }
.rm-nav-item:hover { color: var(--rm-text); }
.rm-nav-item.active { background: var(--rm-bg2); color: var(--rm-text); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.10); }
.rm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rm-search { flex: 1; min-width: 180px; max-width: 360px; background: var(--rm-bg2); border: 1px solid var(--rm-border); color: var(--rm-text); padding: 8px 12px; border-radius: 8px; outline: none; font-family: inherit; font-size: 14px; }
.rm-search:focus { border-color: var(--rm-primary); outline: 2px solid var(--accent-soft); }
.rm-spacer { flex: 1; }
.rm-view { overflow: visible; }
/* 按钮（自包含，不复用 timetrack .btn） */
.rm-btn { background: var(--rm-bg2); color: var(--rm-text); border: 1px solid var(--rm-border); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-family: inherit; transition: .15s; box-shadow: var(--rm-shadow); }
.rm-btn:hover { border-color: var(--rm-primary); color: var(--rm-primary); }
.rm-btn.rm-primary { background: var(--rm-primary); border-color: var(--rm-primary); color: #fff; }
.rm-btn.rm-primary:hover { background: var(--rm-primary-d); color: #fff; }
.rm-btn.rm-danger { color: var(--rm-danger); border-color: transparent; box-shadow: none; }
.rm-btn.rm-danger:hover { border-color: var(--rm-danger-b); background: #fef2f2; color: var(--rm-danger); }
.rm-icon-btn { background: transparent; border: 0; color: var(--rm-text2); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; font-size: 14px; font-family: inherit; flex: 0 0 auto; }
.rm-icon-btn:hover { background: #fee2e2; color: var(--rm-danger); }
.rm-icon-btn.rm-sm { width: 22px; height: 22px; font-size: 12px; }
/* 联系人网格 */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rm-card { display: flex; gap: 12px; align-items: center; background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); padding: 14px; cursor: pointer; transition: .15s; box-shadow: var(--rm-shadow); }
.rm-card:hover { border-color: var(--rm-primary); transform: translateY(-2px); }
.rm-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; }
.rm-avatar.rm-lg { width: 56px; height: 56px; font-size: 22px; }
.rm-card-body { min-width: 0; }
.rm-card-name { font-weight: 600; }
.rm-card-sub { color: var(--rm-text2); font-size: 12px; margin-top: 2px; }
.rm-tag { display: inline-block; background: var(--rm-bg3); border: 1px solid var(--rm-border); color: var(--rm-text2); font-size: 11px; padding: 2px 8px; border-radius: 999px; margin: 4px 4px 0 0; }
.rm-tags { margin-top: 6px; }
.rm-muted { color: var(--rm-text2); font-size: 12px; }
/* 互动时间线 */
.rm-filterbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.rm-filterbar select { background: var(--rm-bg2); border: 1px solid var(--rm-border); color: var(--rm-text); padding: 8px 10px; border-radius: 8px; outline: none; font-family: inherit; font-size: 13px; }
.rm-timeline { display: flex; flex-direction: column; gap: 10px; }
.rm-tl-item { display: flex; gap: 12px; align-items: flex-start; background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); padding: 12px 14px; box-shadow: var(--rm-shadow); }
.rm-tl-date { flex: 0 0 84px; color: var(--rm-text2); font-size: 12px; padding-top: 2px; }
.rm-tl-body { flex: 1; min-width: 0; }
.rm-tl-contact { font-weight: 600; }
.rm-tl-content { color: var(--rm-text2); margin-top: 4px; white-space: pre-wrap; }
.rm-badge { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 6px; padding: 1px 8px; font-size: 12px; margin-right: 8px; }
/* 提醒 */
.rm-grp { font-size: 13px; color: var(--rm-text2); margin: 18px 0 8px; font-weight: 600; }
.rm-rem-item { display: flex; gap: 12px; align-items: flex-start; background: var(--rm-bg2); border: 1px solid var(--rm-border); border-left: 3px solid var(--rm-border); border-radius: var(--rm-radius); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--rm-shadow); }
.rm-rem-item.overdue { border-left-color: var(--rm-danger-b); }
.rm-rem-item.today { border-left-color: var(--rm-warn-b); }
.rm-rem-item.soon { border-left-color: var(--rm-primary); }
.rm-rem-main { flex: 1; }
.rm-rem-note { font-weight: 500; }
.rm-rem-meta { color: var(--rm-text2); font-size: 12px; margin-top: 3px; }
.rm-due { font-weight: 600; }
.rm-due.overdue { color: var(--rm-danger); }
.rm-due.today { color: var(--rm-warn); }
.rm-due.soon { color: var(--rm-primary); }
/* 图谱 */
.rm-graph-wrap { background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); padding: 8px; box-shadow: var(--rm-shadow); }
.rm-graph-svg { width: 100%; height: 60vh; display: block; }
.rm-edge { stroke: #cbd5e1; stroke-width: 1.5; }
.rm-edge-label { fill: var(--rm-text2); font-size: 11px; text-anchor: middle; }
.rm-node { cursor: pointer; }
.rm-node circle { stroke: #ffffff; stroke-width: 2; transition: .15s; }
.rm-node:hover circle { stroke: var(--rm-primary); stroke-width: 3; }
.rm-node-label { fill: var(--rm-text); font-size: 12px; text-anchor: middle; pointer-events: none; font-weight: 600; }
.rm-hint { color: var(--rm-text2); font-size: 12px; margin-top: 10px; }
/* 空状态 */
.rm-empty { color: var(--rm-text2); text-align: center; padding: 50px 20px; background: var(--rm-bg2); border: 1px dashed #cbd5e1; border-radius: var(--rm-radius); }
.rm-empty.rm-mini { padding: 14px; font-size: 12px; }
/* 弹窗 / 详情（原生 dialog，浅色） */
.rm-dlg { color: var(--rm-text); background: transparent; }
.rm-dlg::backdrop { background: rgba(15, 23, 42, .4); }
.rm-dlg.rm-detail { width: min(700px, calc(100vw - 32px)); }
.rm-modal-card, .rm-detail-card { background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: 16px; box-shadow: 0 24px 64px rgba(15,23,42,.18); width: 100%; max-width: 560px; padding: 20px; margin: auto; }
.rm-detail-card { max-width: 700px; }
.rm-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.rm-modal-head h2 { margin: 0; font-size: 17px; }
.rm-detail-title { display: flex; gap: 14px; align-items: center; }
.rm-detail-title h2 { margin: 0 0 4px; }
.rm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--rm-text2); }
.rm-form-grid label.rm-full { grid-column: 1 / -1; }
.rm-form-grid input, .rm-form-grid select, .rm-form-grid textarea { color: var(--rm-text); background: #fbfcfe; border: 1px solid var(--rm-border); padding: 8px 10px; border-radius: 8px; outline: none; font-family: inherit; font-size: 13px; }
.rm-form-grid input:focus, .rm-form-grid select:focus, .rm-form-grid textarea:focus { border-color: var(--rm-primary); outline: 2px solid var(--accent-soft); }
.rm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.rm-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin: 14px 0; }
.rm-kv { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 8px; padding: 8px 10px; }
.rm-kv span { display: block; color: var(--rm-text2); font-size: 11px; }
.rm-kv b { font-weight: 600; word-break: break-all; }
.rm-notes { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 8px; padding: 10px; white-space: pre-wrap; margin-bottom: 14px; }
.rm-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.rm-mini-row { display: flex; gap: 8px; align-items: center; background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.rm-rel-label { background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.rm-link { color: var(--rm-primary); cursor: pointer; }
.rm-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .rm-form-grid, .rm-detail-grid { grid-template-columns: 1fr; } .rm-graph-svg { height: 46vh; } }
/* ===== V0.3.24 新增：标签点选器 / 生日 / 图谱图例 / 分类页 ===== */
/* 标签点选器 */
.rm-tagpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rm-tagopt { background: var(--rm-bg3); border: 1px solid var(--rm-border); color: var(--rm-text2); padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-family: inherit; transition: .12s; }
.rm-tagopt:hover { border-color: var(--tc); color: var(--tc); }
.rm-tagopt.on { background: var(--tc); border-color: var(--tc); color: #fff; font-weight: 600; }
.rm-tagcustom-input { background: #fbfcfe; border: 1px solid var(--rm-border); color: var(--rm-text); padding: 7px 10px; border-radius: 8px; outline: none; font-family: inherit; font-size: 13px; margin-bottom: 8px; width: 100%; box-sizing: border-box; }
.rm-tagcustom-input:focus { border-color: var(--rm-primary); outline: 2px solid var(--accent-soft); }
.rm-tagsel { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-tagsel .rm-tag { cursor: pointer; }
.rm-tagsel .rm-tag b { font-weight: 700; opacity: .7; }
/* 生日提醒分组 */
.rm-bd-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--rm-bg2); border: 1px solid var(--rm-border); border-left: 3px solid var(--rm-warn-b); border-radius: var(--rm-radius); padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--rm-shadow); }
.rm-bd-main { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rm-bd-date { color: var(--rm-text2); font-size: 12px; }
.rm-bd-age { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.rm-btn.rm-sm { padding: 5px 10px; font-size: 12px; }
/* 图谱图例 */
.rm-graph-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--rm-text2); font-size: 12px; margin-top: 10px; }
.rm-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.rm-legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rm-legend-item i.dash { background: transparent; border-top: 2px dashed #94a3b8; height: 0; width: 18px; border-radius: 0; }
.rm-edge.auto { stroke: #94a3b8; stroke-dasharray: 5 4; }
.rm-add-rel { margin-top: 6px; }
/* 分类页 */
.rm-groups { display: flex; flex-direction: column; gap: 6px; }
.rm-grp-block { background: var(--rm-bg2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); padding: 10px 14px; box-shadow: var(--rm-shadow); }
.rm-group-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rm-group-chip { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.rm-rel-pair { background: var(--rm-bg3); border: 1px solid var(--rm-border); border-radius: 999px; padding: 3px 12px; font-size: 13px; }