/**
 * 4. Original Nocturne components.
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--space-2) calc(var(--space-3) * 1.2);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: var(--font-heading-weight);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.btn-primary {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.btn-primary:hover {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent-300);
}

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: calc(var(--radius-md) * 0.75);
	font-size: 11px;
	letter-spacing: 0.02em;
}

.tag-accent {
	border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
	background: color-mix(in srgb, var(--color-accent) 16%, transparent);
	color: var(--color-accent-300);
}

.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent-300);
	animation: petals-pulse 1.6s infinite;
}

@keyframes petals-pulse {
	50% { opacity: 0.3; }
}

.search-form {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.search-form .ph {
	color: var(--color-neutral-500);
}

.search-form input {
	min-width: 0;
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 14px;
}

.search-form input::placeholder { color: var(--color-neutral-500); }

.profile-dot {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid var(--color-divider);
	border-radius: 50%;
	background: var(--color-surface);
}

.icon-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-neutral-500);
	font-size: 17px;
	cursor: pointer;
}

.icon-button[aria-pressed="true"] { color: var(--color-accent-300); }

.author {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--color-text);
}

.author__avatar {
	position: relative;
	display: flex;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-divider);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-neutral-300);
	font-size: 12px;
}

.author__online {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--color-bg);
	border-radius: 50%;
	background: #7fae7a;
}

.author strong,
.author small { display: block; }
.author strong { font-size: 14px; font-weight: 600; }
.author strong em { margin-left: 6px; color: #7fae7a; font-size: 10.5px; font-style: normal; }
.author small { color: var(--color-neutral-500); font-size: 11.5px; }

.media-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 36%),
		linear-gradient(145deg, #303348, #1d1f2e);
	color: var(--color-neutral-600);
	font-size: 48px;
	font-weight: 500;
}

.empty-state {
	align-items: center;
	padding: 36px 20px;
	text-align: center;
}

.empty-state > .ph { color: var(--color-neutral-500); font-size: 24px; }
.empty-state h2 { margin-top: 10px; font-size: 16px; font-weight: 600; }
.empty-state p { color: var(--color-neutral-400); font-size: 13px; }

.navigation.pagination { margin-top: 24px; }
.nav-links { display: flex; justify-content: center; gap: 8px; }
.page-numbers { padding: 7px 11px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.page-numbers.current { border-color: var(--color-accent); color: var(--color-accent); }