:root {
	--upcp-bg: linear-gradient(135deg, #f8faf5 0%, #eef5ff 45%, #f4f3ff 100%);
	--upcp-panel: #ffffff;
	--upcp-line: #d7dde6;
	--upcp-text: #1b2130;
	--upcp-subtle: #5d6678;
	--upcp-brand: #0f8b8d;
	--upcp-brand-dark: #0b6466;
	--upcp-shadow: 0 18px 40px rgba(19, 33, 68, 0.12);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
}

html {
	background: var(--upcp-bg);
	min-height: 100%;
	overflow-x: hidden; /* prevent any single element blowing out the viewport */
}
body {
	font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
	font-size: 14px;
	color: var(--upcp-text);
	max-width: 100vw;
}

.upcp-forum-shell {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	margin: 1.2rem auto;
	background: var(--upcp-bg);
	border: 1px solid var(--upcp-line);
	border-radius: 20px;
	box-shadow: var(--upcp-shadow);
	min-height: 720px;
	max-width: 1200px;
	margin-top: 20px;
	transition: grid-template-columns 260ms ease;
}

.upcp-forum-shell *,
.upcp-forum-shell *::before,
.upcp-forum-shell *::after {
	box-sizing: border-box;
}

.upcp-forum-sidebar {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(5px);
	border-right: 1px solid var(--upcp-line);
	padding: 2rem;
	transition:
		width 260ms ease,
		padding 260ms ease,
		box-shadow 260ms ease;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.upcp-forum-shell.is-reading-discussion {
	grid-template-columns: 100px minmax(0, 1fr);
}

.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar {
	width: 100px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:hover,
.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:focus-within {
	width: 300px;
	box-shadow: 8px 0 24px rgba(17, 26, 52, 0.14);
}

.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar-head,
.upcp-forum-shell.is-reading-discussion .upcp-topics,
.upcp-forum-shell.is-reading-discussion .upcp-sidebar-foot {
	opacity: 0.2;
}

.upcp-forum-shell.is-reading-discussion
	.upcp-forum-sidebar:hover
	.upcp-forum-sidebar-head,
.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:hover .upcp-topics,
.upcp-forum-shell.is-reading-discussion
	.upcp-forum-sidebar:hover
	.upcp-sidebar-foot {
	opacity: 1;
}

.upcp-forum-sidebar-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
	min-width: 242px;
}

.upcp-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 8px;
}

.upcp-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.8;
	transition: opacity 0.15s;
}

.upcp-logo-link:hover {
	opacity: 1;
}

.upcp-logo {
	display: block;
	width: 30px;
	height: 30px;
}

[data-theme="dark"] .upcp-logo {
	filter: invert(1);
}

.upcp-forum-sidebar h2,
.upcp-main-head h1,
.upcp-replies h2 {
	margin: 0;
	color: var(--upcp-text);
	font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
	letter-spacing: -0.02em;
	font-weight: 600;
}

.upcp-topics {
	display: grid;
	gap: 0.45rem;
	min-width: 242px;
}

.upcp-sidebar-foot {
	margin-top: 1.1rem;
	min-width: 242px;
	padding-top: 1rem;
	border-top: 1px solid rgba(93, 102, 120, 0.2);
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.upcp-sidebar-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 10px!important;
	flex-shrink: 0;
}

.upcp-sidebar-icon-btn svg {
	width: 22px;
	height: 22px;
}

.upcp-sidebar-settings-btn.is-active {
	border-color: rgba(15, 139, 141, 0.45);
	background: rgba(15, 139, 141, 0.12);
}

.upcp-topics button,
.upcp-topics a {
	align-items: center;
	display: flex;
	justify-content: space-between;
	text-align: left;
	border: 1px solid transparent;
	padding: 0.55rem 0.7rem;
	border-radius: 12px;
	background: transparent;
	color: var(--upcp-text);
	cursor: pointer;
	text-decoration: none;
	width: 100%;
	font: inherit;
	box-sizing: border-box;
	text-transform: initial;
}

.upcp-topics a:visited,
.upcp-topics a:focus,
.upcp-topics a:active {
	color: var(--upcp-text);
}

.upcp-topic-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.upcp-topic-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	object-fit: contain;
}

.upcp-topics button.is-subtopic,
.upcp-topics a.is-subtopic {
	padding-left: calc(0.7rem + (var(--upcp-topic-level, 0) * 0.9rem));
}

.upcp-topics button:hover,
.upcp-topics button.is-active,
.upcp-topics a:hover,
.upcp-topics a.is-active {
	background: rgba(15, 139, 141, 0.1);
	border-color: rgba(15, 139, 141, 0.25);
}

.upcp-topics button small,
.upcp-topics a small {
	color: var(--upcp-subtle);
	font-size: 0.82rem;
}

.upcp-topic-tail {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.upcp-topic-bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	color: var(--upcp-subtle);
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
	cursor: pointer;
	flex-shrink: 0;
}

.upcp-topics button:hover .upcp-topic-bell,
.upcp-topics button.is-active .upcp-topic-bell,
.upcp-topic-bell.is-following {
	opacity: 1;
}

.upcp-topic-bell:hover {
	background: rgba(15, 139, 141, 0.12);
	color: var(--upcp-brand);
}

.upcp-topic-bell.is-following {
	color: var(--upcp-brand);
}

/* Topic subscribe modal */
.upcp-topic-sub-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.upcp-topic-sub-modal {
	background: var(--upcp-panel);
	border-radius: 16px;
	padding: 2rem;
	width: min(420px, 100%);
	box-shadow: var(--upcp-shadow);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.upcp-topic-sub-modal-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(15, 139, 141, 0.12);
	color: var(--upcp-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.upcp-topic-sub-modal h2 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.upcp-topic-sub-modal p {
	font-size: 0.88rem;
	color: var(--upcp-subtle);
	margin: 0;
	line-height: 1.55;
}

.upcp-topic-sub-modal-actions {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.5rem;
	justify-content: center;
}

.upcp-forum-main {
	padding: 2rem;
	position: relative;
	min-width: 0; /* prevent grid blowout */
	overflow-x: hidden;
}

.upcp-forum-main.is-loading {
	pointer-events: none;
	opacity: 0.72;
}

.upcp-forum-main.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(247, 251, 255, 0.62);
	z-index: 20;
}

.upcp-forum-main.is-loading::after {
	content: attr(data-loading-label);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #0f8b8d;
	color: #fff;
	border-radius: 999px;
	padding: 0.35rem 0.7rem;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	z-index: 21;
}

.upcp-main-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2rem;
}

.upcp-head-actions {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.upcp-head-action-cluster {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	justify-content: space-between;
	width: 100%;
}

.upcp-action-menu {
	position: relative;
	display: inline-flex;
}

.upcp-action-menu-toggle {
	border: 1px solid var(--upcp-line);
	background: #fff;
	color: var(--upcp-text);
	border-radius: 10px;
	min-width: 30px;
	min-height: 35px;
	line-height: 1;
	font-size: 1.3rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23000000' class='bi bi-three-dots-vertical'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px;
}

.upcp-action-menu-toggle:hover {
	border-color: rgba(15, 139, 141, 0.4);
	background-color: rgba(15, 139, 141, 0.08);
}

.upcp-action-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 24;
	display: grid;
	gap: 0.2rem;
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--upcp-line);
	border-radius: 10px;
	box-shadow: 0 12px 22px rgba(17, 26, 52, 0.2);
	padding: 0.34rem;
}

.upcp-action-menu-list[hidden] {
	display: none !important;
}

.upcp-action-menu-item {
	border: 1px solid transparent;
	background: #fff;
	color: var(--upcp-text);
	text-align: left;
	border-radius: 8px;
	font-size: 0.86rem;
	padding: 0.45rem 0.58rem;
	cursor: pointer;
}

.upcp-action-menu-item:hover {
	border-color: rgba(15, 139, 141, 0.35);
	background: rgba(15, 139, 141, 0.08);
}

.upcp-action-menu-item.is-danger {
	color: #8e1f2d;
}

.upcp-action-menu-item:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.upcp-discussion-list {
	display: grid;
	gap: 0.8rem;
}

.upcp-discussion-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	gap: 0.75rem;
	background: var(--upcp-panel);
	border: 1px solid var(--upcp-line);
	border-radius: 14px;
	padding: 0.9rem;
	cursor: pointer;
	min-height: 0;
	height: auto;
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}

.upcp-discussion-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(18, 41, 67, 0.1);
}

.upcp-card-avatar {
	display: flex;
	align-items: flex-start;
}

.upcp-card-content {
	min-width: 0;
	display: grid;
	gap: 0.5rem;
}

.upcp-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.upcp-status {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	border: 1px solid var(--upcp-line);
	padding: 0.12rem 0.55rem;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--upcp-subtle);
	background: #fff;
	text-transform: uppercase;
	line-height: normal;
}

.upcp-status-pin {
	color: #8f5a00;
	border-color: #efc26a;
	background: #fff8ea;
}

.upcp-status-lock {
	color: #804850;
	border-color: #e0a8b0;
	background: #fff3f5;
}

.upcp-status-verified {
	color: #12714f;
	border-color: #7fcaa8;
	background: #eefdf6;
}

.upcp-card-head,
.upcp-card-foot,
.upcp-entry-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
}

.upcp-entry-head {
	margin-bottom: 10px;
}

.upcp-entry-meta {
	display: inline-flex;
	align-items: flex-end;
	gap: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.upcp-edited-meta {
	color: var(--upcp-subtle);
	font-size: 0.8rem;
}

.upcp-btn-edit-inline {
	padding: 0.28rem 0.62rem;
	border-radius: 999px;
	font-size: 0.78rem;
}

.upcp-card-foot {
	margin-top: 0.2rem;
	justify-content: start;
}

.replies {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.upcp-card-head h3 {
	min-width: 0;
}

.upcp-author-row {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	color: var(--upcp-subtle);
	font-size: 0.9rem;
}

.upcp-avatar {
	width: 50px;
	height: 50px;
	border-radius: 999px;
	object-fit: cover;
	border: 1px solid var(--upcp-line);
	background: #eef3f8;
	flex: 0 0 50px;
}

.upcp-discussion-card h3 {
	margin: 0;
	color: var(--upcp-text);
	font-size: 1.05rem;
	font-weight: 500;
	display:inline-flex;
	align-items:center;
}

.upcp-card-link {
	color: inherit;
	text-decoration: none;
}

.upcp-card-link:hover {
	text-decoration: underline;
}

.upcp-discussion-card p,
.upcp-empty,
.upcp-error {
	color: var(--upcp-subtle);
}

.upcp-empty {
	display: block;
	margin: 30px;
	text-align: center;
	margin-top: 50px;
}

.upcp-discussion-card p {
	margin: 0;
	line-height: 1.45;
	min-height: 0;
	padding: 0 !important;
	background: transparent !important;
}

.upcp-discussion-card > * {
	min-height: 0 !important;
	max-height: none !important;
}

.upcp-card-head,
.upcp-card-foot {
	padding: 0 !important;
	background: transparent !important;
}

.upcp-topic-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.upcp-topic-pills span {
	border: 1px solid rgba(15, 139, 141, 0.28);
	color: var(--upcp-brand-dark);
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
	font-size: 0.78rem;
}

.upcp-discussion-single,
.upcp-reply,
.upcp-form {
	border: 1px solid var(--upcp-line);
	border-radius: 14px;
	padding: 30px;
	background: var(--upcp-panel);
}

.upcp-forum-shell article,
.upcp-forum-shell p {
	max-height: none;
}

.upcp-content li {
	margin-bottom: 7px;
}
.upcp-content img {
	max-width: 100%;
	border-radius: 12px;
	margin: 0.6rem 0;
}

.upcp-post-engagement {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.upcp-upvote-btn,
.upcp-reaction-pill,
.upcp-react-toggle,
.upcp-reaction-option {
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--upcp-text);
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition:
		border-color 150ms ease,
		background 150ms ease,
		color 150ms ease;
	min-height: 30px;
	border-radius: 10px;
}

.upcp-upvote-btn {
	padding: 0.28rem 0.66rem;
	justify-content: center;
}

.upcp-upvote-btn:hover,
.upcp-reaction-pill:hover,
.upcp-react-toggle:hover,
.upcp-reaction-option:hover {
	border-color: rgba(15, 139, 141, 0.48);
	background: rgba(15, 139, 141, 0.08);
}

.upcp-upvote-btn.is-active,
.upcp-reaction-pill.is-active,
.upcp-reaction-option.is-active {
	border-color: rgba(15, 139, 141, 0.62);
	background: rgba(15, 139, 141, 0.18);
	color: var(--upcp-brand-dark);
}

.upcp-upvote-btn:disabled,
.upcp-reaction-pill:disabled,
.upcp-react-toggle:disabled,
.upcp-reaction-option:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.upcp-upvote-icon {
	font-size: 0.85rem;
	font-weight: 700;
}

/* Tooltip on the upvote button */
.upcp-upvote-btn[data-tooltip] {
	position: relative;
}
.upcp-upvote-btn[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #1e293b;
	color: #f8fafc;
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 10;
}
.upcp-upvote-btn[data-tooltip]:hover::after {
	opacity: 1;
}
[data-theme="dark"] .upcp-upvote-btn[data-tooltip]::after {
	background: #e2e8f0;
	color: #0f172a;
}

.upcp-upvote-count,
.upcp-reaction-count {
	font-size: 0.78rem;
	font-weight: 600;
}

.upcp-reaction-menu {
	position: relative;
}

.upcp-react-toggle {
	padding: 0.28rem 0.66rem;
	justify-content: center;
	font-weight: 600;
}

.upcp-react-toggle-label {
	font-size: 0.78rem;
}

.upcp-reaction-options {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	background: #fff;
	padding: 0.6rem 1.2rem;
	box-shadow: 0 10px 20px rgba(19, 33, 68, 0.14);
	z-index: 20;
}

.upcp-reaction-options[hidden] {
	display: none !important;
}

.upcp-reaction-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	flex-wrap: wrap;
}

.upcp-reaction-pill {
	padding: 0.28rem 0.66rem;
	justify-content: center;
}

.upcp-reaction-option {
	padding: 0.28rem 0.45rem;
	justify-content: center;
	border-radius: 100%;
	width: 30px;
}

.upcp-reaction-emoji {
	font-size: 0.96rem;
	line-height: 1;
}

.upcp-replies {
	display: grid;
	gap: 0.65rem;
	margin-top: 1rem;
}

.upcp-form {
	margin-top: 1rem;
	display: flex;
	gap: 0.8rem;
	flex-direction: column;
}

.upcp-form input[type="text"],
.upcp-form textarea {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--upcp-line);
	padding: 0.6rem 0.75rem;
}

.upcp-form input[type="password"] {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--upcp-line);
	padding: 0.6rem 0.75rem;
}

.upcp-settings-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* ─── Timezone picker ─────────────────────────────────────── */
.upcp-tz-wrap {
	position: relative;
	margin-top: -1em;
	margin-bottom: -0.5em;
}

.upcp-tz-select-hidden {
	display: none;
}

.upcp-tz-input-row {
	position: relative;
	display: flex;
	align-items: center;
}

.upcp-tz-search {
	width: 100%;
	border: 1.5px solid var(--upcp-line);
	border-radius: 8px;
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--upcp-text);
	background: var(--upcp-panel);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	cursor: pointer;
}

.upcp-tz-search:focus {
	border-color: var(--upcp-brand);
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.15);
	cursor: text;
}

.upcp-tz-chevron {
	position: absolute;
	right: 0.65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--upcp-muted, #94a3b8);
	pointer-events: all;
	cursor: pointer;
	transition: transform 0.15s;
}

.upcp-tz-wrap:has(.upcp-tz-listbox:not([hidden])) .upcp-tz-chevron {
	transform: translateY(-50%) rotate(180deg);
}

.upcp-tz-listbox {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 220px;
	overflow-y: auto;
	background: var(--upcp-panel);
	border: 1.5px solid var(--upcp-brand);
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 200;
}

.upcp-tz-option {
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
	color: var(--upcp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.1s;
}

.upcp-tz-option:hover,
.upcp-tz-option.is-active {
	background: rgba(15, 139, 141, 0.1);
}

.upcp-tz-option.is-selected {
	color: var(--upcp-brand);
	font-weight: 600;
}

[data-theme="dark"] .upcp-tz-search {
	background: #1a2035;
	border-color: #2d3a52;
	color: #cbd5e1;
}

[data-theme="dark"] .upcp-tz-listbox {
	background: #1a2035;
	border-color: #0f8b8d;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .upcp-tz-option {
	color: #cbd5e1;
}

[data-theme="dark"] .upcp-tz-option:hover,
[data-theme="dark"] .upcp-tz-option.is-active {
	background: rgba(15, 139, 141, 0.18);
}

.upcp-settings-card {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--upcp-line);
	border-radius: 16px;
	box-sizing: border-box;
}

.upcp-settings-card h2 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
}

.upcp-settings-avatar-row {
	display: flex;
	gap: 0.8rem;
	align-items: center;
}

.upcp-avatar-dropzone {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0.8rem;
	align-items: center;
	padding: 0.65rem;
	border: 1px dashed #9db2cc;
	border-radius: 12px;
	background: #f7fbff;
	cursor: pointer;
	transition:
		border-color 140ms ease,
		background 140ms ease;
}

.upcp-avatar-dropzone.is-dragover {
	border-color: #0f8b8d;
	background: rgba(15, 139, 141, 0.08);
}

.upcp-avatar-dropzone.is-uploading {
	opacity: 0.65;
	cursor: progress;
}

.upcp-avatar-dropzone.is-success {
	border-color: #129263;
	background: rgba(18, 146, 99, 0.08);
}

.upcp-avatar-dropzone.is-error {
	border-color: #b03045;
	background: rgba(176, 48, 69, 0.08);
}

.upcp-avatar-dropzone input[type="file"] {
	display: none;
}

.upcp-settings-avatar-frame {
	position: relative;
	width: 64px;
	height: 64px;
}

.upcp-settings-avatar-preview {
	width: 64px;
	height: 64px;
}

.upcp-avatar-save-indicator {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 2px solid #fff;
	background: #129263;
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(16, 30, 50, 0.25);
}

.upcp-avatar-dropzone.is-success .upcp-avatar-save-indicator {
	display: inline-flex;
}

.upcp-avatar-dropzone.is-success .upcp-avatar-save-indicator::before {
	content: "✓";
}

.upcp-avatar-dropzone.is-error .upcp-avatar-save-indicator {
	display: inline-flex;
	background: #b03045;
}

.upcp-avatar-dropzone.is-error .upcp-avatar-save-indicator::before {
	content: "!";
}

.upcp-settings-avatar-fields {
	min-width: 0;
	flex: 1;
	display: grid;
	gap: 0.2rem;
}
.upcp-settings-avatar-fields strong {
	font-weight: 600;
}
.upcp-settings-avatar-fields .smaller {
	font-size: 11px;
}

.upcp-avatar-save-message {
	min-height: 1.1em;
	font-size: 0.78rem;
	color: var(--upcp-subtle);
}

.upcp-avatar-dropzone.is-success .upcp-avatar-save-message {
	color: #12714f;
}

.upcp-avatar-dropzone.is-error .upcp-avatar-save-message {
	color: #8d2334;
}

.upcp-settings-note {
	color: var(--upcp-subtle);
	font-size: 0.82rem;
}

.upcp-switch-row {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 0.55rem;
	align-items: center;
	position: relative;
}

#upcp-settings-password .upcp-btn {
	margin-top: 6px;
}
#upcp-settings-preferences .upcp-btn {
	margin-top: 10px;
}

.upcp-switch-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.upcp-switch-track {
	width: 46px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid #c4cfde;
	background: #dfe7f3;
	position: relative;
	transition:
		background 140ms ease,
		border-color 140ms ease;
	cursor: pointer;
}

.upcp-switch-track::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(22, 33, 61, 0.2);
	transition: transform 160ms ease;
}

.upcp-switch-input:checked + .upcp-switch-track {
	background: #0f8b8d;
	border-color: #0f8b8d;
}

.upcp-switch-input:checked + .upcp-switch-track::after {
	transform: translateX(20px);
}

.upcp-switch-input:focus-visible + .upcp-switch-track {
	outline: 2px solid rgba(15, 139, 141, 0.28);
	outline-offset: 2px;
}

.upcp-topics-grid {
	display: grid;
	/*grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
	gap: 0.4rem;
}

.upcp-topics-grid label {
	font-size: 0.95rem;
	color: var(--upcp-subtle);
}

.upcp-topic-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 0.75rem;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background 160ms ease,
		transform 160ms ease;
}

.upcp-topic-option.is-subtopic {
	padding-left: calc(0.75rem + (var(--upcp-topic-level, 0) * 0.9rem));
}

.upcp-topic-option:hover {
	border-color: rgba(15, 139, 141, 0.35);
	box-shadow: 0 4px 12px rgba(18, 41, 67, 0.08);
	transform: translateY(-1px);
}

.upcp-topic-option input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 6px;
	border: 1.5px solid #9eb0c8;
	background: #fff;
	display: inline-grid;
	place-content: center;
	flex: 0 0 18px;
	transition:
		background 140ms ease,
		border-color 140ms ease,
		box-shadow 140ms ease;
}

.upcp-topic-option input[type="checkbox"]::before {
	content: "";
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) scale(0);
	transform-origin: center;
	transition: transform 140ms ease;
}

.upcp-topic-option input[type="checkbox"]:checked {
	border-color: var(--upcp-brand);
	background: var(--upcp-brand);
}

.upcp-topic-option input[type="checkbox"]:checked::before {
	transform: rotate(45deg) scale(1);
}

.upcp-topic-option input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.2);
}

.upcp-topic-option:has(input[type="checkbox"]:checked) {
	border-color: rgba(15, 139, 141, 0.55);
	background: rgba(15, 139, 141, 0.08);
	color: var(--upcp-text);
}

.upcp-topic-option span {
	line-height: 1.25;
}

.upcp-editor-wrap {
	border: 1px solid var(--upcp-line);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	background: #fff;
}

.upcp-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.65rem;
	padding: 0.9rem;
	border-bottom: 1px solid var(--upcp-line);
	background: #f7fbff;
}

.upcp-editor-toolbar button {
	border: 1px solid var(--upcp-line);
	background: #fff;
	color: var(--upcp-text);
	border-radius: 8px;
	padding: 0.4rem 0.7rem;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	min-width: 28px;
}

.upcp-editor-toolbar-break {
	flex-basis: 100%;
	width: 0;
	height: 0;
}

.upcp-editor-toolbar button:hover {
	border-color: rgba(15, 139, 141, 0.4);
	background: rgba(15, 139, 141, 0.08);
}

.upcp-editor-toolbar button.is-active {
	border-color: rgba(15, 139, 141, 0.55);
	background: rgba(15, 139, 141, 0.16);
}

.upcp-editor {
	min-height: 220px;
}

.upcp-editor-source {
	width: 100%;
	min-height: 220px;
	border: 0;
	padding: 1.5rem;
	font:
		16px/1.45 ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		"Liberation Mono",
		monospace;
	color: var(--upcp-text);
	background: #fff;
	resize: vertical;
	outline: none;
}

.upcp-editor-native,
.upcp-content {
	padding: 0.8rem;
	line-height: 1.5;
	outline: none;
}

.upcp-content {
	margin: 20px 0;
	padding: 0;
}

.upcp-editor-native p,
.upcp-editor-native ul,
.upcp-editor-native ol,
.upcp-editor-native blockquote,
.upcp-editor-native pre,
.upcp-editor-native h2,
.upcp-content p,
.upcp-content ul,
.upcp-content ol,
.upcp-content blockquote,
.upcp-content pre,
.upcp-content h2 {
	margin: 0 0 0.99rem;
}

.upcp-editor-native blockquote,
.upcp-content blockquote {
	border-left: 3px solid rgba(15, 139, 141, 0.45);
	padding-left: 0.7rem;
	color: var(--upcp-subtle);
}

.upcp-editor-native pre,
.upcp-content pre {
	background: #f4f8fc;
	border: 1px solid var(--upcp-line);
	border-radius: 10px;
	padding: 0.65rem 1.3rem;
	overflow-x: auto;
	font-family: monospace !important;
	min-height: 41px;
}
.upcp-editor-native :not(pre) > code,
.upcp-content :not(pre) > code {
	min-height: auto;
	border: 0;
	overflow-x: initial;
	padding: 0.25rem 0.6rem;
	background: #f0f0f0;
	border-radius: 10px;
	line-height: 1;
}

.upcp-editor-native code,
.upcp-content code,
.upcp-content code * {
	font-family: monospace !important;
	font-size: 12px !important;
}

.upcp-editor-native table,
.upcp-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.75rem;
	display: block;
	overflow-x: auto;
}

.upcp-editor-native th,
.upcp-editor-native td,
.upcp-content th,
.upcp-content td {
	border: 1px solid var(--upcp-line);
	padding: 0.45rem 0.55rem;
	text-align: left;
	vertical-align: top;
}

.upcp-editor-native th,
.upcp-content th {
	background: #f7fbff;
}

.upcp-editor-native .upcp-mention,
.upcp-content .upcp-mention {
	display: inline-block;
	background: rgba(15, 139, 141, 0.12);
	color: var(--upcp-brand-dark);
	text-decoration: none;
}

.upcp-editor-native {
	padding: 1.5rem;
	font-size: 16px;
}

.upcp-editor-native > h2:first-child,
.upcp-content > h2:first-child {
	margin-top: 0;
}

.upcp-editor-native img {
	max-width: 100%;
	height: auto;
}

.upcp-editor-native iframe[data-upcp-video-embed],
.upcp-content iframe[data-upcp-video-embed] {
	display: block;
	max-width: 100%;
	border: 0;
	border-radius: 8px;
	background: #000;
}

.upcp-mention-dropdown {
	position: absolute;
	left: 0;
	top: 0;
	width: min(320px, calc(100% - 1.2rem));
	display: grid;
	max-height: 220px;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--upcp-line);
	border-radius: 10px;
	box-shadow: 0 12px 22px rgba(17, 26, 52, 0.16);
	z-index: 14;
	display: none;
}

.upcp-mention-dropdown button {
	border: 0;
	background: #fff;
	text-align: left;
	padding: 0.55rem 0.7rem;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	font-weight: 600;
}
.upcp-mention-dropdown button strong {
	font-weight: 600;
}

.upcp-mention-dropdown button:hover {
	background: #f3f7ff;
}

.upcp-mention-dropdown span {
	color: var(--upcp-subtle);
	font-size: 0.82rem;
}

.upcp-editor-tagpath {
	border-top: 1px solid var(--upcp-line);
	background: #f7fbff;
	color: var(--upcp-subtle);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	padding: 0.44rem 0.8rem;
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
}

.upcp-inline-toolbar {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	align-items: center;
	gap: 0.35rem;
	background: #fff;
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	box-shadow: 0 10px 22px rgba(17, 26, 52, 0.2);
	padding: 0.3rem;
	z-index: 16;
}

.upcp-inline-toolbar button {
	border: 1px solid transparent;
	background: transparent;
	color: var(--upcp-text);
	border-radius: 999px;
	font-size: 0.86rem;
	line-height: 1;
	min-width: 32px;
	padding: 0.38rem 0.52rem;
	cursor: pointer;
}

.upcp-inline-toolbar button:hover {
	border-color: rgba(15, 139, 141, 0.35);
	background: rgba(15, 139, 141, 0.08);
}

.upcp-btn {
	border: 0;
	border-radius: 10px;
	background: var(--upcp-brand);
	color: #fff;
	padding: 0.5rem 0.9rem;
	cursor: pointer;
}

.upcp-btn:hover {
	background: var(--upcp-brand-dark);
}

.upcp-btn:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

.upcp-btn.is-loading {
	position: relative;
	padding-left: 1.9rem;
}

.upcp-btn.is-loading::before {
	content: "";
	position: absolute;
	left: 0.7rem;
	top: 50%;
	width: 0.8rem;
	height: 0.8rem;
	margin-top: -0.4rem;
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-top-color: #fff;
	border-radius: 50%;
	animation: upcp-spin 0.8s linear infinite;
}

.upcp-forum-sidebar-head .upcp-btn.is-loading::before {
	border: 2px solid rgba(0, 0, 0, 0.65);
	border-top-color: #000;
}

.upcp-btn.upcp-btn-ghost {
	background: #fff;
	color: var(--upcp-text);
	border: 1px solid var(--upcp-line);
}

.upcp-btn.upcp-btn-danger {
	background: #fff5f6;
	color: #8e1f2d;
	border: 1px solid #e9b7be;
}

.upcp-btn.upcp-btn-danger:hover {
	background: #ffe8eb;
	border-color: #d68e98;
}

[title-tooltip] {
	position: relative;
}

[title-tooltip]::before,
[title-tooltip]::after {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition:
		opacity 120ms ease,
		transform 120ms ease;
	z-index: 50;
}

[title-tooltip]::before {
	content: "";
	left: 50%;
	top: calc(100% + 2px);
	transform: translateX(-50%) translateY(-2px);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(17, 26, 52, 0.94);
}

[title-tooltip]::after {
	content: attr(title-tooltip);
	left: 50%;
	top: calc(100% + 7px);
	transform: translateX(-50%) translateY(-2px);
	background: rgba(17, 26, 52, 0.94);
	color: #fff;
	border-radius: 7px;
	padding: 0.36rem 0.5rem;
	font-size: 0.75rem;
	white-space: nowrap;
	line-height: 1.2;
	box-shadow: 0 7px 18px rgba(17, 26, 52, 0.25);
}

[title-tooltip]:hover::before,
[title-tooltip]:hover::after,
[title-tooltip]:focus-visible::before,
[title-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

#upcp-create-discussion fieldset {
	border: 0;
}

#upcp-create-discussion label,
#upcp-create-discussion legend {
	font-weight: 600;
}

.upcp-form input[type="text"],
.upcp-topics-grid {
	margin-top: 0.8rem;
}

.upcp-form input[type="password"] {
	margin-top: 0.8rem;
}

.upcp-editor-native h2,
.upcp-editor-native strong,
.upcp-editor-native b,
.upcp-content strong,
.upcp-content b {
	font-weight: 600;
}

.upcp-editor-native h2,
.upcp-content h2 {
	font-size: 17px;
	font-weight: 600;
	margin-top: 40px;
}

.upcp-editor-toolbar button strong {
	font-weight: 600;
}

.upcp-main-head h1 {
	font-size: 20px;
}

.upcp-editor-native ul,
.upcp-content ul,
.upcp-editor-native ol,
.upcp-content ol {
	margin-left: 40px;
}

@keyframes upcp-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 900px) {
	/* ── Shell: stack sidebar above content, go full-bleed ── */
	.upcp-forum-shell {
		grid-template-columns: 1fr;
		min-height: 0;
		margin: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
	}

	/* ── Sidebar: horizontal scroll strip instead of full column ── */
	.upcp-forum-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--upcp-line);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: 0.75rem 1rem;
		/* Constrain the grid child — without this the topics flex row
		   expands the sidebar infinitely instead of scrolling */
		min-width: 0;
		width: 100%;
		max-width: 100vw;
	}

	/* Cancel the reading-discussion collapse — sidebar is already stacked */
	.upcp-forum-shell.is-reading-discussion {
		grid-template-columns: 1fr;
	}
	.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar {
		width: auto;
		overflow: visible;
	}
	.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar-head,
	.upcp-forum-shell.is-reading-discussion .upcp-topics,
	.upcp-forum-shell.is-reading-discussion .upcp-sidebar-foot {
		opacity: 1;
	}
	.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:hover,
	.upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:focus-within {
		width: auto;
		box-shadow: none;
	}

	/* Sidebar internals: lay out horizontally and allow horizontal scroll */
	.upcp-forum-sidebar-head {
		min-width: 0 !important;
		margin-bottom: 0.5rem;
	}

	.upcp-topics {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		gap: 0.4rem;
		min-width: 0 !important;
		max-width: 100% !important;
		padding-bottom: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.upcp-topics::-webkit-scrollbar { display: none; }

	.upcp-topics button,
	.upcp-topics a {
		display: inline-flex !important; /* override the full-width flex */
		width: auto !important;
		flex-shrink: 0;
		white-space: nowrap;
		padding: 0.3rem 0.75rem;
	}

	/* hide the reply count chip inside each topic button — too noisy in strip mode */
	.upcp-topics button small,
	.upcp-topics a small {
		display: none;
	}

	.upcp-sidebar-foot {
		min-width: 0 !important;
		padding-top: 0.5rem;
		margin-top: 0.5rem;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	/* Notif panel: full width on tablet too */
	.upcp-notif-panel {
		width: 100vw;
		border-radius: 14px 14px 0 0;
	}

	/* ── Main: reduce padding ── */
	.upcp-forum-main {
		padding: 1rem;
	}

	.upcp-main-head {
		gap: 0.6rem;
		align-items: flex-start;
		margin-bottom: 1rem;
	}

	/* ── Discussion cards: hide avatar on very content-tight layouts ── */
	.upcp-card-foot {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	/* ── Reply/form padding ── */
	.upcp-reply,
	.upcp-form {
		padding: 1rem;
	}

	/* ── Inline toolbar: tighter ── */
	.upcp-inline-toolbar {
		gap: 0.25rem;
		padding: 0.22rem;
		flex-wrap: wrap;
	}

	.upcp-inline-toolbar button {
		min-width: 30px;
		padding: 0.34rem 0.42rem;
	}

	/* ── Settings ── */
	.upcp-settings-grid {
		grid-template-columns: 1fr;
	}

	.upcp-settings-avatar-row {
		align-items: flex-start;
	}

	/* ── Discussion detail: reduce h1 size ── */
	.upcp-discussion-single h1,
	.upcp-main-head h1 {
		font-size: 1.25rem;
	}
	.upcp-discussion-single {
		padding: 1rem;
	}

	/* ── Entry head (reply header): allow wrap ── */
	.upcp-entry-head {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.upcp-entry-meta {
		justify-content: flex-start;
	}
	.upcp-entry-meta time {
		font-size:0.7em;
		max-width: 80px;
	}
}

/* ── Moderation notices ────────────────────────────────────────────────────── */
.upcp-moderation-notice {
	font-size: 0.8rem;
	font-style: italic;
	padding: 6px 10px;
	border-radius: 6px;
	margin-top: 6px;
}

.upcp-removed-notice {
	color: #7a5a5a;
	background: rgba(180, 60, 60, 0.07);
	border: 1px solid rgba(180, 60, 60, 0.15);
}

.upcp-private-notice {
	color: #5a5a7a;
	background: rgba(80, 60, 180, 0.07);
	border: 1px solid rgba(80, 60, 180, 0.15);
}

.upcp-reply.is-removed {
	opacity: 0.65;
}

.upcp-content-removed {
	opacity: 0.5;
	filter: blur(1.5px);
	pointer-events: none;
	user-select: none;
}

/* ── Notifications badge & panel ──────────────────────────────────────────── */
.upcp-notif-btn {
	position: relative;
	margin-right:auto;
}

.upcp-notif-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}

.upcp-notif-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 320px;
	max-height: 420px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
	z-index: 1100;
	overflow: hidden;
}

@media (max-width: 640px) {
	.upcp-notif-panel {
		width: 100vw;
		border-radius: 14px 14px 0 0;
	}

	/* ── Cards: collapse avatar into content row ── */
	.upcp-discussion-card {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.upcp-card-avatar {
		display: none; /* hide avatar on phone — saves ~60px per card */
	}

	/* ── Discussion card foot: stack if needed ── */
	.upcp-card-foot {
		flex-wrap: wrap;
	}

	/* ── Card stats push-right still works with flex ── */
	.upcp-card-stats {
		margin-left: 0;
	}

	/* ── Reply layout: smaller avatar, tighter ── */
	.upcp-avatar {
		width: 36px;
		height: 36px;
		flex: 0 0 36px;
	}

	/* ── Reactions / engagement: wrap ── */
	.upcp-post-engagement {
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	/* ── Head actions: allow wrap ── */
	.upcp-head-actions {
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	/* ── Buttons in card foot / author row: smaller ── */
	.upcp-author-row {
		gap: 8px;
		font-size: 0.82rem;
	}

	/* ── Forms ── */
	.upcp-form {
		padding: 0.85rem;
	}

	/* ── Toast full-width on phone ── */
	.upcp-toast {
		left: 1rem;
		right: 1rem;
		transform: translateX(0) translateY(12px);
		white-space: normal;
		text-align: center;
	}

	.upcp-toast--visible {
		transform: translateX(0) translateY(0);
	}

	/* ── Verify banner: stack ── */
	#upcp-verify-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

.upcp-notif-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.upcp-notif-panel-head h3 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #111827;
}

.upcp-notif-panel-head-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}

.upcp-notif-panel-head-actions button {
	font-size: 0.75rem;
	color: #374151;
	border-color: #d1d5db;
}

.upcp-notif-panel-head-actions button:hover {
	background: #f3f4f6;
	color: #111827;
}

.upcp-notif-list {
	overflow-y: auto;
	flex: 1;
	padding: 0.25rem 0;
	background: #ffffff;
}

.upcp-notif-item {
	display: flex;
	flex-direction: column;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid #f3f4f6;
	cursor: pointer;
	transition: background 0.15s;
}

.upcp-notif-item:last-child {
	border-bottom: none;
}

.upcp-notif-item:hover {
	background: #f0fafa;
}

.upcp-notif-item.is-unread {
	background: #e6f7f7;
	border-left: 3px solid #0f8b8d;
}

.upcp-notif-item.is-unread:hover {
	background: #d4f1f1;
}

.upcp-notif-item-body {
	font-size: 0.83rem;
	color: #1f2937;
	line-height: 1.4;
}

.upcp-notif-item-time {
	font-size: 0.72rem;
	color: #6b7280;
	margin-top: 3px;
}

.upcp-notif-loading,
.upcp-notif-empty {
	padding: 1.5rem 1rem;
	text-align: center;
	font-size: 0.83rem;
	color: #6b7280;
	background: #ffffff;
}

/* ── Online presence badge ─────────────────────────────────────────────────── */
@keyframes upcp-online-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
	50%       { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.upcp-online-badge {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	margin-left: 5px;
	vertical-align: middle;
	flex-shrink: 0;
	animation: upcp-online-pulse 2s ease-in-out infinite;
}

/* ── Dark mode toggle icons ────────────────────────────────────────────────── */
.upcp-sidebar-head-actions {
	display: flex;
	gap: 4px;
	align-items: center;
}

.upcp-icon-sun { display: none; }

[data-theme="dark"] .upcp-icon-moon { display: none; }
[data-theme="dark"] .upcp-icon-sun  { display: block; }

/* ── Dark theme ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
	--upcp-bg:        linear-gradient(135deg, #0d1117 0%, #131a27 45%, #11121e 100%);
	--upcp-panel:     #161b27;
	--upcp-line:      rgba(255, 255, 255, 0.09);
	--upcp-text:      #e2e5ee;
	--upcp-subtle:    #7e8ba5;
	--upcp-shadow:    0 18px 40px rgba(0, 0, 0, 0.5);
}

/* Shell & sidebar */
[data-theme="dark"] .upcp-forum-sidebar {
	background: rgba(18, 22, 36, 0.88);
}

[data-theme="dark"] .upcp-forum-shell.is-reading-discussion .upcp-forum-sidebar:hover {
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.4);
}

/* Loading overlay */
[data-theme="dark"] .upcp-forum-main.is-loading::before {
	background: rgba(13, 17, 25, 0.62);
}

/* Ghost buttons */
[data-theme="dark"] .upcp-btn.upcp-btn-ghost {
	background: #1c2235;
	color: var(--upcp-text);
	border-color: rgba(255, 255, 255, 0.11);
}

[data-theme="dark"] .upcp-btn.upcp-btn-ghost:hover {
	background: #232b44;
	border-color: rgba(15, 139, 141, 0.45);
}

/* Danger button */
[data-theme="dark"] .upcp-btn.upcp-btn-danger {
	background: #2a1018;
	color: #f08898;
	border-color: #5a2530;
}

[data-theme="dark"] .upcp-btn.upcp-btn-danger:hover {
	background: #351520;
}

/* Topics sidebar active */
[data-theme="dark"] .upcp-sidebar-settings-btn.is-active {
	background: rgba(15, 139, 141, 0.22);
	border-color: rgba(15, 139, 141, 0.45);
}

/* Topics nav */
[data-theme="dark"] .upcp-topics button,
[data-theme="dark"] .upcp-topics a {
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-topics a:visited,
[data-theme="dark"] .upcp-topics a:focus,
[data-theme="dark"] .upcp-topics a:active {
	color: var(--upcp-text);
}

/* Topic bell dark mode */
[data-theme="dark"] .upcp-topic-bell:hover {
	background: rgba(15, 139, 141, 0.18);
}

/* Topic subscribe modal dark mode */
[data-theme="dark"] .upcp-topic-sub-modal {
	background: var(--upcp-panel);
	border: 1px solid var(--upcp-line);
}

/* Status badges */
[data-theme="dark"] .upcp-status {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--upcp-subtle);
}

[data-theme="dark"] .upcp-status-pin {
	background: #241c0e;
	border-color: #6b4c1a;
	color: #d4a44a;
}

[data-theme="dark"] .upcp-status-lock {
	background: #261318;
	border-color: #6b2e38;
	color: #cc7080;
}

[data-theme="dark"] .upcp-status-verified {
	background: #10281e;
	border-color: #1f6b48;
	color: #4fcf98;
}

/* Action menu */
[data-theme="dark"] .upcp-action-menu-toggle {
	background-color: #1c2235;
	border-color: rgba(255, 255, 255, 0.11);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23a0aec0'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .upcp-action-menu-toggle:hover {
	background-color: #232b44;
}

[data-theme="dark"] .upcp-action-menu-list {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .upcp-action-menu-item {
	background: #1c2235;
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-action-menu-item:hover {
	background: rgba(15, 139, 141, 0.15);
	border-color: rgba(15, 139, 141, 0.35);
}

[data-theme="dark"] .upcp-action-menu-item.is-danger {
	color: #f08898;
}

/* Engagement buttons */
[data-theme="dark"] .upcp-upvote-btn,
[data-theme="dark"] .upcp-reaction-pill,
[data-theme="dark"] .upcp-react-toggle,
[data-theme="dark"] .upcp-reaction-option {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.11);
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-reaction-options {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* Settings cards */
[data-theme="dark"] .upcp-settings-card {
	background: #161b27;
}

[data-theme="dark"] .upcp-avatar-dropzone {
	background: #0f1420;
	border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .upcp-avatar-dropzone.is-dragover {
	background: rgba(15, 139, 141, 0.12);
}

/* Toggle switch track (off state) */
[data-theme="dark"] .upcp-switch-track {
	background: #2a3250;
	border-color: #3a4268;
}

/* Topic option checkboxes */
[data-theme="dark"] .upcp-topic-option {
	background: #1c2235;
	color: var(--upcp-text);
	border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .upcp-topic-option input[type="checkbox"] {
	background: #1c2235;
	border-color: #4a5578;
}

[data-theme="dark"] .upcp-topic-option:has(input[type="checkbox"]:checked) {
	background: rgba(15, 139, 141, 0.14);
}

/* Editor */
[data-theme="dark"] .upcp-editor-wrap {
	background: #161b27;
}

[data-theme="dark"] .upcp-editor-toolbar {
	background: #0f1420;
	border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .upcp-editor-toolbar button {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-editor-toolbar button:hover {
	background: rgba(15, 139, 141, 0.15);
	border-color: rgba(15, 139, 141, 0.4);
}

[data-theme="dark"] .upcp-editor-toolbar button.is-active {
	background: rgba(15, 139, 141, 0.2);
	border-color: rgba(15, 139, 141, 0.55);
}

[data-theme="dark"] .upcp-editor-source {
	background: #161b27;
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-editor-tagpath {
	background: #0f1420;
	color: var(--upcp-subtle);
}

/* Code blocks */
[data-theme="dark"] .upcp-editor-native pre,
[data-theme="dark"] .upcp-content pre {
	background: #0a0e18;
	border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .upcp-editor-native :not(pre) > code,
[data-theme="dark"] .upcp-content :not(pre) > code {
	background: #232b44;
	color: #c8d0e8;
}

[data-theme="dark"] .upcp-editor-native th,
[data-theme="dark"] .upcp-content th {
	background: #0f1420;
}

/* Form inputs */
[data-theme="dark"] .upcp-form input[type="text"],
[data-theme="dark"] .upcp-form input[type="password"],
[data-theme="dark"] .upcp-form textarea {
	background: #0f1420;
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-form input[type="text"]::placeholder,
[data-theme="dark"] .upcp-form input[type="password"]::placeholder,
[data-theme="dark"] .upcp-form textarea::placeholder {
	color: var(--upcp-subtle);
}

/* Inline toolbar & mention dropdown */
[data-theme="dark"] .upcp-inline-toolbar {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .upcp-inline-toolbar button {
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-mention-dropdown {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .upcp-mention-dropdown button {
	background: #1c2235;
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-mention-dropdown button:hover {
	background: #232b44;
}

/* Reply icon bubble */

/* Notifications panel — dark override */
[data-theme="dark"] .upcp-notif-panel {
	background: #1c2235;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .upcp-notif-panel-head {
	background: #161b27;
	border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .upcp-notif-panel-head h3 {
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-notif-panel-head-actions button {
	color: var(--upcp-text);
	border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .upcp-notif-panel-head-actions button:hover {
	background: #232b44;
	color: #fff;
}

[data-theme="dark"] .upcp-notif-list {
	background: #1c2235;
}

[data-theme="dark"] .upcp-notif-item {
	border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .upcp-notif-item:hover {
	background: rgba(15, 139, 141, 0.1);
}

[data-theme="dark"] .upcp-notif-item.is-unread {
	background: rgba(15, 139, 141, 0.14);
}

[data-theme="dark"] .upcp-notif-item.is-unread:hover {
	background: rgba(15, 139, 141, 0.22);
}

[data-theme="dark"] .upcp-notif-item-body {
	color: var(--upcp-text);
}

[data-theme="dark"] .upcp-notif-item-time {
	color: var(--upcp-subtle);
}

[data-theme="dark"] .upcp-notif-loading,
[data-theme="dark"] .upcp-notif-empty {
	background: #1c2235;
	color: var(--upcp-subtle);
}

/* ── Solution feature ──────────────────────────────────────────────────────── */
.upcp-solved-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-right: 5px;
	flex-shrink: 0;
}

.upcp-solution-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 1rem;
	margin-bottom:1rem;
	padding: 0.65rem 1rem;
	background: #edfaf4;
	border: 1px solid #a3e6c8;
	border-radius: 10px;
	color: #0f5f3a;
	font-size: 0.86rem;
	font-weight: 500;
}

.upcp-solution-jump {
	margin-left: auto;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: #0f8b8d;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
}

.upcp-solution-jump:hover {
	text-decoration: underline;
}

.upcp-reply.is-solution {
	border: 2px solid #25AE88;
	border-radius: 14px;
	background: #f0fdf6;
}

.upcp-solution-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #25AE88;
	color: #fff;
	border-radius: 999px;
	padding: 0.18rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-left: 8px;
	vertical-align: middle;
	flex-shrink: 0;
}

.upcp-solution-mark-btn {
	color: #0f5f3a !important;
}

.upcp-solution-unmark-btn {
	color: var(--upcp-subtle) !important;
}

/* Dark mode overrides for solution feature */
[data-theme="dark"] .upcp-solution-banner {
	background: #0d2b1e;
	border-color: #1a5c3a;
	color: #6ee7b7;
}

[data-theme="dark"] .upcp-reply.is-solution {
	border-color: #25AE88;
	background: rgba(37, 174, 136, 0.08);
}

[data-theme="dark"] .upcp-solution-mark-btn {
	color: #6ee7b7 !important;
}

/* ─── Role flair ─────────────────────────────────────────── */
.upcp-role-flair {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	margin-left: 5px;
	line-height: 1.6;
}

.upcp-role-flair--admin {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
}

.upcp-role-flair--editor {
	background: #e0f2fe;
	color: #075985;
	border: 1px solid #7dd3fc;
}

.upcp-role-flair--staff {
	background: #e0f2fe;
	color: #075985;
	border: 1px solid #7dd3fc;
}

[data-theme="dark"] .upcp-role-flair--admin {
	background: #451a03;
	color: #fcd34d;
	border-color: #92400e;
}

[data-theme="dark"] .upcp-role-flair--editor,
[data-theme="dark"] .upcp-role-flair--staff {
	background: #082f49;
	color: #7dd3fc;
	border-color: #075985;
}

/* ─── Author meta block ───────────────────────────────────── */
.upcp-author-meta {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

.upcp-author-name-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

/* ─── Author post count ───────────────────────────────────── */
.upcp-author-postcount {
	display: block;
	font-size: 0.72rem;
	color: var(--upcp-subtle);
}

[data-theme="dark"] .upcp-author-postcount {
	color: #6b7fa3;
}

/* ─── Clickable author name ───────────────────────────────── */
.upcp-author-meta[data-user-profile] {
	cursor: pointer;
}

.upcp-author-meta[data-user-profile]:hover > *:first-child {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─── Search ──────────────────────────────────────────────── */
.upcp-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.upcp-search-input {
	width: 100%;
	max-width: 220px;
	padding: 0.42rem 0.75rem 0.42rem 2.1rem;
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	background: var(--upcp-panel);
	color: var(--upcp-text);
	font-size: 0.85rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	min-height:30px;
}

.upcp-search-input::placeholder {
	color: var(--upcp-subtle);
	opacity: 0.75;
}

.upcp-search-input:focus {
	border-color: var(--upcp-brand);
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.15);
}

.upcp-search-icon {
	position: absolute;
	left: 0.6rem;
	pointer-events: none;
	color: var(--upcp-subtle);
	flex-shrink: 0;
}

[data-theme="dark"] .upcp-search-input {
	background: #1a2035;
	border-color: #2d3a52;
	color: #cbd5e1;
}

[data-theme="dark"] .upcp-search-input:focus {
	border-color: var(--upcp-brand);
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.2);
}

[data-theme="dark"] .upcp-search-icon {
	color: #6b7fa3;
}

/* ─── Pagination ──────────────────────────────────────────── */
.upcp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	padding: 1rem 0 0.5rem;
}

.upcp-page-btn {
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid var(--upcp-line);
	border-radius: 6px;
	background: var(--upcp-panel);
	color: var(--upcp-text);
	font-size: 0.82rem;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.upcp-page-btn:hover {
	background: rgba(15, 139, 141, 0.08);
	border-color: var(--upcp-brand);
	color: var(--upcp-brand);
}

.upcp-page-btn.is-active {
	background: var(--upcp-brand);
	border-color: var(--upcp-brand);
	color: #fff;
	font-weight: 600;
	cursor: default;
}

[data-theme="dark"] .upcp-page-btn {
	background: #1a2035;
	border-color: #2d3a52;
	color: #cbd5e1;
}

[data-theme="dark"] .upcp-page-btn:hover {
	background: rgba(15, 139, 141, 0.15);
	border-color: var(--upcp-brand);
	color: #5eead4;
}

[data-theme="dark"] .upcp-page-btn.is-active {
	background: var(--upcp-brand);
	border-color: var(--upcp-brand);
	color: #fff;
}

/* ─── Last activity label ─────────────────────────────────── */
.upcp-last-activity {
	font-size: 0.75rem;
	color: var(--upcp-subtle);
	white-space: nowrap;
}

[data-theme="dark"] .upcp-last-activity {
	color: #6b7fa3;
}

/* ─── Profile card ────────────────────────────────────────── */
.upcp-profile-card {
	padding: 1.5rem;
	max-width: 640px;
}

.upcp-profile-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.upcp-profile-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--upcp-line);
}

.upcp-profile-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
}

.upcp-profile-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--upcp-text);
	margin: 0;
	line-height: 1.3;
}

.upcp-profile-username {
	font-size: 0.82rem;
	color: var(--upcp-subtle);
	margin: 0;
}

.upcp-profile-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.upcp-profile-stats {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	background: rgba(15, 139, 141, 0.05);
	border-radius: 10px;
	border: 1px solid var(--upcp-line);
}

.upcp-profile-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}

.upcp-profile-stat-value {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--upcp-brand);
}

.upcp-profile-stat-label {
	font-size: 0.72rem;
	color: var(--upcp-subtle);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.upcp-profile-section-title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--upcp-subtle);
	margin-bottom: 0.6rem;
}

.upcp-profile-discussions {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.upcp-profile-discussions li a {
	color: var(--upcp-brand);
	text-decoration: none;
	font-size: 0.88rem;
}

.upcp-profile-discussions li a:hover {
	text-decoration: underline;
}

.upcp-profile-suspended {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
	margin-top: 0.35rem;
}

[data-theme="dark"] .upcp-profile-card {
	color: #cbd5e1;
}

[data-theme="dark"] .upcp-profile-name {
	color: #e2e8f0;
}

[data-theme="dark"] .upcp-profile-username {
	color: #6b7fa3;
}

[data-theme="dark"] .upcp-profile-stats {
	background: rgba(15, 139, 141, 0.08);
	border-color: #2d3a52;
}

[data-theme="dark"] .upcp-profile-stat-label {
	color: #6b7fa3;
}

[data-theme="dark"] .upcp-profile-section-title {
	color: #6b7fa3;
}

[data-theme="dark"] .upcp-profile-avatar {
	border-color: #2d3a52;
}

[data-theme="dark"] .upcp-profile-suspended {
	background: #450a0a;
	border-color: #991b1b;
	color: #fca5a5;
}

[data-theme="dark"] .upcp-profile-discussions li a {
	color: #5eead4;
}

/* ── Report dialog ────────────────────────────────────── */
.upcp-report-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.upcp-report-modal {
	background: #fff;
	border-radius: 10px;
	padding: 1.5rem;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.upcp-report-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.upcp-report-desc {
	font-size: 0.875rem;
	color: #6b7280;
	margin: 0 0 0.75rem;
}

.upcp-report-reason {
	width: 100%;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	resize: vertical;
	box-sizing: border-box;
	font-family: inherit;
}

.upcp-report-reason:focus {
	outline: none;
	border-color: var(--upcp-brand, #0f8b8d);
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.15);
}

.upcp-report-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

[data-theme="dark"] .upcp-report-modal {
	background: #1a2236;
	color: #e2e8f0;
}

[data-theme="dark"] .upcp-report-desc {
	color: #94a3b8;
}

[data-theme="dark"] .upcp-report-reason {
	background: #0f172a;
	border-color: #2d3a52;
	color: #e2e8f0;
}

/* ── Toast notification ───────────────────────────────── */
.upcp-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(1rem);
	background: #1e293b;
	color: #f1f5f9;
	padding: 0.6rem 1.25rem;
	border-radius: 8px;
	font-size: 0.875rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	z-index: 10000;
	white-space: nowrap;
}

.upcp-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Draft restored banner ────────────────────────────── */
.upcp-draft-banner {
	background: #fefce8;
	border: 1px solid #fde68a;
	color: #92400e;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.83rem;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.upcp-draft-discard {
	background: none;
	border: none;
	color: #b45309;
	font-size: 0.83rem;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	margin-left: auto;
}

.upcp-draft-discard:hover {
	color: #78350f;
}

[data-theme="dark"] .upcp-draft-banner {
	background: #1c1a08;
	border-color: #78350f;
	color: #fde68a;
}

[data-theme="dark"] .upcp-draft-discard {
	color: #fbbf24;
}

[data-theme="dark"] .upcp-draft-discard:hover {
	color: #fde68a;
}

/* ── View count ───────────────────────────────────────────── */
.upcp-card-stats {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}

.upcp-view-count {
	font-size: 0.78rem;
	color: var(--upcp-muted, #94a3b8);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.upcp-discussion-title-group {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	flex: 1;
}

.upcp-discussion-meta-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.upcp-meta-stat {
	font-size: 0.8rem;
	color: var(--upcp-muted, #94a3b8);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ── Unread indicator ─────────────────────────────────────── */
.upcp-unread-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--upcp-brand, #0f8b8d);
	margin-left: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}

.upcp-discussion-card.is-unread .upcp-card-head h3 {
	font-weight: 700;
}

.upcp-discussion-card.is-unread {
	border-left: 3px solid var(--upcp-brand, #0f8b8d);
	padding-left: calc(var(--upcp-card-pad, 1rem) - 3px);
}

/* ── Email verification banner ────────────────────────────── */
#upcp-verify-banner {
	position: sticky;
	top: 0;
	z-index: 9000;
	background: #fffbeb;
	border-bottom: 1px solid #fde68a;
	color: #92400e;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.88rem;
	flex-wrap: wrap;
}

#upcp-verify-banner span {
	flex: 1;
}

#upcp-verify-resend {
	background: #f59e0b;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

#upcp-verify-resend:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

#upcp-verify-dismiss {
	background: none;
	border: none;
	color: #92400e;
	font-size: 1.1rem;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	opacity: 0.7;
}

#upcp-verify-dismiss:hover { opacity: 1; }

[data-theme="dark"] #upcp-verify-banner {
	background: #1c1a00;
	border-color: #a16207;
	color: #fde68a;
}

[data-theme="dark"] #upcp-verify-dismiss { color: #fde68a; }

/* ── Inline alert (unsubscribe, etc.) ────────────────────── */
.upcp-inline-alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.92rem;
	margin-bottom: 16px;
}

.upcp-inline-alert span { flex: 1; }

.upcp-inline-alert button {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	opacity: 0.6;
	flex-shrink: 0;
}
.upcp-inline-alert button:hover { opacity: 1; }

.upcp-inline-alert--success {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}
.upcp-inline-alert--error {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #991b1b;
}

[data-theme="dark"] .upcp-inline-alert--success {
	background: #052e16;
	border-color: #166534;
	color: #86efac;
}
[data-theme="dark"] .upcp-inline-alert--error {
	background: #2d0a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
}
[data-theme="dark"] .upcp-inline-alert button { color: inherit; }

/* ── New replies banner ───────────────────────────────────── */
.upcp-new-replies-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #eff6ff;
	border: 1px solid #93c5fd;
	border-radius: 8px;
	font-size: 0.88rem;
	color: #1e40af;
	margin-bottom: 12px;
}
.upcp-new-replies-banner span { flex: 1; }
.upcp-new-replies-banner button {
	background: #1e40af;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.upcp-new-replies-banner button:hover { background: #1d4ed8; }

[data-theme="dark"] .upcp-new-replies-banner {
	background: #0c1a35;
	border-color: #1e40af;
	color: #93c5fd;
}
[data-theme="dark"] .upcp-new-replies-banner button {
	background: #1e40af;
	color: #fff;
}

/* ── Mark all read button ─────────────────────────────────── */
.upcp-mark-all-read {
	font-size: 0.82rem;
	padding: 6px 12px;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK / IDEAS TOPIC
   ══════════════════════════════════════════════════════════════ */

/* ── Feedback card: 3-column grid (upvote | avatar | content) ── */
.upcp-fb-card {
	grid-template-columns: auto auto minmax(0, 1fr);
}
.upcp-fb-card .upcp-card-content {
	gap:0;
}

/* ── Card upvote button ───────────────────────────────────── */
.upcp-fb-upvote {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0.55rem 0.7rem;
	min-width: 50px;
	border: 1px solid var(--upcp-line);
	border-radius: 10px;
	background: transparent;
	color: var(--upcp-subtle);
	cursor: pointer;
	font: inherit;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
	align-self: center;
	position:relative;
	transform: perspective(0px);
}

.upcp-fb-upvote:hover:not(:disabled) {
	border-color: rgba(15, 139, 141, 0.5);
	background: rgba(15, 139, 141, 0.07);
	color: var(--upcp-brand-dark);
}

.upcp-fb-upvote.is-active {
	border-color: rgba(15, 139, 141, 0.75);
	background: rgba(15, 139, 141, 0.12);
	color: var(--upcp-text);
	box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.18), 0 0 16px rgba(15, 139, 141, 0.35);
}

.upcp-fb-upvote:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.upcp-fb-upvote.is-active:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -1px;
    left: -1px;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}
.upcp-fb-upvote.is-active:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    border-radius: 10px;
}
[data-theme="dark"] .upcp-fb-upvote.is-active:after {
    background: #161b27;
}

.upcp-fb-upvote-count {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ── Feedback sidebar button — always-on rainbow glow ─────── */
.upcp-topics button[data-topic="feedback"] {
    position: relative;
    transform: perspective(0px);
}

.upcp-topics button[data-topic="feedback"]:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -1px;
    left: -1px;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 12px;
}

.upcp-topics button[data-topic="feedback"]:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    left: 0;
    top: 0;
    border-radius: 12px;
}

[data-theme="dark"] .upcp-topics button[data-topic="feedback"]:after {
    background: #161b27;
}

/* ── Status badges (card + detail) ───────────────────────── */
.upcp-fb-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.upcp-fb-badge--under_discussion { background: rgba(79, 115, 224, 0.13); color: #4f73e0; }
.upcp-fb-badge--planned           { background: rgba(138, 99, 210, 0.13); color: #8a63d2; }
.upcp-fb-badge--in_progress       { background: rgba(255, 170, 30, 0.15); color: #b36e00; }
.upcp-fb-badge--completed         { background: rgba(37, 174, 136, 0.13); color: #1a9070; }

[data-theme="dark"] .upcp-fb-badge--under_discussion { background: rgba(79, 115, 224, 0.22); color: #93aeff; }
[data-theme="dark"] .upcp-fb-badge--planned          { background: rgba(138, 99, 210, 0.22); color: #c4a0ff; }
[data-theme="dark"] .upcp-fb-badge--in_progress      { background: rgba(255, 170, 30, 0.2);  color: #ffc94d; }
[data-theme="dark"] .upcp-fb-badge--completed        { background: rgba(37, 174, 136, 0.2);  color: #3dd6ad; }

/* ── Feedback controls bar (sort + status) ────────────────── */
.upcp-fb-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 1rem;
}

.upcp-fb-sort-tabs,
.upcp-fb-status-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.upcp-fb-sort-tab,
.upcp-fb-status-tab {
	padding: 5px 12px;
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--upcp-subtle);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
	white-space: nowrap;
}

.upcp-fb-sort-tab:hover,
.upcp-fb-status-tab:hover {
	border-color: var(--upcp-brand);
	color: var(--upcp-brand-dark);
}

.upcp-fb-sort-tab.is-active,
.upcp-fb-status-tab.is-active {
	background: var(--upcp-brand);
	border-color: var(--upcp-brand);
	color: #fff;
}

.upcp-fb-status-tab--completed.is-active {
	background: #1a9070;
	border-color: #1a9070;
}

/* ── Admin status control (in discussion detail) ─────────── */
.upcp-fb-status-admin {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0.6rem 0.8rem;
	margin: 0.75rem 0;
	background: var(--upcp-panel-alt, rgba(0,0,0,0.03));
	border: 1px solid var(--upcp-line);
	border-radius: 8px;
}

[data-theme="dark"] .upcp-fb-status-admin {
	background: rgba(255,255,255,0.04);
}

.upcp-fb-status-admin-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--upcp-subtle);
	white-space: nowrap;
}

.upcp-fb-status-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.upcp-fb-status-opt {
	padding: 3px 10px;
	border: 1px solid var(--upcp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--upcp-subtle);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
	transition: all 0.12s;
}

.upcp-fb-status-opt:hover {
	border-color: var(--upcp-brand);
	color: var(--upcp-brand-dark);
}

.upcp-fb-status-opt.is-active {
	background: var(--upcp-brand);
	border-color: var(--upcp-brand);
	color: #fff;
}

.upcp-fb-status-opt:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Duplicate idea suggestions ───────────────────────────── */
.upcp-fb-dupe-suggestions {
	margin: 0.25rem 0 0.75rem;
}

.upcp-fb-dupe-suggestions:not(:empty) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--upcp-line);
	border-radius: 8px;
	background: rgba(15, 139, 141, 0.04);
}

.upcp-fb-dupe-label {
	margin: 0 0 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--upcp-subtle);
}

.upcp-fb-dupe-list {
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: disc;
}

.upcp-fb-dupe-list li {
	margin-bottom: 3px;
	font-size: 0.88rem;
}

.upcp-fb-dupe-list a {
	color: var(--upcp-brand-dark);
	text-decoration: none;
}

.upcp-fb-dupe-list a:hover {
	text-decoration: underline;
}

/* ── Confetti particles ───────────────────────────────────── */
.upcp-confetti-particle {
	position: fixed;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	pointer-events: none;
	z-index: 99999;
	transform-origin: center;
	animation: upcp-confetti-fly 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s) forwards;
}

@keyframes upcp-confetti-fly {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--tx, 80px), var(--ty, -120px)) rotate(var(--rot, 360deg)); opacity: 0; }
}

@media (max-width: 640px) {
	.upcp-solution-banner {
		display: grid;
    	grid-template-columns: 20px 1fr auto;
	}
	.upcp-solution-jump {
		grid-column: 1 / -1;
    	width: 100%;
	}
	.upcp-search-input {
		font-size:16px;
	}
}