/* 我的孩子：孩子卡片列表 + 右侧抽屉（新建 / 绑定）。同一排按钮同高同字号；控件文字不换行。 */
.fm-main { width: 100%; max-width: 820px; margin: 0 auto; }
.fm-list { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fm-empty { color: #8a93a3; font-weight: 600; padding: 20px 0; }

/* 「新增」按钮：细加号 + 文字、1px 虚线、圆角 8、30 高 13 字，列表顶部靠左当第一项 */
.fm-add { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 600; color: #5a6475; background: #fff; border: 1px dashed #b8c1cf; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.fm-add svg { width: 14px; height: 14px; }
.fm-add:hover { color: var(--blue); border-color: var(--blue); }

.fm-card { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border: 1.5px solid #e6eaf1; border-radius: 16px; }
.fm-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fm-avatar { width: 46px; height: 46px; border-radius: 50%; background: #f3f5f9; flex-shrink: 0; }
.fm-names { display: flex; flex-direction: column; min-width: 0; }
.fm-names b { font-size: 1.05rem; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-names span { font-size: 0.8rem; font-weight: 600; color: #8a93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-stats { display: flex; gap: 14px; }
.fm-stats span { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; font-weight: 700; color: #8a93a3; white-space: nowrap; }
.fm-stats b { font-size: 1.25rem; color: var(--dark); line-height: 1.2; }
.fm-stats .hot b { color: #5B3FE0; }
.fm-stats.muted { font-size: 0.8rem; color: #b6bfcc; }
.fm-actions { display: flex; gap: 8px; }
.fm-btn { height: 34px; padding: 0 14px; font-size: 0.84rem; border-radius: 10px; box-shadow: none; white-space: nowrap; flex-shrink: 0; }
.fm-btn-line { background: #fff; color: var(--dark); border: 1.5px solid #e6eaf1; }
.fm-btn-line:hover { color: var(--blue); border-color: var(--blue); }
.fm-btn-ghost { background: transparent; color: #8a93a3; border: 1.5px solid transparent; }
.fm-btn-danger { background: #F0524F; color: #fff; border: 1.5px solid #F0524F; }
.fm-inline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed #e6eaf1; }
.fm-inline-input { height: 34px; flex: 1; min-width: 160px; font-family: inherit; font-size: 0.9rem; border: 1.5px solid var(--blue); border-radius: 10px; padding: 0 10px; }
.fm-inline-q { font-size: 0.86rem; font-weight: 600; color: #5a6475; flex: 1; min-width: 160px; }
.fm-inline-q.ok b { color: var(--dark); }

.fm-family { width: 100%; background: #fff; border: 1.5px solid #e6eaf1; border-left: 5px solid #7C5CFF; border-radius: 0 16px 16px 0; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.fm-family:empty { display: none; }
.fm-fam-main { display: flex; align-items: center; gap: 10px; }
.fm-fam-name { font-size: 1.15rem; font-weight: 900; color: var(--dark); cursor: text; border-radius: 6px; }
.fm-fam-name:hover { background: #f3f6fb; }
.fm-dev { height: 22px; line-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; color: #fff; background: #7C5CFF; white-space: nowrap; }
.fm-fam-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-fam-label { font-size: 0.82rem; font-weight: 700; color: #8a93a3; min-width: 72px; white-space: nowrap; }
.fm-code { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: 3px; color: #5B3FE0; }
.fm-parents { font-size: 0.9rem; font-weight: 700; color: var(--dark); flex: 1; min-width: 0; }

/* 抽屉 */
.fm-drawer-mask { position: fixed; inset: 0; z-index: 300; background: rgba(20, 26, 38, 0.35); }
.fm-drawer-mask[hidden] { display: none; }
.fm-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 310; width: min(420px, 100vw); background: #fff; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; transform: translateX(105%); transition: transform 0.25s ease; overflow-y: auto; }
.fm-drawer.open { transform: none; }
.fm-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.fm-drawer-head h3 { font-size: 1.15rem; font-weight: 900; }
.fm-icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid #e6eaf1; border-radius: 50%; background: #fff; color: #5a6475; cursor: pointer; }
.fm-icon-btn svg { width: 16px; height: 16px; }
.fm-seg { display: flex; gap: 4px; padding: 4px; background: #eef1f6; border-radius: 12px; }
.fm-seg-btn { flex: 1; height: 34px; border: none; border-radius: 9px; background: transparent; font-family: inherit; font-size: 0.88rem; font-weight: 800; color: #6b7280; cursor: pointer; white-space: nowrap; }
.fm-seg-btn.active { background: #fff; color: var(--dark); box-shadow: var(--shadow-sm); }
.fm-form { display: flex; flex-direction: column; gap: 14px; }
.fm-field { display: flex; flex-direction: column; gap: 6px; }
.fm-field > span { font-size: 0.84rem; font-weight: 800; color: #5a6475; }
.fm-field input { height: 40px; font-family: inherit; font-size: 0.95rem; border: 1.5px solid #e6eaf1; border-radius: 10px; padding: 0 12px; width: 100%; }
.fm-field input:focus { outline: none; border-color: var(--blue); }
.fm-pw-row { display: flex; gap: 8px; }
.fm-mini { height: 40px; padding: 0 12px; font-family: inherit; font-size: 0.84rem; font-weight: 700; color: #5a6475; background: #f5f7fa; border: 1.5px solid #e6eaf1; border-radius: 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.fm-submit { height: 42px; font-size: 0.95rem; }
.fm-error { color: #e03131; font-size: 0.85rem; font-weight: 700; min-height: 1em; }
.fm-done { display: flex; flex-direction: column; gap: 10px; }
.fm-done-title { font-size: 1.05rem; font-weight: 900; color: var(--dark); margin-bottom: 4px; }
.fm-cred { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #f5f7fa; border-radius: 12px; }
.fm-cred span { font-size: 0.84rem; font-weight: 700; color: #8a93a3; }
.fm-cred b { font-size: 1.15rem; color: var(--dark); letter-spacing: 0.5px; }

/* 手机端更简：卡片竖排，统计和按钮各占一行 */
@media (max-width: 640px) {
  .fm-card { grid-template-columns: 1fr auto; gap: 10px; }
  .fm-actions { grid-column: 1 / -1; }
  .fm-actions .fm-btn { flex: 1; }
}