* { box-sizing: border-box; font-family: system-ui, Arial; }
body { margin: 0; background:#f6f7fb; color:#111; }
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
h1 { margin: 0 0 8px; }
.muted { color:#666; margin: 6px 0; }
.card { background:#fff; border-radius: 14px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); margin: 12px 0; }
.grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid2 { display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ .grid2 { grid-template-columns: 1fr; } }

label { display:block; font-weight:600; margin-top:10px; }
input, select { width:100%; padding:10px; border:1px solid #ddd; border-radius: 10px; margin-top:6px; background:#fff; }
button { padding:10px 12px; border:0; border-radius: 10px; background:#1b6ef3; color:#fff; font-weight:700; cursor:pointer; }
button.btn-secondary { background:#e9eefc; color:#1b2b5a; }
button.btn-danger { background:#ff3b30; }
.row { display:flex; gap:10px; align-items:center; }
.row input, .row select { margin-top:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 8px; }
.msg { margin-top:10px; color:#b00020; min-height: 18px; }

.cardRow { display:flex; gap:12px; align-items:center; }
.avatar { width:64px; height:64px; border-radius: 14px; object-fit: cover; border:1px solid #eee; }
.grow { flex:1; }
.invite input { margin-top:10px; }