/**

 * Noxora Topluluk — Premium Noir UI

 */



/* ── Tokens ── */

.nx-comm-app {

	--nx-comm-bg: #060608;

	--nx-comm-card: rgba(20, 20, 28, 0.6);

	--nx-comm-gold: #d4af37;

	--nx-comm-cyan: #00f0ff;

	--nx-comm-purple: #8a2be2;

	--nx-comm-muted: #888;

	--nx-comm-border: rgba(255, 255, 255, 0.05);

	--nx-comm-radius: 18px;

	min-height: 100dvh;

	width: 100%;

	max-width: 100vw;

	overflow-x: hidden;

	background:

		radial-gradient(ellipse 80% 40% at 50% -10%, rgba(138, 43, 226, 0.08), transparent 55%),

		var(--nx-comm-bg);

	color: #f5f5f7;

	font-family: Inter, system-ui, sans-serif;

}



.nx-comm-app *,

.nx-comm-app *::before,

.nx-comm-app *::after {

	box-sizing: border-box;

}



/* ── Glass surfaces ── */

.nx-glass,

.nx-comm-header,

.nx-comm-card,

.nx-comm-compose,

.nx-comm-toolbar,

.nx-comm-comments {

	background: var(--nx-comm-card);

	backdrop-filter: blur(16px);

	-webkit-backdrop-filter: blur(16px);

	border: 1px solid var(--nx-comm-border);

	border-radius: var(--nx-comm-radius);

	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.35);

}



.nx-comm-main {

	max-width: 680px;

	margin: 0 auto;

	padding: 1rem clamp(0.85rem, 4vw, 1.25rem) 5rem;

	min-width: 0;

	width: 100%;

}



.nx-comm-kicker {

	color: var(--nx-comm-gold);

	font-size: 0.68rem;

	letter-spacing: 0.14em;

	text-transform: uppercase;

}



.nx-comm-hero {

	padding: clamp(1rem, 4vw, 1.5rem);

	margin-bottom: 0.85rem;

}



.nx-comm-hero h1 {

	margin: 0.35rem 0;

	font-size: clamp(1.35rem, 4.5vw, 2rem);

	line-height: 1.12;

	overflow-wrap: break-word;

}



.nx-comm-hero p {

	color: var(--nx-comm-muted);

	margin: 0;

	font-size: clamp(0.85rem, 2.5vw, 0.95rem);

}



/* ── Toolbar & filter pills ── */

.nx-comm-toolbar {

	padding: 0.65rem 0.75rem;

	margin-bottom: 0.75rem;

	display: grid;

	gap: 0.65rem;

	border-radius: var(--nx-comm-radius);

}



.nx-comm-filters {

	display: flex;

	gap: 0.35rem;

	overflow-x: auto;

	scrollbar-width: none;

	padding-bottom: 0.15rem;

	max-width: 100%;

}



.nx-comm-filters::-webkit-scrollbar {

	display: none;

}



.nx-comm-filters button {

	min-height: 40px;

	padding: 0.4rem 0.85rem;

	border-radius: 999px;

	border: 1px solid transparent;

	background: transparent;

	color: var(--nx-comm-muted);

	white-space: nowrap;

	cursor: pointer;

	font-size: 0.78rem;

	font-weight: 600;

	transition: color 0.2s, box-shadow 0.2s, border-color 0.2s;

}



.nx-comm-filters button:hover {

	color: #fff;

}



.nx-comm-filters button.is-active {

	color: var(--nx-comm-cyan);

	border-color: rgba(0, 240, 255, 0.22);

	box-shadow: 0 0 18px rgba(0, 240, 255, 0.12), inset 0 -2px 0 rgba(0, 240, 255, 0.35);

	text-shadow: 0 0 12px rgba(0, 240, 255, 0.35);

}



.nx-comm-search input {

	width: 100%;

	border: 1px solid var(--nx-comm-border);

	background: rgba(0, 0, 0, 0.28);

	color: inherit;

	border-radius: 999px;

	padding: 0.55rem 0.9rem;

	min-height: 42px;

	font-size: 0.85rem;

}



/* ── Micro compose (Twitter/X style) ── */

.nx-comm-compose {

	padding: 0.75rem 0.85rem;

	margin-bottom: 0.85rem;

	transition: box-shadow 0.25s ease, border-color 0.25s ease;

}



.nx-comm-compose.is-expanded {

	border-color: rgba(0, 240, 255, 0.12);

	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 240, 255, 0.04);

}



.nx-comm-compose__form {

	display: block;

}



.nx-comm-compose__row {

	display: flex;

	gap: 0.65rem;

	align-items: flex-start;

	min-width: 0;

}



.nx-comm-compose__avatar {

	flex-shrink: 0;

	width: 40px;

	height: 40px;

	border-radius: 50%;

	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, 0.08);

	background: rgba(255, 255, 255, 0.04);

}



.nx-comm-compose__avatar-img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

}



.nx-comm-compose__avatar-fallback {

	display: block;

	width: 100%;

	height: 100%;

	background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(138, 43, 226, 0.25));

}



.nx-comm-compose__prompt {

	flex: 1;

	min-width: 0;

}



.nx-comm-compose__prompt textarea {

	width: 100%;

	border: 0;

	background: transparent;

	color: inherit;

	resize: none;

	min-height: 44px;

	max-height: 160px;

	padding: 0.55rem 0;

	font: inherit;

	font-size: 0.95rem;

	line-height: 1.45;

	overflow-wrap: break-word;

}



.nx-comm-compose__prompt textarea::placeholder {

	color: var(--nx-comm-muted);

}



.nx-comm-compose__expand {

	max-height: 0;

	opacity: 0;

	overflow: hidden;

	transition: max-height 0.35s ease, opacity 0.28s ease, margin 0.28s ease;

}



.nx-comm-compose.is-expanded .nx-comm-compose__expand {

	max-height: 280px;

	opacity: 1;

	margin-top: 0.65rem;

}



.nx-comm-field--compact {

	display: grid;

	gap: 0.25rem;

	margin-bottom: 0.55rem;

}



.nx-comm-field--compact span {

	font-size: 0.72rem;

	color: var(--nx-comm-muted);

}



.nx-comm-field--compact input,

.nx-comm-field--compact select {

	width: 100%;

	border: 1px solid var(--nx-comm-border);

	background: rgba(0, 0, 0, 0.28);

	color: inherit;

	border-radius: 12px;

	padding: 0.5rem 0.65rem;

	min-height: 40px;

	font-size: 0.85rem;

}



.nx-comm-compose__actions {

	display: flex;

	justify-content: flex-end;

}



.nx-comm-form-status {

	margin: 0.35rem 0 0;

	font-size: 0.78rem;

	color: var(--nx-comm-muted);

}



/* ── Buttons ── */

.nx-comm-btn {

	min-height: 44px;

	border: 0;

	border-radius: 999px;

	padding: 0.55rem 1.15rem;

	cursor: pointer;

	font-weight: 700;

	font-size: 0.82rem;

	background: rgba(255, 255, 255, 0.06);

	color: inherit;

	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;

}



.nx-comm-btn:disabled {

	opacity: 0.55;

	cursor: not-allowed;

}



.nx-comm-btn--gold {

	background: linear-gradient(145deg, #d4af37, #b8922f);

	color: #0a0a0c;

	box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);

}



.nx-comm-btn--gold:hover:not(:disabled) {

	transform: translateY(-1px);

}



/* ── Feed cards ── */

.nx-comm-feed__list {

	display: grid;

	gap: 0.75rem;

	min-width: 0;

}



.nx-comm-card {

	position: relative;

	padding: 1rem;

	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.25s ease;

	overflow-wrap: break-word;

}



.nx-comm-card:hover:not(.is-pending) {

	transform: translateY(-2px);

	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 240, 255, 0.05);

	border-color: rgba(255, 255, 255, 0.08);

}



.nx-comm-card.is-pinned {

	border-color: rgba(212, 175, 55, 0.28);

}



.nx-comm-card.is-pending {

	opacity: 0.6;

	pointer-events: none;

}



.nx-comm-card.is-revealed {

	animation: nxCommReveal 0.35s ease both;

}



@keyframes nxCommReveal {

	from { opacity: 0.6; transform: translateY(-4px); }

	to { opacity: 1; transform: translateY(0); }

}



.nx-comm-card__spinner {

	position: absolute;

	top: 0.85rem;

	right: 0.85rem;

	width: 18px;

	height: 18px;

	border-radius: 50%;

	border: 2px solid rgba(0, 240, 255, 0.2);

	border-top-color: var(--nx-comm-cyan);

	animation: nxCommSpin 0.7s linear infinite;

}



@keyframes nxCommSpin {

	to { transform: rotate(360deg); }

}



.nx-comm-card__head {

	display: flex;

	gap: 0.65rem;

	align-items: flex-start;

	flex-wrap: wrap;

	min-width: 0;

}



.nx-comm-card__avatar {

	flex-shrink: 0;

}



.nx-comm-card__meta {

	display: grid;

	gap: 0.12rem;

	flex: 1;

	min-width: 0;

}



.nx-comm-card__meta strong {

	overflow-wrap: break-word;

}



.nx-comm-card__meta time,

.nx-comm-cat {

	font-size: 0.76rem;

	color: var(--nx-comm-muted);

}



.nx-comm-rank {

	color: var(--nx-comm-gold);

	font-size: 0.72rem;

}



.nx-comm-card__text {

	margin: 0.65rem 0;

	line-height: 1.55;

	word-break: break-word;

}



.nx-comm-tags {

	display: flex;

	flex-wrap: wrap;

	gap: 0.35rem;

}



.nx-comm-tags a {

	color: var(--nx-comm-cyan);

	font-size: 0.8rem;

	text-decoration: none;

}



.nx-comm-reactions {

	display: flex;

	flex-wrap: wrap;

	gap: 0.3rem;

	margin-bottom: 0.55rem;

}



.nx-comm-react {

	min-height: 36px;

	border-radius: 999px;

	border: 1px solid var(--nx-comm-border);

	background: transparent;

	color: inherit;

	padding: 0.2rem 0.5rem;

	cursor: pointer;

	font-size: 0.7rem;

}



.nx-comm-react.is-active {

	border-color: var(--nx-comm-purple);

	box-shadow: 0 0 12px rgba(138, 43, 226, 0.22);

}



.nx-comm-card__stats {

	display: flex;

	flex-wrap: wrap;

	gap: 0.4rem;

}



.nx-comm-card__stats button,

.nx-comm-card__stats a {

	min-height: 40px;

	border-radius: 999px;

	border: 1px solid var(--nx-comm-border);

	background: transparent;

	color: inherit;

	padding: 0.35rem 0.7rem;

	text-decoration: none;

	cursor: pointer;

	font-size: 0.78rem;

}



/* ── Skeleton ── */

.nx-comm-skeleton__card {

	height: 140px;

	border-radius: var(--nx-comm-radius);

	margin-bottom: 0.75rem;

	background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));

	background-size: 200% 100%;

	animation: nxCommShimmer 1.2s infinite;

}



@keyframes nxCommShimmer {

	to { background-position: -200% 0; }

}



.nx-comm-feed.is-loaded .nx-comm-skeleton {

	display: none;

}



/* ── Header & mobile nav ── */

.nx-comm-header {

	position: sticky;

	top: 0;

	z-index: 100;

	border-radius: 0;

	border-left: 0;

	border-right: 0;

}



.nx-comm-header__inner {

	display: flex;

	align-items: center;

	gap: 0.65rem;

	padding: 0.6rem clamp(0.75rem, 3vw, 1rem);

	flex-wrap: wrap;

	min-width: 0;

}



.nx-comm-header__brand {

	font-weight: 800;

	color: inherit;

	text-decoration: none;

	display: inline-flex;

	align-items: center;

	gap: 0.35rem;

}



.nx-comm-header__live {

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: var(--nx-comm-cyan);

	box-shadow: 0 0 8px var(--nx-comm-cyan);

	animation: nxCommPulse 1.5s infinite;

}



@keyframes nxCommPulse {

	50% { opacity: 0.5; transform: scale(0.85); }

}



.nx-comm-header__nav {

	display: none;

	gap: 0.45rem;

	margin-left: auto;

}



.nx-comm-header__nav a {

	color: var(--nx-comm-muted);

	text-decoration: none;

	padding: 0.35rem 0.55rem;

	font-size: 0.82rem;

}



.nx-comm-header__nav a.is-active {

	color: var(--nx-comm-gold);

}



.nx-comm-header__actions {

	margin-left: auto;

	display: flex;

	align-items: center;

	gap: 0.35rem;

}



.nx-comm-mobile-nav {

	position: fixed;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 200;

	display: flex;

	background: rgba(6, 6, 8, 0.92);

	backdrop-filter: blur(16px);

	border-top: 1px solid var(--nx-comm-border);

	padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));

}



.nx-comm-mobile-nav a {

	flex: 1;

	text-align: center;

	min-height: 48px;

	display: grid;

	place-items: center;

	color: var(--nx-comm-muted);

	text-decoration: none;

	font-size: 0.72rem;

	font-weight: 600;

}



.nx-comm-mobile-nav a.is-active {

	color: var(--nx-comm-gold);

}



.nx-comm-comments {

	padding: 1rem;

	margin-top: 0.85rem;

}



.nx-comm-comments form {

	display: grid;

	gap: 0.5rem;

	margin-bottom: 0.85rem;

}



.nx-comm-comment {

	padding: 0.55rem 0;

	border-top: 1px solid var(--nx-comm-border);

}



/* ── Toast ── */

.nx-comm-toast {

	position: fixed;

	left: 50%;

	bottom: calc(5rem + env(safe-area-inset-bottom));

	transform: translateX(-50%) translateY(12px);

	z-index: 9999;

	max-width: min(92vw, 360px);

	padding: 0.65rem 1rem;

	border-radius: 999px;

	background: rgba(20, 20, 28, 0.92);

	border: 1px solid rgba(0, 240, 255, 0.2);

	color: #fff;

	font-size: 0.82rem;

	opacity: 0;

	pointer-events: none;

	transition: opacity 0.25s, transform 0.25s;

	backdrop-filter: blur(12px);

}



.nx-comm-toast.is-visible {

	opacity: 1;

	transform: translateX(-50%) translateY(0);

}



.nx-comm-toast.is-error {

	border-color: rgba(255, 100, 100, 0.35);

}



/* ── Homepage live ticker widget ── */

.nx-comm-widget {

	margin: 1.25rem 0 1.75rem;

	padding: 0;

	max-width: 100%;

	overflow: hidden;

}



.nx-comm-widget__bar {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: space-between;

	gap: 0.65rem;

	margin-bottom: 0.65rem;

	padding: 0 0.15rem;

}



.nx-comm-widget__label {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 0.45rem;

	min-width: 0;

}



.nx-comm-widget__live-dot {

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: var(--nx-comm-cyan);

	box-shadow: 0 0 10px var(--nx-comm-cyan);

	animation: nxCommPulse 1.4s infinite;

	flex-shrink: 0;

}



.nx-comm-widget__title {

	margin: 0;

	font-size: clamp(0.95rem, 2.5vw, 1.1rem);

	font-weight: 700;

	color: #fff;

}



.nx-comm-widget__actions {

	display: flex;

	gap: 0.45rem;

	flex-shrink: 0;

}



.nx-comm-widget__cta {

	display: inline-flex;

	align-items: center;

	min-height: 36px;

	padding: 0.35rem 0.85rem;

	border-radius: 999px;

	border: 1px solid rgba(255, 255, 255, 0.08);

	background: rgba(20, 20, 28, 0.5);

	color: inherit;

	text-decoration: none;

	font-size: 0.75rem;

	font-weight: 600;

	backdrop-filter: blur(12px);

	transition: border-color 0.2s, box-shadow 0.2s;

}



.nx-comm-widget__cta:hover {

	border-color: rgba(0, 240, 255, 0.25);

	box-shadow: 0 0 16px rgba(0, 240, 255, 0.08);

}



.nx-comm-widget__cta--gold {

	border-color: rgba(212, 175, 55, 0.35);

	color: var(--nx-comm-gold);

}



.nx-comm-widget__marquee-wrap {

	position: relative;

	overflow: hidden;

	border-radius: 14px;

	border: 1px solid rgba(255, 255, 255, 0.05);

	background: rgba(20, 20, 28, 0.45);

	backdrop-filter: blur(16px);

	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

}



.nx-comm-widget__marquee {

	overflow: hidden;

	padding: 0.55rem 0;

}



.nx-comm-widget__track {

	display: flex;

	gap: 0.65rem;

	width: max-content;

	animation: nxCommMarquee 45s linear infinite;

	will-change: transform;

}



.nx-comm-widget__marquee-wrap:hover .nx-comm-widget__track {

	animation-play-state: paused;

}



@keyframes nxCommMarquee {

	from { transform: translateX(0); }

	to { transform: translateX(-50%); }

}



.nx-comm-widget-card {

	flex: 0 0 auto;

	width: min(280px, 72vw);

	padding: 0.65rem 0.85rem;

	border-radius: 12px;

	border: 1px solid rgba(255, 255, 255, 0.06);

	background: rgba(255, 255, 255, 0.03);

	text-decoration: none;

	color: inherit;

	display: grid;

	gap: 0.25rem;

	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;

}



.nx-comm-widget-card:hover {

	transform: translateY(-2px);

	border-color: rgba(0, 240, 255, 0.18);

	box-shadow: 0 8px 20px rgba(0, 240, 255, 0.06);

}



.nx-comm-widget-card__text {

	font-size: 0.82rem;

	line-height: 1.4;

	display: -webkit-box;

	-webkit-line-clamp: 2;

	-webkit-box-orient: vertical;

	overflow: hidden;

	overflow-wrap: break-word;

}



.nx-comm-widget-card__meta {

	font-size: 0.72rem;

	color: var(--nx-comm-muted);

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.nx-comm-widget__loading {

	display: flex;

	gap: 0.35rem;

	padding: 0.5rem 1rem;

}



.nx-comm-widget__loading span {

	width: 220px;

	height: 52px;

	border-radius: 12px;

	background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));

	background-size: 200% 100%;

	animation: nxCommShimmer 1.2s infinite;

}



.nx-comm-widget__empty {

	display: block;

	padding: 0.75rem 1rem;

	color: var(--nx-comm-muted);

	font-size: 0.82rem;

}



/* ── Global nav link (main site) ── */

.nx-comm-nav-link {

	display: inline-flex;

	align-items: center;

	gap: 0.35rem;

	min-height: 44px;

	padding: 0.35rem 0.65rem;

	border-radius: 10px;

	border: 1px solid var(--nx-comm-border);

	color: inherit;

	text-decoration: none;

	font-weight: 600;

	font-size: 0.82rem;

	max-width: 100%;

}



.nx-comm-nav-link.is-active {

	border-color: var(--nx-comm-cyan);

	color: var(--nx-comm-cyan);

}



.nx-comm-nav-link__dot {

	width: 7px;

	height: 7px;

	border-radius: 50%;

	background: var(--nx-comm-cyan);

	box-shadow: 0 0 6px var(--nx-comm-cyan);

}



.nx-comm-nav-link__live {

	font-size: 0.65rem;

	color: var(--nx-comm-cyan);

	letter-spacing: 0.08em;

	text-transform: uppercase;

}



.nx-main-mobile-nav .nx-comm-nav-link {

	flex: 1;

	flex-direction: column;

	justify-content: center;

	border: 0;

	border-radius: 0;

	background: transparent;

	font-size: 0.72rem;

	min-height: 48px;

}



.screen-reader-text {

	position: absolute;

	width: 1px;

	height: 1px;

	padding: 0;

	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;

}



@media (min-width: 768px) {

	.nx-comm-mobile-nav {

		display: none;

	}



	.nx-comm-main {

		padding-bottom: 2rem;

	}

}



@media (max-width: 767px) {

	.nx-comm-widget__bar {

		flex-direction: column;

		align-items: flex-start;

	}



	.nx-comm-card__stats button,

	.nx-comm-card__stats a {

		flex: 1 1 auto;

		justify-content: center;

		text-align: center;

	}

}



/* ── Ecosystem header (Pro/Tube parity) ── */
.nx-comm-app {
	--nx-border: var(--nx-comm-border);
	--nx-muted: var(--nx-comm-muted);
	--nx-text: #f5f5f7;
	--nx-accent: var(--nx-comm-gold);
	--nx-accent-soft: rgba(212, 175, 55, 0.14);
}

html.nx-comm-html,
body.nx-comm-body {
	overflow-x: hidden;
	max-width: 100vw;
}

.nx-comm-site-header.ns-pro-site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	border-bottom: 1px solid var(--nx-comm-border);
	background: rgba(6, 6, 8, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.nx-comm-site-header .ns-pro-site-header__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem clamp(0.75rem, 3vw, 1.25rem);
	min-width: 0;
}

.nx-comm-site-header .ns-pro-site-header__nav {
	display: none;
	flex: 1;
	justify-content: center;
	gap: 0.15rem;
	flex-wrap: wrap;
}

.nx-comm-site-header .ns-pro-site-header__link {
	padding: 0.45rem 0.65rem;
	border-radius: 999px;
	color: var(--nx-comm-muted);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
}

.nx-comm-site-header .ns-pro-site-header__link:hover,
.nx-comm-site-header .ns-pro-site-header__link.is-active {
	background: rgba(212, 175, 55, 0.14);
	color: var(--nx-comm-gold);
}

.nx-comm-site-header .ns-pro-site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}

.nx-comm-site-header .ns-pro-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--nx-comm-border);
	background: rgba(0, 0, 0, 0.35);
	color: var(--nx-text);
	cursor: pointer;
}

.nx-comm-site-header .ns-pro-site-header__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 38px;
	border: 1px solid var(--nx-comm-border);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
}

.nx-comm-site-header .ns-pro-site-header__burger span {
	display: block;
	width: 16px;
	height: 2px;
	margin: 0 auto;
	background: var(--nx-text);
}

.nx-comm-site-header .ns-pro-drawer[hidden] { display: none; }

.nx-comm-site-header .ns-pro-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.55);
}

.nx-comm-site-header .ns-pro-drawer__overlay[hidden] { display: none; }

.nx-comm-site-header .ns-pro-drawer__panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 95;
	width: min(88vw, 320px);
	height: 100dvh;
	padding: 1rem;
	background: rgba(6, 6, 8, 0.96);
	border-left: 1px solid var(--nx-comm-border);
}

.nx-comm-site-header .ns-pro-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.nx-comm-site-header .ns-pro-drawer__close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--nx-comm-border);
	border-radius: 10px;
	background: transparent;
	color: var(--nx-text);
	cursor: pointer;
}

.nx-comm-site-header .ns-pro-drawer__nav { display: grid; gap: 0.25rem; }

.nx-comm-site-header .ns-pro-drawer__link {
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: 12px;
	color: var(--nx-comm-muted);
	text-decoration: none;
	font-weight: 600;
}

.nx-comm-site-header .ns-pro-drawer__link.is-active,
.nx-comm-site-header .ns-pro-drawer__link:hover {
	background: rgba(212, 175, 55, 0.14);
	color: var(--nx-comm-gold);
}

body.nx-comm-drawer-open { overflow: hidden; }

@media (min-width: 900px) {
	.nx-comm-site-header .ns-pro-site-header__nav { display: flex; }
	.nx-comm-site-header .ns-pro-site-header__burger { display: none; }
}

/* ── Premium cards v2 ── */
.nx-comm-card {
	padding: 1.1rem 1.15rem;
}

.nx-comm-profile-link {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.nx-comm-profile-link:hover,
.nx-comm-profile-link:focus-visible {
	color: var(--nx-comm-cyan);
	text-decoration: none;
	text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.nx-comm-profile-link--avatar {
	display: block;
	border-radius: 50%;
	overflow: hidden;
}

.nx-comm-card__avatar-static {
	display: block;
}

.nx-comm-react {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nx-comm-react__icon {
	display: inline-flex;
	line-height: 0;
}

.nx-comm-react.is-active {
	color: var(--nx-comm-purple);
}

.nx-comm-react.is-burst {
	animation: nxCommReactBurst 0.42s ease;
}

.nx-comm-card.is-react-locked .nx-comm-react {
	pointer-events: none;
	opacity: 0.72;
}

@keyframes nxCommReactBurst {
	0% { transform: scale(1); }
	40% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

.nx-comm-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.nx-comm-stat__icon {
	display: inline-flex;
	line-height: 0;
	opacity: 0.85;
}

.nx-comm-save.is-active {
	border-color: var(--nx-comm-cyan);
	color: var(--nx-comm-cyan);
}

/* ── Comments thread ── */
.nx-comm-comments {
	padding: 1rem 1.1rem;
}

.nx-comm-comments__list {
	display: grid;
	gap: 0.65rem;
	margin-top: 0.85rem;
}

.nx-comm-comment {
	padding: 0.65rem 0.75rem;
	border-left: 2px solid rgba(255, 255, 255, 0.05);
	margin-left: calc(var(--nx-comm-depth, 0) * 0.75rem);
	font-size: 0.86rem;
	line-height: 1.5;
	border-radius: 0 12px 12px 0;
	background: rgba(0, 0, 0, 0.18);
}

.nx-comm-comment.is-pending {
	opacity: 0.7;
}

.nx-comm-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin-bottom: 0.35rem;
}

.nx-comm-comment__author {
	font-size: 0.82rem;
}

.nx-comm-comment__head time {
	font-size: 0.72rem;
	color: var(--nx-comm-muted);
}

.nx-comm-comment__text {
	margin: 0;
	word-break: break-word;
}

.nx-comm-comments form textarea {
	width: 100%;
	border: 1px solid var(--nx-comm-border);
	background: rgba(0, 0, 0, 0.28);
	color: inherit;
	border-radius: 12px;
	padding: 0.65rem 0.75rem;
	font: inherit;
	resize: vertical;
	min-height: 72px;
}

.nx-comm-comments form.is-submitting {
	opacity: 0.75;
	pointer-events: none;
}