main.notifications-page {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);

	.notifications-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
	}

	.notifications-title {
		margin: 0;
		font-size: var(--font-size-lg);
	}

	.notifications-header form {
		margin: 0;
		margin-left: auto;
	}

	.notifications-empty {
		margin: 0;
		color: var(--color-text-muted);
	}

	.notification-item {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-sm);
		border-top: 1px solid var(--color-border);
		background: var(--color-surface);
	}

	.notification-meta {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-sm);
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.notification-meta span {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.notification-meta form {
		margin: 0;
		flex: 0 0 auto;
	}

	.notification-link {
		color: var(--color-link);
		text-decoration: none;
		font-size: var(--font-size-sm);
	}

	.notification-link:hover {
		color: var(--color-link-hover);
		text-decoration: underline;
	}

	.notification-preview {
		margin: 0;
		font-size: var(--font-size-sm);
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notification-row-action {
		font-family: var(--font-family-primary);
		font-weight: 500;
		background: transparent;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		color: var(--color-text-muted);
		padding: 0.15rem 0.5rem;
		font-size: var(--font-size-xs);
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	.notification-row-action:hover {
		background: var(--color-bg-alt);
		color: var(--color-text);
	}

	.notification-top-action {
		padding: var(--space-xs) var(--space-md);
		font-size: var(--font-size-sm);
		white-space: nowrap;
	}
}