/* ===== OCF UX Fix Pack ===== */

/* toasts */
.ocf-toasts { position: fixed; z-index: 100000; right: 18px; bottom: 18px; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.ocf-toast {
	pointer-events: auto;
	padding: 12px 16px;
	border: 1px solid var(--ocf-line, #dfe4ea);
	border-left: 4px solid #6d4ee6;
	border-radius: 12px;
	background: var(--ocf-paper, #fff);
	color: var(--ocf-ink, #1d2433);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
	font-size: .93rem;
	line-height: 1.4;
	cursor: pointer;
	animation: ocf-toast-in .18s ease-out;
}
.ocf-toast.is-error { border-left-color: #e5534b; }
.ocf-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
@keyframes ocf-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ocf-toast { animation: none; } .ocf-toast.is-leaving { transition: none; } }

/* confirm dialog (reuses .ocf-dialog from the community plugin) */
.ocf-confirm { width: min(440px, calc(100vw - 28px)); }
.ocf-confirm-text { margin: 0; color: var(--ocf-muted, #6b7385); line-height: 1.5; }
.ocf-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ocf-confirm-actions button {
	min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 11px;
	background: #6d4ee6; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.ocf-confirm-actions button.is-quiet { background: transparent; border-color: var(--ocf-line, #dfe4ea); color: inherit; }
.ocf-confirm-actions button.is-danger { background: #d64545; }
.ocf-confirm-actions button:focus-visible { outline: 2px solid #a99bff; outline-offset: 2px; }

/* live search suggestions */
.ocf-suggest-host { position: relative; }
.ocf-suggest {
	position: absolute; z-index: 400; left: 0; right: 0; top: calc(100% + 8px);
	max-height: min(70vh, 520px); overflow-y: auto;
	padding: 8px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 16px;
	background: var(--ocf-paper, #fff); color: var(--ocf-ink, #1d2433);
	box-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}
.ocf-suggest[hidden] { display: none; }
.ocf-sg-group { margin: 10px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ocf-muted, #6b7385); }
.ocf-suggest a[role=option] { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.ocf-suggest a[role=option]:hover, .ocf-suggest a[aria-selected=true] { background: rgba(124, 92, 255, .16); }
.ocf-suggest img, .ocf-suggest i {
	flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
	display: grid; place-items: center; background: rgba(124, 92, 255, .22); color: #b9a8ff; font-style: normal; font-weight: 800;
}
.ocf-suggest span { min-width: 0; display: grid; }
.ocf-suggest strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocf-suggest small { color: var(--ocf-muted, #6b7385); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocf-sg-empty { margin: 14px 8px; color: var(--ocf-muted, #6b7385); }
.ocf-suggest .ocf-sg-all { margin-top: 6px; justify-content: center; border-top: 1px solid var(--ocf-line, #dfe4ea); border-radius: 0 0 10px 10px; font-weight: 700; color: #8f78ff; }

/* search results page */
.ocf-sr-section, .ocf-sr-empty { margin-top: 16px; padding: 22px; }
.ocf-sr-section h2, .ocf-sr-empty h2 { margin: 0 0 14px; font-size: 1.15rem; }
.ocf-sr-section h2 small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(124, 92, 255, .2); color: #b9a8ff; font-size: .72rem; }
.ocf-sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ocf-sr-card { display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; }
.ocf-sr-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #3a2a72, #6d4ee6); color: #fff; font-size: 2.2rem; }
.ocf-sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ocf-sr-card strong { margin-top: 6px; }
.ocf-sr-card small, .ocf-sr-list small { color: var(--ocf-muted, #6b7385); }
.ocf-sr-card:hover strong { text-decoration: underline; }
.ocf-sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ocf-sr-list a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.ocf-sr-list a:hover { background: rgba(124, 92, 255, .12); }
.ocf-sr-list img { border-radius: 50%; object-fit: cover; flex: none; }
.ocf-sr-list span { display: grid; min-width: 0; }
.ocf-sr-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ocf-sr-links a { padding: 8px 14px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 650; }
.ocf-sr-note { color: var(--ocf-muted, #6b7385); font-size: .9rem; }

/* dark mode never defined --ocf-soft, so elements using it fell back to near-white lavender */
body.ocf-dark { --ocf-soft: #2a2f42; }

/* notification popover: the close button was invisible (near-white on light) */
.ocf-notification-popover header button {
	width: 34px; height: 34px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 10px;
	background: transparent; color: var(--ocf-ink, #1d2433); font-size: 20px; line-height: 1; cursor: pointer;
}
.ocf-notification-popover header button:hover { background: rgba(124, 92, 255, .16); }

/* phone navigation: real icons, readable labels, "More" sheet, chat bubble clear of the bar */
.ocf-more-sheet { display: none; }
@media (max-width: 760px) {
	.ocf-mobile-nav { height: 64px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: stretch; align-items: stretch; gap: 0; box-sizing: content-box; }
	.ocf-mobile-nav a, .ocf-mobile-nav button {
		flex: 1; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 3px;
		padding: 4px 2px; border: 0; background: none; color: var(--ocf-muted, #8a90a6);
		font: inherit; font-size: 11px; font-weight: 650; text-decoration: none; cursor: pointer;
	}
	.ocf-mobile-nav i { display: grid; place-items: center; width: 28px; height: 28px; font-style: normal; }
	.ocf-mobile-nav .ocf-svg-icon { width: 23px; height: 23px; }
	.ocf-mobile-nav a[aria-current=page], .ocf-mobile-nav button[aria-expanded=true] { color: var(--ocf-violet, #8f78ff); }
	.ocf-mobile-nav a[aria-current=page] i { background: rgba(124, 92, 255, .18); border-radius: 10px; }
	.ocf-more-sheet {
		position: fixed; z-index: 99995; left: 8px; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px;
		border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 18px; background: var(--ocf-paper, #fff);
		box-shadow: 0 22px 60px rgba(0, 0, 0, .4);
	}
	.ocf-more-sheet[hidden] { display: none; }
	.ocf-more-sheet a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; color: var(--ocf-ink, #1d2433); text-decoration: none; font-size: 12px; font-weight: 650; }
	.ocf-more-sheet a:active { background: rgba(124, 92, 255, .16); }
	.ocf-more-sheet i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(124, 92, 255, .14); font-style: normal; }
	.ocf-more-sheet .ocf-svg-icon { width: 22px; height: 22px; }
	.ocf-chat-dock { bottom: 84px; right: 14px; }
	.ocf-toasts { bottom: 84px; right: 14px; left: 14px; max-width: none; }
	.ocf-suggest { position: fixed; left: 8px; right: 8px; top: 62px; }
}

/* feed tabs (Everyone / Following) and paging */
.ocf-feed-tabs { display: flex; width: fit-content; max-width: 100%; gap: 4px; margin: 4px 0 14px; padding: 4px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; background: var(--ocf-paper, #fff); }
.ocf-feed-tabs button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ocf-muted, #6b7385); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.ocf-feed-tabs button:hover { color: var(--ocf-ink, #1d2433); }
.ocf-feed-tabs button[aria-selected=true] { background: #6d4ee6; color: #fff; }
.ocf-feed-tabs button:focus-visible { outline: 2px solid #a99bff; outline-offset: 2px; }
.ocf-feed-more { display: grid; justify-items: center; padding: 22px 0 8px; color: var(--ocf-muted, #6b7385); }
.ocf-feed-more[hidden] { display: none; }
.ocf-feed-more p { margin: 0; font-size: .92rem; }
.ocf-feed-more-btn { min-height: 44px; padding: 0 26px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; background: var(--ocf-paper, #fff); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ocf-feed-more-btn:hover { border-color: #8f78ff; color: #8f78ff; }
.ocf-feed-more.is-loading .ocf-feed-more-btn { opacity: .55; pointer-events: none; }
.ocf-feed-more-link { display: inline-block; margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: #6d4ee6; color: #fff; font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .ocf-feed-tabs button { transition: none; } }

/* community page: empty-state text was squeezed into one 104px grid column */
.ocf-linked-character-grid > p, .ocf-linked-character-grid > .ocf-community-empty { grid-column: 1 / -1; margin: 0; color: var(--ocf-muted, #6b7385); }

/* composer: collapsed "What are you creating?" box that opens on focus */
form.ocf-composer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; transition: box-shadow .15s, border-color .15s; }
form.ocf-composer:focus-within { border-color: #8f78ff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
form.ocf-composer textarea { flex: 1 1 100%; min-height: 96px; max-height: 360px; margin: 0; resize: none; overflow-y: auto; font-size: 1.02rem; line-height: 1.5; transition: min-height .15s; }
form.ocf-composer.is-collapsed textarea { min-height: 52px; height: 52px; }
form.ocf-composer.is-collapsed > :not(textarea) { display: none !important; }
form.ocf-composer > .ocf-composer-tools { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
form.ocf-composer .ocf-composer-photo, form.ocf-composer [data-gif-open], form.ocf-composer .ocf-poll-builder > summary {
	position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0; padding: 0 14px;
	border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; background: transparent; color: var(--ocf-muted, #6b7385);
	font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; list-style: none; transition: color .15s, border-color .15s, background .15s;
}
form.ocf-composer .ocf-poll-builder > summary::-webkit-details-marker { display: none; }
form.ocf-composer .ocf-composer-photo:hover, form.ocf-composer [data-gif-open]:hover, form.ocf-composer .ocf-poll-builder > summary:hover,
form.ocf-composer .ocf-composer-photo:focus-within, form.ocf-composer .ocf-poll-builder[open] > summary { color: #8f78ff; border-color: #8f78ff; background: rgba(124, 92, 255, .1); }
form.ocf-composer .ocf-composer-photo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
form.ocf-composer .ocf-composer-photo svg, form.ocf-composer [data-gif-open] svg, form.ocf-composer .ocf-poll-builder > summary svg { flex: none; }
form.ocf-composer > .ocf-poll-builder { flex: 1 1 100%; margin: 0; padding: 0; border: 0; background: none; }
form.ocf-composer > .ocf-poll-builder > summary { width: fit-content; }
form.ocf-composer > .ocf-poll-builder[open] > summary { margin-bottom: 10px; }
.ocf-photo-chip { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 14px; }
.ocf-photo-chip[hidden] { display: none; }
.ocf-photo-chip img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ocf-photo-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: var(--ocf-muted, #6b7385); }
.ocf-photo-chip button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.ocf-photo-chip button:hover { background: rgba(124, 92, 255, .16); }
form.ocf-composer > .ocf-ai-toggle { flex: 1 1 auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ocf-muted, #6b7385); }
form.ocf-composer > div:last-child { flex: 0 0 auto; margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; }
form.ocf-composer > div:last-child select { min-height: 40px; border-radius: 999px; padding: 0 12px; }
form.ocf-composer > div:last-child .is-primary { min-height: 42px; padding: 0 26px; border-radius: 999px; font-weight: 800; }
@media (max-width: 760px) {
	form.ocf-composer > div:last-child { flex: 1 1 100%; }
	form.ocf-composer > div:last-child .is-primary { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { form.ocf-composer, form.ocf-composer textarea { transition: none; } }
form.ocf-composer > .ocf-composer-tools { flex: 0 0 auto; justify-content: flex-start; margin: 0; }
form.ocf-composer > .ocf-poll-builder:not([open]) { flex: 0 0 auto; }
form.ocf-composer > .ocf-ai-toggle { margin-left: 4px; }

/* character directory: denser grid, search/filter toolbar, pager */
.ocf-char-library .ocf-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ocf-char-library .ocf-char-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .15s, border-color .15s; }
.ocf-char-library .ocf-char-card:hover { transform: translateY(-3px); border-color: #8f78ff; }
.ocf-char-library .ocf-char-art { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ocf-char-library .ocf-char-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocf-char-library .ocf-char-art span { display: grid; place-items: center; width: 100%; height: 100%; }
.ocf-char-library .ocf-char-empty { grid-column: 1 / -1; }
.ocf-char-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.ocf-char-toolbar input[type=search] { flex: 1 1 220px; min-height: 42px; padding: 0 16px; border-radius: 999px; }
.ocf-char-toolbar select { min-height: 42px; max-width: 190px; padding: 0 12px; border-radius: 999px; }
.ocf-char-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 6px; font-weight: 650; font-size: .92rem; color: var(--ocf-muted, #6b7385); cursor: pointer; }
.ocf-char-apply { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: #6d4ee6; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ocf-char-toolbar.is-live .ocf-char-apply { display: none; }
.ocf-char-clear { padding: 0 6px; font-weight: 700; color: #8f78ff; text-decoration: none; }
.ocf-char-count { margin: 0 0 14px; font-size: .9rem; color: var(--ocf-muted, #6b7385); }
.ocf-char-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; color: var(--ocf-muted, #6b7385); }
.ocf-char-pager a { padding: 10px 18px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; color: inherit; font-weight: 700; text-decoration: none; }
.ocf-char-pager a:hover { border-color: #8f78ff; color: #8f78ff; }
@media (max-width: 760px) {
	.ocf-char-library .ocf-char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ocf-char-toolbar select { flex: 1 1 calc(50% - 10px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ocf-char-library .ocf-char-card { transition: none; } .ocf-char-library .ocf-char-card:hover { transform: none; } }

/* feed cards: roomier, friendlier actions and comment box */
.ocf-feed-card { transition: border-color .15s; }
.ocf-feed-card:hover { border-color: rgba(143, 120, 255, .45); }
.ocf-feed-card .ocf-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ocf-feed-card .ocf-post-actions button, .ocf-feed-card .ocf-post-actions > a {
	min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: .875rem; font-weight: 650;
	color: var(--ocf-muted, #6b7385); transition: background .15s, color .15s;
}
.ocf-feed-card .ocf-post-actions button:hover, .ocf-feed-card .ocf-post-actions > a:hover { background: rgba(124, 92, 255, .14); color: #8f78ff; }
.ocf-feed-card .ocf-post-actions button:focus-visible { outline: 2px solid #a99bff; outline-offset: 2px; }
.ocf-feed-card .ocf-post-actions [data-report] { margin-left: auto; font-weight: 500; opacity: .7; }
.ocf-feed-card .ocf-post-actions [data-report]:hover { opacity: 1; background: rgba(229, 83, 75, .14); color: #e5534b; }
.ocf-feed-card form[data-comment] { display: flex; align-items: center; gap: 8px; }
.ocf-feed-card form[data-comment] input[type=text], .ocf-feed-card form[data-comment] input:not([type]) { min-height: 42px; border-radius: 999px; padding: 0 16px; font-size: .95rem; }
.ocf-feed-card form[data-comment] button { min-height: 38px; border-radius: 999px; padding: 0 16px; font-size: .875rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ocf-feed-card, .ocf-feed-card .ocf-post-actions button { transition: none; } }

/* profile customization: accent colour, status/links chips, featured characters, editor fields */
.ocf-profile-page { --ocf-accent: #8f78ff; }
.ocf-profile-page.has-accent .ocf-profile-cover { border-bottom: 3px solid var(--ocf-accent); }
.ocf-profile-page.has-accent .ocf-profile-avatar { box-shadow: 0 0 0 4px var(--ocf-accent); border-radius: 50%; }
.ocf-profile-page.has-accent .ocf-profile-content-tabs a.is-active { background: color-mix(in srgb, var(--ocf-accent) 24%, transparent); color: var(--ocf-accent); }
.ocf-profile-extras { display: grid; gap: 10px; padding: 0 24px 16px; }
.ocf-profile-status { margin: 0; padding-left: 12px; border-left: 3px solid var(--ocf-accent); color: var(--ocf-ink, #1d2433); font-size: .98rem; }
.ocf-profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ocf-profile-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; font-size: .88rem; color: var(--ocf-muted, #6b7385); }
.ocf-profile-chips a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ocf-profile-chips li:has(a):hover { border-color: var(--ocf-accent); color: var(--ocf-accent); }
.ocf-featured { padding: 0 24px 18px; }
.ocf-featured h2 { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ocf-muted, #6b7385); }
.ocf-featured.is-empty p { margin: 0; font-size: .92rem; color: var(--ocf-muted, #6b7385); }
.ocf-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ocf-featured-card { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.ocf-featured-art { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(135deg, #3a2a72, #6d4ee6); color: #fff; font-size: 2rem; transition: border-color .15s; }
.ocf-featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocf-featured-card:hover .ocf-featured-art { border-color: var(--ocf-accent); }
.ocf-featured-card strong { margin-top: 4px; }
.ocf-featured-card small { color: var(--ocf-muted, #6b7385); }
.ocf-profile-extras-form { display: grid; gap: 14px; margin: 6px 0 0; padding: 18px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 16px; }
.ocf-profile-extras-form legend { padding: 0 8px; font-weight: 800; }
.ocf-profile-extras-form label { display: grid; gap: 6px; }
.ocf-profile-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ocf-field-label { display: block; margin-bottom: 6px; font-weight: 700; }
.ocf-field-label small, .ocf-field-hint { color: var(--ocf-muted, #6b7385); font-weight: 400; }
.ocf-profile-links-form { display: grid; gap: 8px; }
.ocf-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ocf-swatches .ocf-field-label { flex: 1 1 100%; margin: 0; }
.ocf-profile-extras-form .ocf-swatch { display: block; position: relative; cursor: pointer; }
.ocf-swatch input { position: absolute; opacity: 0; }
.ocf-swatch span { display: block; width: 30px; height: 30px; border: 2px solid var(--ocf-line, #dfe4ea); border-radius: 50%; }
.ocf-swatch-none span { background: linear-gradient(135deg, transparent 44%, #8a90a6 44%, #8a90a6 56%, transparent 56%); }
.ocf-swatch input:checked + span { box-shadow: 0 0 0 2px var(--ocf-paper, #fff), 0 0 0 4px var(--ocf-ink, #1d2433); }
.ocf-swatch input:focus-visible + span { outline: 2px solid #a99bff; outline-offset: 4px; }
.ocf-featured-pick { display: grid; gap: 2px; }
.ocf-profile-extras-form .ocf-pick { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; }
@media (max-width: 760px) {
	.ocf-profile-form-row { grid-template-columns: 1fr; }
	.ocf-profile-extras, .ocf-featured { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ocf-featured-art { transition: none; } }

/* weekly prompt gallery */
.ocf-pg { display: grid; gap: 22px; }
.ocf-pg-hero { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 34px 30px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #5a3fd1 0%, #2c2166 55%, #1b1840 100%); color: #fff; }
.ocf-pg-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.ocf-pg-eyebrow { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #cfc4ff; }
.ocf-pg-hero h1 { margin: 0; max-width: 20ch; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; text-wrap: balance; color: #fff; }
.ocf-pg-sub { margin: 0; max-width: 56ch; color: #e1dbff; line-height: 1.55; }
.ocf-pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.ocf-pg-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: #fff; color: #2c2166; font-weight: 800; text-decoration: none; }
.ocf-pg-cta:hover { background: #eee9ff; }
.ocf-pg-empty .ocf-pg-cta { background: #6d4ee6; color: #fff; }
.ocf-pg-empty .ocf-pg-cta:hover { background: #7c5df0; }
.ocf-pg-timer { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: .88rem; font-weight: 650; color: #e1dbff; }
.ocf-pg-next { margin: 0; font-size: .92rem; color: #cfc4ff; }
.ocf-pg-next em { color: #fff; font-style: normal; font-weight: 650; }
.ocf-pg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ocf-pg-bar h2, .ocf-pg-archive h2 { margin: 0; font-size: 1.15rem; }
.ocf-pg-sort { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 999px; }
.ocf-pg-sort a { padding: 6px 14px; border-radius: 999px; color: var(--ocf-muted, #6b7385); font-size: .88rem; font-weight: 700; text-decoration: none; }
.ocf-pg-sort a[aria-current] { background: #6d4ee6; color: #fff; }
.ocf-pg-empty { display: grid; justify-items: start; gap: 8px; padding: 28px; border: 1px dashed var(--ocf-line, #dfe4ea); border-radius: 18px; }
.ocf-pg-empty h3 { margin: 0; }
.ocf-pg-empty p { margin: 0 0 6px; max-width: 52ch; color: var(--ocf-muted, #6b7385); line-height: 1.5; }
.ocf-pg-grid { columns: 3 240px; column-gap: 16px; }
.ocf-pg-card { break-inside: avoid; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 16px; background: var(--ocf-paper, #fff); }
.ocf-pg-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.ocf-pg-open img { display: block; width: 100%; height: auto; }
.ocf-pg-open:focus-visible { outline: 2px solid #a99bff; outline-offset: -2px; }
.ocf-pg-quote { display: block; padding: 22px 20px; background: linear-gradient(145deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .06)); font-size: 1.02rem; line-height: 1.55; }
.ocf-pg-card footer { display: grid; gap: 4px; padding: 12px 14px; }
.ocf-pg-by { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 700; text-decoration: none; }
.ocf-pg-by img { border-radius: 50%; object-fit: cover; }
.ocf-pg-by:hover span { text-decoration: underline; }
.ocf-pg-stats { font-size: .84rem; color: var(--ocf-muted, #6b7385); }
.ocf-pg-archive ul { display: flex; gap: 12px; margin: 14px 0 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.ocf-pg-archive li { flex: 0 0 240px; scroll-snap-align: start; }
.ocf-pg-archive a { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 16px; color: inherit; text-decoration: none; }
.ocf-pg-archive a:hover { border-color: #8f78ff; }
.ocf-pg-archive a[aria-current] { border-color: #8f78ff; background: rgba(124, 92, 255, .12); }
.ocf-pg-archive small { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ocf-muted, #6b7385); }
.ocf-pg-archive strong { line-height: 1.3; }
.ocf-pg-archive span { font-size: .84rem; color: var(--ocf-muted, #6b7385); }
.ocf-pg-lightbox { width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--ocf-line, #dfe4ea); border-radius: 18px; background: var(--ocf-paper, #fff); color: var(--ocf-ink, #1d2433); overflow: auto; }
.ocf-pg-lightbox::backdrop { background: rgba(8, 7, 20, .78); }
.ocf-pg-lightbox img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; background: #0d0b1f; width: 100%; }
.ocf-pg-lightbox .ocf-pg-lb-body { display: grid; gap: 8px; padding: 18px 22px 22px; }
.ocf-pg-lightbox p { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.ocf-pg-lightbox .ocf-pg-lb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ocf-muted, #6b7385); font-size: .88rem; }
.ocf-pg-lightbox .ocf-pg-lb-meta a { color: inherit; font-weight: 700; }
.ocf-pg-lightbox .ocf-pg-lb-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(13, 11, 31, .7); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 760px) {
	.ocf-pg-hero { padding: 26px 20px; }
	.ocf-pg-grid { columns: 2 150px; column-gap: 10px; }
	.ocf-pg-archive li { flex-basis: 200px; }
}

.ocf-pg { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.ocf-pg .ocf-pg-hero .ocf-pg-cta { background: #fff; color: #2c2166; }
.ocf-pg .ocf-pg-hero .ocf-pg-cta:hover { background: #eee9ff; color: #2c2166; }
.ocf-pg .ocf-pg-empty .ocf-pg-cta { background: #6d4ee6; color: #fff; }
.ocf-pg .ocf-pg-empty .ocf-pg-cta:hover { background: #7c5df0; color: #fff; }
.ocf-pg .ocf-pg-sort a[aria-current] { color: #fff; }
.ocf-pg-archive ul { scrollbar-width: thin; scrollbar-color: #4a4f66 transparent; }