/* Onglet Réglages : cartes, champs, compte, foyer (membres, invitation). */
.card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; gap: 12px }
.card h2 { font-family: var(--display); font-size: 1.25rem; margin: 0 }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 500 }
.field input, .field select, .inline input { border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); padding: 9px 11px; min-width: 0 }
.code { font-family: var(--mono); font-size: .85rem; background: var(--bg); border: 1.5px dashed var(--line); padding: 10px; border-radius: 10px; word-break: break-all; user-select: all }
.code.big { font-size: 1.6rem; font-weight: 600; letter-spacing: .15em; text-align: center }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap }

#duo { display: flex; flex-direction: column; gap: 14px }
.sub { display: flex; flex-direction: column; gap: 10px; border-top: 1.5px solid var(--line); padding-top: 14px }
.sub h3 { margin: 0; font-size: 1rem }
.inline { display: flex; gap: 8px }
.inline input { flex: 1 }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.members li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg) }
.invite { display: flex; flex-direction: column; gap: 10px }
.ghost.small { padding: 4px 10px; font-size: .82rem }
.ghost.danger { border-color: var(--no); color: var(--no) }
.invited { color: var(--accent); font-weight: 600 }

@media (max-width: 440px) { .inline { flex-direction: column } }