.ocf-collab,
.ocf-moodboard {
	margin: 20px 0 0;
	padding: 22px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-radius: 18px;
	background: var(--ocf-paper, #fff);
	color: var(--ocf-ink, #1d2433);
}
.ocf-collab h2,
.ocf-moodboard h2 { margin: 0 0 4px; font-size: 1.25rem; }
.ocf-collab-credit { color: var(--ocf-muted, #6b7385); }
.ocf-collab-credit a { color: inherit; font-weight: 700; }

/* co-authors panel */
.ocf-collab-invite {
	margin: 0 0 18px;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid var(--ocf-coral, #ff6259);
	background: rgba(255, 98, 89, .08);
}
.ocf-collab-invite p { margin: 0 0 12px; }
.ocf-collab-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ocf-collab-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ocf-collab-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ocf-collab-list li > span { flex: 1; min-width: 0; display: grid; }
.ocf-collab-list img { border-radius: 50%; object-fit: cover; flex: none; }
.ocf-collab-list a { color: inherit; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ocf-collab-list small { color: var(--ocf-muted, #6b7385); }
.ocf-collab-list .is-pending { opacity: .75; }
.ocf-collab-quiet {
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}
.ocf-collab-quiet:hover { border-color: var(--ocf-muted, #6b7385); }
.ocf-collab-invite-form { margin-top: 18px; display: grid; gap: 8px; }
.ocf-collab-invite-form label { font-weight: 700; }
.ocf-collab-invite-form > div { display: flex; gap: 10px; }
.ocf-collab-invite-form input[type=text] {
	flex: 1;
	min-width: 0;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
}
.ocf-collab-invite-form small { color: var(--ocf-muted, #6b7385); }
.ocf-collab-msg,
.ocf-mb-status { margin: 12px 0 0; font-size: .92rem; color: var(--ocf-muted, #6b7385); }
.ocf-collab-msg.is-error,
.ocf-mb-status.is-error { color: #e5534b; }

/* moodboard */
.ocf-moodboard > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ocf-moodboard > header p { margin: 0; color: var(--ocf-muted, #6b7385); }
.ocf-mb-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocf-mb-grid { margin-top: 16px; column-width: 210px; column-gap: 14px; }
.ocf-mb-item { break-inside: avoid; margin: 0 0 14px; display: block; }
.ocf-mb-frame {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(124, 58, 237, .12);
}
.ocf-mb-frame img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.ocf-mb-item figcaption { margin-top: 6px; font-size: .88rem; color: var(--ocf-muted, #6b7385); overflow-wrap: anywhere; }
.ocf-mb-caption {
	width: 100%;
	margin-top: 6px;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .88rem;
	box-sizing: border-box;
}
.ocf-mb-tools { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ocf-mb-tools button {
	min-height: 28px;
	padding: 0 8px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .82rem;
	cursor: pointer;
}
.ocf-mb-tools button:hover { border-color: var(--ocf-muted, #6b7385); }
.ocf-mb-tools [data-mb-delete] { margin-left: auto; }
.ocf-mb-ai { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--ocf-muted, #6b7385); }
.ocf-mb-empty { margin: 16px 0 0; color: var(--ocf-muted, #6b7385); }

@media (max-width: 520px) {
	.ocf-collab, .ocf-moodboard { padding: 16px; border-radius: 14px; }
	.ocf-mb-grid { column-gap: 10px; }
	.ocf-collab-invite-form > div { flex-direction: column; }
}